Wydajny frontend 2023

Wydajny Frontend 2023
Nowinki, ciekawostki, przykłady

✓ Współtworzę agencję
Studio Sidekicks / Bigger Picture
Bartek Miś
✓ Pomagam mojemu zespołowi dowozić projekty
✓ Optymalizuję wydajność stron WWW i aplikacji
✓ Uczę developerów i ekspertów SEO, jak tworzyć wydajne
projekty lub audytować/optymalizować istniejące

Dwie części
Podsumowanie 2022 Rekomendacje na 2023
Co przyniósł zeszły rok; co mnie zaskoczyło Nowości, narzędzia, techniki
Plan prezentacji
Prezentacja będzie dostępna po webinarze

✓ Zwiększyła się świadomość odnośnie optymalizacji wydajności
Moje obserwacje rynku
Źródło: https://almanac.httparchive.org/en/2022/performance

Moje obserwacje rynku
✓ Problemy techniczne z wdrażaniem rekomendacji
(np. Wordpress, React, Next.js)
✓ Brakuje większej ilości własnych statystyk
(najczęściej bazuje się tylko na CrUX)
✓ „Śrubowanie” wyników Lighthouse przestało być głównym tematem
✓ Klienci są skorzy do implementacji optymalizacji
✓ Jest sporo pracy w zakresie nauki biznesu i zespołów developerskich

Co mnie irytuje
Kontekst!
Liczy się kontekst, a nie sterta złotych rad.

1. Brak rozumienia Preload Scanner

https://web.dev/preload-scanner/

1. Preload Scanner
✓ Drugi, dodatkowy parser w przeglądarce, odpowiedzialny za pobieranie
zasobów na stronie asynchronicznie, niezależnie od HTML’owego parsera
(nawet gdy ten jest potencjalnie zablokowany)
✓ Zasoby znalezione w dokumencie HTML, do których przeglądarka
może się odnieść, są pobierane dzięki atrybutom
src, href (np. obrazki, style CSS, skrypty itd.)
✓ Dlatego też sporo synchronicznie ładowanych zasobów (np. skrypty)
w rzeczywistości są ładowane w nieblokujący sposób dla innych
(przez Preload Scanner)

1. Preload Scanner
✓ Obrazki umieszczone przez CSS - nie są znajdywane
przez Preload Scanner - uwaga np. na obrazek jako w tło (LCP)
✓ Inline’owo wstrzykiwane skrypty asynchroniczne
✓ Obrazki ładowane leniwie poprzez JS bibliotekę

1. Preload Scanner
✓ Skrypty JS uruchamiane przez document.write
są ukryte dla Preload Scanner
Polecany artykuł: https://csswizardry.com/2023/01/why-not-document-write/

2. Brak rozumienia parsowania HTML,
konstrukcji DOM, renderowania

2. Parsowanie / renderowanie
✓ Pobieranie HTML —> konstruowanie DOM —> konstruowanie CSSOM —>
renderowanie (CSS / JS)
✓ Synchroniczny <script> może (ale nie musi) blokować konstruowania DOM, a
tym samym ładowania innych zasobów
✓ Synchroniczny <script> zawsze blokuje konstruowanie DOM, kiedy się
wykonuje (execution)
✓ Należy zrozumieć, kiedy coś się pobiera, kiedy coś blokuje
konstruowanie DOM, a kiedy coś się renderuje

3. Lazy loading obrazków LCP
✓ <img loading=lazy src=…>, gdy obrazek jest LCP, jest antywzorcem!
Źródło: https://almanac.httparchive.org/en/2022/performance#lcp-lazy-loading

4. Fonty a CDN
(np. Google Fonts)

4. Fonty a CDN

4. Fonty a CDN
https://www.instagram.com/webdevinsider/

5. Różnice między wynikami
Lab a RUM

5. Różnice między wynikami Lab a RUM
✓ Czy na stronie zmienia się coś, gdy użytkownik dokona jakiejś decyzji
(cookie popup, jakaś notyfikacja) i zapisze wybór (cookie)
✓ cache
✓ Lokalizacja wykonywania testów syntetycznych vs realni użytkownicy i
lokalizacje odwiedzin

Test (LAB) strony,
bez cookie popup

✓ Uruchom test/eksperyment (np. przez WPT —> Inject Script)

✓ Uruchom test/eksperyment (np. przez WPT —> Inject Script)
✓ Pierwsza wizyta na stronie jest bardzo istotna!

6. CLS
✓ Wciąż istnieje sporo stron, gdzie obrazki nie mają nadanych wymiarów
width/height
Źródło: https://almanac.httparchive.org/en/2022/performance#cumulative-layout-shift-cls

6. CLS
✓ Animacje CSS powodują CLS - korzystaj z transform
✓ Fonty —> font-display: swap|optional (FOUT)
✓ bfcache (Back/Forward cache)
✓ Reklamy —> min-height jest lepszym rozwiązaniem niż brak jakiejkolwiek
wysokości

