Procedura diagnostyczna
Najczęstsze blokery wydajności
Checklista diagnostyczna najpopularniejszych problemów
Czym są blokery wydajności?
Blokery wydajności to elementy strony, które spowalniają jej ładowanie i negatywnie wpływają na Core Web Vitals. Identyfikacja i usunięcie blokerów to pierwszy krok do poprawy wydajności strony.
Według badań, 70% problemów z wydajnością jest spowodowanych przez te same 5-7 najczęstszych blokerów. Skupienie się na ich naprawie może przynieść szybkie i znaczące rezultaty.
Krytyczne
Wpływ na LCP > 1s
Średnie
Wpływ 0.5-1s
Niskie
Wpływ < 0.5s
Checklista diagnostyczna
1. Nieoptymalizowane obrazy
- Obrazy w formacie PNG/JPG zamiast WebP
- Rozmiar plików powyżej 500KB
- Brak kompresji obrazów
- Obrazy bez odpowiednich wymiarów (np. 4000px na ekran 800px)
- Brak lazy loading dla obrazów poniżej folda
2. Render-blocking zasoby
- CSS w <head> blokujący renderowanie
- JavaScript bez defer/async
- Zewnętrzne fonty blokujące renderowanie
- Zbyt duże pliki CSS/JS
3. Wolne Time to First Byte (TTFB)
- Wolny hosting lub serwer
- Brak CDN dla statycznych zasobów
- Nieoptymalizowany backend
- Brak cache'owania
4. Zbyt dużo żądań HTTP
- Wiele małych plików zamiast jednego zminifikowanego
- Brak bundlingu JavaScript/CSS
- Zbyt wiele zewnętrznych skryptów
- Brak HTTP/2 lub HTTP/3
5. Nieoptymalizowany JavaScript
- Zbyt duże biblioteki (np. jQuery, lodash)
- Brak code splitting
- Nieużywany kod (dead code)
- Brak minifikacji
Priorytetyzacja blokerów wydajności
| Bloker | Częstość | Wpływ na LCP | Priorytet |
|---|---|---|---|
| Nieoptymalizowane obrazy | 72% | Wysoki (1-3s) | 🔴 Krytyczny |
| Render-blocking CSS | 58% | Średni (0.5-1.5s) | 🟠 Wysoki |
| Wolny TTFB | 45% | Średni (0.5-1s) | 🟠 Wysoki |
| Zbyt dużo żądań HTTP | 38% | Niski (0.2-0.5s) | 🟡 Średni |
| Nieoptymalizowany JS | 32% | Niski (0.1-0.3s) | 🟡 Średni |
Najczęściej zadawane pytania (FAQ)
Szybka naprawa - Top 3 priorytety
- Optymalizuj obrazy: Konwertuj na WebP, kompresuj, użyj odpowiednich wymiarów
- Włącz lazy loading: Dla wszystkich obrazów poniżej folda
- Usuń render-blocking CSS: Przenieś niekrytyczne CSS do async lub inline critical CSS
Wskazówka
Po naprawie każdego blokera, sprawdź wynik w PageSpeed Insights. Niektóre blokery mogą być powiązane (np. optymalizacja obrazów może automatycznie poprawić liczbę żądań HTTP). Monitoruj postęp systematycznie.