Optymalizuj Core Web Vitals stron i aplikacji webowych z AI.

Full-stackowe spojrzenie na cały łańcuch: od kliknięcia w przeglądarce, przez DNS/TLS/CDN i backend, po krytyczną ścieżkę renderowania. Każde ogniwo to potencjalne wąskie gardło.

Przegląd całego toolboxu: PSI, Lighthouse, CrUX, RUM, DevTools, WebPageTest. Kiedy ufać testom labowym, a kiedy szukać prawdy w danych RUM od realnych użytkowników.

Jak podłączyć AI do przeglądarki i danych RUM, żeby diagnozowało problemy zamiast Ciebie. Chrome DevTools MCP, RUM MCP, AI Skills (CWV Superpowers) - prompting i context engineering w praktyce.

Pierwsza warstwa wydajności: DNS lookup, TLS handshake i wersja HTTP odpowiadają za to, jak szybko w ogóle zacznie się rozmowa z serwerem. Anycast DNS, TLS 1.3, session resumption, HSTS, HTTP/2 i HTTP/3.

Wdrożenie Cloudflare jako fundamentu edge - DNS, TLS, HTTP/3, sieć anycast i cache statyki w jednym panelu. Zasada: najpierw edge, potem głębiej.

SSG/ISR/PPR/SSR/CSR - co i kiedy wybrać i dlaczego strategii się nie wybiera raz, tylko miesza. W tle: czemu cache nie naprawia wolnego backendu, tylko go ukrywa. WordPress: Query Monitor i Code Profiler PRO z AI w roli interpretatora.

Pełna układanka cache: po stronie aplikacji, na serwerze i na edge Cloudflare. Cache rules, stale-while-revalidate, invalidation po deploy'u - jak nie strzelić sobie w stopę.

Trzy filary optymalizacji frontu: mniej, później, warunkowo. Audyt waterfalla z AI - każdy zasób musi obronić swoje miejsce przed Start Render.

Krytyczna ścieżka renderowania od strony HTML i CSS - rozmiar DOM, render-blocking arkusze, technika media="print", critical CSS, async loading. Mniejszy HTML to też lepsze crawlowanie i odczyt przez LLM-y.

defer/async, conditional loading, on-interaction - JS jako parser-blocking i jednocześnie główny winowajca INP. Audyt 3rd-party i GTM: które tagi naprawdę żyją + patch na dataLayer.push.

Optymalizacja w dwóch momentach - upload-time (kompresja, WebP/AVIF) i delivery-time (edge resize per device). Wideo jako LCP, background-image w CSS i pułapka lazy loading dla iframe YouTube.

font-display: swap i pułapka CLS przy podmianie metryk, self-hosting, preload tylko above-the-fold, variable fonts i subsetting. Mniej rodzin i wag = szybsza treść.

Konflikt: skrypt musi być wcześnie (RODO), ale jest ciężki i często rujnuje LCP/INP. Consent Mode V2, GTM jako loader CMP, CSS trick z opóźnieniem wizualnego pojawienia bannera.

Co realnie blokuje główny wątek przy kliknięciu i jak rozbić długie taski - scheduler.yield(), setTimeout(0), web worker, optimistic UI. Diagnoza interakcji przez DevTools MCP + AI.

Co dzieje się po pierwszym renderze - hydracja Reacta, koszt re-renderów, podział na chunki. react-scan jako diagnostyka, Astro jako kontrapunkt (islands architecture, partial hydration).

Skąd biorą się skoki layoutu - obrazki bez wymiarów, fonty, dynamiczne treści, embedy, banery. Diagnoza CLS z DevTools MCP - precyzyjnie który element przesuwa stronę i kiedy.

Animacje na GPU vs. blokowanie głównego wątku - transform/opacity zamiast top/left, will-change z głową, kompozyt zamiast paintu. Co realnie kosztuje 60fps i kiedy nie warto.

Domknięcie kursu - pytania, podsumowanie, dalsze kroki. Pokaz "przed/po" w projektach uczestników na konkretnych metrykach RUM.