Course curriculum
-
1
WPROWADZENIE
-
Czym są wydajne interakcje?
-
Holistyczne podejście do optymalizacji INP (co biznes / SEO / dev muszą wiedzieć)
-
Specyfika metryki INP
-
Metryki FID, TTI, TBT a interakcje
-
Skąd wiemy, które interakcje są wolne?
-
Dlaczego optymalizacja wskaźnika INP jest trudna?
-
Płatne systemy RUM
-
Dane wydajnościowe z web-vitals.js i LoAF
-
Własny, darmowy system RUM
-
Manualne testowanie interakcji
-
-
2
PROCES OPTYMALIZACJI INTERAKCJI
-
Krok 1: czy istnieją wolne interakcje w projekcie?
-
Krok 2: znalezienie wolnej interakcji
-
Krok 3: manualne testowanie wolnej interakcji
-
Krok 4: analiza interakcji & modyfikacje w kodzie
-
-
3
KOD A INTERAKCJE
-
Wydajność ładowania frontendu a interakcje
-
Interakcje a struktura DOM
-
Interakcje a CSS
-
Chrome Tracing (zaawansowana analiza)
-
Interakcje a Javascript
-
Na pomoc głównemu wątkowi - techniki optymalizacji
-
Ogólnie o optymalizacji interakcji i kodzie
-
-
4
PRZYKŁADY OPTYMALIZACJI
-
INP a dzielenie długiego zadania (Long Task) + zadanie dla Ciebie
-
INP a Cookie Consent Manager - przykład 1
-
INP a Cookie Consent Manager - przykład 2
-
INP a linki z wysyłaniem zdarzeń do GTM
-
INP a otwieranie menu
-
INP a dropdown na stronie (Svelte)
-
INP a niezoptymalizowana wydajność ładowania
-
INP a Google Tag Manager
-
INP a Google Tag Manager - nadpisanie dataLayer.push celem zoptymalizowanej wysyłki zdarzeń
-
INP a React
-
INP a wyszukiwarka (React/Next.js)
-
INP a popupy/dialogi
-
UWAGA!
-
-
5
PODSUMOWANIE / KONTAKT / PYTANIA
-
Podsumowanie kursu + kilka porad
-
Certyfikat ukończenia kursu
-
Kontakt
-
Jak Twoje wrażenia po kursie?
-