Formation Performances web

Accélérez les temps de chargement de vos pages et de vos ressources dans le but de favoriser votre référencement et… votre chiffre d'affaire.

Public

Responsables de sites et chefs de projets web souhaitant améliorer les temps de chargement des pages et des ressources dans le but d'accroître la visibilité, l'expérience utilisateur et de favoriser le référencement.

Objectifs

Comprendre les enjeux de la performance web, pouvoir effectuer des tests et diagnostics fiables, accélérer le chargement des ressources à la fois du côté serveur et du côté client.

Prérequis

Avoir de bonnes bases en langages HTML, CSS et JavaScript. Avoir des connaissances minimales en réseau et en administration de serveur web.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur.

Performance et business

  • Seulement un problème technique ?
  • La relation temps d'affichage / chiffre d'affaire
  • Référencement : la vision de Google
  • Ergonomie : la performance perçue par l'utilisateur
  • Le futur : la 4G, la fibre et les besoins des sites

Les métriques, les outils

  • Pourquoi le temps de chargement total ne suffit pas
  • Comprendre Time To First Byte, Time To Render, Time to Interaction, $.ready()
  • Outils de diagnostic et de monitoring gratuits
  • TP : Diagnostiquer avec WebPageTest, programmer des tests

Backend ou Frontend : où passe le temps ?

  • Les checklists YSlow, PageSpeed et Opquast
  • Faire du profiling côté client, sur tous les navigateurs
  • Détecter le danger des widgets tiers (Facebook, Google+, Twitter …)
  • Que voient vos utilisateurs avec le Real User Monitoring
  • Utiliser Google Analytics, Boomerang JS, la Navigation API
  • Outils commerciaux

Sentir et comprendre les limites de HTTP

  • Les problèmes de HTTP 1.1 et TCP
  • Débit et latence : quelle influence ?
  • Changer de protocole ? HTTP/2 et SPDY

Comment marche un navigateur ?

  • Quels navigateurs tester ?
  • Parallélisation, pipelining, Keep-Alive

TP : Keep-Alive et gzip dans Apache, conséquences

  • Le piège de la technique du domain-sharding
  • Outils de R&D : Browserscope et Cuzillion

Le chemin critique, les ressources bloquantes

  • CSS et JavaScript : que faire ?
  • TP : les actions sur les fichiers CSS et JavaScript
  • TP : action de base sur les polices

Maîtriser le cache

  • TP : activation du cache
  • Les problèmes communs ou le syndrome du "Vide ton cache"
  • Invalidation standard (eTag et autre)
  • Maîtriser le cache des utilisateurs
  • TP : Implémentation d'un système efficace de cache

Le cache client ultime : HTML5 offline

  • Principe
  • API
  • Limites

Les solutions de cache serveur

  • TP : La technique du flush serveur
  • La stratégie de la page semi dynamique.
  • Comment tricher avec les délais longs côté serveur
  • L'exemple de Facebook

Les 5 façons de charger JavaScript, démos à l'appui

  • Chargement en haut de page
  • Chargement en milieu de page
  • Chargement en bas de page
  • Les attributs natifs async et defer
  • Le chargement asynchrone, ses librairies
  • Les stratégies de chargement

TP : Chargement JS par modules

  • Autres méthodes de chargement (XHR, LocalStorage, lazy-evaluate…)
  • Le problème des publicités

Surveiller les performances

  • Exemple d'installation de WebPageTest Monitor
  • TP: programmer des tests
  • Les compléments en open-source : Graphite et compagnie
  • La connexion type des utilisateurs ?
  • TP : scénarios complexes de navigation

Les images

  • Utilisation de CSS3 et des caractères unicode
  • Embarquer le contenu d'une image en CSS ou HTML
  • La technique du spriting
  • Le chargement Just In Time
  • La compression (manuelle et automatique)
  • TP : se passer d'images sur mobile. Tester les outils de compression.

Le code des tiers

  • Comprendre l'impact bloquant de Google+, Facebook, Twitter
  • Le problème des publicités, trackers et widget
  • La solution : l'asynchrone
  • TP: inclure sans risque du code tiers
  • L'outil : SPOF-O-MATIC

Interfaces fluides, ce qui ralentit une page

  • Outils pour surveiller, symptômes à observer
  • Expérimentation avec des vieux navigateurs ou des modernes
  • Manipulation off-DOM
  • setTimeout(0), le sauveur méconnu
  • Délégation d'événements
  • Les outils de profiling côté client

Les techniques modernes avec HTML5

  • WebSockets et Server-Sent Events
  • localStorage
  • Les WebWorkers
  • Prefetch, prerender, next

Les petites choses qui font mal

  • CSS @import
  • Les filtres CSS
  • Les dimensions des images
  • La favicon
  • Les erreurs 404
  • Les redirections
  • Expressions CSS
  • Le charset
  • Les scripts .htc

Solutions avancées

  • Faut-il se payer un CDN ?
  • Domain sharding : pour quelles situations ?
  • Stratégies de chargement du contenu
  • Organiser son CSS en modules ?
  • L'influence des iframes
  • Construire un cache agressif sur mobile

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

Avant cette formation, préparez-vous avec :

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

Tout d'abord, la formation est donnée par un professionnel très compétent, à l'écoute et très sympathique. La formation s'est déroulée dans des conditions optimales (nous étions seulement 3 personnes formées). Elle est très bien construite, avec démonstration au fur et à mesure de l'efficacité des solutions proposées. C'est donc très visuel et concret, tout en restant très utilisable dans l'application. Elle apporte aussi un lot d'outils très très utiles, et pas forcément très connus. Au final, on ressort d'ici en ayant la conviction que les 2 jours de formations (qui pourraient même s'étaler sur 3) vont nous être vraiment très très utiles dans notre parcours professionnel.

Validez vos connaissances avec la certification HTML / CSS Alsacréations

La Certification “HTML/CSS” Alsacréations est une validation de vos acquis d'intégrateur ou développeur front-end. Elle est un gage de compétences, vous permet de vous auto-évaluer et peut être mise en avant sur votre CV : votre score reflète des compétences professionnelles spécifiques que les employeurs apprécient.

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France