7. Wydajność strony na
desktopie a Google

Co nowego w 2023
+ rekomendacje

Skrót najważniejszych porad
✓ Zasób LCP (np. obrazek) powinien być znajdywany z poziomu kodu
HTML (preload scanner)
✓ LCP: <link rel=preload>, + fetchpriority=high, bez loading=lazy na <img>
✓ Używaj CDN
✓ CLS: Dodawaj rozmiar width/height (lub przynajmniej
min-height) na obrazkach, iframe, kontenerach np. na reklamy
✓ CLS: unikaj animacji/tranzycji, które powodują fazę Layout
✓ FID/INP: dziel długie zadania na mniejsze; używaj setTimeout(),
isInputPending

Bądź detektywem & eksperymentuj
✓ Nie ma ogólnych zasad optymalizacji, które sprawdzą się zawsze i
wszędzie
✓ Optymalizacja wydajności zaczyna się od celów, pytań, obserwacji,
analizy, a następnego szukania rozwiązań,
zwłaszcza podczas eksperymentowania
✓ Eksperyment bez wdrażania zmian na stronie (na serwerze)

✓ WebPageTest Opportunities & Experiments

✓ WebPageTest - własne eksperymenty

✓ DevTools Overrides

✓ DevTools Performance Insights

User Flows
✓ Mierz wydajność strony nie tylko pod kątem jej ładowania, ale również
podczas korzystania z niej, podczas interakcji
✓ Dodawanie produktu do koszyka, proces rejestracji, logowania itp.
✓ DevTools Recorder; WebPageTest

User Flows

Mierzmy i usprawniajmy to, co dzieje się
podczas całej „podróży” użytkownika
na naszej stronie

FID a INP
✓ INP: metryka, która wskazuje na całościowy poziom interaktywności na
stronie podczas wizyty na stronie (czyli od momentu, gdy wchodzimy na daną
stronę, aż przez cały cykl obcowania z nią, a nie tylko po załadowaniu strony
albo tylko w trakcie pierwszej interakcji).
✓ FID: czas, w jakim przeglądarka jest w stanie odpowiedzieć na
pierwszą interakcję użytkownika na stronie

