Historique des conversations
Chargement...
Chapitre 14 : Web Vitals
1. Pourquoi la performance est vitale ?
Une PWA doit être instantanée. Google utilise les Core Web Vitals pour mesurer la qualité de l'expérience utilisateur.
2. Les 3 métriques clés
- LCP (Largest Contentful Paint) : Mesure la vitesse de chargement (cible : < 2.5s).
- INP (Interaction to Next Paint) : Mesure la réactivité (cible : < 200ms).
- CLS (Cumulative Layout Shift) : Mesure la stabilité visuelle (cible : < 0.1).
3. Optimisation pour PWA
- Critial CSS : Chargez le CSS de l'App Shell en premier.
- Image Lazy Loading :
<img loading="lazy" ...>. - Précaching Workbox : Pour éliminer le temps de chargement réseau au second passage.
Conclusion
Un site lent ne sera jamais considéré comme une application native par l'utilisateur. Prochaine étape : **Sécurité et CSP**.
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les notions
Atelier #1Expliquez avec vos mots le concept central de ce chapitre.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Reportez-vous au cours */
#2 — Application guidée
Atelier #2Reprenez l'exemple du cours et réalisez un cas pratique.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Comparez vos résultats avec les exemples */
#3 — Mini défi d'autonomie
Atelier #3Concevez une mini-solution liée à ce chapitre.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Vérifiez la cohérence technique */