Performance front-end 2021: vittorie rapide

Pubblicato: 2022-03-10
Riassunto veloce ↬ Facciamo il 2021… veloce! Un elenco di controllo annuale delle prestazioni del front-end con tutto ciò che devi sapere per creare esperienze veloci sul Web oggi, dalle metriche agli strumenti e alle tecniche di front-end. Aggiornato dal 2016.

Sommario

  1. Prepararsi: pianificazione e metriche
  2. Stabilire obiettivi realistici
  3. Definire l'ambiente
  4. Ottimizzazioni degli asset
  5. Costruisci ottimizzazioni
  6. Ottimizzazioni di consegna
  7. Rete, HTTP/2, HTTP/3
  8. Test e monitoraggio
  9. Vittorie veloci
  10. Tutto in una pagina
  11. Scarica la lista di controllo (PDF, Apple Pages, MS Word)
  12. Tutto in una pagina
  13. Scarica la lista di controllo (PDF, Apple Pages, MS Word)
  14. Iscriviti alla nostra newsletter via email per non perdere le prossime guide.

Vittorie veloci

Questo elenco è abbastanza completo e il completamento di tutte le ottimizzazioni potrebbe richiedere un po' di tempo. Quindi, se avessi solo 1 ora per ottenere miglioramenti significativi, cosa faresti? Riduciamo il tutto a 17 frutti bassi . Ovviamente, prima di iniziare e una volta terminato, misurare i risultati, tra cui Largest Contentful Paint e Time To Interactive su una connessione 3G e via cavo.

  1. Misurare l'esperienza del mondo reale e fissare obiettivi appropriati. Cerca di essere almeno il 20% più veloce del tuo concorrente più veloce. Rimani entro il più grande contenuto di pittura < 2,5 s, un primo ritardo di input < 100 ms, tempo per interattivo < 5 s su 3G lento, per visite ripetute, TTI < 2 s. Ottimizza almeno per First Contentful Paint e Time To Interactive.
  2. Ottimizza le immagini con Squoosh, mozjpeg, guetzli, pingo e SVGOMG e servi AVIF/WebP con un CDN di immagini.
  3. Prepara CSS critici per i tuoi modelli principali e incorporali nella <head> di ogni modello. Per CSS/JS, operare entro un budget di dimensioni file critiche di max. 170 KB compressi con gzip (0,7 MB decompressi).
  4. Taglia, ottimizza, rinvia e carica in modo lento gli script. Investi nella configurazione del tuo bundler per rimuovere le ridondanze e controllare alternative leggere.
  5. Ospita sempre autonomamente le tue risorse statiche e preferisci sempre ospitare autonomamente risorse di terze parti. Limita l'impatto di script di terze parti. Usa le facciate, carica i widget sull'interazione e fai attenzione agli snippet anti-sfarfallio.
  6. Sii selettivo quando scegli un framework. Per le applicazioni a pagina singola, identifica le pagine critiche e servile in modo statico, o almeno esegui il prerendering e usa l'idratazione progressiva a livello di componente e importa i moduli sull'interazione.
  7. Il rendering lato client da solo non è una buona scelta per le prestazioni. Effettua il prerendering se le tue pagine non cambiano molto e rimanda l'avvio dei framework se puoi. Se possibile, usa il rendering lato server in streaming.
  8. Fornisci codice legacy solo a browser legacy con <script type="module"> e pattern module/nomodule.
  9. Sperimenta il raggruppamento delle regole CSS e testa il CSS interno.
  10. Aggiungi suggerimenti sulle risorse per velocizzare la consegna con dns-lookup , preconnect , prefetch , preload e prerender più rapidi.
  11. Sottoimposta i caratteri Web e caricali in modo asincrono e utilizza font-display in CSS per un primo rendering rapido.
  12. Verifica che le intestazioni della cache HTTP e le intestazioni di sicurezza siano impostate correttamente.
  13. Abilita la compressione Brotli sul server. (Se ciò non è possibile, assicurati almeno che la compressione Gzip sia abilitata.)
  14. Abilita la congestione TCP BBR fintanto che il tuo server è in esecuzione sul kernel Linux versione 4.9+.
  15. Abilita la pinzatura OCSP e IPv6, se possibile. Servi sempre un certificato DV pinzato OCSP.
  16. Abilita la compressione HPACK per HTTP/2 e passa a HTTP/3 se disponibile.
  17. Memorizza nella cache risorse come font, stili, JavaScript e immagini in una cache di servizio.

Scarica la lista di controllo (PDF, pagine Apple)

Con questa checklist in mente, dovresti essere preparato per qualsiasi tipo di progetto di performance front-end. Sentiti libero di scaricare il PDF pronto per la stampa dell'elenco di controllo e un documento Apple Pages modificabile per personalizzare l'elenco di controllo in base alle tue esigenze:

  • Scarica la checklist PDF (PDF, 166 KB)
  • Scarica la checklist in Apple Pages (.pages, 275 KB)
  • Scarica la checklist in MS Word (.docx, 151 KB)

Se hai bisogno di alternative, puoi anche controllare la checklist front-end di Dan Rublic, la "Designer's Web Performance Checklist" di Jon Yablonski e la FrontendChecklist.

Si parte!

Alcune delle ottimizzazioni potrebbero andare oltre l'ambito del tuo lavoro o budget o potrebbero essere semplicemente eccessive dato il codice legacy con cui devi fare i conti. Va bene! Usa questo elenco di controllo come guida generale (e si spera esauriente) e crea il tuo elenco di problemi che si applicano al tuo contesto. Ma soprattutto, testa e misura i tuoi progetti per identificare i problemi prima dell'ottimizzazione. Buoni risultati delle prestazioni nel 2021, a tutti!

Sommario

  1. Prepararsi: pianificazione e metriche
  2. Stabilire obiettivi realistici
  3. Definire l'ambiente
  4. Ottimizzazioni degli asset
  5. Costruisci ottimizzazioni
  6. Ottimizzazioni di consegna
  7. Rete, HTTP/2, HTTP/3
  8. Test e monitoraggio
  9. Vittorie veloci
  10. Tutto in una pagina
  11. Scarica la lista di controllo (PDF, Apple Pages, MS Word)
  12. Tutto in una pagina
  13. Scarica la lista di controllo (PDF, Apple Pages, MS Word)
  14. Iscriviti alla nostra newsletter via email per non perdere le prossime guide.

Un enorme ringraziamento a 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 e Rodney Rehm per aver recensito questo articolo, così come la nostra fantastica community che ha condiviso le tecniche e le lezioni apprese dal suo lavoro nell'ottimizzazione delle prestazioni affinché tutti possano utilizzarle . Sei davvero strepitoso!