INP: jak testować
✓ Biblioteka web-vitals.js (https://github.com/GoogleChrome/web-vitals)

INP: jak testować

INP: jak testować
https://github.com/GoogleChrome/web-vitals

Obrazki
✓ Natywny lazy loading

Obrazki
✓ AVIF (Safari już wspiera; uwaga na Edge)

Obrazki
✓ Obrazki serwowane leniwie - dodawaj atrybut decoding=async

Obrazki
✓ fetchpriority=high dla LCP, fetchpriority=low dla obrazków, które nie są
priorytetowe
✓ <link rel=preload fetchpriority=high>

Dynamiczny priorytet LCP
https://philipwalton.com/articles/dynamic-lcp-priority/

CDN
✓ Całościowy: Cloudflare, Cloudfront
✓ Statyczne zasoby: obrazki „contentowe” (wraz z możliwością manipulacji
formatu, rozmiaru), filmiki

Cloudflare APO (Automatic Platform
Optimisation)

CDN
✓ 103 Early Hints (np. do styli CSS albo fontów)

CDN
✓ 103 Early Hints

Cloudflare
✓ HTTP/3
✓ Kompresja Brotli
✓ Ochrona przed DDoS, WAF

EV certificate
✓ Typ certyfikatu, gdzie w przeglądarce zachodzi walidacja, czy organizacja
posiada domenę, z rygorystycznym procesem sprawdzania
✓ Kiedyś przy adresie URL w przeglądarce widniała nazwa organizacji
✓ Certyfikat EV jest wolny: brak obsługi OSCP po stronie serwera; kontrola
rewalidacyjna certyfikatu odbywa się po stronie klienta (przeglądarki)
—> dłuższy czas TTFB

EV certificate
✓ Przeglądarka Chrome od wersji 106 przestała wykonywać żądania OSCP, w
rezultacie strony, które korzystają z EV certyfikatów odczuły poprawę
wydajności
https://blog.webpagetest.org/posts/elimi
nating-ev-certificate-performance-
overhead/

EV certificate
https://www.ssl.com/blogs/how-do-browsers-handle-revoked-ssl-tls-certificates/#variation

HTTP/3
✓ Protokół HTTP/3 został ustandaryzowany od czerwca 2022
✓ HTTP/3 stawia na szybkość (streaming contentu)
✓ Połączenie HTTP/3 nie blokuje się, jest szybciej nawiązywane, bezpieczne i
elastyczne (QUIC)

HTTP/3
https://devenv.pl/http2-http3/

HTTP/3
✓ Rekomenduje się wdrożenie protokołu HTTP/3
ze względu na wydajność stron
✓ Cloudflare

bfcache (Back/Forward)
✓ Nic nowego, ale przez wprowadzenie obsługi w przeglądarce Chrome
zaczęto o tym mówić głośniej
✓ Według badań, blisko 20% wszystkich nawigacji w
przeglądarce Chrome (mobile) pochodzi z nawigowania do
poprzedniej strony przez przycisk back w przeglądarce

bfcache: demo

Bez bfcache: demo

✓ Jak to włączyć, co zrobić, by to działało? Prawdopodobnie nic.

bfcache - dlaczego nie działa
✓ Użycie eventu unload i beforeunload
✓ użycie nagłówka Cache-Control: no-store, który blokuje użycie
jakiegokolwiek cache'a
https://docs.google.com/spreadsheets/d/1li0po_ETJAIybpaSX5rW_lUN62upQhY0tH4pR5UPt60/edit?pli=1#gid=0
✓ Pełna lista przyczyn:

bfcache - dlaczego nie działa

✓ Zapamiętywanie pełnego stanu całej strony z poprzedniej wizyty
(łącznie z JS heap’em)
✓ Usprawnienie metryki CLS
https://www.debugbear.com/blog/2022-in-web-performance

Uwaga na bfcache i analitykę
✓ Detekcja odwiedzin stron z bfcache

CSS a JS
✓ Inline’nowy JS a CSS: wolny arkusz CSS zablokuje wykonywanie
kodu JS <script> znajdującego się po nim
✓ Dobrą techniką jest umieszczenie tego inline’owego <script> przed
arkuszem styli CSS, idealnie na samej górze <head> po <title>

CSS a JS
✓ Alternatywa: <script type=module async>
✓ Dzięki temu, taki <script> można umieścić nawet i po CSS, w dalszej
części dokumentu HTML, nie martwiąc się o jego zablokowane
wykonanie
https://calendar.perfplanet.com/2022/using-inline-javascript-modules-to-prevent-css-blockage/

Wydajność CSS
✓ Zasadniczo może stwierdzić: to, jak piszemy CSS (selektory) nie
ma aż tak dużego znaczenia pod kątem wydajności

Wydajność CSS
✓ Rekalkulacja styli, inwalidacja layout
✓ Testuj przez zakładkę Performance w DevTools
https://twitter.com/csswizardry/status/1616906377829433351

Asynchroniczny CSS
✓ Dwa arkusze: style odpowiedzialne za elementy widoczne od razu
(wysoki priorytet) oraz style związane z elementami widocznymi
dopiero po jakiejś interakcji (np. rozwijane menu, lightbox, wysuwany
sidebar) (niski priorytet)
✓ Arkusz ze stylami niskopriorytetowymi: ładowanie asynchroniczne

Asynchroniczny CSS
✓ Zadanie domowe: spróbuj przenieść te style pod koniec </body>

CSS Containment
✓ Opóźnianie renderowania elementów, które nie są widoczne od razu
✓ Sprawdza się zwłaszcza na stronach obfitych w content, długich
https://www.terluinwebdesign.nl/en/css/calculating-contain-intrinsic-size-for-content-visibility/

Tranzycje między
podstronami
✓ InstantPage: https://instant.page (just-in-time preloading)

Tranzycje między
podstronami
✓ Prerender
https://developer.chrome.com/blog/prerender-pages/

Tranzycje między
podstronami
✓ Speculation Rules API

Tranzycje między
podstronami
✓ View Transitions API

Tranzycje między
podstronami
✓ View Transitions API
https://developer.chrome.com/docs/web-platform/view-transitions/

O czym pamiętać w 2023
✓ Kontekst, cele i realistyczne optymalizacje
✓ Sporo optymalizacji po stronie przeglądarki (bfcache, Speculation Rules,
natywne wsparcie nowoczesnych obrazków i ich ładowania, priorytetyzacja,
lazy rendering) —> postaraj się z nich korzystać
✓ Wydajność korzystania ze strony podczas całej wizyty
✓ Analiza waterfall
✓ Wiedza na temat zależności między CSS a JS a DOM
✓ Ładowanie tylko tyle, ile potrzeba; w mniejszych częściach;
renderowanie tylko tyle, ile potrzeba na dany moment

Problem z wdrożeniem
optymalizacji w projektach?

Kurs Zoptymalizowany
Frontend 2023
✓ Nabór 20-23. lutego 2023;
1549 PLN + VAT
Nowy kurs 2023 (?)
✓ Przykłady technicznego wdrażania poprawek
wydajnościowych zorientowanych na dany
CMS/framework
Audyty wydajności
✓ kontakt@webdevinsider.pl

Wydajny frontend 2023

Recommended

Recommended

More Related Content

Similar to Wydajny frontend 2023

Similar to Wydajny frontend 2023 (20)

Wydajny frontend 2023