Qualiopi
Optimisez la Vitesse et l'Expérience Utilisateur (Core Web Vitals)
Mesurez et optimisez les Core Web Vitals, accélérez le rendu CSS/JS et l'image delivery pour un SEO et une UX de classe mondiale.
3 jours
2 100 € HT
Lighthouse
Web Vitals
Chrome DevTools
WebP/AVIF
Service Workers
CDN
PurgeCSS
Vite
Intéressé par cette formation ?
Contactez-nous pour planifier une session.
Objectifs pédagogiques
- Identifier et corriger les problèmes de performance grâce aux outils de profilage.
- Optimiser le chemin critique du rendu pour un affichage quasi instantané.
- Maîtriser les Core Web Vitals pour booster le SEO et le taux de conversion.
- Configurer une stratégie de cache et de livraison de contenu (CDN) efficace.
- Réduire l'empreinte carbone d'un site via l'éco-conception technique (performance = sobriété).
Programme
Jour 1 : Mesurer et Comprendre le Rendu
- Le Critical Rendering Path (CRP) : Comprendre comment le navigateur transforme le HTML/CSS/JS en pixels (DOM, CSSOM, Layout, Paint).
- Core Web Vitals : Analyse profonde du LCP (chargement), INP (interactivité) et CLS (stabilité visuelle).
- Outils de diagnostic : Maîtrise de Lighthouse, PageSpeed Insights et de l'onglet "Performance" des DevTools.
- Atelier : Audit complet d'un site existant et identification des goulots d'étranglement.
Jour 2 : Optimisation des Ressources et Network
- Images et Vidéos : Formats modernes (WebP, Avif), responsive images (srcset), et lazy-loading natif.
- Optimisation des Assets : Minification, compression (Brotli/Gzip) et stratégies de mise en cache (Cache-Control, Service Workers).
- Livraison (Delivery) : L'impact du HTTP/2 & HTTP/3, et l'utilisation stratégique des CDN.
- Atelier : Mise en place d'un pipeline d'optimisation d'images et configuration de headers de cache optimaux.
Jour 3 : Performance Runtime et JavaScript avancé
- Optimisation JS : Code-splitting, Tree-shaking et réduction du coût d'exécution du JavaScript (TBT - Total Blocking Time).
- CSS Performance : Éviter les re-paints coûteux, optimisation des polices (Font-display) et CSS critique "Above the fold".
- Performance en Single Page Application (SPA) : Stratégies spécifiques à React/Next.js (Hydratation, SSR, ISR).
- Atelier Final : "Race to the top" : refactoring d'une application lente pour atteindre un score de 100/100 sur Lighthouse.
Prérequis
- Bonne connaissance de HTML/CSS et JavaScript.
- Compréhension de base du fonctionnement d'un serveur web.
Public cible
- Développeurs Front-End Senior souhaitant devenir experts.
- Architectes Web et Tech Leads responsables de la qualité produit.
- Responsables SEO désirant comprendre l'impact technique sur le ranking.
Prochaines sessions
Aucune session planifiée.
Contactez-nous pour organiser une session.
Contactez-nous pour organiser une session.
Prêt à vous former ?
Contactez-nous pour obtenir un devis personnalisé.