Course curriculum

  • 1

    WPROWADZENIE

    • Powitanie & po co to szkolenie?

    • Wymagania

    • Core Web Vitals a SEO

    • Specjalista SEO a developerzy

    • Podstawy techniczne SEOwca

    • Wprowadzenie przed materiałami z Zoptymalizowanego Frontendu (ZF)

    • -- (ZF): Przeglądarka i proces renderowania

    • -- (ZF): Krytyczna ścieżka renderowania

    • -- (ZF): Zrozumieć przeglądarkę i CRP (load perf)

    • -- (ZF): Zrozumieć przeglądarkę i CRP (runtime perf)

    • Struktura audytu i raportu
  • 2

    AUDYT - część I: ustalenia

    • Rekonesans

    • Ustalenie założeń

    • Cel audytu + zakres/metodologia badania
  • 3

    AUDYT - część II: zbieranie danych wydajnościowych

    • Zbieranie danych CrUX: co, jak & dlaczego

    • Zbieranie danych: RUM

    • Zbieranie danych: testy syntetyczne
  • 4

    AUDYT - część III: analiza techniczna stron

    • Pierwsze wnioski podczas analizy technicznej

    • Checklista podczas badania wydajności

    • TTFB: analiza pierwszego żądania na stronie

    • RTT i korelacja z TTFB

    • Start Render + FCP: analiza krytycznej ścieżki renderowania

    • Testowanie/prototypowanie optymalizacji krytycznej ścieżki renderowania

    • Inne możliwości eksperymentowania w kodzie

    • Organizacja sekcji HEAD

    • CSS: co sprawdzać i rekomendować

    • JS: co sprawdzać i rekomendować

    • Waterfall - błędy 404

    • Waterfall - zewnętrzne domeny

    • Logo a krytyczna ścieżka renderowania

    • Preloading: co sprawdzać i rekomendować

    • Priorytet ładowania zasobów - analiza

    • Fonty

    • Obrazki

    • Wideo

    • Analiza LCP

    • Analiza CLS

    • Tag Managers / skrypty zewnętrzne

    • Opóźnianie ładowania zasobów

    • Analiza INP

    • -- Wydajne Interakcje: INP a dzielenie długiego zadania (Long Task)

    • -- Wydajne Interakcje: INP a Cookie Consent Manager

    • -- Wydajne Interakcje: INP a przycisk zgody w CMP od Google'a

    • -- Wydajne Interakcje: INP a Google Tag Manager - nadpisanie dataLayer.push celem zoptymalizowanej wysyłki zdarzeń

    • Typy nawigacji (navigate, navigate_cache, back_forward, prerender itd.)
  • 5

    AUDYT - część IV: raport z audytu

    • MEGA WAŻNE: Audyt i raport w dobie AI

    • Przykład 1: audyt / raport

    • Przykład 2: audyt / raport - intro

    • Przykład 2: audyt / raport

    • Przykład 3: audyt / raport

    • Przykład 4: audyt / raport - intro

    • Przykład 4: audyt / raport

    • Przykład 5: audyt / raport - ZADANIE DLA CIEBIE!
  • 6

    ZAKOŃCZENIE

    • Słowo na koniec