Szkolenie Wydajność aplikacji

Użytkownik nie czyta raportu z Lighthouse, tylko czuje, że strona długo się ładuje, przycisk reaguje z opóźnieniem, a treść skacze pod palcem. Google widzi to samo w danych z prawdziwych urządzeń i uwzględnia w wynikach wyszukiwania.

Na szkoleniu najpierw mierzysz, potem poprawiasz, a na koniec sprawdzasz, czy zmiana rzeczywiście coś dała. Pracujesz na narzędziach, które wskazują miejsca warte optymalizacji, zamiast zgadywać, gdzie aplikacja traci czas. Wychodzisz z listą poprawek uszeregowaną według zysku dla LCP, INP i CLS Twojej aplikacji.

Program

2 dni

• Jak mierzyć wydajność
  • Dane laboratoryjne a dane z prawdziwych urządzeń (RUM, CrUX)
  • Core Web Vitals: LCP, INP, CLS
  • TTFB: kiedy problem leży po stronie serwera
  • Budżet wydajności dla projektu
• Lighthouse i PageSpeed Insights
  • Lighthouse 13: audyty „insights” wspólne z panelem Performance
  • Czytanie raportu i priorytetyzacja zaleceń
  • Lighthouse CI jako strażnik regresji
• DevTools
  • Panel Performance: main thread, long tasks, flame chart
  • Metryki na żywo i porównanie z danymi CrUX w panelu Performance
  • Panel Network: waterfall, priorytety zasobów, throttling
  • Coverage: nieużywany kod JavaScript i CSS
• Ścieżka krytyczna renderowania
  • Zasoby blokujące render
  • preload, preconnect, fetchpriority
  • Fonty: font-display, subsetting, self-hosting
• JavaScript
  • Code splitting i dynamiczny import()
  • Analiza bundla i usuwanie ciężkich zależności
  • Diagnoza INP: Long Animation Frames w Chromium
  • Dzielenie długich zadań przez scheduler.yield() z fallbackiem dla Safari
  • Praca poza głównym wątkiem: Web Workers (pokaz)
• Obrazy i wideo
  • Formaty AVIF i WebP, srcset i sizes
  • Lazy loading i rezerwowanie miejsca (width, height)
• Cache i sieć
  • Nagłówki Cache-Control, wersjonowanie plików
  • CDN, kompresja Brotli i Zstandard, HTTP/2 i HTTP/3
  • bfcache: co blokuje powrót do strony z pamięci przeglądarki
  • Speculation Rules (tylko Chromium) do natychmiastowej nawigacji
  • Service Worker jako cache aplikacji
• Wydajność we frameworkach
  • Hydracja, SSR a SSG: co wybrać dla szybkiego LCP
  • Zbędne ponowne renderowanie: React Profiler i Angular DevTools
  • Wirtualizacja długich list

Podstawy obrazów responsywnych znajdziesz w szkoleniu Nowoczesny HTML i CSS, Service Worker szerzej w szkoleniu Progressive Web Apps, a SSR w szkoleniu Next.js.

Dla kogo?

• Dla programistów frontendu, których aplikacja działa wolno na telefonach.
• Dla zespołów, które chcą poprawić wyniki Core Web Vitals.
• Dla sklepów internetowych, w których wolna strona to utracone zamówienia.

Co musisz umieć?

• Pracować na co dzień z JavaScriptem i jednym z frameworków.
• Korzystać z zakładek Elements i Network w DevTools.

Czego się nauczysz?

• Zmierzysz LCP, INP i CLS i wskażesz ich przyczynę w kodzie.
• Ustalisz budżet wydajności i przeczytasz raport Lighthouse.
• Przeczytasz nagranie z panelu Performance i znajdziesz długie zadania.
• Przyspieszysz pierwsze wyświetlenie strony, także w zakresie fontów.
• Zmniejszysz bundle przez code splitting i wymianę ciężkich zależności.
• Poprawisz INP, dzieląc długie zadania na mniejsze.
• Dobierzesz formaty obrazów i nagłówki cache, a powrót na stronę przyspieszysz przez bfcache.
• Wskażesz komponenty, które renderują się bez potrzeby.
• Dodasz do CI kontrolę, która wyłapie regresję wydajności.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"