Core Web Vitals (CWV) to trzy metryki wydajności, których Google używa jako sygnałów rankingowych: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) i Cumulative Layout Shift (CLS). Poprawa tych wyników pomaga nie tylko w SEO. Bezpośrednio poprawia doświadczenie Twoich odwiedzających na Twojej witrynie. Szybsze strony otrzymują więcej zaangażowania, niższe bounce raty i wyższe wskaźniki konwersji. Oto dokładne, praktyczne podejście do poprawy każdej metryki w WordPress.
Mierz przed optymalizacją
Zanim wprowadzisz zmiany, ustal punkt odniesienia, abyś mógł śledzić postępy. Użyj tych narzędzi do pomiaru swoich aktualnych Core Web Vitals:
- Google PageSpeed Insights: Wprowadź swój URL na pagespeed.web.dev. Górna sekcja pokazuje dane terenowe od prawdziwych użytkowników (jeśli są dostępne), a dolna pokazuje dane laboratoryjne z symulowanego testu. Dane terenowe to to, czego Google rzeczywiście używa do rankingów.
- Google Search Console: Przejdź do raportu "Core Web Vitals" pod "Experience". Pokazuje to zagregowane dane z całej Twojej witryny, pogrupowane według mobile i desktop. Wskazuje, które URL wymagają poprawy, a które przechodzą.
- Chrome DevTools: Otwórz DevTools (F12), przejdź do zakładki "Performance" i uruchom nagranie podczas ładowania strony. Daje to szczegółowe dane czasowe dla każdego zasobu i kroku renderowania.
- Rozszerzenie Web Vitals Chrome: Zainstaluj rozszerzenie "Web Vitals" dla pomiarów CWV w czasie rzeczywistym podczas przeglądania własnej witryny.
Zapisz swoje początkowe wartości LCP, INP i CLS. Po każdej optymalizacji przetestuj ponownie, aby potwierdzić poprawę.
Optymalizacja LCP: szybsze ładowanie głównej treści
LCP mierzy, jak długo trwa, zanim największy widoczny element (zwykle obraz hero, nagłówek lub duży blok tekstu) pojawi się na ekranie. Google uważa LCP poniżej 2,5 sekundy za "dobry". Oto jak go zmniejszyć:
- Zidentyfikuj swój element LCP: W PageSpeed Insights przewiń do diagnostyki "Largest Contentful Paint element", aby zobaczyć dokładnie, który element jest Twoim LCP. Wiedza o tym mówi Ci, na czym się skupić.
- Zoptymalizuj obraz hero: Jeśli Twój element LCP to obraz, skompresuj go, skonwertuj do WebP lub AVIF i upewnij się, że jest odpowiednio wymiarowany dla kontenera. Obraz o szerokości 3000px w kontenerze 1200px marnuje przepustowość. Dodaj
fetchpriority="high", aby powiedzieć przeglądarce, aby priorytetowo go pobrała. - Preload krytycznych zasobów: Dodaj wskazówkę preload w
<head>dla obrazu LCP, aby przeglądarka zaczęła pobieranie natychmiast, zamiast czekać, aż zostanie odkryty podczas renderowania:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Zmniejsz czas odpowiedzi serwera: Powolny TTFB spowalnia wszystko. Użyj wtyczki cache (zobacz nasz przewodnik po cache), zaktualizuj hosting, jeśli TTFB konsekwentnie przekracza 600ms, i rozważ CDN do dostarczania treści z geograficznie bliższych serwerów.
- Wyeliminuj render-blocking CSS i JS: Przenieś niekrytyczne CSS do asynchronicznego ładowania i odłóż JavaScript niepotrzebny do początkowego renderowania. Funkcje WP Rocket "Optimize CSS Delivery" i "Delay JavaScript Execution" obsługują to automatycznie.
- Używaj CDN: Dostarczanie statycznych zasobów (obrazów, CSS, JS) z serwerów brzegowych blisko Twoich odwiedzających zmniejsza latencję. Cloudflare, BunnyCDN i KeyCDN dobrze integrują się z WordPress.
- Usuń niepotrzebne wtyczki: Każda wtyczka może dodać pliki CSS i JS do strony. Dezaktywuj i usuń wtyczki, których już nie potrzebujesz. Użyj wtyczki Query Monitor, aby zobaczyć, które wtyczki dodają najwięcej narzutu.
Optymalizacja INP: spraw, aby interakcje wydawały się natychmiastowe
INP mierzy, jak szybko Twoja strona reaguje, gdy użytkownik klika przycisk, dotyka linka lub wpisuje w polu. Google uważa INP poniżej 200 milisekund za "dobry". Słaby INP zwykle pochodzi z JavaScript blokującego główny wątek. Oto jak go naprawić:
- Zmniejsz czas wykonywania JavaScript: Zaudytuj swoje wtyczki i usuń te, które dodają ciężki JavaScript, którego nie potrzebujesz. Slidery, widgety social sharing i złożone page buildery często znacząco się przyczyniają. Użyj zakładki Coverage w Chrome DevTools (Ctrl+Shift+P, wpisz "Coverage"), aby zobaczyć, ile z Twojego załadowanego JS jest faktycznie używane.
- Odłóż niekrytyczne skrypty: Dodaj atrybut
deferdo skryptów niepotrzebnych przy początkowym ładowaniu strony. Wtyczki takie jak Flying Scripts pozwalają odłożyć konkretne skrypty do momentu interakcji użytkownika (scroll, klik lub naciśnięcie klawisza). - Minimalizuj zewnętrzne skrypty: Trackery analytics, piksele reklamowe, widgety live chat i osadzenia mediów społecznościowych - wszystkie uruchamiają JavaScript. Każdy z nich dodaje czas wykonywania. Konsoliduj, gdzie to możliwe, ładuj je po interakcji użytkownika lub zastąp ciężkie osadzenia statycznymi alternatywami (na przykład zrzut ekranu tweeta zamiast skryptu osadzania Twittera).
- Dziel długie zadania: Zadania JavaScript trwające dłużej niż 50ms blokują główny wątek i spowalniają interakcje użytkownika. Jeśli piszesz niestandardowy JavaScript, używaj
requestAnimationFramelubsetTimeout, aby podzielić ciężkie obliczenia na mniejsze fragmenty. - Zmniejsz rozmiar DOM: Duże DOM (ponad 1500 węzłów) sprawia, że każda operacja JavaScript jest wolniejsza, ponieważ przeglądarka musi przetworzyć więcej elementów. Uprość strukturę strony, usuń niepotrzebne diwy wrapper i rozważ, czy każda sekcja treści jest naprawdę potrzebna przy początkowym ładowaniu.
Optymalizacja CLS: zatrzymaj skaczącą treść
CLS mierzy, ile widocznej treści nieoczekiwanie się przesuwa podczas ładowania strony. Google uważa CLS poniżej 0,1 za "dobry". Przesunięcia układu frustrują użytkowników, ponieważ prowadzą do nieprawidłowych kliknięć i dezorientującego ruchu wizualnego. Oto jak je wyeliminować:
- Ustaw jawne wymiary obrazu: Zawsze dołączaj atrybuty
widthiheightz obrazami. WordPress robi to automatycznie dla obrazów wstawianych przez bibliotekę mediów, ale obrazy dodawane ręcznie w niestandardowym HTML lub przez page buildery mogą nie mieć tych atrybutów. Bez wymiarów przeglądarka nie wie, ile miejsca zarezerwować, powodując skakanie treści, gdy obraz się ładuje. - Zarezerwuj miejsce dla reklam i osadzeń: Jeśli wyświetlasz reklamy, ustaw
min-heightna kontenerze reklamy, który pasuje do oczekiwanego rozmiaru reklamy. To samo dotyczy osadzeń YouTube, widgetów mediów społecznościowych i innych treści zewnętrznych, które ładują się asynchronicznie. - Używaj font-display swap: Gdy niestandardowe czcionki ładują się powoli, przeglądarka może ukryć tekst, aż czcionka będzie gotowa, a następnie nagle go pokazać, powodując przesunięcie układu. Ustaw
font-display: swapw deklaracjach@font-face, aby przeglądarka pokazywała tekst natychmiast w czcionce fallback i przełączała się na niestandardową, gdy będzie gotowa:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Unikaj wstrzykiwania treści above the fold po załadowaniu: Banery, paski powiadomień i popupy zgody na ciasteczka, które przesuwają treść w dół, powodują przesunięcia układu. Używaj pozycjonowania sticky lub nakładek zamiast wstawiania elementów do strumienia dokumentu.
- Preload webfontów: Jeśli Twój motyw używa niestandardowych czcionek, preload je, aby były dostępne szybciej, zmniejszając czas wyświetlania czcionki fallback:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />Wtyczki WordPress, które pomagają z Core Web Vitals
Kilka wtyczek adresuje wiele metryk CWV jednocześnie:
- WP Rocket: Page caching, optymalizacja CSS/JS, lazy loading, delay JS execution. Najbardziej kompleksowa pojedyncza wtyczka dla poprawy CWV.
- Autoptimize: Darmowa wtyczka do minifikacji i konkatenacji CSS i JS oraz inline krytycznego CSS. Działa dobrze obok wtyczki cache.
- Perfmatters: Lekka wtyczka do wyłączania nieużywanych funkcji WordPress (emoji, embeds, dashicons), zarządzania skryptami per stronę i dodawania wskazówek preload.
- Flying Scripts: Darmowa wtyczka, która odkłada wykonanie JavaScript do interakcji użytkownika. Szczególnie skuteczna dla zewnętrznych skryptów, takich jak Google Analytics, Facebook Pixel i widgetów czatu.
- OMGF (Optimize My Google Fonts): Pobiera Google Fonts lokalnie i optymalizuje ich ładowanie, eliminując zewnętrzne żądanie i poprawiając zarówno LCP, jak i CLS.
Monitorowanie poprawy w czasie
Dane terenowe Core Web Vitals (dane, których Google używa do rankingów) są aktualizowane w 28-dniowym oknie przesuwnym. Oznacza to, że poprawy nie pojawiają się natychmiast w Search Console. Po wprowadzeniu zmian poczekaj co najmniej cztery tygodnie przed oceną wpływu w Search Console. W międzyczasie używaj danych laboratoryjnych PageSpeed Insights i rozszerzenia Web Vitals Chrome dla szybszego feedbacku. Ustal miesięczną rutynę: uruchom PageSpeed Insights na swoich ważnych stronach, zapisz wyniki i porównaj z poprzednim miesiącem. Pomaga to wcześnie wychwytywać regresje, szczególnie po aktualizacjach wtyczek lub zmianach motywów.
Weryfikuj Core Web Vitals z InspectWP
InspectWP sprawdza wiele czynników wpływających na Core Web Vitals: content encoding (GZIP/Brotli), wersję protokołu HTTP (HTTP/2 lub HTTP/3), całkowitą liczbę obrazów, liczbę plików JS i CSS oraz ogólny rozmiar HTML. Użyj tych metryk jako punktu wyjścia, aby zidentyfikować obszary wymagające uwagi. Po każdej optymalizacji uruchom skan, aby potwierdzić poprawę.