Procedura diagnostyczna

Strona ładuje się wolno (LCP)

Diagnostyka i naprawa problemów z Largest Contentful Paint

Czym jest LCP (Largest Contentful Paint)?

Largest Contentful Paint (LCP) to jedna z trzech kluczowych metryk Core Web Vitals, która mierzy czas potrzebny na załadowanie największego elementu widocznego w viewport (obszar widoczny użytkownika). LCP jest jednym z najważniejszych wskaźników doświadczenia użytkownika i bezpośrednio wpływa na ranking w Google.

Google mierzy LCP jako czas od momentu rozpoczęcia ładowania strony do momentu, gdy największy element treści (obraz, wideo, blok tekstu) jest w pełni renderowany i widoczny dla użytkownika.

< 2.5s

Dobra wartość

2.5s - 4.0s

Wymaga poprawy

> 4.0s

Słaba wartość

Dlaczego LCP jest ważne?

Wpływ na konwersję

Według badań Google, strony z LCP poniżej 2.5s mają o 25% wyższy współczynnik konwersjiniż strony z LCP powyżej 4.0s. Każda sekunda opóźnienia może kosztować Cię utracone leady.

Wpływ na SEO

LCP jest jednym z czynników rankingowych Google. Strony z dobrym LCP mają większe szanse na wyższe pozycje w wynikach wyszukiwania, szczególnie w wyszukiwaniach mobilnych.

Doświadczenie użytkownika

Użytkownicy oczekują, że strony ładują się szybko. 53% użytkowników opuszcza stronę, jeśli ładuje się dłużej niż 3 sekundy. Szybkie LCP oznacza lepsze pierwsze wrażenie.

Mobilne wyszukiwania

Na urządzeniach mobilnych LCP jest jeszcze bardziej krytyczne. Wolne połączenia i ograniczone zasoby sprawiają, że optymalizacja LCP na mobile jest absolutnie kluczowa.

Objawy

Strona ładuje się dłużej niż 2.5 sekundy
W PageSpeed Insights LCP jest oznaczony na czerwono (ponad 2.5s)
Użytkownicy skarżą się na wolne ładowanie
Spadek konwersji lub wyższy współczynnik odrzuceń

Diagnostyka

Krok 1: Sprawdź LCP w PageSpeed Insights

Wejdź na PageSpeed Insights
Wpisz URL swojej strony
Sprawdź wartość LCP w sekcji Core Web Vitals
Zapisz wartość i element, który jest LCP (najczęściej duży obraz lub hero section)

Krok 2: Sprawdź element LCP w DevTools

Otwórz Chrome DevTools (F12)
Przejdź do zakładki "Performance"
Kliknij "Record" i odśwież stronę
Zatrzymaj nagrywanie i sprawdź, który element jest oznaczony jako LCP
Sprawdź czas ładowania tego elementu

Krok 3: Sprawdź źródło problemu

Najczęstsze przyczyny wolnego LCP:

Duży, nieoptymalizowany obraz (najczęstsza przyczyna)
Wolne serwery lub CDN
Render-blocking zasoby (CSS, JS)
Wolne Time to First Byte (TTFB)
Brak lazy loading dla obrazów

Najczęstsza przyczyna

Nieoptymalizowane obrazy to przyczyna ponad 70% problemów z LCP. Duże obrazy (np. hero image) ładują się wolno, szczególnie na urządzeniach mobilnych.

Najczęściej problem dotyczy:

Obrazów w formacie PNG zamiast WebP
Obrazów bez kompresji (rozmiar > 500KB)
Obrazów bez odpowiednich wymiarów (np. 4000px szerokości dla 800px ekranu)
Brak lazy loading dla obrazów poniżej folda

Naprawa

1. Optymalizuj obrazy

Konwertuj na WebP: Użyj narzędzi jak Squoosh lub automatycznych pluginów
Kompresuj obrazy: Zmniejsz rozmiar pliku o 60-80% bez widocznej utraty jakości
Użyj odpowiednich wymiarów: Nie ładuj obrazu 4000px na ekran 800px
Dodaj srcset: Dla responsywnych obrazów użyj atrybutu srcset

2. Włącz lazy loading

Dla obrazów poniżej folda (nie widocznych od razu):

<img 
  src="image.webp" 
  loading="lazy" 
  alt="Description"
/>

Dla obrazów responsywnych z srcset:

<img 
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w
  "
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  src="image-800.webp"
  loading="lazy"
  alt="Description"
/>

2.1 Preload dla hero image (LCP element)

Jeśli hero image jest elementem LCP, użyj preload w <head>:

