Cours de performance web

Leçon 1 • Comment les Navigateurs Traitent les Pages Web

Couvre l'ensemble du pipeline du navigateur, de la résolution DNS à l'affichage. Ancre tout le travail d'optimisation ultérieur dans une compréhension concrète de ce que fait le navigateur.

Leçon 2 • Le Concept de Budget de Performance

Introduit les budgets comme contraintes sur le poids de la page, le timing et les requêtes. Relie la définition des budgets aux objectifs commerciaux et aux cibles d'expérience utilisateur.

Leçon 3 • Comprendre le Chemin de Rendu Critique

Explique quelles ressources bloquent le rendu et pourquoi. Bâtit la base pour les techniques de priorisation des ressources couvertes dans les chapitres suivants.

Leçon 1 • Données de Laboratoire vs. Données de Terrain

Distingue les tests synthétiques de la surveillance par utilisateur réel (RUM). Établit les attentes quant au moment où chaque type de données est approprié pour la prise de décision.

Leçon 2 • Outils d'Audit Automatisés

Couvre Lighthouse, WebPageTest et les plateformes d'audit similaires. Permet une notation automatisée et reproductible de la performance et la détection des régressions.

Leçon 3 • Mise en Place de la Surveillance par Utilisateur Réel

Guide la mise en œuvre du RUM à l'aide de l'API Performance Observer. Relie la collecte de données sur le terrain aux métriques définies au chapitre 1.

Leçon 4 • Interprétation des Profils et Traces

Enseigne l'analyse systématique des traces enregistrées pour trouver les longues tâches et les thrash de mise en page. Fait le pont entre les données brutes et les décisions d'optimisation exploitables.

Leçon 1 • Indices de Ressource et Préchargement

Enseigne les directives dns-prefetch, preconnect, preload et prefetch. Réduit la latence perçue en initiant les récupérations avant que le navigateur ne les découvre.

Leçon 2 • Protocoles HTTP/2 et HTTP/3

Explique le multiplexage, la compression des en-têtes et le transport QUIC. Aide les étudiants à configurer les serveurs pour exploiter les avantages des protocoles modernes.

Leçon 3 • Stratégies de Compression et d'Encodage

Couvre Gzip, Brotli et la négociation d'encodage de contenu. Réduit directement le nombre d'octets transférés pour les actifs textuels.

Leçon 4 • Réseaux de Diffusion de Contenu (CDN)

Couvre l'architecture CDN, la mise en cache en périphérie et le déchargement de l'origine. Réduit la latence géographique pour les publics mondiaux.

Leçon 1 • Optimisation des Vidéos et Animations

Aborde l'encodage vidéo, les politiques de lecture automatique et le remplacement des GIF par des vidéos. Réduit la charge utile média pour le contenu animé.

Leçon 2 • Chargement Paresseux et Décodage

Couvre le chargement paresseux natif, Intersection Observer et le décodage asynchrone. Reporte le coût des images hors écran pour améliorer le chargement initial de la page.

Leçon 3 • Compression et Réglage de la Qualité

Couvre les outils de compression avec et sans perte et les paramètres de qualité. Équilibre la réduction de la taille des fichiers avec une dégradation visuelle acceptable.

Leçon 4 • Formats d'Image Modernes

Compare WebP, AVIF et les formats hérités sur la qualité et la taille des fichiers. Équipe les étudiants pour choisir le bon format pour chaque cas d'utilisation.

Leçon 1 • Bundling, Minification et Tree Shaking

Explique comment les bundlers réduisent la taille du code via la minification et l'élimination du code mort. Réduit directement le coût d'analyse et de transfert.

Leçon 2 • Web Workers pour le Traitement Hors Thread

Introduit les Web Workers et l'algorithme de clonage structuré. Déplace le travail intensif en CPU hors du thread principal pour améliorer l'INP.

Leçon 3 • Stratégies de Chargement JavaScript

Couvre les attributs de chargement async, defer et module. Empêche les scripts de bloquer l'analyse HTML et de retarder le premier rendu.

Leçon 4 • Gestion des Scripts Tiers

Audite l'impact des scripts tiers sur le coût du thread principal et les requêtes réseau. Fournit des stratégies pour charger ou reporter les scripts externes en toute sécurité.

Leçon 1 • Composition GPU et Gestion des Couches

Explique comment le navigateur promeut les éléments en couches de composition. Enseigne quand promouvoir les couches et comment éviter l'explosion des couches.

Leçon 2 • Animations et Transitions CSS

Compare les animations CSS, les transitions et l'animation pilotée par JS sur la performance. Guide la sélection de l'approche d'animation la plus efficace.

Leçon 3 • Efficacité des Sélecteurs et Spécificité

Explique comment la complexité des sélecteurs affecte le coût de recalcul des styles. Guide les étudiants vers l'écriture de sélecteurs que le navigateur résout rapidement.

Leçon 4 • Livraison CSS et CSS Critique

Couvre l'incorporation des styles critiques et le report du CSS non critique. Élimine les feuilles de style bloquant le rendu pour accélérer la première peinture.

Leçon 1 • Sous-ensemble de Polices et Plages Unicode

Couvre les outils de sous-ensemble et le descripteur unicode-range. Réduit la taille du fichier de police en incluant uniquement les caractères qu'une page utilise réellement.

Leçon 2 • Fondamentaux du Chargement des Polices Web

Explique les stratégies FOIT, FOUT et font-display. Adresse directement les régressions CLS et LCP causées par les polices chargées tardivement.

Leçon 3 • Polices Variables pour la Performance

Explique les axes des polices variables et comment un seul fichier remplace plusieurs graisses. Réduit les requêtes HTTP et la charge utile totale des polices pour une typographie riche.

Leçon 1 • Core Web Vitals et Classement dans les Recherches

Explique comment les Core Web Vitals influencent les signaux de classement dans les recherches. Relie l'investissement dans la performance à des résultats mesurables de trafic organique.

Leçon 2 • Prévention de la Régression de Performance

Établit des garde-fous CI/CD, une application des budgets et des alertes pour les régressions de performance. Garantit que les optimisations persistent tout au long du développement continu.

Leçon 3 • Informatique en Périphérie et Personnalisation

Couvre les fonctions périphériques, les tests A/B en périphérie et la mise en cache personnalisée. Réduit les allers-retours vers l'origine pour le contenu dynamique spécifique à l'utilisateur.

Leçon 4 • Performance pour les Applications Mono-page (SPA)

Aborde la division du code basée sur les routes, le préchargement et les transitions de navigation dans les SPA. Étend les techniques de base aux architectures de routage côté client.