Dlaczego szybkość ma znaczenie
Połowa ludzi zamyka stronę, która ładuje się dłużej niż 3 sekundy. Odwiedzający nie wszyscy mają nowy telefon i szybkie Wi-Fi – niektórzy mają stary telefon w pociągu. Szef projektu myśli też o nich.
Dobra wiadomość: największy zysk szybkości to często obrazki. Zdjęcie prosto z telefonu może ważyć 5 MB; stronie wystarczy dziesiąta część.
Pokażę ci: pomiar Lighthouse
Lighthouse to narzędzie w Chrome:
- Otwórz stronę (wersję na żywo, nie localhost).
- F12 → zakładka Lighthouse → Analyze page load.
- Dostaniesz wynik 0–100 za wydajność, dostępność, SEO – i co ważniejsze, listę konkretnych rad, co poprawić.
Najczęstsze rady i co zrobić:
| Rada Lighthouse | Co zrobić |
|---|---|
| Properly size images | zmniejsz obrazki (poniżej) |
| Serve images in next-gen formats | zapisz w WebP |
| Image elements do not have width/height | dodaj width i height |
| Links do not have descriptive text | zamiast „kliknij tu” napisz, dokąd link prowadzi |
Zmniejsz obrazki
- Wymiary: strona potrzebuje ok. 1200px szerokości (zdjęcie główne) albo ok. 600px (zwykłe). Zmniejszysz w dowolnym edytorze, nawet online (np. squoosh.app).
- Format: WebP jest ok. o jedną trzecią mniejszy niż JPG przy tej samej jakości.
- Leniwe ładowanie (lazy loading): dolne obrazki ładują się dopiero, gdy odwiedzający przewinie:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Teraz ty 💪
- Zmierz stronę Lighthouse i zapisz wynik wydajności – to twój punkt startowy.
- Znajdź 3 największe obrazki (F12 → Network → sortuj po Size).
- Zmniejsz je (wymiary + WebP) i dodaj
loading="lazy"wszędzie oprócz pierwszego u góry. - Zmierz ponownie i porównaj. Zapisz w
LAUNCH.md: przed → po. - Extra: przetestuj stronę na telefonie z wyłączonym Wi-Fi. Jak idzie?
Nie czekaj na 100 punktów. Nawet duże strony mają 70–90. Liczy się postęp: z 60 na 85 to zwycięstwo, które odwiedzający naprawdę poczują.
Sprawdź się: Znasz wynik Lighthouse przed i po. Obrazki są zmniejszone, w WebP i z lazy loading. Strona wyraźnie szybciej ładuje się na telefonie.
Co wyniesiesz z tej lekcji
- Szybkość = odwiedzający zostają. 3 sekundy to limit.
- Lighthouse mówi dokładnie, co poprawić.
- Największa dźwignia: mniejsze obrazki (wymiary, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści