WordPress

Next.js

Astro

Wprowadzenie - kim jestem i o czym jest ten kurs

Idea kursu i projekty do wyboru

Metryki wydajności: TTFB, RTT, FCP, LCP, CLS, INP

Skąd brać wartości metryk: dane field vs dane laboratoryjne

Źródła danych i narzędzia do optymalizacji

Kultura wydajności i performance budget

AI a optymalizacja: dlaczego sam prompt "popraw wydajność" nie wystarczy

Proces audytu: waterfall, strategie renderowania i serwer

Run-time performance: co dzieje się po załadowaniu strony

Typy nawigacji / zachowania użytkowników

Interakcje, INP i agenty AI

Ora.ai - audyt gotowości strony dla agentów AI

Metryki w praktyce: TTFB i jej składowe (DNS, TCP, TLS, HTTP)

Metryki w praktyce: progi LCP, CLS i INP

Filozofia optymalizacji: na co masz wpływ, a na co nie

Priorytetyzacja zasobów i waterfall frontend/backend

Optymalizacja z AI: podsumowanie procesu i gdzie testować

Narzędzie ngrok i pierwsze zadanie

Wydajność jako system w zespole IT / SEO

Wyniki biznesowe a poprawa wydajności

Spotkanie na żywo

Zadanie

Case study na żywo: dlaczego LCP ma 4s, przy szybkim czasie FCP (zagadka early hints)

Full-stack podejście: żądanie HTTP jest wszędzie

Pełny łańcuch: od żądania HTTP do piksela

DNS lookup: jak przyspieszyć rozpoznanie domeny

Szyfrowane połączenie: TLS/SSL i wersje HTTP

CDN na przykładzie Cloudflare

Backend: co dzieje się po stronie serwera (WordPress, Next.js, TTFB)

Frontend: krytyczna ścieżka renderowania

Zadanie

Spotkanie na żywo

Wprowadzenie: toolbox i podział testów (lab vs field)

PageSpeed Insights

Lighthouse lokalnie: profil optymalizacyjny i kalibracja throttlingu

Web Performance Planner

CrUX i CrUX Vis

Google Search Console: statystyki indeksowania a wydajność

Real User Monitoring: idea, providerzy, MCP

Chrome DevTools: Performance Panel

Chrome DevTools: Network Panel

Chrome DevTools: Overrides

Chrome DevTools: Snippets

WebPageTest

Terminal

Field data vs testy syntetyczne

Proces: praca z RUM i priorytetyzacja problemów

Workflow audytu z klientem krok po kroku

Podsumowanie

Zadanie

Spotkanie na żywo

Wprowadzenie: fundament audytu i własny proces

Co mieć przygotowane: strona, kod, AI asystent

AI skills i serwery MCP

Dostęp do kodu i warstwy pomiaru (lab/field)

Własny tool: fundament, agenda i dwa tryby pracy

Strona pod domeną i pierwszy widoczny problem TTFB (demo projektu)

Real User Monitoring: instalacja i pierwsze dane

CrUX i Google Search Console

DevTools MCP / Safari MCP: instalacja

RUM MCP (na przykładzie DebugBear): instalacja i autentykacja

Demo RUM MCP: pytanie o bottleneck i interpretacja przez AI

webperf snippets jako AI Agent Skills

AI Skills pod stack: Vercel, WordPress, Astro/Shopify

Implementacja fundamentu AI Web Performance

Typy podstron i testy WebPageTest

Uruchomienie audytu AI i budowa site-profile.md

Wyniki WebPageTest (JSON) i baseline w audycie AI

RUM i CrUX w audycie, wnętrze DebugBear

Podsumowanie: pierwszy etap audytu i co dalej

Zadanie

Spotkanie na żywo

Wprowadzenie: plan sesji i warstwa sieciowa

Optymalizacja DNS: anycast i po co Cloudflare

Pomiar DNS lookup: DevTools, WebPageTest, RUM

Cloudflare DNS: nameservery, rejestrator vs provider, TTL i checklista

Szyfrowane połączenie: TLS 1.3 i session resumption

Audyt SSL/TLS

HSTS: usunięcie redirectu HTTP na HTTPS

Protokół HTTP/2 i HTTP/3

Rozgrzewanie połączenia: preconnect i DNS prefetch

Atrybut crossorigin przy preconnect

