Front-End Performance 2021: Szybkie zwycięstwa

Opublikowany: 2022-03-10
Szybkie podsumowanie ↬ Zróbmy 2021… szybko! Roczna lista kontrolna wydajności front-endu zawierająca wszystko, co musisz wiedzieć, aby tworzyć szybkie środowiska internetowe dzisiaj, od metryk po narzędzia i techniki front-endowe. Aktualizacja od 2016 roku.

Spis treści

  1. Przygotowanie: planowanie i metryki
  2. Wyznaczanie realistycznych celów
  3. Definiowanie środowiska
  4. Optymalizacje zasobów
  5. Optymalizacje kompilacji
  6. Optymalizacje dostawy
  7. Sieć, HTTP/2, HTTP/3
  8. Testowanie i monitorowanie
  9. Szybkie zwycięstwo
  10. Wszystko na jednej stronie
  11. Pobierz listę kontrolną (PDF, Apple Pages, MS Word)
  12. Wszystko na jednej stronie
  13. Pobierz listę kontrolną (PDF, Apple Pages, MS Word)
  14. Zapisz się do naszego biuletynu e-mail, aby nie przegapić kolejnych przewodników.

Szybkie zwycięstwo

Ta lista jest dość obszerna, a ukończenie wszystkich optymalizacji może zająć trochę czasu. Tak więc, gdybyś miał tylko 1 godzinę, aby uzyskać znaczną poprawę, co byś zrobił? Sprowadźmy to wszystko do 17 nisko wiszących owoców . Oczywiście przed rozpoczęciem i po zakończeniu zmierz wyniki, w tym największą zawartość treści i czas na interaktywność w połączeniu 3G i kablowym.

  1. Mierz doświadczenie w świecie rzeczywistym i wyznaczaj odpowiednie cele. Staraj się być co najmniej o 20% szybszy od swojego najszybszego konkurenta. Pozostań w obrębie największej zawartości treści < 2,5 s, opóźnienie pierwszego wejścia < 100 ms, czas do interakcji < 5 s przy wolnym 3G, w przypadku powtórnych wizyt, TTI < 2 s. Zoptymalizuj przynajmniej dla First Contentful Paint i Time To Interactive.
  2. Optymalizuj obrazy za pomocą Squoosh, mozjpeg, guetzli, pingo i SVGOMG oraz udostępniaj AVIF/WebP z obrazem CDN.
  3. Przygotuj krytyczne CSS dla swoich głównych szablonów i umieść je w <head> każdego szablonu. W przypadku CSS/JS działaj w ramach krytycznego budżetu rozmiaru pliku wynoszącego max. 170 KB w formacie gzip (0,7 MB z dekompresją).
  4. Przycinaj, optymalizuj, odraczaj i ładuj skrypty z opóźnieniem. Zainwestuj w konfigurację swojego pakietu, aby usunąć nadmiarowość i sprawdzić lekkie alternatywy.
  5. Zawsze hostuj własne zasoby statyczne i zawsze preferuj samodzielne hostowanie zasobów stron trzecich. Ogranicz wpływ skryptów innych firm. Używaj fasad, ładuj widżety podczas interakcji i uważaj na fragmenty zapobiegające migotaniu.
  6. Bądź selektywny przy wyborze frameworka. W przypadku aplikacji jednostronicowych zidentyfikuj krytyczne strony i wyświetlaj je statycznie lub przynajmniej wyrenderuj je wstępnie, stosuj progresywne uwadnianie na poziomie komponentów i importuj moduły podczas interakcji.
  7. Samo renderowanie po stronie klienta nie jest dobrym wyborem ze względu na wydajność. Prerenderuj, jeśli twoje strony nie zmieniają się zbytnio, i odkładaj uruchamianie frameworków, jeśli możesz. Jeśli to możliwe, użyj renderowania po stronie serwera strumieniowego.
  8. Udostępniaj starszy kod tylko starszym przeglądarkom z <script type="module"> i wzorcem module/nomodule.
  9. Eksperymentuj z przegrupowywaniem reguł CSS i testuj CSS w treści.
  10. Dodaj wskazówki dotyczące zasobów, aby przyspieszyć dostarczanie dzięki szybszemu dns-lookup , preconnect , prefetch , preload i prerender .
  11. Podzbieraj czcionki internetowe i ładuj je asynchronicznie, a także wykorzystuj font-display w CSS do szybkiego pierwszego renderowania.
  12. Sprawdź, czy nagłówki pamięci podręcznej HTTP i nagłówki zabezpieczeń są ustawione prawidłowo.
  13. Włącz kompresję Brotli na serwerze. (Jeśli nie jest to możliwe, upewnij się przynajmniej, że kompresja Gzip jest włączona.)
  14. Włącz przeciążenie TCP BBR, jeśli Twój serwer działa z jądrem Linux w wersji 4.9+.
  15. Włącz zszywanie OCSP i IPv6, jeśli to możliwe. Zawsze podawaj zszyty certyfikat DV OCSP.
  16. Włącz kompresję HPACK dla HTTP/2 i przejdź do HTTP/3, jeśli jest dostępna.
  17. Zasoby w pamięci podręcznej, takie jak czcionki, style, JavaScript i obrazy w pamięci podręcznej Service Worker.