<link 
  rel="preload" 
  as="image" 
  href="/hero-image.webp"
  fetchpriority="high"
/>

⚠️ Używaj preload tylko dla krytycznych obrazów (LCP element). Preload zbyt wielu obrazów może pogorszyć wydajność.

3. Popraw TTFB (Time to First Byte)

Użyj szybkiego hostingu (Vercel, Netlify, Cloudflare)
Włącz CDN dla statycznych zasobów
Zoptymalizuj backend (cache, bazy danych)
Użyj edge computing dla dynamicznych treści

4. Usuń render-blocking zasoby

Przenieś niekrytyczne CSS do async loading
Defer lub async dla JavaScript
Użyj critical CSS inline dla above-the-fold
Minifikuj i kompresuj CSS/JS

Przykład defer dla JavaScript:

<script defer src="app.js"></script>
<!-- lub -->
<script async src="analytics.js"></script>

Defer - skrypt wykonuje się po załadowaniu HTML, zachowując kolejność.
Async - skrypt wykonuje się natychmiast po pobraniu, bez zachowania kolejności.

5. Optymalizuj fonty

Fonty mogą blokować renderowanie. Użyj preload dla krytycznych fontów:

<link 
  rel="preload" 
  href="/fonts/main-font.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin="anonymous"
/>

Użyj font-display: swap w @font-face:

@font-face {
  font-family: 'MainFont';
  src: url('/fonts/main-font.woff2') format('woff2');
  font-display: swap; /* Pokazuje fallback font podczas ładowania */
}

Porównanie formatów obrazów

Format	Rozmiar pliku	Jakość	Wsparcie przeglądarek	Rekomendacja
`PNG`	Duży (100-500KB)	Bardzo dobra	Wszystkie	❌ Unikaj dla web
`JPEG`	Średni (50-200KB)	Dobra	Wszystkie	⚠️ Fallback
`WebP`	Mały (20-100KB)	Bardzo dobra	Wszystkie nowoczesne	✅ Najlepszy wybór
`AVIF`	Bardzo mały (10-50KB)	Doskonała	Ograniczone	⭐ Przyszłość

Checklista optymalizacji LCP

Obrazy

Konwertuj wszystkie obrazy na WebP
Kompresuj obrazy do rozmiaru < 200KB
Użyj odpowiednich wymiarów (nie większe niż viewport)
Dodaj srcset dla responsywnych obrazów
Włącz lazy loading dla obrazów poniżej folda
Użyj preload dla hero image (LCP element)

Hosting i CDN

Użyj szybkiego hostingu (TTFB < 200ms)
Włącz CDN dla statycznych zasobów
Użyj HTTP/2 lub HTTP/3
Włącz kompresję Gzip/Brotli

CSS i JavaScript

Minifikuj i kompresuj CSS/JS
Użyj critical CSS inline
Defer lub async dla niekrytycznego JS
Usuń nieużywany kod (tree shaking)

Narzędzia do optymalizacji LCP

Analiza i diagnostyka

• PageSpeed Insights - Oficjalne narzędzie Google
• Web Vitals Extension - Rozszerzenie Chrome
• Chrome DevTools - Performance tab
• Lighthouse - Zintegrowane w DevTools

Optymalizacja obrazów

• Squoosh - Kompresja obrazów
• TinyPNG - Kompresja PNG/JPEG
• ImageMagick - Konwersja formatów
• Sharp (Node.js) - Automatyzacja optymalizacji

CDN i hosting

• Cloudflare - CDN i optymalizacja
• Vercel - Hosting z automatyczną optymalizacją
• Netlify - Hosting z CDN
• AWS CloudFront - Enterprise CDN

Monitoring

• Google Search Console - Raport Core Web Vitals
• Google Analytics - Web Vitals
• Real User Monitoring (RUM) tools
• Custom performance monitoring

Najczęściej zadawane pytania (FAQ)

Jak sprawdzić wynik

Poczekaj 24-48 godzin po wprowadzeniu zmian (Google potrzebuje czasu na ponowne skanowanie)
Sprawdź LCP ponownie w PageSpeed Insights
Cel: LCP poniżej 2.5 sekundy (zielony wskaźnik)
Sprawdź również w Google Search Console w raporcie Core Web Vitals
Monitoruj przez tydzień, aby upewnić się, że poprawa jest trwała

Wskazówka

Pamiętaj, że LCP może się różnić w zależności od urządzenia i połączenia. Testuj zarówno na desktopie, jak i mobile, oraz na różnych prędkościach połączenia (3G, 4G, WiFi). Użyj Chrome DevTools do symulacji różnych warunków sieciowych.