Czym są Core Web Vitals?
Core Web Vitals to zestaw trzech wskaźników, które Google używa do oceny doświadczenia użytkownika na Twojej stronie. Od 2021 roku są one oficjalnym czynnikiem rankingowym - strony z lepszymi wynikami mają przewagę w wynikach wyszukiwania.
Dla właściciela firmy to oznacza jedno: jeśli Twoja strona jest wolna lub "skacze" podczas ładowania, tracisz pozycje w Google i klientów.
Trzy kluczowe wskaźniki
1. LCP (Largest Contentful Paint)
Co mierzy: Jak szybko pojawia się główna treść strony.
Progi:
- ✅ Dobry: poniżej 2,5 sekundy
- ⚠️ Wymaga poprawy: 2,5 - 4 sekundy
- ❌ Słaby: powyżej 4 sekund
Mówiąc prościej: Ile sekund musi czekać użytkownik, zanim zobaczy coś sensownego?
2. INP (Interaction to Next Paint)
Zastąpił FID od marca 2024
Co mierzy: Jak szybko strona reaguje na kliknięcia i interakcje.
Progi:
- ✅ Dobry: poniżej 200 milisekund
- ⚠️ Wymaga poprawy: 200 - 500 milisekund
- ❌ Słaby: powyżej 500 milisekund
Mówiąc prościej: Czy strona reaguje natychmiast na kliknięcie, czy "zamraża się" na chwilę?
3. CLS (Cumulative Layout Shift)
Co mierzy: Czy elementy strony "skaczą" podczas ładowania.
Progi:
- ✅ Dobry: poniżej 0,1
- ⚠️ Wymaga poprawy: 0,1 - 0,25
- ❌ Słaby: powyżej 0,25
Mówiąc prościej: Czy kiedykolwiek próbowałeś kliknąć przycisk, a strona nagle się przesunęła i kliknąłeś coś innego? To właśnie mierzy CLS.
Jak sprawdzić swoje Core Web Vitals?
1. Google PageSpeed Insights
Wejdź na pagespeed.web.dev, wpisz adres swojej strony i poczekaj na wyniki. Zobaczysz ocenę dla wersji mobilnej i desktopowej.
Wskazówka: Skup się na wynikach mobilnych - Google stosuje "mobile-first indexing".
2. Google Search Console
Jeśli masz Search Console (a powinieneś!), znajdziesz raport "Core Web Vitals" w menu po lewej stronie. Pokazuje on dane z rzeczywistych wizyt na Twojej stronie.
3. Rozszerzenie Web Vitals dla Chrome
Zainstaluj rozszerzenie Web Vitals z Chrome Web Store. Pokazuje wyniki w czasie rzeczywistym podczas przeglądania strony.
Jak poprawić LCP (szybkość ładowania)
Problem 1: Zbyt duże obrazy
To najczęstsza przyczyna wolnego LCP. Zdjęcie o rozmiarze 5 MB ładuje się znacznie dłużej niż to samo zdjęcie skompresowane do 200 KB.
Rozwiązania:
- Kompresuj obrazy - Użyj narzędzi jak TinyPNG lub Squoosh
- Używaj nowoczesnych formatów - WebP jest o 30% mniejszy niż JPEG
- Określ wymiary - Dodaj atrybuty width i height do obrazów
- Ładuj leniwie - Obrazy poniżej ekranu mogą się ładować później (loading="lazy")
Problem 2: Wolny hosting
Tani hosting współdzielony może być przyczyną wolnego ładowania, szczególnie w godzinach szczytu.
Rozwiązania:
- Rozważ szybszy hosting - W Polsce dobrą reputację mają LH.pl, Zenbox, OVH
- Użyj CDN - Cloudflare (darmowy) przyspiesza ładowanie i dodaje bezpieczeństwo
- Włącz cache'owanie - Wtyczki jak WP Super Cache (WordPress) znacząco przyspieszają stronę
Problem 3: Za dużo wtyczek/skryptów
Każda wtyczka, każdy skrypt analityczny, każdy widget chatbota to dodatkowe milisekundy ładowania.
Rozwiązania:
- Usuń niepotrzebne wtyczki - Czy naprawdę potrzebujesz wszystkich 20?
- Opóźnij ładowanie skryptów - Skrypty, które nie są krytyczne, mogą się ładować później
- Połącz i minifikuj - Mniejsze pliki ładują się szybciej
Jak poprawić INP (responsywność)
Problem 1: Blokujący JavaScript
Zbyt dużo JavaScript-u blokuje główny wątek przeglądarki, przez co strona "zamraża się".
Rozwiązania:
- Podziel duże skrypty - Na mniejsze fragmenty
- Użyj defer/async - Do ładowania skryptów
- Usuń nieużywany kod - Szczególnie z bibliotek zewnętrznych
Problem 2: Ciężkie animacje
Skomplikowane animacje CSS mogą spowalniać reakcję strony.
Rozwiązania:
- Ogranicz animacje - Szczególnie na mobile
- Używaj transform i opacity - Zamiast innych właściwości CSS
- Wyłącz animacje dla użytkowników z oszczędzaniem baterii
Jak poprawić CLS (stabilność layoutu)
Problem 1: Obrazy bez wymiarów
Gdy przeglądarka nie zna wymiarów obrazu, rezerwuje dla niego 0 pikseli. Gdy obraz się załaduje, wszystko się przesuwa.
Rozwiązanie:
<!-- Źle -->
<img src="zdjecie.jpg">
<!-- Dobrze -->
<img src="zdjecie.jpg" width="800" height="600">
Problem 2: Reklamy i embedy
Bannery reklamowe, widgety social media, mapy Google - wszystko to może "wskakiwać" w treść.
Rozwiązania:
- Zarezerwuj miejsce - Dla reklam i embedów
- Używaj aspect-ratio - Do zachowania proporcji
- Unikaj dynamicznie wstawianych treści nad istniejącą zawartością
Problem 3: Czcionki powodujące przeskoki
Gdy czcionka niestandardowa się załaduje, tekst może zmienić rozmiar, przesuwając całą stronę.
Rozwiązania:
- Użyj font-display: swap - Tekst pojawi się od razu w czcionce systemowej
- Preloaduj czcionki - By załadowały się wcześniej
- Rozważ czcionki systemowe - Są natychmiastowe i nie obciążają strony
Praktyczna lista kontrolna
Przed optymalizacją:
- Zmierz aktualne wyniki w PageSpeed Insights
- Zapisz wyniki jako punkt odniesienia
Optymalizacja LCP:
- Skompresuj wszystkie obrazy
- Konwertuj na format WebP
- Dodaj wymiary do obrazów
- Włącz lazy loading dla obrazów poza ekranem
- Sprawdź szybkość hostingu
- Włącz CDN i cache
Optymalizacja INP:
- Usuń nieużywane wtyczki/skrypty
- Opóźnij ładowanie niekrytycznych skryptów
- Ogranicz ciężkie animacje na mobile
Optymalizacja CLS:
- Wszystkie obrazy mają width i height
- Zarezerwuj miejsce na reklamy/embedy
- Skonfiguruj prawidłowe ładowanie czcionek
Po optymalizacji:
- Zmierz wyniki ponownie
- Sprawdź po tygodniu dane z rzeczywistych użytkowników w Search Console
Ile czasu zajmuje poprawa Core Web Vitals?
To zależy od stanu Twojej strony:
- Prosta optymalizacja (kompresja obrazów, cache): 2-4 godziny
- Średnia optymalizacja (hosting, CDN, usunięcie wtyczek): 1-2 dni
- Zaawansowana optymalizacja (przepisanie kodu, architektura): tygodnie
Dobre wieści: często 80% poprawy uzyskasz przy 20% wysiłku - kompresja obrazów i cache to zazwyczaj "quick wins".
Czy Core Web Vitals naprawdę wpływają na pozycje?
Tak, ale to jeden z wielu czynników. Świetne treści na wolnej stronie nadal mogą rankować lepiej niż słabe treści na szybkiej stronie.
Jednak przy podobnej jakości treści, Core Web Vitals mogą przechylić szalę. A dla użytkowników - szybka strona to lepsza konwersja, mniej porzuceń i więcej zadowolonych klientów.
FAQ
Moja strona ma "słabe" Core Web Vitals. Czy spadnę w Google? Niekoniecznie. Core Web Vitals to jeden z wielu czynników. Ale warto poprawić - dla użytkowników i na przyszłość.
Czy muszę być programistą, żeby poprawić Core Web Vitals? Nie. Podstawowe optymalizacje (kompresja obrazów, cache) może zrobić każdy. Zaawansowane - tak, wymagają wiedzy technicznej.
Jak często sprawdzać Core Web Vitals? Co 2-4 tygodnie. Dane z rzeczywistych użytkowników (w Search Console) aktualizują się z opóźnieniem 28 dni.
Czy WordPress może mieć dobre Core Web Vitals? Tak, przy odpowiedniej optymalizacji. Problem to często nadmiar wtyczek i słaby hosting, nie sam WordPress.
Potrzebujesz audytu szybkości strony? Skontaktuj się z nami - sprawdzimy Twoje Core Web Vitals i zaproponujemy rozwiązania.