Core Web Vitals to zestaw metryk od Google opisujących doświadczenie realnego użytkownika: jak szybko pojawia się najważniejsza treść (LCP), jak responsywne są interakcje (INP) oraz jak stabilny wizualnie jest layout podczas ładowania (CLS). Nie zastępują zdrowego SEO merytorycznego — ale sygnalizują problemy techniczne, które tną konwersję zanim użytkownik przeczyta nagłówek.
Ściganie się na „100 punktów” w jednym narzędziu laboratoryjnym bez Field Data z Chrome UX Report to iluzja — liczy się to, co widzą ludzie na Twoim rynku i urządzeniach.
Trzy metryki — co dokładnie znaczą
| Metryka | Co mierzy | Typowy winowajca |
|---|---|---|
| LCP (Largest Contentful Paint) | czas do wyrenderowania największego elementu treści w viewport | ciężki hero image, wolny TTFB, blokujący JS |
| INP (Interaction to Next Paint) | opóźnienie reakcji na interakcję do kolejnego malowania | długi main-thread przez JS, ciężkie skrypty third-party |
| CLS (Cumulative Layout Shift) | niestabilność layoutu — skoki treści podczas ładowania | brak wymiarów obrazów, dynamiczne banery, font swap bez rezerwy |
Dlaczego wpływają na SEO i sprzedaż
Wyszukiwarka premiuje strony, które dostarczają użytkownikowi sensowne doświadczenie — szczególnie na mobile. Jednocześnie każda dodatkowa sekunda do interakcji zwiększa ryzyko porzucenia formularza lub koszyka. Vitals są więc mostem między techniką a biznesem.
Jak diagnozować — Field vs Lab
- Search Console → Raport podstawowych wskaźników internetowych (rzeczywiste dane z Chrome)
- PageSpeed Insights — raport lab + rozproxowany podgląd field
- Profilowanie na docelowych telefonach / „mid-tier mobile” z throttlingiem
WordPress — najczęstsze usprawnienia
Jakość motywu i liczba wtyczek decydują o tym, czy WP jest „wolny”, czy nie. Priorytety: caching po stronie serwera, CDN, lazy-load mediów, ograniczenie skryptów nad foldem, aktualizacje i minimalizacja zbędnych hooków.
Next.js / frontend modern — na co uważać
SSR i komponenty obrazów pomagają kontrolować LCP, ale nadmiar hydracji i ciężkie biblioteki klientowe podnoszą INP. Dziel bundla, lazy-loaduj niekrytyczne widżety i monitoruj długie zadania na main thread.
CLS — nie tylko „irytacja wizualna”
Skoki layoutu powodują przypadkowe kliknięcia w złe elementy i porzucenie trustu. Rezerwuj miejsce na obrazy i embedy, unikaj wstrzykiwania reklam nad przyciskiem akcji bez stabilnego kontenera.
Checklista wdrożeniowa (skrót)
- Ustal budżet LCP/CLS/INP dla szablonów money page.
- Zoptymalizuj hero (format, rozmiar, fetchpriority dla LCP image).
- Ogranicz third-party: tag manager, chat, heatmapy — ładuj po zgodzie lub po interakcji.
- Przetestuj na stagingu na realnym telefonie zamiast tylko desktop Lighthouse.
Performance to feature produktu — szczególnie gdy płacisz za każdy klik w reklamie.
Powiązane tematy
- Techniczne SEO i Next.js
- UX i konwersja — szybkość jako część doświadczenia
- WordPress vs custom — wpływ na performance
- Sprzedaż przez stronę — lejek i metryki
FAQ
Najczęściej zadawane pytania
- Nie — liczą się field metrics dla Twoich użytkowników i przełożenie na konwersję. Wynik lab to punkt wyjścia, nie religia.
- Zależy od szablonu — strona z ciężkim hero walczy o LCP; aplikacja z formularzami i filtrami częściej o INP. Mierz oba na krytycznych ścieżkach.
- Skraca TTFB i dostarcza statyczne assety bliżej użytkownika, ale nie zastąpi optymalizacji JS ani rozmiaru obrazów.
- Po większych wdrożeniach minimum: pierwsze 2 tygodnie po deploy oraz kwartalny przegląd w Search Console.
- Nie jako domyślna strategia 2026 — częściej sens ma czysty frontend, CDN i dyscyplina treści.