Plan części praktycznej

Rozbudowa AI Audytu: warstwa sieciowa

Uruchomienie audytu i budowa stage preconnect

Wyniki audytu sieciowego i rekomendacje

Przeniesienie DNS do Cloudflare

Włączenie TLS 1.3 na Nginx (przykład)

Debugowanie błędu SSL (przykład)

Podsumowanie sesji

Zadanie

Spotkanie na żywo

Wprowadzenie - temat warsztatu

Wpływ Cloudflare DNS na DNS Lookup

Status DNS only, włączenie proxy i tryby SSL/TLS

Certyfikat Origin - generowanie, bundle i konfiguracja Nginx

Edge Certificates - minimalna wersja TLS i HSTS

Protocol Optimization - HTTP/3, priorytetyzacja, 0-RTT

Content Optimization - Speed Brain, Cloudflare Fonts, Early Hints

Rocket Loader, APO i optymalizacja obrazków

Real User Monitoring w Cloudflare

Boty, Bot Fight Mode, Email Obfuscation i Analytics

Argo Smart Routing

Warstwy cache'a i browser cache TTL

Cache Rules i full page caching w praktyce

Tiered Cache

Zadanie

Spotkanie na żywo

Wprowadzenie - temat warsztatu i kolejność optymalizacji

Najpierw serwer: zasoby serwerowe, architektura

Case study: dwie strony WP, WPForms i opcache

Hosting: współdzielony vs VPS/managed

Serwery HTTP: Nginx, Apache, LiteSpeed i LiteSpeed Cache

Wersja PHP a wydajność

OPcache

PHP Workery i PHP-FPM: tryby i max-children

Baza danych: wersja i silnik tabel (InnoDB)

Object cache i cache maskujący słaby serwer

Testowanie pod obciążeniem: Apache Bench

Skrypt diagnostyczny serwera (WordPress / aplikacje PHP)

New Relic APM

Query Monitor (WordPress)

Code Profiler Pro (WordPress)

wp-config i runtime WordPressa

Novamira MCP - WordPress jako serwer MCP

Optymalizacja backendu przez SSH i AI

Tryby renderowania: SSG, ISR, PPR, SSR, CSR - trochę teorii

Renderowanie a Next.js lub WordPress, CDN i mieszanie trybów

Demo ISR: stale-while-revalidate (SWR)

Demo PPR (streaming) i SSR

Demo mieszania trybów: e-commerce ISR i koszyk client-side CSR

Waterfall "backendu na frontendzie" w Sentry

Sentry i AI: logowanie GraphQL, analiza kodu i fix

Tryb renderowania jako właściwy fix (SSR-ISR) i podsumowanie

Server Timing API

Zadanie

Spotkanie na żywo

Wyniki optymalizacji: zmiana SSR na ISR w projekcie Next.js (demo)

Cache jest królem - wprowadzenie i warstwy cache'a

Strategie cache'owania, nagłówki cache-control i inwalidacja

Next.js i Cloudflare: cache dokumentu HTML na CDN

WordPress: pomost backend-frontend-edge i wybór W3 Total Cache

WordPress W3 Total Cache: warstwy, page cache, wykluczenia i preload

WordPress W3 Total Cache i Cloudflare: reguła cache dla WordPressa (full page HTML)

Cloudflare APO: integracja, instalacja, konfiguracja i inwalidacja

Astro i inne frameworki + podsumowanie

Zadanie

Spotkanie na żywo

Wprowadzenie - od backendu do krytycznej ścieżki renderowania

Trzy filary: mniej, później, warunkowo

Im mniej tym lepiej - warstwa transferu i renderowania

Waterfall: pytania do zasobów Above The Fold i linia start render

Od HTML do pikseli: DOM, CSSOM i skrypty blokujące parser

Co blokuje start renderowania: CSS i skrypty

Błędy 404 i niedostępne hosty zewnętrzne

Wodospad a aktywność głównego wątku

Czytanie wodospadu w praktyce: pojedyncze pliki i uskok head/body

Pętla optymalizacji i audyt bez dostępu do kodu źródłowego

WebPageTest Experiments i DevTools Overrides

Cel dla agenta AI: dane, priorytety i podział na etapy

Wiarygodność pomiarów: kilka prób, mediana, zimny cache

AI Audyt w kursie - etap startu renderowania

