Kurs Web Performance

Lekcja 1 • Jak przeglądarki przetwarzają strony WWW

Obejmuje pełny potok przeglądarki od wyszukiwania DNS do malowania. Stanowi podstawę dla wszystkich późniejszych prac optymalizacyjnych, opartych na konkretnym zrozumieniu działania przeglądarki.

Lekcja 2 • Koncepcja budżetu wydajności

Przedstawia budżety jako ograniczenia dotyczące wagi strony, czasu ładowania i liczby żądań. Łączy ustalanie budżetu z celami biznesowymi i docelowymi parametrami doświadczenia użytkownika.

Lekcja 3 • Zrozumienie krytycznej ścieżki renderowania

Wyjaśnia, które zasoby blokują renderowanie i dlaczego. Buduje fundament dla technik priorytetyzacji zasobów omówionych w dalszych rozdziałach.

Lekcja 1 • Dane laboratoryjne a dane terenowe

Rozróżnia testy syntetyczne od monitorowania rzeczywistych użytkowników (RUM). Określa oczekiwania co do tego, który typ danych jest odpowiedni do podejmowania decyzji.

Lekcja 2 • Zautomatyzowane narzędzia do audytu

Omówienie Lighthouse, WebPageTest i podobnych platform audytowych. Umożliwia powtarzalną, zautomatyzowaną ocenę wydajności i wykrywanie regresji.

Lekcja 3 • Konfiguracja monitorowania rzeczywistych użytkowników

Przewodnik implementacji RUM z użyciem interfejsu API Performance Observer. Łączy zbieranie danych terenowych ze wskaźnikami zdefiniowanymi w Rozdziale 1.

Lekcja 4 • Interpretacja profili i śladów

Uczy systematycznej analizy zarejestrowanych śladów w celu znalezienia długich zadań i nadmiernego przebudowywania układu. Łączy surowe dane z praktycznymi decyzjami optymalizacyjnymi.

Lekcja 1 • Wskazówki dotyczące zasobów i wstępne ładowanie

Uczy dyrektyw dns-prefetch, preconnect, preload i prefetch. Zmniejsza postrzegane opóźnienie poprzez inicjowanie pobierania, zanim przeglądarka je odkryje.

Lekcja 2 • Protokoły HTTP/2 i HTTP/3

Wyjaśnia multipleksowanie, kompresję nagłówków i transport QUIC. Pomaga uczniom konfigurować serwery, aby wykorzystać zalety nowoczesnych protokołów.

Lekcja 3 • Strategie kompresji i kodowania

Omówienie Gzip, Brotli i negocjacji kodowania treści. Bezpośrednio zmniejsza liczbę przesyłanych bajtów dla zasobów tekstowych.

Lekcja 4 • Sieci dostarczania treści (CDN)

Omówienie architektury CDN, buforowania na brzegu sieci i odciążania serwera źródłowego. Zmniejsza opóźnienie geograficzne dla odbiorców globalnych.

Lekcja 1 • Optymalizacja wideo i animacji

Omówienie kodowania wideo, zasad autoodtwarzania i zastępowania GIF-ów wideo. Zmniejsza rozmiar danych multimedialnych dla treści ruchomych.

Lekcja 2 • Leniwy ładunek i dekodowanie

Omówienie natywnego leniwego ładowania, Intersection Observer i asynchronicznego dekodowania. Odkłada koszt obrazów poza ekranem, aby poprawić początkowe ładowanie strony.

Lekcja 3 • Dostrajanie kompresji i jakości

Omówienie narzędzi do kompresji stratnej i bezstratnej oraz ustawień jakości. Równoważy zmniejszenie rozmiaru pliku z akceptowalną degradacją wizualną.

Lekcja 4 • Nowoczesne formaty obrazów

Porównanie WebP, AVIF i starszych formatów pod kątem jakości i rozmiaru pliku. Wyposaża uczniów w umiejętność wyboru odpowiedniego formatu dla każdego przypadku użycia.

