Course curriculum

  • 1

    Moduł 1: Plan kursu

    • Powitanie

    • Wymagania techniczne względem projektu w kursie

    • Przegląd możliwości starter kitu do optymalizacji

    • Założenia projektu, stan początkowy i końcowy, zasady

    • Zadanie domowe
  • 2

    Moduł: Testowanie w praktyce

    • Jak testować i rozmawiać o liczbach?

    • Proces testowania

    • Lighthouse / User Flows

    • WebPageTest / WPT User Flows

    • DevTools a testowanie

    • Audyt

    • Testowanie płynności renderowania, animacji i scrollowania

    • Podsumowanie
  • 3

    Moduł 2: Przeglądarka a CRP

    • Wyjaśnienie pojęć

    • Przeglądarka i proces renderowania

    • Krytyczna ścieżka renderowania

    • Zrozumieć przeglądarkę i CRP (load perf)

    • Zrozumieć przeglądarkę i CRP (runtime perf)

    • Jak dokonywać pomiarów wydajności, pomiarów CRP?

    • Analiza Waterfall

    • Jak analizować Waterfall (WebPageTest)

    • Zakładka Performance w DevTools

    • Optymalizacja krytycznej ścieżki renderowania

    • Zadanie domowe
  • 4

    Moduł 3: Wzorce i metryki

    • Wzorzec RAIL

    • Wzorzec PRPL

    • TTFB

    • First Paint

    • First Contentful Paint

    • Speed Index

    • Time to Interactive

    • Web Vitals

    • First Input Delay, Total Blocking Time

    • FID, TBT, TTI - jak optymalizować?

    • Largest Contentful Paint

    • Cumulative Layout Shift

    • Cumulative Layout Shift - jak optymalizować?

    • Customowe metryki / Timing API

    • Która metryka jest najważniejsza?

    • Zadanie
  • 5

    Moduł 4: Fonty

    • Porównanie typów fontów

    • Wyjaśnienie pojęć (font subsetting, CSS unicode-range, CSS Font Loading API i inne)

    • Kolejność ładowanych zasobów a fonty

    • Kolejność ładowanych zasobów a fonty - przykład

    • Lokalnie ładowane fonty

    • Jak optymalnie ładować Google Fonts?

    • Jak optymalnie ładować Typekit?

    • Jak ładować fonty z ikonkami?

    • Jak walczyć z FOUT i CLS z powodu fontów?

    • Strategie ładowania fontów

    • Zadanie
  • 6

    Moduł 5: Lazy loading

    • Wprowadzenie - co to, po co, dlaczego?

    • Czego nie ładować "leniwie"?

    • Metody lazy loadingu

    • Lazy loading obrazków a SEO

    • Lazy loading threshold

    • Lazy loading obrazków i iframe'ów

    • Lazy loading wideo

    • Lazy loading widgetów

    • Lazy loading (responsywnych) teł (background-image)

    • Lazy loading komponentów

    • Copy of Placeholdery (LQIP, loadery, skeleton placeholders)

    • Zadanie
  • 7

    Moduł 6: Obrazki i wideo

    • Wprowadzenie

    • picture set / img@srcset

    • Obrazki w HTML vs. w CSS

    • ładowane warunkowo

    • Kompresja obrazków

    • WebP, AVIF

    • Obrazki, wideo @ CDN - czy warto?

    • Szybkie wdrożenie zoptymalizowanych obrazków

    • SVG, SVG sprites, base64

    • Warunkowe ładowanie

    • GIF czy

    • Obrazki/wideo connection-aware

    • Obrazek hero (hero image)

    • Hero image - przykład zoptymalizowanej implementacji

    • Serwuj obrazki przez Service Worker

    • Zadanie
  • 8

    Moduł 7: HTML i podstawy Accessibility

    • Minifikacja & kompresja HTML

    • Semantyka, optymalizacja DOM, divitis

    • Page regions

    • Uporządkowane dane (JSON-LD, Open Graph)

    • Czym jest dostępność strony?

    • Nagłówki a SEO i dostępność

    • Formularze a UX + dostępność

    • Obrazki, ikonki a dostępność i SEO

    • Nawigacja na stronach

    • Kontrast (contrast ratio)

    • Linki, przyciski

    • Zadanie
  • 9

    Moduł 8: CSS

    • Jak pisać wydajny CSS?

    • Jak ładować CSS? [MEGA WAŻNE]

    • Alternatywny sposób ładowania CSS

    • Krytyczny CSS - czy warto?

    • Minifikacja, kompresja, unused CSS

    • CSS Containment

    • prefers-reduced-data

    • Zadanie
  • 10

    Moduł 9: Javascript

    • Wprowadzenie (problemy z Javascriptem)

    • Przeglądarka a ładowanie JS

    • Jak ładować pliki JS?

    • Zmniejszanie rozmiaru plików JS (minifikacja, tree shaking, code splitting, nowoczesny JS)

    • Jak tworzyć wydajny JS?

    • Jak tworzyć wydajny JS (proces + techniczne porady)?

    • Web workers

    • Service Worker

    • Frameworki a wydajność

    • Dynamiczna strona bez frameworków

    • Predictive prefetching

    • Zadanie
  • 11

    Moduł 10: Skrypty zewnętrzne

    • Problemy ze skryptami zewnętrznymi

    • Optymalizacja ładowania czatu

    • Optymalizacja ładowania leadboxa z LeadPages

    • Optymalizacja ładowania Google reCAPTCHA

    • Technika opóźniania skryptów JS (MEGA TRIK)

    • Tag Manager

    • Zadanie
  • 12

    Moduł 12: Zakończenie

    • Podsumowanie procesu optymalizacji

    • Przykład optymalizacji strony z kursu

    • Wydajność a CMSy

    • Zoptymalizowany Wordpress

    • AMP - czy warto?

    • Ciągłe testowanie

    • Inspiracje

    • Co dalej?