Cette formation Performance Web vous permettra d’améliorer les performances de vos sites WEB en vous détaillant toutes les phases du cycle de vie d’une page WEB.
De son chargement à son affichage en passant par son interprétation toutes les technologies sont passées au crible (HTTP, navigateur, CSS, JavaScript, DOM, HTML5, cache, cookies, compression,…).
Vous disposez ainsi des leviers pour ajuster les paramètres et améliorer les temps de réponse dans des proportions parfois étonnantes.
La progression pédagogique s’appuie naturellement sur l’ordre réel dans lequel les technologies sont sollicitées et cela rend la formation très fluide et surtout concrète (plus on avance plus les performances s’améliorent sur les sites étudiés).
Concrètement vous serez capable de :
- Comprendre les enjeux de la Performances des sites Web
- Savoir effectuer des tests et des diagnostics des pages
- Être capable d’accélérer le chargement des pages pages
- Fluidifier l’expérience utilisateur
- Savoir mettre en place une politique de surveillance des performances
Introduction
Performances 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
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
- Clone des sites du client en local
- 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 ? HTTP2 et SPDY
Comment marche un navigateur ?
- Quels OS / navigateurs tester ?
- Parallélisation, pipelining, Keep-Alive
TP configuration de serveur :
- Keep-Alive
- gzip
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
- 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
Savoir charger JavaScript
- 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
- outil 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 petites choses qui font mal
- CSS @import
- les filtres CSS
- les dimensions des images
- favicon
- les 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