Performanță front-end 2021: Câștiguri rapide

Publicat: 2022-03-10
Rezumat rapid ↬ Să facem 2021... repede! O listă anuală de verificare a performanței front-end cu tot ce trebuie să știți pentru a crea experiențe rapide pe web astăzi, de la valori până la instrumente și tehnici front-end. Actualizat din 2016.

Cuprins

  1. Pregătirea: planificare și valori
  2. Stabilirea obiectivelor realiste
  3. Definirea Mediului
  4. Optimizări ale activelor
  5. Construiți optimizări
  6. Optimizări de livrare
  7. Rețea, HTTP/2, HTTP/3
  8. Testare și monitorizare
  9. Victorii rapide
  10. Totul pe o singură pagină
  11. Descărcați Lista de verificare (PDF, Apple Pages, MS Word)
  12. Totul pe o singură pagină
  13. Descărcați Lista de verificare (PDF, Apple Pages, MS Word)
  14. Abonați-vă la buletinul nostru informativ prin e-mail pentru a nu rata următoarele ghiduri.

Victorii rapide

Această listă este destul de cuprinzătoare și finalizarea tuturor optimizărilor poate dura destul de mult. Deci, dacă ai avea doar 1 oră pentru a obține îmbunătățiri semnificative, ce ai face? Să punem totul la fiert până la 17 fructe de jos . Evident, înainte de a începe și odată ce ați terminat, măsurați rezultatele, inclusiv cea mai mare vopsea de conținut și Time To Interactive pe o conexiune 3G și prin cablu.

  1. Măsurați experiența din lumea reală și stabiliți obiective adecvate. Urmărește-te să fii cu cel puțin 20% mai rapid decât cel mai rapid concurent al tău. Rămâneți în cea mai mare vopsea plină de conținut < 2,5 s, o întârziere la prima intrare < 100 ms, timp până la interacțiune < 5 s pe 3G lentă, pentru vizite repetate, TTI < 2 s. Optimizați cel puțin pentru First Contentful Paint și Time To Interactive.
  2. Optimizați imaginile cu Squoosh, mozjpeg, guetzli, pingo și SVGOMG și serviți AVIF/WebP cu un CDN de imagine.
  3. Pregătiți CSS critic pentru șabloanele dvs. principale și introduceți-le în <head> al fiecărui șablon. Pentru CSS/JS, operați într-un buget de dimensiune critică a fișierului de max. 170KB gzipped (0,7MB decomprimat).
  4. Decupați, optimizați, amânați și încărcați leneș scripturile. Investește în configurația bundler-ului tău pentru a elimina redundanțele și a verifica alternativele ușoare.
  5. Găzduiți întotdeauna activele dvs. statice și preferați întotdeauna să găzduiți singur activele terțelor părți. Limitați impactul scripturilor terță parte. Folosiți fațade, încărcați widget-uri la interacțiune și aveți grijă la fragmentele anti-pâlpâire.
  6. Fii selectiv când alegi un cadru. Pentru aplicațiile cu o singură pagină, identificați paginile critice și serviți-le static, sau cel puțin redați-le înainte și utilizați hidratarea progresivă la nivel de componente și importați module pentru interacțiune.
  7. Numai randarea la nivelul clientului nu este o alegere bună pentru performanță. Predați dacă paginile dvs. nu se schimbă prea mult și amânați pornirea cadrelor dacă puteți. Dacă este posibil, utilizați redarea în flux pe server.
  8. Distribuiți codul vechi numai browserelor vechi cu <script type="module"> și model modul/modulul.
  9. Experimentați cu regruparea regulilor dvs. CSS și testați CSS în interior.
  10. Adăugați indicii de resurse pentru a accelera livrarea cu căutare mai rapidă dns-lookup , preconnect , preluare preload prefetch prerender mai rapidă.
  11. Subsetați fonturi web și încărcați-le asincron și utilizați font-display în CSS pentru prima redare rapidă.
  12. Verificați dacă anteturile cache HTTP și anteturile de securitate sunt setate corect.
  13. Activați compresia Brotli pe server. (Dacă acest lucru nu este posibil, cel puțin asigurați-vă că compresia Gzip este activată.)
  14. Activați congestia TCP BBR atâta timp cât serverul dumneavoastră rulează pe versiunea 4.9+ de kernel Linux.
  15. Activați capsarea OCSP și IPv6, dacă este posibil. Serviți întotdeauna un certificat DV capsat OCSP.
  16. Activați compresia HPACK pentru HTTP/2 și treceți la HTTP/3 dacă este disponibil.
  17. Așezați în cache elementele, cum ar fi fonturile, stilurile, JavaScript și imaginile într-un cache pentru lucrător de servicii.

Descărcați lista de verificare (PDF, pagini Apple)

Având în vedere această listă de verificare, ar trebui să fii pregătit pentru orice tip de proiect de performanță front-end. Simțiți-vă liber să descărcați PDF-ul gata de imprimare al listei de verificare, precum și un document editabil Apple Pages pentru a personaliza lista de verificare pentru nevoile dvs.:

  • Descărcați lista de verificare PDF (PDF, 166 KB)
  • Descărcați lista de verificare în Apple Pages (.pages, 275 KB)
  • Descărcați lista de verificare în MS Word (.docx, 151 KB)

Dacă aveți nevoie de alternative, puteți verifica, de asemenea, lista de verificare front-end a lui Dan Rublic, „Lista de verificare a performanței web a designerului” de Jon Yablonski și lista de verificare Frontend.

Plecăm!

Unele dintre optimizări ar putea depăși sfera muncii sau bugetul dvs. sau ar putea fi pur și simplu exagerate, având în vedere codul moștenit cu care trebuie să vă ocupați. E in regula! Utilizați această listă de verificare ca un ghid general (și, sperăm, cuprinzător) și creați-vă propria listă de probleme care se aplică contextului dvs. Dar cel mai important, testați și măsurați propriile proiecte pentru a identifica problemele înainte de optimizare. Rezultate fericite de performanță în 2021, tuturor!

Cuprins

  1. Pregătirea: planificare și valori
  2. Stabilirea obiectivelor realiste
  3. Definirea Mediului
  4. Optimizări ale activelor
  5. Construiți optimizări
  6. Optimizări de livrare
  7. Rețea, HTTP/2, HTTP/3
  8. Testare și monitorizare
  9. Victorii rapide
  10. Totul pe o singură pagină
  11. Descărcați Lista de verificare (PDF, Apple Pages, MS Word)
  12. Totul pe o singură pagină
  13. Descărcați Lista de verificare (PDF, Apple Pages, MS Word)
  14. Abonați-vă la buletinul nostru informativ prin e-mail pentru a nu rata următoarele ghiduri.

Mulțumiri imense lui 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 și Rodney Rehm pentru revizuirea acestui articol, precum și comunitatea noastră fantastică care a împărtășit tehnici și lecții învățate din munca sa în optimizarea performanței, pe care să le folosească toată lumea . Ești cu adevărat uluitor!