Demo: dwa projekty - WooCommerce i Next.js

Prompt do analizy startu renderowania - omówienie etapów

LIVE DEMO - audyt startu renderowania z AI (stage 1-5)

Podsumowanie CRP: field, lab, test AB i wdrożenie

LIVE DEMO REZULTAT: jak agent AI sobie poradził z optymalizacją startu renderowania?

Zadanie

Spotkanie na żywo

Spotkanie na żywo

Zadanie

HTML, DOM, CSS i CSSOM - dlaczego HTML jest pierwszy?

DOM a HTML - koszt głębokiej struktury

Jak zbadać DOM i co dziś mówi Lighthouse

Demo: Optimize DOM Size w praktyce - od PageSpeed Insights/Lighthouse do werdyktu

Rekomendacje: o czym pamiętać przy optymalizacji struktury DOM

Zajrzyj do dokumentu HTML: beautify i analiza

Prosty HTML dla botów i AI crawlerów

CSS jako zasób blokujący renderowanie

Minifikacja i łączenie plików CSS

Asynchroniczny CSS przez media="print"

Inline CSS w sekcji head i Early Hints

Krytyczny CSS - kiedy ma sens, a kiedy szkodzi

content-visibility w CSS - leniwe renderowanie

Jak piszesz CSS - selektory, rekalkulacja stylów i NodeList

CSS Selector Stats w DevTools i podsumowanie

JavaScript to najdroższy zasób - cztery koszty każdego skryptu

Cztery tryby skryptów: sync, async, defer i module

Async i defer w praktyce

Gdzie umieszczać skrypty JS?

Ukryta zależność JavaScriptu od CSS

Drzewo decyzyjne dla każdego skryptu na stronie

Audyt listy skryptów - co usunąć i jak w tym pomaga AI

Warunkowe ładowanie i ładowanie po interakcji

Minifikacja i łączenie JSów

Rozmiar bundla - code splitting, tree shaking i coverage

Barrel files - cichy zabójca podziału kodu

Ile waży biblioteka i co siedzi w bundlu

Polyfille i ładowanie zależne od urządzenia i łącza

Jak JavaScript wpływa na LCP i INP

Skrypty zewnętrzne - czego nie kontrolujesz

SPOF, realny koszt third party i kaskada Google Tag Manager

Blokowanie requestów jako szybka walidacja

Opóźnianie Google Tag Managera do pierwszej klatki

Ładowanie i wykonywanie JS po pierwszej interakcji

Rozgrzewanie połączeń - preconnect i dns-prefetch

Audyt tagów Google Tag Managera z AI

Patch na dataLayer - Google Tag Manager a INP

Zadanie

Spotkanie na żywo

Obrazki to zwykły zasób - cztery pytania i cztery dźwignie

Upload time kontra delivery time - gdzie optymalizować obrazki

Responsywne obrazki - srcset, sizes=auto, picture

img kontra background-image - dlaczego tło startuje później

SVG i ikonki - inline, img czy sprite map

base64 i data URI

width i height - rezerwacja przestrzeni dla obrazka

Hero image jako LCP - priorytet, własna domena, preconnect

CDN obrazkowy - zysk, koszt i praktyczna reguła podziału

Lazy loading - natywny, pułapka iframe'ów, LCP i decoding=async

Ukryty koszt transformacji po stronie serwera (przykład Next.js)

Wideo natywne - kompresja i atrybut poster

GIF kontra wideo - dlaczego zawsze wideo

Jak ładować natywne video na stronie

YouTube i Vimeo - tryb fasadowy zamiast zwykłego iframe'a

Zadanie

Spotkanie na żywo

Dlaczego fonty są problematyczne - FOIT, FOUT i skok układu

Trzy typy fontów: systemowe, self-hosted i zewnętrzne

Jak przeglądarka odkrywa font - @font-face, kolejka, @import i preload

Demo pięciu wariantów ładowania fontów - waterfalle, wyniki i wnioski

Krytyczny CSS kontra preload i audyt fontów webperf snippetem

font-display - swap, pułapka CLS i pozostałe wartości

Self-hosting fontów i Cloudflare Fonts

Waga fontów - tylko potrzebne grubości i variable fonts

Subsetting, woff2, unicode-range i licencje fontów

Cache'owanie fontów

