Zoptymalizowany Frontend AI Labs
Dla ludzi. Dla SEO. Dla agentów AI.
Warsztaty live. Start 30.06.2026.
Warsztaty live. Start 30.06.2026.
Twoja strona jest wolna.
Twoi konkurenci są szybsi.
AI crawlery omijają wolne strony szybciej niż Google omija slow sites. Każde 100ms latencji to mniej ludzi, mniej widoczności i mniej cytowań w wynikach AI search.
Ad-hoc optymalizacja, na czuja, raz na kwartał.
Pomiary z PageSpeed Insights raz na miesiąc. Brak RUM-a, brak waterfalla, brak procesu. AI używasz do generowania boilerplate'u, nie do diagnozowania bottlenecków.
Powtarzalny proces. AI w pętli pracy. Wdrażalne zadania.
RUM podpięty do dashboardu. Hipotezy testowane w DevTools MCP. Każda sesja kończy się wdrożoną zmianą w Twoim projekcie. Proces, który zadziała na każdym kolejnym kliencie.
To nie kurs o AI.
To kurs o wydajności prowadzony z AI w pętli pracy.
„Labs" znaczy laboratorium. AI to narzędzie laboratoryjne, nie obiekt badań. Oto sześć miejsc, w których używamy go w każdej sesji.
RUM + MCP
Podpinamy RUM przez MCP np. do Claude'a (lub innego agenta) i zadajemy pytania danym tak, jak SQL-em, np. „pokaż mi top 10 ścieżek z najgorszym INP w ostatnich 7 dniach". W akompaniamencie AI skills i konkretnych instrukcji, stworzymy od razu poprawki w kodzie.
Chrome DevTools MCP + Chrome Snippets
Waterfall, INP, LCP i CLS analizujemy z AI - to ono uruchamia i automatyzuje pracę na DevToolsach oraz Snippetach. Hipoteza → wykonanie → pomiar → następna hipoteza, w jednej pętli.
Analiza backendu z AI
Wolny backend = wolny frontend. Z AI czytamy trace'y z New Relic, Sentry, Code Profiler PRO czy Query Monitor i lokalizujemy wąskie gardło w minuty, nie godziny.
AI w review zmian
Każda optymalizacja idzie przez review z AI: czy zmiana nie wprowadza CLS-a, czy nie blokuje renderu, czy nie psuje a11y.
AI generuje hipotezy
Z danych RUM-u AI proponuje, co prawdopodobnie najbardziej obniży INP / podniesie LCP - z uzasadnieniem i kosztem wdrożenia.
Gotowe Agent Skills od dużych graczy
Sięgamy po AI skills rozwijane przez społeczność i platformy - Vercel React Best Practices, WordPress Skills i inne. Twoje AI ma od razu kontekst stacku.
Latencja jako sygnał jakości dla AI search
AI crawlery (Perplexity, ChatGPT search, Claude) odpadają na timeoutach lub po prostu na zbyt długim czasie oczekiwania szybciej niż Google. Optymalizujemy nie tylko dla ludzi i SEO, ale dla kolejnego stakeholdera, który dopiero się pojawił.
Trzy persony. Jeden wspólny warsztat.
Frontend developer
Piszesz w React, Astro, Vue lub Vanilla JS. Chcesz proces, który zadziała w każdym kolejnym projekcie - i workflow z AI w pętli.
- Strategie renderowania, hydracja, JS chunks
- INP, CLS, LCP z DevTools MCP
- Praca z waterfall'em i Code Profilerem
SEO techniczny
Wiesz, że Core Web Vitals to ranking signal, ale chciałbyś móc wskazać developerowi konkretne miejsce do poprawy, nie ogólne „popraw LCP".
- Czytanie waterfall'a, request-by-request
- DNS / TLS / HTTP - co realnie zmienić
- AI crawlery i ich wrażliwość na latencję
Dev / SEO / AI hybryda
Robisz wszystko po trochu - performance, SEO, agenty AI w workflow. Szukasz spójnego procesu, który łączy te światy w jedną dyscyplinę.
- MCP jako warstwa łącząca dane i działanie
- Repo z case'ami do treningu na własnych klientach
- Społeczność tych, którzy myślą podobnie
To nie jest warsztat dla początkujących. Zakładamy znajomość HTML/CSS/JS, terminala, gita i jednego z trzech stacków: Next.js, WordPress z page builderem lub Astro.
Krótkie omówienie. Warsztat live. Wdrożone zadanie.
Wtorki i czwartki o 8:30. Maksymalnie 1.5h. Zaczynamy 30.06.2026.
Nie możesz być na żywo? Spokojnie, obejrzysz nagranie.
Warsztat live (~45 min.)
Optymalizacja na żywo na Zoomie. Pokazuję case na bazie Next.js, WordPressa lub Astro - Ty pracujesz w swoim projekcie. AI w pętli pracy.
Q&A & krótkie zadanie do wdrożenia
Twoje pytania, konkretne, mierzalne zadanie wdrażalne na żywo lub do następnej sesji. Sprawdzimy efekt w RUM-ie.
Nagranie
Wszystko trafia do biblioteki nagrań. Dostęp przez 12 miesięcy od startu.
Macie TV w biurze? Włączcie sesję zespołowo.
Performance czyta się lepiej kolektywnie. Odpalcie warsztat na biurowym ekranie, oglądajcie razem i omawiajcie wnioski u siebie zaraz po sesji.
Webinary live i laboratoria wydajności.
Teraz cyklicznie - z Q&A i zadaniami.
Webinary live i „Laboratorium wydajności" to dwa formaty, które przez lata zebrały najlepszy feedback. Zoptymalizowany Frontend AI Labs to ten sam format - tylko cykliczny, z sesjami Q&A i mierzalnymi zadaniami do wdrożenia.
+ dziesiątki webinarów na YouTube ↗
19 sesji live.
Dziesiątki technik.
Jeden proces.
Każdy duży temat (DNS, fonty, obrazki, INP, CLS i wiele innych) ma swoje miejsce w agendzie. Po kursie wracasz do „lekcji o fontach" i tam masz wszystko, czego potrzebujesz - nie szukasz po blokach stackowych.
Kick-off: web performance + Frontend a AI
Wprowadzenie do filozofii zoptymalizowanej strony - jak myśleć o wydajności holistycznie, od TTFB po INP, z AI jako stałym narzędziem pracy. Temat towarzyszący: llms.txt, WebMCP i AI w workflow optymalizacji.
Co zrobisz: Postawisz projekt lokalnie i przetestujesz go pod publicznym adresem przez ngrok - od pierwszej sesji pracujesz na środowisku, które odwzorowuje realne warunki sieciowe.
Od żądania HTTP do renderu na froncie
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.
Co zrobisz: Kupisz domenę, postawisz projekt na własnym serwerze i ustawisz deployment - od tej sesji testy uwzględniają latencję sieci, a nie tylko localhost.
Narzędzia do testowania wydajności
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.
Co zrobisz: Zainstalujesz RUM na swojej stronie i uruchomisz pierwsze testy WebPageTest - zaczniesz zbierać dane od prawdziwych użytkowników, nie tylko z symulacji.
Testowanie wydajności z AI
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.
Co zrobisz: Podepniesz RUM MCP i DevTools MCP do swojego narzędzia AI - pierwsza diagnoza waterfalla i Core Web Vitals z AI w roli partnera, nie tylko czata.
Optymalizacja DNS, TLS/SSL i HTTP
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.
Co zrobisz: Ustalisz, jaki DNS provider obsługuje Twój projekt, zmierzysz DNS lookup, czas fazy SSL/TLS i sprawdzisz, jaką wersją HTTP serwujesz - z konkretnymi liczbami z DevTools i WebPageTest.
CDN / Edge na przykładzie Cloudflare
Wdrożenie Cloudflare jako fundamentu edge - DNS, TLS, HTTP/3, sieć anycast i cache statyki w jednym panelu. Zasada: najpierw edge, potem głębiej.
Co zrobisz: Postawisz Cloudflare na swoim projekcie i świadomie skonfigurujesz DNS, SSL/TLS (Full Strict, 0-RTT), Speed i podstawowe cache - zweryfikujesz wszystko nagłówkami cf-cache-status.
Strategie renderowania i optymalizacja backendu
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.
Co zrobisz: Zmienisz strategię renderowania (Next.js) lub zaaudytujesz backend WP z Code Profiler PRO i AI - z poprawą tam, gdzie konkretnie boli.
CDN i cache (Next/ISR, Astro/ISR na Netlify, WP + W3TC)
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ę.
Co zrobisz: Sprzęgniesz Cloudflare CDN z backendem swojego projektu (ISR -> SWR, Cache Rules, W3TC) - cały łańcuch cache dopasowany do strategii renderowania.
Optymalizacja startu renderowania frontendu
Trzy filary optymalizacji frontu: mniej, później, warunkowo. Audyt waterfalla z AI - każdy zasób musi obronić swoje miejsce przed Start Render.
Co zrobisz: Wyczyścisz waterfall własnego projektu - usuniesz 404 i błędne hosty zewnętrzne, zmienisz strategie ładowania kluczowych zasobów (lazy/defer/async).
HTML + DOM + CSS
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.
Co zrobisz: Zminifikujesz HTML i CSS, zdejmiesz render-blocking z arkuszy ikon, formularzy i sliderów - FCP i LCP startują wcześniej, mierzalnie.
JS + skrypty zewnętrzne (w tym Google Tag Manager)
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.
Co zrobisz: Odsuniesz skrypty zewnętrzne za FCP (lub odpalisz dopiero po interakcji) i wdrożysz dataLayer fix dla INP - kliknięcia odpowiadają szybciej, GTM nie blokuje pierwszej klatki.
Obrazki i wideo
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.
Co zrobisz: Zoptymalizujesz hero/LCP swojego projektu (priority, srcset, format), dodasz poster do wideo i poprawisz lazy loading tam, gdzie obecnie boli.
Fonty
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ść.
Co zrobisz: Odchudzisz pliki fontów (Transfonter), usuniesz zbędne wagi i dopasujesz fallback metrics przez fonts matcher - CLS przy podmianie fontów znika.
Cookie popup / CMP
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 zrobisz: Zarejestrujesz stronę w Cookiebot, podepniesz pod projekt i zoptymalizujesz wg rekomendacji - banner przestaje być elementem LCP, hero wygrywa wyścig.
Interakcje (INP)
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 zrobisz: Zoptymalizujesz otwieranie mobilnego menu z DevTools MCP + AI z użyciem scheduler.yield - INP w dół, z konkretną liczbą do pochwalenia się w RUM.
JS run-time, hydracja, JS chunks
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).
Co zrobisz: Zredukujesz re-rendery w realnym projekcie React/Next.js przy pomocy react-scan i zobaczysz, jak ten sam UI wygląda w Astro bez kosztu pełnej hydracji.
Stabilny układ (CLS)
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.
Co zrobisz: Zlokalizujesz i naprawisz realne przesunięcia layoutu na swoim projekcie - CLS w zielonej strefie, również przy scrollu, nie tylko na load.
Płynne animacje
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.
Co zrobisz: Przepiszesz animacje w swoim projekcie na compositor-friendly - płynne na średnim mobile, bez janku przy scrollu i hoverach.
FINAL Q&A
Domknięcie kursu - pytania, podsumowanie, dalsze kroki. Pokaz "przed/po" w projektach uczestników na konkretnych metrykach RUM.
Co zrobisz: Wyjdziesz z wymiernym before/after na Core Web Vitals swojego projektu i listą następnych kroków, do których wracasz po kursie.
Trzy stacki, jeden proces. Wybierz swój.
Przykłady i case'y pokazuję na bazie trzech popularnych stacków. Pracujesz w swoim, pozostałe dwa traktuj jako referencję - ten sam proces optymalizacji działa wszędzie.
Next.js
App Router, ISR, Server Components, Edge runtime. Demo z Next.js 15.
WordPress + page builder
Realny WP z popularnym builderem. Code Profiler Pro + W3 Total Cache + Cloudflare.
Astro
Statyka + island architecture. Demo z Netlify, ISR, edge functions.
Bartek Miś.
Web Dev Insider.