Lekcja 1 • Pakowanie, minifikacja i tree shaking

Wyjaśnia, jak narzędzia do pakowania zmniejszają rozmiar kodu poprzez minifikację i eliminację martwego kodu. Bezpośrednio zmniejsza koszt parsowania i przesyłania.

Lekcja 2 • Web Workery do przetwarzania poza wątkiem

Przedstawia Web Workerów i algorytm ustrukturyzowanego klonowania. Przenosi obliczenia intensywnie obciążające CPU poza wątek główny, aby poprawić INP.

Lekcja 3 • Strategie ładowania JavaScript

Omówienie atrybutów async, defer i module. Zapobiega blokowaniu parsowania HTML i opóźnianiu pierwszego renderowania przez skrypty.

Lekcja 4 • Zarządzanie skryptami stron trzecich

Audyt wpływu skryptów stron trzecich na koszt wątku głównego i żądania sieciowe. Zapewnia strategie bezpiecznego ładowania lub odkładania zewnętrznych skryptów.

Lekcja 1 • Kompozycja GPU i zarządzanie warstwami

Wyjaśnia, w jaki sposób przeglądarka promuje elementy do warstw kompozytora. Uczy, kiedy promować warstwy i jak unikać eksplozji warstw.

Lekcja 2 • Animacje i przejścia CSS

Porównuje animacje CSS, przejścia i animacje sterowane JS pod kątem wydajności. Pomaga w wyborze najbardziej wydajnego podejścia do animacji.

Lekcja 3 • Wydajność selektorów i specyficzność

Wyjaśnia, jak złożoność selektorów wpływa na koszt ponownego obliczania stylów. Pomaga uczniom pisać selektory, które przeglądarka rozwiązuje szybko.

Lekcja 4 • Dostarczanie CSS i krytyczny CSS

Omówienie wbudowywania krytycznych stylów i odkładania niekrytycznego CSS. Eliminuje arkusze stylów blokujące renderowanie, aby przyspieszyć pierwsze malowanie.

Lekcja 1 • Podzbiory czcionek i zakresy Unicode

Omówienie narzędzi do tworzenia podzbiorów i deskryptora unicode-range. Zmniejsza rozmiar pliku czcionki poprzez uwzględnienie tylko znaków faktycznie używanych na stronie.

Lekcja 2 • Podstawy ładowania czcionek internetowych

Wyjaśnia FOIT, FOUT i strategie font-display. Bezpośrednio dotyczy regresji CLS i LCP spowodowanych późno ładującymi się czcionkami.

Lekcja 3 • Czcionki zmienne dla wydajności

Wyjaśnia osie czcionek zmiennych i to, jak jeden plik zastępuje wiele wag. Zmniejsza liczbę żądań HTTP i całkowity rozmiar danych czcionek dla bogatej typografii.

Lekcja 1 • Podstawowe wskaźniki internetowe a pozycjonowanie w wyszukiwarkach

Wyjaśnia, w jaki sposób podstawowe wskaźniki internetowe wpływają na sygnały rankingowe w wyszukiwarkach. Łączy inwestycje w wydajność z mierzalnymi wynikami w ruchu organicznym.

Lekcja 2 • Zapobieganie regresji wydajności

Ustanawia bramki CI/CD, egzekwowanie budżetu i alerty dla regresji wydajności. Zapewnia, że optymalizacje są utrzymywane w trakcie bieżącego rozwoju.

Lekcja 3 • Przetwarzanie brzegowe i personalizacja

Omówienie funkcji brzegowych, testów A/B na brzegu sieci i spersonalizowanego buforowania. Zmniejsza liczbę pełnych cykli do serwera źródłowego dla dynamicznych, specyficznych dla użytkownika treści.

Lekcja 4 • Wydajność dla aplikacji jednostronicowych (SPA)

Omówienie dzielenia kodu według ścieżki, wstępnego pobierania i przejść nawigacyjnych w SPA. Rozszerza podstawowe techniki na architektury routingu po stronie klienta.