Performances Web

C’est la seule formation française sur le sujet. Mise à jour depuis 2012 par un expert reconnu du sujet, elle est agrémentée de retours d’expérience sur des sites réels de clients. Que leurs sites soient en HTTP/2, sur mobile, quelle que soit la techno serveur, les apprenant·e·s repartent avec plein d’idées d’optimisations, une capacité nouvelle de diagnostic et une méthodologie pour tester des suppositions.

Qu’une technique soit dépréciée, à la mode ou futuriste, chacune apporte son lot de questions, parfois de problèmes et nous parlerons de la pertinence et de la compatibilité de chacune d’elles. En-dehors des techniques et des bonnes pratiques, nous verrons également comment maintenir la performance dans le temps : quels processus, quels outils et quels réflexes adopter.

Enfin pour donner du contexte à ce que l’on fait, nous verrons les raisons qui nous poussent à faire des pages performantes : retour sur investissement, la théorie de l’expérience utilisateur, et des données sur les équipements des utilisateurs.

Objectifs

La formation Performances Web vise à permettre aux apprenant·e·s de :

  • Comprendre les intérêts objectifs de la performance

  • Savoir mesurer la performance et la tester dans divers scénarios

  • Optimiser finement la vitesse de chargement des pages et de leurs ressources et leur mise en cache, initiale comme incrémentale

  • Accélérer l’affichage des contenus, en privilégiant ceux immédiatement utiles

  • Améliorer la vitesse de traitement des ressources après chargement (images, polices, JavaScript, etc.)

  • Rendre leurs pages résistantes à des lenteurs de services tiers

  • Optimiser la réactivité et la fluidité des pages une fois chargées

  • Maintenir un niveau élevé de performances au fil du temps grâce à des stratégies de supervision intelligentes

Public visé

La formation Performances Web est destinée aux intégrateur·rice·s, aux développeur·se·s frontend et aux chefs de projet désireux de tout savoir les techniques et les process d’accélérations de pages.

Des connaissances basiques d'écriture du code HTML / CSS / JavaScript sont suffisantes pour 80% du contenu.

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

Moyens pédagogiques et techniques, suivi et appréciation

Les apprenant·e·s reçoivent, en début de session, l’ensemble des diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi du plan de cours.

Après la session, ils reçoivent par ailleurs, avec un e-mail de debrief très fourni et riche en ressources, une archive de référence, contenant les codebases finalisées, entièrement documentées et testées, les slides de toute la formation et diverses ressources complémentaires.

Demander une convention de formation Prochaines sessions de formation

Tarifs indicatifs

Apprenant·e·s de la conventionTarif unitaire
1 à 2 personnes1 500 € HT
3 à 5 personnes1 350 € HT
À partir de 6 personnes1 200 € HT

Vous souhaitez une formation intra entreprise ou sur mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux ou dans nos locaux.

Demander ma formation intra / sur mesure