- Pourquoi être performant ?
- Combien coûte une seconde de retard ?
- L’influence sur le référencement
- Les challenges : ce que veulent les utilisateurs et les besoins des sites
- Paramétrer ses tests
- Limites de L’HyperText Transfer Protocol (HTTP)Les débits et latences moyennes en France, dans le monde, sur mobiles ou ailleurs
- Les équipements des utilisateurs
- Outils de simulation
- Comment mesurer la performance
- Introduction à WebPagetest : programmer des tests et repérer les métriques importantes
- Les métriques techniques : time to first byte, document ready, onload. Signification et conséquences sur le code
- Les métriques UX : Start Render, First Contenful Paint, First Meaningful Paint, Speed Index … Comment les interpréter ?
- Les métriques idéales à mesurer soi-même
- Diagnostiquer un problème de contention CPU : Time To Interactive, mesures CPU
- Quels objectifs de performance se donner ?
- Maîtriser le cache client
- Théorie : cache classique, invalidation standard, worker, pré-chargement, 302, immutable …
- Le vrai problème du cache : l’invalidation
- Stratégies et outils de mise en pratique et de vérification
- Comprendre HTTP et les navigateurs
- Le TCP, la latence et ses conséquences sur un site classique
- HTTP 1.1 : keep-alive, pipelining ou parallélisation, la limite des 14Ko
- Optimisations HTTPS
- HTTP/2 : théorie et démo
- HTTP/2 rend-il obsolète les techniques classiques de Webperf ?
- Le futur : QUIC, cache-digest, code 103 …
- Optimiser le chemin critique
- La base : grouper, minifier et compresser CSS et JS
- Stratégies de chargement des CSS / JS : 1 ou plusieurs fichiers
- Technique du critical CSS : outils et limites
- Compression gzip et brotli
- Stratégie pour contrer un temps de calcul serveur long
- Faire attention aux redirections
- Pré-chargement de ressources : techniques et cas d’utilisation (dns-prefetch, preconnect, prefetch, preload, prerender, en HTML ou en header HTTP)
- Les polices
- Le comportement des navigateurs : texte invisible (FOIT), texte non-stylé (FOUT) ou
page blanche ?
- Rappel sur les bases pour un bon dialogue intégrateurs / graphistes
- Les variantes (et leurs limites) de chargement de fonts : API JS FontFace, propriété
CSS font-display, les loaders JS, encodage inline et mix de ces techniques
- Les astuces src:local, police système, variantes “faux-text”
- Optimiser le fichier de police (Woff2, compression, choix des caractères …)
- Les images
- Comment se passer d’images ?
- Sprites ou inline ?
- Le chargement à la demande ou lazy-loading
- SVG et font iconiques : techniques et limites
- Connaître les formats classiques GIF, PNG et JPEG ainsi que les nouveaux formats (WebP, JPG XT, JPG XR, JPG 2000 …)
- Optimiser automatiquement un GIF animé, des JPG et des PNG
- Les images responsive : comprendre le standard srcset, sizes et picture,connaître les alternatives
|
- Le danger des services tiers
- La théorie du Single Point Of Failure, appliqué aux pages Web
- Détecter un SPOF : outil navigateur, avec WebPagetest ou en intégration continue
- Les solutions : comment inclure les fichiers tiers ? Quand exécuter son propre code ?
- Détecter qu’un tiers fait ramer l’interface
- Charger JavaScript
- la classique balise script en haut de page qui présente bien des avantages
- les scripts de bas de page
- le JS asynchrone ou à la demande
- les attributs async et/ou defer
- le JS inline
- script type=module et import()
- Optimiser un bundle :
- Le tree-shaking, c’est pas automatique
- Un bundle ou plusieurs ?
- Garder une interface fluide
- Le DOM : son importance, les bonnes pratiques d’intégration et de jQuery.
- Comment marche un navigateur : layout, paint et composite.
- Exemple pratique avec l’optimisation d’un slideshow animé
- Les animations CSS et les librairies d’animation JS
- JavaScript : les outils de profilage
- Prise en main de l’outil Chrome dev tools.
- Les pièges classiques : gif animés, hover, scroll, shadows …
- Gérer des calculs lourds ou de grosses manipulations du DOM : API Web Workers, requestAnimationFrame, requestIdleCallback et … setTimeout
- Surveiller ses performances
- Ce que valent les checklist : Opquast, ySlow, PageSpeed Insights, WebPagetest,SiteSpeed.io, Lighthouse…
- Démo de plugins navigateur
- Mettre en place un vrai monitoring en interne : process et outils (OpenSpeedMonitor,WPT Monitor, SiteSpeed.io, grafana …).
- Les API JavaScript pour récupérer les informations de performance chez l’utilisateur.
- Mesures d’évènements délicats (texte visible, SPA prête …)
- Monitoring de scénarios complexes
- navigation multi-pages
- passer un formulaire
- tester avec et sans code tiers
- valider la résistance aux serveurs tiers lents ou morts
- tester les sites en responsive
- Un site qui marche sans connexion
- Stocker dans le navigateur : IndexedDB, DOM Storage, cookies.
- Détecter et s’outiller pour l’offline
- Service Workers : API, démo et limites
- L’offline qui marche partout : HTML5 Application Cache
- La perception de l’utilisateur
- UX : psychologie et ordres de grandeur (secondes, fps, relatives)
- Le design de l’attente, avec des exemples concrets d’interfaces
|