Bartek Miś
Twórca kursu „Zoptymalizowany Frontend" i „Wielka Optymalizacja WordPressa", 500+ kursantów. Od 6 lat dzieli się wiedzą przez newsletter, darmowe webinary i występy na konferencjach oraz meetupach. Specjalizacja: web performance, Core Web Vitals i optymalizacja frontendów we wszystkich popularnych stackach.
Po 6 latach kursu „Zoptymalizowany Frontend" zamykamy poprzedni rozdział i otwieramy nowy: warsztaty live z AI w pętli pracy, dla ludzi, którzy chcą działać, a nie tylko oglądać.
Frontend developerzy i SEO specjaliści
z firm, których nie trzeba przedstawiać.
Przez 6 lat kurs Zoptymalizowany Frontend ukończyło ponad 500 osób. Połowa to frontend developerzy, połowa to techniczni specjaliści SEO. Oto firmy, w których pracują.












+ dziesiątki agencji SEO i freelancerów
Co mówią o Zoptymalizowanym Frontendzie.
Zoptymalizowany Frontend AI Labs to nowy projekt, ale prowadzony przez tę samą osobę i z tym samym podejściem do procesu. Tak wyglądały reakcje na poprzedni kurs Zoptymalizowany Frontend.
Kurs Bartka Misia to jedno z najlepszych szkoleń, z jakimi miałem okazję się spotkać. Autor w przystępny sposób wyjaśnia zawiłości Core Web Vitals, które my, specjaliści SEO, często zlecamy developerom. Kurs ułatwia nam komunikację i znacząco podnosi kompetencje w zakresie SEO.
Fantastyczny jest to kurs, nie zapomnę go nigdy. Bartek umiejętnie przekazuje treści w sposób łatwy do zrozumienia, wykorzystując realne przykłady z życia. Zadania domowe były świetnym uzupełnieniem teorii.
Zajmuję się pozycjonowaniem i analityką, więc szukałem sposobu na lepszą komunikację z działem IT. Kurs spełnił wszystkie oczekiwania i pozwolił zbudować solidny most komunikacyjny w firmie.
Forma prowadzenia wymusza własną inicjatywę, nie jest to bierne przepisywanie kodu. Tematy bardzo dogłębnie rozwinięte; widać, że prowadzącemu zależy, aby kursant zrozumiał przyczynę problemu.
Lekcje są zwięzłe i dobrze przemyślane, a każdy moduł kończy się zadaniem w dedykowanym projekcie. Polecam zarówno początkującym, jak i bardziej doświadczonym developerom.
Do tej pory wszystkie moje działania optymalizacyjne nie dawały efektów. Dzięki temu kursowi w końcu zrozumiałem czym są te wskaźniki, jak na siebie wpływają i jak je optymalizować.
Jeden uczciwy model. Dostęp roczny.
Płacisz raz. Masz wszystko: sesje live, nagrania, repozytoria, Q&A i społeczność uczestników przez 12 miesięcy, wraz z aktualizacjami.
- 19 sesji live na Zoom (wt + czw, 8:30, ~1.5h)
- Nagrania wszystkich sesji - dostęp przez rok
- Transkrypty + pliki .md z każdej sesji (gotowe pod AI)
- Zadanie do wdrożenia po każdej sesji
- Repozytoria kursowe
- Q&A live tylko dla zapisanych
- Społeczność uczestników
- Wszystko z opcji dla nowych uczestników
- Weryfikacja na podstawie adresu email z ZF
- Pierwszeństwo w zapisach
- Dedykowany kanał w społeczności
Co musisz zrobić w ramach warsztatów?
Zdejmujemy zaskoczenie po zakupie. To będzie do zrobienia po pierwszych sesjach.
Środowisko lokalne
Bazowy zestaw, żeby mieć projekt postawiony lokalnie i móc swobodnie nanosić zmiany: Git + GitHub, Node.js + npm, dostęp do dowolnego AI asystenta (Claude Code, Codex, Antigravity i inne - pełna dowolność).
Domena i serwer
To środowisko, na którym wdrażasz swój projekt - po to, żeby realnie konfigurować DNS, serwer, Cloudflare i cache. Dzięki temu poznajesz wydajność w pełnym kontekście: sieci, latencji i infrastruktury, a nie wyłącznie z poziomu kodu w przeglądarce.
Możesz albo zainstalować na jakimkolwiek serwerze VPS lub managed hostingu (np. Cloudways, DigitalOcean, AWS, Mikr.us), albo ja zainstaluję Twój projekt u siebie na serwerze szkoleniowym na czas warsztatów (za darmo) - wygodne, ale tracisz wtedy część zabawy z samodzielną konfiguracją infrastruktury. Musisz mieć natomiast przynajmniej własną domenę (najtańsza to koszt ok. 90 gr). Jeśli myślisz o Netlify / Vercel - w porządku, ale pominiesz wtedy samodzielną konfigurację Cloudflare, bo ci dostawcy mają swój własny edge.
Instalacja jednego z 3 projektów
Wybierasz jeden: Next.js, WordPress z page builderem lub Astro. Repo dostajesz po zakupie i stawiasz projekt w dwóch miejscach: na środowisku lokalnym z Kroku 01 oraz na serwerze z Kroku 02, pod własną domeną.
Najczęstsze pytania.
Start 30.06.2026.
19 sesji. AI w pętli. Twoje projekty na żywo.
Dołącz przed 30.06 i zacznij od pierwszej sesji. Projekt instalujesz w ramach zadań po sesjach.




