Wydajny frontend 2024 - nowości optymalizacyjne

Wydajny frontend 2024
✓ 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

Ostatnie osiągnięcie (INP)

Wszystko dzięki zaawansowanemu audytowi

Core Web Vitals a SEO
✓ Wydajność według wskaźników Core Web Vitals jest czynnikiem rankingowym

Core Web Vitals a SEO
✓ Szybka strona to gwarancja wyróżnika wśród
konkurencji (i lepszych pozycji)
✓ Zoptymalizowana strona to lepszy biznes
(zaangażowanie i zadowolenie użytkowników, współczynnik
konwersji, niższy bounce-rate, lepsza sprzedaż)

Core Web Vitals są ważne
Źródło: https://www.rumvision.com/blog/benefits-of-optimizing-core-web-vitals/

Jak większość przeprowadza
audyty wydajności?

Audyt wydajności wg Lighthouse/PSI, GSC

Najprawdopodobniej robisz to źle
✓ Brak skupienia na rzeczywistych użytkownikach (dane lab)
✓ Dane
f
ield od realnych użytkowników (przeglądarka Chrome, CrUX) to za mało
✓ Wskazówki techniczne są zbyt ogólne
✓ Brak pokazania rezultatów, jakie można osiągnąć po wdrożeniu poprawek
✓ Raport/wnioski z audytu nie są konkretne, techniczne i celne
✓ Przez to wszystko poprawki wydajnościowe
schodzą na drugi plan

Po co zaawansowany audyt wydajności?

https://aira.net/state-of-technical-seo/the-impact-of-technical-seo/

Wyzwania technicznego SEO
✓ Trudności we wdrażaniu technicznych rozwiązań (ograniczenia technologiczne)
✓ Dług technologiczny
✓ Brak osób z dobrą techniczną znajomością zagadnień

SpeedCurve
➡ https://www.speedcurve.com

DebugBear
➡ https://www.debugbear.com/

Inne
➡ https://www.rumvision.com
➡ https://sentry.io/for/web-vitals/
➡ https://newrelic.com
➡ Wypróbuj dany system lub zbuduj własny

Komponenty LCP
✓ Time to First Byte - czas do pierwszego bajtu HTML
✓ Resource load delay - czas opóźnienia wczytywania zasobu
✓ Resource load time - czas wczytywania zasobu
✓ Element render delay - czas opóźnienia renderowania elementu

Czas do pierwszego bajtu
✓ Odpowiedź serwera z dokumentem HTML
✓ Backend, baza danych (niezoptymalizowane zapytania)
✓ Serwer a lokacja użytkownika, z której się do niego łączy
✓ TTFB rzutuje na wszystko

Czas opóźnienia wczytywania zasobu
✓ Kolejność i priorytet ładowanych zasobów (capo.js - https://rviscomi.github.io/
capo.js/)
✓ Analiza waterfall
✓ Rozmiar plików
✓ Skupiać się na przestrzeni Above-The-Fold

Czas wczytywania zasobu
✓ zapewnienie prawidłowego rozmiaru obrazka, wideo czy też fontu
(łączy się to jednocześnie z odpowiednim formatem)
✓ serwowanie zasobu z tego samego hosta
(zerknij na tego bloga: https://www.webdevinsider.pl/blog/obrazki-
zwlaszcza-lcp-a-serwowanie-przez-cdn)

Czas opóźnienia renderowania elementu
✓ komponent zależny od opóźnienia wczytywania zasobu
✓ blokujące renderowanie arkusze stylów CSS
✓ synchroniczne ładowane i wykonywane skrypty JS
✓ CSR rzutuje na LCP
✓ testy A/B
✓ animacje

Podsumowanie
o komponentach LCP

INP - omówienie metryki
i efektywne testowanie interakcji

Zainstaluj RUM

Przykładyinterakcji
➡ Kliknięcie w element
➡ Wpisywanie tekstu na
f
izycznej lub ekranowej klawiaturze
➡ „Tap”/„stuknięcie” na ekranie dotykowym
➡ Korzystanie z TAB na klawiaturze

Sens optymalizacji interakcji

Czyoptymalizacjainterakcjimasens?
https://www.speedcurve.com/blog/INP-user-experience-correlation/

Wskaźnik wydajnościinterakcji
➡ Każda interakcja (Interaction) inicjuje łańcuch zdarzeń,
których kulminacyjnym momentem jest wizualna
odpowiedź (Next Paint)

