Analiza Core Web Vitals

Jak działa ta kontrola

Scanaris nie wymyśla liczb dotyczących wydajności: prosi PageSpeed Insights, usługę Google, która uruchamia Lighthouse, o zmierzenie Twojej strony w trybie mobilnym i odczytuje wynik. Stamtąd bierze ocenę od 0 do 100 i trzy metryki: LCP (Largest Contentful Paint, ile czasu zajmuje wyrenderowanie największego widocznego elementu), CLS (Cumulative Layout Shift, jak bardzo strona „skacze" podczas ładowania) i TBT (Total Blocking Time, jak długo JavaScript blokuje główny wątek). Ocena trafia do ustalenia informacyjnego, które nic nie kosztuje i zasila notę filaru wydajności. Ustalenia z wagą otwiera tylko wtedy, gdy metryka wpada w zakres, który Google nazywa „słabym": LCP powyżej 4 sekund (średnia), CLS powyżej 0,25 (niska) lub TBT powyżej 600 milisekund (niska). Jeśli Lighthouse nie zwróci oceny (strona niemierzalna, błąd narzędzia), nie ma ustalenia.

Dlaczego to ważne

Wydajność to doświadczenie użytkownika i to SEO. Google używa Core Web Vitals jako sygnału rankingowego od 2021 roku i mierzy je u Twoich prawdziwych użytkowników w Chrome, nie tylko w laboratorium. Ale najbardziej bezpośredni efekt dotyczy biznesu: każda dodatkowa sekunda ładowania na telefonie mierzalnie obniża konwersje, a LCP równe 5 sekund oznacza, że spora część odwiedzających widzi biały ekran wystarczająco długo, żeby wyjść. Metryki mierzy się na telefonie, bo tam większość stron wypada najgorzej i tam Google indeksuje najpierw.

Jak to naprawić

Wysoki LCP

• Główny obraz jest zwykle elementem LCP. Serwuj go w WebP lub AVIF, w rozmiarze, w jakim jest wyświetlany, a nie w oryginalnym, z fetchpriority="high" i bez loading="lazy". W Nuxt i Next.js komponenty obrazów (NuxtImg, next/image) robią to za Ciebie.
• Czas odpowiedzi serwera dodaje się do wszystkiego innego. Cache strony, CDN z przodu, a w WordPressie dobrze skonfigurowana wtyczka cache.
• CSS i JavaScript blokujące renderowanie: załaduj krytyczny CSS inline, a resztę później; skrypty zewnętrzne z defer lub async.
• Fonty webowe: font-display: swap, wstępne ładowanie głównego fontu i, jeśli możesz, hostuj je sam zamiast ładować z Google Fonts.

Wysoki CLS

Prawie zawsze to obrazy bez width i height, reklamy lub osadzenia pojawiające się nagle, oraz fonty zmieniające rozmiar przy ładowaniu. Zadeklaruj wymiary każdego obrazu i iframe'a, zarezerwuj miejsce na bloki dynamiczne przez min-height i nigdy nie wstawiaj treści nad tym, co użytkownik już czyta.

Wysoki TBT

Za dużo JavaScriptu wykonywanego na starcie. Podziel bundle na ścieżki, ładuj ciężkie komponenty tylko wtedy, gdy są potrzebne, opóźnij skrypty analityczne i czatu do czasu po interakcji i sprawdź wagę bibliotek: przestarzałe biblioteki i pełna kopia jQuery dla jednego menu to typowe przypadki.

Sprawdź, czy naprawione

npx lighthouse https://twojadomena.pl --only-categories=performance --preset=perf --form-factor=mobile --screenEmulation.mobile --view

Albo wklej adres do PageSpeed Insights, które oprócz pomiaru laboratoryjnego pokazuje dane prawdziwych użytkowników z ostatnich 28 dni. Cel: LCP poniżej 2,5 s, CLS poniżej 0,1 i TBT poniżej 200 ms. Mierz kilka razy: wyniki laboratoryjne nieco się różnią między uruchomieniami.

Często zadawane pytania

Moja strona ładuje się szybko na moim komputerze. Dlaczego wypada źle?

Bo pomiar symuluje telefon ze średniej półki na wolnym 4G, czego używa duża część Twoich odwiedzających. Twój laptop na światłowodzie nie jest reprezentatywnym przypadkiem.

Czy 100 punktów wydajności pomaga SEO bardziej niż 90?

Nie zauważalnie. Google rozróżnia „dobrze", „wymaga poprawy" i „słabo" dla każdej metryki; gdy już jesteś w „dobrze", reszta to doświadczenie użytkownika, nie ranking. Skup się na wyjściu z czerwieni, nie na pogoni za 100.

Czy ta kontrola mierzy wszystkie moje strony?

Tylko skanowany adres. Jeśli Twoja strona produktu lub blog mają inne problemy, zeskanuj je osobno. Pozostałe kontrole tego filaru, jak dostępność, też pracują na konkretnej stronie.