Jak poprawić Core Web Vitals Twojej strony
Optymalizacja Core Web Vitals (CWV) przestała być opcją – jest wymogiem technicznym bezpośrednio wpływającym na ranking SEO i UX. W 2024 roku kluczowa zmiana to zastąpienie FID (First Input Delay) przez INP (Interaction to Next Paint). Poniżej znajdziesz konkretne wektory optymalizacji dla LCP, INP i CLS.
1. LCP (Largest Contentful Paint) – Szybkość ładowania głównej treści
Cel: < 2.5 sekundy. LCP mierzy czas renderowania największego widocznego elementu w viewport (zazwyczaj obrazu hero lub bloku tekstu).
Rozwiązania techniczne:
- Priorytetyzacja zasobów (Preload): Wymuś wcześniejsze pobieranie kluczowych zasobów (np. obrazka Hero) w sekcji
<head>. - Optymalizacja serwera: Zredukuj TTFB (Time to First Byte) poprzez caching po stronie serwera i użycie CDN.
- Critical CSS: Wygeneruj i wstaw style krytyczne (necessary for above-the-fold content) bezpośrednio w
<style>w nagłówku, resztę ładuj asynchronicznie.
2. INP (Interaction to Next Paint) – Responsywność interfejsu
Cel: < 200 milisekund. INP ocenia ogólną responsywność strony na interakcje użytkownika (kliknięcia, tapnięcia, klawiatura) przez cały czas trwania sesji, a nie tylko przy pierwszym wejściu.
Rozwiązania techniczne:
- Odciążenie Głównego Wątku (Main Thread): Zidentyfikuj i zoptymalizuj długie zadania JavaScript (Long Tasks > 50ms). Użyj
requestIdleCallbackdo zadań o niskim priorytecie. - Code Splitting: Dziel kod JS na mniejsze paczki, aby przeglądarka nie musiała parsując megabajtów kodu przy starcie.
- Wydajność Event Handlerów: Upewnij się, że listenery zdarzeń są pasywne (
{ passive: true }) tam, gdzie to możliwe, i unikaj ciężkich obliczeń wewnątrz handlerów.
3. CLS (Cumulative Layout Shift) – Stabilność wizualna
Cel: < 0.1. CLS mierzy nieoczekiwane przesunięcia elementów układu podczas ładowania strony.
Rozwiązania techniczne:
- Rezerwacja miejsca (Aspect Ratio): Zawsze definiuj atrybuty
widthiheightdla obrazów i wideo oraz stosuj CSSaspect-ratio. - Kontenery dla reklam i embedów: Sztywno definiuj wymiary kontenerów dla treści dynamicznych, aby uniknąć "skakania" treści po załadowaniu reklamy.
- Zarządzanie fontami: Użyj
font-display: swap, aby uniknąć FOIT (Flash of Invisible Text), choć może to wywołać FOUT (Flash of Unstyled Text) – dobierz metryki fontu zapasowego do docelowego.
Implementacja: Quick Wins
Formaty nowej generacji (WebP/AVIF) z fallbackiem
Zamiast klasycznego JPG/PNG, serwuj lżejsze formaty przy użyciu znacznika <picture>.
<picture> <source srcset="obraz.avif" type="image/avif"> <source srcset="obraz.webp" type="image/webp"> <img src="obraz.jpg" alt="Opis" width="800" height="600" loading="lazy"></picture>Natywny Lazy Loading
Opóźnia ładowanie zasobów poza viewportem, odciążając sieć i CPU podczas inicjalizacji. Stosuj dla wszystkich obrazów i iframe"ów poza sekcją Hero.
<img src="footer-logo.webp" alt="Logo" loading="lazy" width="200" height="50">Critical CSS (Idea)
Wyodrębnij CSS potrzebny do wyrenderowania góry strony (Above the Fold) i wstaw go inline.
<head> <!-- Krytyczne style inline --> <style>.hero { background: #000; color: #fff; } /* ... */</style> <!-- Reszta stylów asynchronicznie --> <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel="stylesheet""> <noscript><link rel="stylesheet" href="styles.css"></noscript></head>