Szybkainterakcja =szybkawizualnazmiana
➡ Zmiana/aktualizacja jest klatką (frame)
➡ Widać to chociażby na nagraniu danej interakcji w DevTools

Przykład

Reakcja: klatka czy też główny wątek
➡ Strona szybko reaguje (reakcja), gdy użytkownik
w coś klika, „stuka”, czy wpisuje w formularzu
➡ Reakcja = wizualna zmiana na stronie
(główny wątek nie jest przyblokowany)

Skądwiemy,któreinterakcjesąwolne?
➡ Z testów manualnych (np. Web Vitals Chrome Plugin)

➡ Z testów automatycznych
(np. INP Debugger: https://www.debugbear.com/inp-debugger)

➡ CrUX, Google Search Console

WłasnyRUM(GA4,BigQuery)

4Developers 2024: Optymalizacja INP (Core Web Vital)

INP - nieidealny wskaźnik
➡ Wskazuje jedynie na rezultat końcowy
(wiemy, która interakcja wymaga poprawy)
➡ Kluczowa jest późniejsza analiza tego, co dzieje się w
głównym wątku przeglądarki i odnalezienie prawdziwej
przyczyny wolnej interakcji w kodzie (zwracamy uwagę na
długie zadania Long Tasks)
➡ Dany komponent INP (Input Delay, Processing Time, Presentation
Delay) jedynie naprowadza nas na źródło problemu
➡ Mierzy wydajność interakcji w sposób holistyczny

Testowaniepojedynczejinterakcji
➡ DevTools / testowanie za pośrednictwem zakładki Performance

LongAnimationFramesAPI(LoAF)
➡ Interfejs, który zwraca informacje o opóźnionych klatkach i jakie
skrypty na stronie są odpowiedzialne za opóźnienia

LongAnimationFramesAPI(LoAF)
Możliwość wysyłania wartości do RUM

Lekcja: Dlaczego optymalizacja wskaźnika INP jest trudna?

INP - proces optymalizacji
w praktyce

Procesoptymalizacjiinterakcji
➡ Mierzenie wydajności poprzez RUM (trial na początek jest OK)
➡ Manualne testowanie (Web Vitals; nagrywanie interakcji w DevTools)
➡ Wprowadzanie poprawek wydajnościowych (DevTools Overrides)
➡ Wdrożenie lub przekazanie informacji o wolnych interakcjach do działu IT

JakpoprawićwartościINP
-szybkośćładowaniafrontendu
➡ Ładowanie tylko tylu zasobów, ile jest potrzebne w danej chwili
➡ Ładowanie elementów, sekcji na żądanie
➡ Renderowanie elementów, gdy są widoczne (content-visibility w CSS)
➡ Duży wpływ na Input Delay

INPastrukturaDOM
➡ Unikaj niepotrzebnych zagnieżdżeń (wykorzystuj np. CSS Grid, Flexbox)
➡ Lazy loading elementów, sekcji
➡ Im prostsza struktura HTML, tym lepiej
➡ Priorytetyzuj SSR nad CSR
➡ Fragments (React, Vue, Svelte)

Zbytgłębokiezagnieżdżanie

INPaCSS
➡ Uwaga na kosztowne selektory, np.
.className > a, [style*=], .element .element-li .link span a
➡ Chrome Tracing, Selector Stats (DevTools)

Szukanieprzyczyny

Przyczyna

SzukamyprzyczynywCSS

Podsumowanie

INPaJavascript
➡ Wysoka wartość Processing Time
➡ Przyczyna: zbyt wiele metod JS uruchamianych naraz
(5 funkcji uruchomionych jako jedno zadanie)

➡ Rozwiązanie: priorytetyzacja zmiany wizualnej i krytycznych zadań; reszta
zadań do opóźnienia poprzez metodę requestAnimationFrame
i setTimeout; debounce
INPaJavascript

INPaJavascript

➡ Podzielenie zadań indywidualnie
INPaJavascript
➡ Web Workers

➡ Dzielenie 5 funkcji (jako 1 Long Task) na 5 zadań
dzięki kombinacji Promise z setTimeout()
INPaJavascript

Alternatywnysposóbdzielenia/planowaniazadań
➡ Scheduler API (niepełne wsparcie wśród przeglądarek)

Wizualnystanładowanianp.dlaprzycisku

CookieConsent/ConsentManagementProvider

PRZED
PO

CookieYes+GoogleConsentModeV2+GTM

Alternatywnepodejście

Linkiawysyłaniezdarzeńdozewnętrznychserwisów
https://www.linkedin.com/posts/arjenkarel_third-party-tools-a
ff
ecting-the-inp-here-activity-7182489751944359938-D6li/

PRZED

PO

PresentationDelayjakogłównyproblem
➡ Wysoka wartość Presentation Delay
➡ Przyczyny: zaawansowana struktura DOM, kosztowne selektory CSS,
Layout Trashing, zbyt duże obrazki (np. lightbox), animacje

Natychmiastowe ładowanie stron
dzięki Speculation Rules API

O co chodzi?
✓ Odwiedzamy daną stronę
✓ W tle przygotowujemy (ładujemy/renderujemy) kolejne
podstrony, do których użytkownik ma zamiar przejść
(automatycznie lub np. podczas „najechania”/kliknięcia na link)
✓ Dzięki temu przejście do kolejnej podstrony jest
natychmiastowe (TTFB, LCP, CLS)
✓ Mowa o stronach typu MPA, nie SPA
✓ 05.2024: (jeszcze) niepełne wsparcie wśród przeglądarek;
póki co Chrome, Edge, Opera

Biblioteki typu instant.page
✓ Oparte o JS i DOM

Biblioteki typu instant.page

Speculation Rules API

Speculation Rules demo + debugowanie

Kon
f
iguracja

Dynamiczne dodawanie Speculation Rules -
przykład wykorzystania

Prefetch czy prerender
✓ Prefetch: najbezpieczniejsza opcja; pobierze w tle
tylko zasoby znajdujące się na stronie objętej regułą
spekulacyjną (bez renderowania, bez wykonywania JS)
✓ Prerender: najlepsza efektywność, pełne
wyrenderowanie strony; zalecana ostrożność
(może być obciążające transfer/zasoby urządzenia)
✓ Można zastosować reguły prefetch i prerender
(testuj & analizuj heatmapy)

Na co uważać
✓ Prerenderowanie adresów URL typu linki wyloguj,
dodaj do koszyka, logowanie, reklamy
✓ Prerenderowanie wszystkich linków od razu
(eagerness: immediate, eager)
✓ Analityka (Google Analytics obsługuje renderowanie
wstępne, domyślnie opóźniając aktywację)

Wordpress plugin: Speculative Loading
https://wordpress.org/plugins/speculation-rules/

https://wordpress.org/plugins/speculation-rules/
Wordpress plugin: Speculative Loading

Speculation Rules API w Astro
https://astro.build/

Nowy wymiar nawigacji na stronach
✓ Szybkie tranzycje między podstronami
✓ Speculation Rules API + bfcache
✓ View Transitions API (dynamiczne, animowane tranzycje)
✓ Niegdyś możliwe do osiągnięcia tylko przez JS (frameworki)
✓ Większy nacisk na server-side; MPA > SPA
✓ Demo: biggerpicture.agency

Jak się podobało?
Zaraz Q&A!

Kurs Zoptymalizowany Frontend

Kurs Zoptymalizowany Frontend
✓ 14 modułów (teoria, praktyczne przykłady + zadania)
✓ Na bieżąco aktualizowany (ostatnia aktualizacja: maj 2024)
✓ Dla SEO specjalistów i front-end developerów
✓ Ponad 400 zadowolonych uczestników
✓ Jedyne w Polsce tak kompleksowe kompendium praktycznej
wiedzy z dziedziny wydajności stron WWW

Kurs Wydajne Interakcje (wg INP)

✓ 4 moduły (teoria, praktyczne przykłady + zadania)
✓ Na bieżąco aktualizowany
✓ Dla SEO specjalistów i front-end developerów
✓ Ponad 70 zadowolonych uczestników
✓ Jedyne w Polsce tak kompleksowe szkolenie zorientowane
na optymalizację interakcji wg INP
Kurs Wydajne Interakcje (wg INP)

Tylko: 1597 zł + VAT
Tylko: 799 zł + VAT
+ 2097 zł + VAT
Oferta tylko do 24. maja: https://www.webdevinsider.pl

Wydajny frontend 2024 - nowości optymalizacyjne

Wydajny frontend 2024 - nowości optymalizacyjne

Recommended

Recommended

More Related Content

Similar to Wydajny frontend 2024 - nowości optymalizacyjne

Similar to Wydajny frontend 2024 - nowości optymalizacyjne (20)

Wydajny frontend 2024 - nowości optymalizacyjne