Objectifs
- Comprendre les enjeux de la Performances des sites Web
- Savoir effectuer des tests et des diagnostics des pages
- Accélérer le chargement des pages
- Fluidifier l'expérience utilisateur
- Mettre en place une politique de surveillance des performances
Programme
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
Le futur
- La 4G et la fibre
- 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
- 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 techniques modernes avec HTML5
- WebSocket et Server Sent Event
- localStorage
- Les WebWorkers
- Prefetch, prerender, next
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