Performances Web Backmarket 17-20 mai 2021

Programme

Pourquoi être performant ?

  • Les raisons humaines : UX, accessibilité et écologie.

  • Combien vous coûte une seconde de retard ?

  • La vérité sur le lien avec le SEO.

  • Les challenges : les besoins des sites VS les attentes des utilisateurs

Comment mesurer la performance

  • Introduction à WebPagetest : programmer des tests, repérer les métriques importantes.

  • Les métriques techniques : time to first byte, DOMContentLoaded, onload. Signification et conséquences sur le code.

  • Les métriques UX : Start Render, First Contentful Paint, First Meaningful Paint, Speed Index, Largest Contentful Paint, Last Painted Hero, Cumulative Layout Shift… Lesquelles sont utiles pour votre site ?

  • Diagnostiquer un problème de contention CPU : Time To Interactive, Total Blocking Time, First Input Delay.

  • Les métriques idéales à définir soi-même.

  • Quels objectifs de performance se donner ?

Paramétrer ses tests

Chiffres et outils pour essayer de se mettre à la place de ses utilisateurs.

  • Les débits et latences moyennes en France, dans le monde, sur mobiles ou ailleurs.

  • L’équipement mobile des utilisateurs et ses conséquences sur nos bases de code frontend.

  • Outils de tests et de simulation.

Maîtriser le cache client

Pour ne pas faire attendre vos utilisateurs la seconde fois.

  • 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

Une petite base théorique pour comprendre toute la série d’optimisations qui en découlera.

  • 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.

  • La fausse bonne idée : le domain-sharding

  • Optimisations HTTPS

  • HTTP/2 : théorie VS pratique.

  • Les avancées de HTTP/2 PUSH et Priorities

  • Le futur : HTTP/3…

Optimiser le chemin critique

Les techniques de base que plus aucun site ne peut ignorer.

  • La base : grouper, minifier et compresser CSS et JS.

  • Groupement des fichiers critiques : stratégies pour HTTP 1 et HTTP/2

  • Technique du critical CSS : outils et limites.

  • JavaScript asynchrone et amélioration progressive

  • Stratégie pour contrer un temps de calcul serveur long.

  • Compression gzip et brotli.

  • Pré-chargement de ressources : techniques et cas d’utilisation (dns-prefetch, preconnect, prefetch, preload, prerender, en HTML ou en header HTTP).

Les polices

Les polices sont belles mais rebelles. Comment les utiliser sans gêner l’utilisateur ?

  • 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 polices : 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-texte”,

  • Les polices iconiques, les polices variables

  • Optimiser le fichier de police (Woff2, compression, choix des caractères…)

Les images

Aussi vitales que lourdes, il y a plein de techniques à connaître pour les optimiser :

  • Comment se passer d’images ?

  • Sprites ou inline ?

  • Le chargement à la demande ou lazy-loading.

  • Dangers et opportunités de l’humble attribut src

  • SVG et polices 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 responsives : comprendre le standard srcset, sizes et picture.

  • Quelle stratégie d’image responsive ?

  • Optimisations et hacks sur les images

  • Servir des vidéos optimisées

Le danger des services tiers

Pub, tracking et autres services fournis par des tiers présentent des risques parfois critiques de performance.

  • La théorie du Single Point Of Failure, appliquée 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

Il y a au moins 6 manières de charger un fichier JS, voici de quoi choisir la bonne pour votre cas :

  • la classique balise script en haut de page qui présente bien des avantages,

  • les scripts inline, en milieu de page, ou en bas de page ?

  • le JS asynchrone ou à la demande,

  • les attributs async et/ou defer,

  • script type=module et import().

  • Choisir une stratégie

Optimiser un bundle

  • Le tree-shaking, c’est pas automatique

  • Réduire le poids d’un bundle : méthode, outils et plugins Babel ou Webpack

  • Diviser pour mieux régner : bundle splitting

Garder une interface fluide

Une fois chargée l’interface doit être utilisable sans accroche : voyons les outils et techniques.

  • Comment marche un navigateur : layout, paint et composite.

  • Animer en restant fluide, cas pratique

  • Prise en main de l’outil Chrome Dev Tools

  • La relation compliquée Machine JS / DOM

  • Gérer des calculs lourds ou de grosses manipulations du DOM : API Web Workers, requestAnimationFrame, requestIdleCallback et… setTimeout

  • Respecter le DOM : patterns et anti-patterns

  • Les pièges classiques : gif animés, survol, défilement, ombres, parsing de JSON…

Surveiller ses performances

Pour que l’utilisateur ne soit pas le seul à savoir que le site rame, parlons des outils libres qui vous permettront de détecter les problèmes.

  • Ce que valent les checklists : PageSpeed Insights, WebPagetest, SiteSpeed.io, Lighthouse…

  • 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…)

  • Exploiter les données du Crux de Google

Monitoring de scénarios complexes

Utilisation du scripting disponible dans WebPagetest pour dépasser le cas basique d’affichage d’une page unique :

  • 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

La plus rapide des requêtes étant celle qu’on ne fait pas, voyons comment gérer le hors-ligne et les techniques de cache avancées

  • Stocker dans le navigateur : IndexedDB, DOM Storage, cookies.

  • Service Workers : API, démo et limites.

La perception de l’utilisateur

Si on fait de la performance, c’est pour améliorer l’expérience utilisateur. Comment la performance est-elle perçue ?

  • UX : psychologie et ordres de grandeur (secondes, fps, relatives)

  • Le design de l’attente, avec des exemples concrets d’interfaces