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?