Pobierz listę kontrolną (PDF, Apple Pages)

Mając na uwadze tę listę kontrolną, powinieneś być przygotowany na każdy rodzaj front-endowego projektu wykonawczego. Zachęcamy do pobrania gotowego do druku pliku PDF listy kontrolnej, a także edytowalnego dokumentu Apple Pages, aby dostosować listę kontrolną do swoich potrzeb:

  • Pobierz listę kontrolną PDF (PDF, 166 KB)
  • Pobierz listę kontrolną w Apple Pages (.pages, 275 KB)
  • Pobierz listę kontrolną w MS Word (.docx, 151 KB)

Jeśli potrzebujesz alternatyw, możesz również sprawdzić front-endową listę kontrolną Dana Rublica, „Designer's Web Performance Checklist” Jona Yablonskiego oraz FrontendChecklist.

No to idziemy!

Niektóre optymalizacje mogą wykraczać poza zakres Twojej pracy lub budżetu lub mogą być po prostu przesadą, biorąc pod uwagę stary kod, z którym musisz sobie poradzić. W porządku! Użyj tej listy kontrolnej jako ogólnego (i, miejmy nadzieję, wyczerpującego) przewodnika i stwórz własną listę problemów, które mają zastosowanie w Twoim kontekście. Ale co najważniejsze, testuj i mierz własne projekty, aby zidentyfikować problemy przed optymalizacją. Szczęśliwe wyniki w 2021 roku, wszyscy!

Spis treści

  1. Przygotowanie: planowanie i metryki
  2. Wyznaczanie realistycznych celów
  3. Definiowanie środowiska
  4. Optymalizacje zasobów
  5. Optymalizacje kompilacji
  6. Optymalizacje dostawy
  7. Sieć, HTTP/2, HTTP/3
  8. Testowanie i monitorowanie
  9. Szybkie zwycięstwo
  10. Wszystko na jednej stronie
  11. Pobierz listę kontrolną (PDF, Apple Pages, MS Word)
  12. Wszystko na jednej stronie
  13. Pobierz listę kontrolną (PDF, Apple Pages, MS Word)
  14. Zapisz się do naszego biuletynu e-mail, aby nie przegapić kolejnych przewodników.

Ogromne podziękowania dla Guya Podjarnego, 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 za przejrzenie tego artykułu, a także nasza fantastyczna społeczność, która udostępniła wszystkim techniki i wnioski wyciągnięte z pracy nad optymalizacją wydajności . Naprawdę miażdżysz!