Performances front-end 2021 : gains rapides

Publié: 2022-03-10
Résumé rapide ↬ Faisons 2021… vite ! Une liste de contrôle annuelle des performances front-end avec tout ce que vous devez savoir pour créer des expériences rapides sur le Web aujourd'hui, des métriques aux outils et techniques front-end. Mis à jour depuis 2016.

Table des matières

  1. Se préparer : planification et métriques
  2. Fixer des objectifs réalistes
  3. Définir l'environnement
  4. Optimisations des actifs
  5. Construire des optimisations
  6. Optimisations de livraison
  7. Mise en réseau, HTTP/2, HTTP/3
  8. Test et surveillance
  9. Victoires rapides
  10. Tout sur une seule page
  11. Télécharger la liste de contrôle (PDF, pages Apple, MS Word)
  12. Tout sur une seule page
  13. Télécharger la liste de contrôle (PDF, pages Apple, MS Word)
  14. Abonnez-vous à notre newsletter par e-mail pour ne pas manquer les prochains guides.

Victoires rapides

Cette liste est assez complète et la réalisation de toutes les optimisations peut prendre un certain temps. Donc, si vous n'aviez qu'une heure pour obtenir des améliorations significatives, que feriez-vous ? Résumons le tout à 17 fruits à portée de main . Évidemment, avant de commencer et une fois que vous avez terminé, mesurez les résultats, y compris la plus grande peinture de contenu et le temps d'interaction sur une connexion 3G et par câble.

  1. Mesurez l'expérience du monde réel et fixez des objectifs appropriés. Visez à être au moins 20 % plus rapide que votre concurrent le plus rapide. Restez dans la plus grande peinture de contenu < 2,5 s, un délai de première entrée < 100 ms, le temps d'interaction < 5 s sur 3G lent, pour les visites répétées, TTI < 2 s. Optimisez au moins pour First Contentful Paint et Time To Interactive.
  2. Optimisez les images avec Squoosh, mozjpeg, guetzli, pingo et SVGOMG, et servez AVIF/WebP avec un CDN d'images.
  3. Préparez des CSS critiques pour vos modèles principaux et intégrez-les dans le <head> de chaque modèle. Pour CSS/JS, opérez dans un budget de taille de fichier critique de max. 170 Ko compressés (0,7 Mo décompressés).
  4. Découpez, optimisez, différez et chargez les scripts paresseux. Investissez dans la configuration de votre bundler pour supprimer les redondances et vérifier les alternatives légères.
  5. Hébergez toujours vos ressources statiques et préférez toujours héberger des ressources tierces. Limitez l'impact des scripts tiers. Utilisez des façades, chargez des widgets sur l'interaction et méfiez-vous des extraits anti-scintillement.
  6. Soyez sélectif lors du choix d'un cadre. Pour les applications à page unique, identifiez les pages critiques et servez-les de manière statique, ou au moins pré-rendez-les, et utilisez l'hydratation progressive au niveau des composants et importez des modules sur l'interaction.
  7. Le rendu côté client seul n'est pas un bon choix pour les performances. Effectuez un pré-rendu si vos pages ne changent pas beaucoup et différez le démarrage des frameworks si vous le pouvez. Si possible, utilisez le rendu côté serveur en streaming.
  8. Servez le code hérité uniquement aux navigateurs hérités avec <script type="module"> et le modèle module/nomodule.
  9. Expérimentez en regroupant vos règles CSS et testez le CSS dans le corps.
  10. Ajoutez des conseils de ressources pour accélérer la livraison avec une dns-lookup , une preconnect , une prefetch , un preload et un prerender plus rapides.
  11. Créez des sous-ensembles de polices Web et chargez-les de manière asynchrone, et utilisez font-display dans CSS pour un premier rendu rapide.
  12. Vérifiez que les en-têtes de cache HTTP et les en-têtes de sécurité sont correctement définis.
  13. Activez la compression Brotli sur le serveur. (Si ce n'est pas possible, assurez-vous au moins que la compression Gzip est activée.)
  14. Activez la congestion TCP BBR tant que votre serveur s'exécute sur la version 4.9+ du noyau Linux.
  15. Activez l'agrafage OCSP et IPv6 si possible. Servez toujours un certificat DV agrafé OCSP.
  16. Activez la compression HPACK pour HTTP/2 et passez à HTTP/3 si elle est disponible.
  17. Mettez en cache des actifs tels que les polices, les styles, JavaScript et les images dans un cache de service worker.

Télécharger la liste de contrôle (PDF, pages Apple)

Avec cette liste de contrôle à l'esprit, vous devez être prêt pour tout type de projet de performance frontal. N'hésitez pas à télécharger le PDF prêt à imprimer de la liste de contrôle ainsi qu'un document Apple Pages modifiable pour personnaliser la liste de contrôle selon vos besoins :

  • Télécharger la liste de contrôle PDF (PDF, 166 Ko)
  • Téléchargez la liste de contrôle dans les pages Apple (.pages, 275 Ko)
  • Télécharger la liste de contrôle en MS Word (.docx, 151 KB)

Si vous avez besoin d'alternatives, vous pouvez également consulter la liste de contrôle frontale de Dan Rublic, la "liste de contrôle des performances Web du concepteur" de Jon Yablonski et la liste de contrôle frontale.

C'est parti !

Certaines des optimisations peuvent dépasser la portée de votre travail ou de votre budget ou peuvent tout simplement être exagérées compte tenu du code hérité auquel vous devez faire face. C'est très bien! Utilisez cette liste de contrôle comme un guide général (et, espérons-le, complet) et créez votre propre liste de problèmes qui s'appliquent à votre contexte. Mais surtout, testez et mesurez vos propres projets pour identifier les problèmes avant de les optimiser. Bonnes performances en 2021, tout le monde !

Table des matières

  1. Se préparer : planification et métriques
  2. Fixer des objectifs réalistes
  3. Définir l'environnement
  4. Optimisations des actifs
  5. Construire des optimisations
  6. Optimisations de livraison
  7. Mise en réseau, HTTP/2, HTTP/3
  8. Test et surveillance
  9. Victoires rapides
  10. Tout sur une seule page
  11. Télécharger la liste de contrôle (PDF, pages Apple, MS Word)
  12. Tout sur une seule page
  13. Télécharger la liste de contrôle (PDF, pages Apple, MS Word)
  14. Abonnez-vous à notre newsletter par e-mail pour ne pas manquer les prochains guides.

Un grand merci à Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov et Rodney Rehm pour avoir révisé cet article, ainsi que notre fantastique communauté qui a partagé des techniques et des leçons tirées de son travail dans l'optimisation des performances pour que tout le monde puisse les utiliser . Vous êtes vraiment fracassant !