PageSpeed Insights

Czym jest PageSpeed Insights?

PageSpeed Insights (PSI) to narzędzie Google, które analizuje zawartość strony internetowej i generuje sugestie, jak przyspieszyć jej ładowanie. Narzędzie wykorzystuje dane z raportu Chrome User Experience Report (CrUX) oraz analizę Lighthouse.

Wyniki kategorii

• Wydajność (Performance) — ogólna ocena szybkości ładowania strony. Uwzględnia metryki takie jak FCP, LCP, TBT, CLS i Speed Index.
• Dostępność (Accessibility) — sprawdza, czy strona jest dostępna dla osób z niepełnosprawnościami (kontrast kolorów, etykiety formularzy, nawigacja klawiaturą).
• Najlepsze praktyki (Best Practices) — weryfikuje użycie HTTPS, brak błędów w konsoli, bezpieczne linki zewnętrzne i nowoczesne API.
• SEO — sprawdza podstawowe elementy optymalizacji pod kątem wyszukiwarek: meta tagi, tekst alternatywny obrazków, robots.txt, linki.

Metryki Core Web Vitals

• First Contentful Paint (FCP) — czas do wyświetlenia pierwszego elementu treści (tekst, obraz). Cel: poniżej 1.8s.
• Largest Contentful Paint (LCP) — czas do wyrenderowania największego widocznego elementu. Cel: poniżej 2.5s. Jest to kluczowa metryka Core Web Vitals.
• Total Blocking Time (TBT) — sumaryczny czas, w którym wątek główny był zablokowany. Odpowiednik First Input Delay (FID). Cel: poniżej 200ms.
• Cumulative Layout Shift (CLS) — miara stabilności wizualnej — ile elementów się przesuwa podczas ładowania. Cel: poniżej 0.1.
• Speed Index — jak szybko zawartość strony staje się widoczna. Cel: poniżej 3.4s.
• Time to First Byte (TTFB) — czas odpowiedzi serwera. Cel: poniżej 800ms.

Jak interpretować wyniki?

Wyniki w skali 0-100 są podzielone na trzy zakresy:

• 90-100 (zielony) — strona jest szybka i dobrze zoptymalizowana.
• 50-89 (pomarańczowy) — strona wymaga poprawy. Sprawdź sugestie Google.
• 0-49 (czerwony) — strona jest wolna i wymaga pilnej optymalizacji.

Jak poprawić wynik?

• Optymalizuj obrazy — używaj WebP/AVIF, lazy loading, odpowiednich rozmiarów
• Minimalizuj CSS i JavaScript — usuwaj nieużywany kod, ładuj krytyczny CSS inline
• Włącz kompresję (gzip/brotli) i cache przeglądarki
• Użyj CDN do serwowania statycznych zasobów
• Zoptymalizuj fonty — preload, font-display: swap
• Unikaj dużych przesunięć layoutu — podawaj wymiary obrazów, rezerwuj miejsce na reklamy