Fonty ikonkowe - co z nimi?

WordPress i page buildery - must-use plugin do preloadu fontu (case study)

Frameworki - Next.js, React i weryfikacja na waterfallu

Zadanie

Spotkanie na żywo

Cookie pop-up jako konflikt: prawo, analityka i performance

Jakie metryki psuje cookie pop-up - LCP, start renderowania, INP

Oficjalna instrukcja dostawcy i dlaczego celowo blokuje parser

Gotowy provider czy własny pop-up - GTM i Consent Mode v2

Performance'owe minimum - atrybut defer i kolejność skryptów

Rekomendacja: cookie pop-up + GTM

Gdy pop-up zostaje elementem LCP - render off-screen w CSS

INP na przycisku zgody - priorytet zmiany wizualnej przed kaskadą tagów

Hack z nakładką na przycisk zgody w Google CMP

Zadanie

Spotkanie na żywo

Łańcuch wydajności a AI - gdzie realnie pomaga na każdym etapie

Pętla optymalizacji z AI - wdrożenie na serwer i cel dla agenta

Rozbiór promptu - goal, WebPageTest JSON, MCP i automatyczny deploy

Baseline, godzina pracy agenta i wyniki - Lighthouse score 36/100 -> 83/100

Czy to było tego warte - bilans kosztu i przegląd zmian agenta

Cena podejścia całościowego i konkluzja AI goals

Czym naprawdę jest optymalizacja interakcji?

Anatomia INP: co musisz wiedzieć

Input delay a ładowanie strony - wczesne interakcje i główny wątek

Long task - dzielenie zadania w JS

Web worker - ciężka logika poza głównym wątkiem

Optimistic UI - wizualna odpowiedź przed zapisem

Cookie banner a INP - przycisk zgody i kaskada skryptów

Google Tag Manager i eventy na kliknięciu - diagnoza, poprawka i test na żywo

CSS, rekalkulacja stylów i struktura DOM a czas interakcji

Które interakcje mierzyć - lab, agent AI i rzeczywiści użytkownicy

Optymalizacja INP z RUM i agentem AI - od danych z produkcji do wdrożenia

Zadanie

Spotkanie na żywo

Runtime performance: co strona robi po załadowaniu i jak odroczyć ciężki komponent

Długie zadania, Total Blocking Time i namierzanie winnego chunka

Rekomendacje DevTools i minimum dla WordPressa: content-visibility

Komponent below-the-fold w Next: dynamiczny import karuzeli

Hydracja: HTML jest, ale strona jeszcze nie działa

Re-rendery w React i React Scan na żywo

React Doctor: audyt kodu i poprawki przez agenta AI

React Compiler: czy warto?

Back/Forward cache (bfcache): test w DevTools i Navigation Types w CrUX

Prefetch w Next.js: czy na pewno musisz pobierać wszystkie linki

Speculation Rules: natywny prefetch i prerender

Zadanie

Zadanie specjalne (dotyczy tylko projektu Next.js)

CLS: zero, o które warto walczyć

Użytkownik: kliknąłem nie w to, co chciałem...

Kiedy przesunięcie jest w porządku

Lista podejrzanych w walce z CLS

Test pokazał CLS = 0. I co z tego?

Jak poprawić CLS?

Śledztwo na żywej stronie (przykład optymalizacji CLS #1)

Winowajca siedział w jednym widgecie (przykład optymalizacji CLS #2)

Reklamy a CLS (przykład optymalizacji CLS #3)

Zadanie

Spotkanie na żywo

Płynność, 60 fps i jank

Na co patrzeć i pipeline renderowania

Warstwy: jak je podejrzeć i kiedy element dostaje własną

Reflow, repaint i efekty, które psują płynność

Narzędzia w DevTools: Paint Flashing, Frame Rendering Stats, Performance Panel

Long Animation Frames API i atrybucja

Czego nie animować: width, height, left itp. a faza layout

Repaint: co kosztuje malowanie i tanie opacity

Transform i opacity: dlaczego composite jest "tani" przy animacjach

Promowanie warstw i will-change w CSS i JS

JavaScript: requestAnimationFrame, layout thrashing, CSS kontra JS

View Transitions API

Scrollowanie i animacje poza ekranem

prefers-reduced-motion, content-visibility i AI w pętli

Zadanie

Spotkanie na żywo