← wszystkie wpisyTechniczne27 czerwca 20269 min czytania
Core Web Vitals: co poprawić na stronie firmowej
Trzy skróty, które wypadają z każdego audytu i z każdej oferty na SEO. Poniżej wyjaśnienie, co znaczą po ludzku, jak sprawdzić swoje wyniki w dwie minuty i co konkretnie poprawić - z podziałem na to, co zrobisz sam, i to, co musi zrobić wykonawca.
Trzy wskaźniki, po ludzku
Google mierzy nie prędkość serwera, a to, czego doświadcza człowiek wchodzący na stronę z telefonu. Stąd trzy zupełnie różne pytania:
LCPLargest Contentful Paint
Po jakim czasie widać najważniejszą rzecz na ekranie?
Zwykle chodzi o duże zdjęcie w nagłówku albo tytuł. Do momentu, w którym się pokażą, klient patrzy na pustą stronę i zastanawia się, czy nie wrócić do Google. To wskaźnik, który w małych firmach wypada najgorzej, i prawie zawsze winne są zdjęcia.
dobrze: do 2,5 sźle: ponad 4 s
INPInteraction to Next Paint
Jak szybko strona reaguje na kliknięcie?
Klikasz w menu, w przycisk telefonu, w rozwijane pytanie - i albo dzieje się to od razu, albo z opóźnieniem, po którym klient klika drugi raz. Winne bywają wtyczki, czaty, banery i skrypty reklamowe, które robią coś w tle w momencie kliknięcia.
dobrze: do 200 msźle: ponad 500 ms
CLSCumulative Layout Shift
Czy treść skacze podczas ładowania?
Zaczynasz czytać, doładowuje się zdjęcie albo baner cookie, tekst przeskakuje w dół i klikasz nie tam, gdzie chciałeś. Najbardziej irytujący z trzech wskaźników i zwykle najłatwiejszy do naprawy, bo wystarczy podać wymiary obrazków.
dobrze: do 0,1źle: ponad 0,25
Błąd, który popełnia większość
Gonienie wyniku 100 na 100 w PageSpeed Insights. Ten wynik to ocena jednego testu na symulowanym, celowo wolnym telefonie - nie Twoja realna wydajność. Liczy się przejście trzech wskaźników do zieleni na danych z prawdziwego ruchu. Różnica między 78 a 95 punktami zwykle nie zmienia niczego dla klienta.
Jak sprawdzić swoje wyniki
Dwa bezpłatne narzędzia Google. Pierwsze pokazuje jeden test i listę problemów, drugie prawdę o realnych wizytach.
01PageSpeed Insights
Wpisujesz adres strony i dostajesz wynik osobno dla telefonu i komputera, a pod nim listę konkretnych problemów posortowaną po tym, ile czasu da się odzyskać. Tę listę wyślij wykonawcy - jest gotowym zakresem prac.
02Raport Core Web Vitals w Search Console
Pokazuje dane z realnych wizyt na Twojej stronie przez ostatnie 28 dni i grupuje podstrony na dobre, wymagające poprawy i słabe. To jest wersja, którą widzi Google - i jedyna, na którą warto patrzeć po wdrożeniu poprawek.
Zawsze patrz na wynik dla telefonu, nie dla komputera. Ruch na stronie usługowej to w większości telefony, a Google ocenia witryny właśnie w wersji mobilnej.
Co poprawisz sam, bez programisty
Pięć rzeczy, które nie wymagają wiedzy technicznej i odpowiadają za większość poprawy na stronie małej firmy. Pierwsza z nich zwykle wystarcza, żeby ruszyć wynik z czerwonego.
01Zmniejsz zdjęcia przed wgraniem
Zdjęcie z telefonu ma 4-8 MB i 4000 pikseli szerokości. Na stronie potrzebujesz maksymalnie 1600 pikseli i 200-400 kB. To jedna zmiana, która potrafi skrócić czas ładowania o połowę. Bezpłatne narzędzia: Squoosh albo TinyPNG.
02Usuń wtyczki, których nie używasz
Każda dodaje własne skrypty do każdej podstrony, także te wyłączone. Przejrzyj listę i usuń wszystko, czego nie potrafisz wskazać na stronie.
03Wyrzuć suwak zdjęć z nagłówka
Karuzela z pięcioma zdjęciami na starcie to pięć plików do pobrania, zanim klient cokolwiek zobaczy. Jedno dobre zdjęcie działa lepiej i sprzedażowo, i technicznie.
04Ogranicz liczbę czcionek
Dwie rodziny i po dwie grubości każdej wystarczają na całą stronę. Każda dodatkowa to osobny plik, który blokuje pokazanie tekstu.
05Sprawdź, co robi baner cookie
Jeśli doładowuje się z opóźnieniem i przepycha treść w dół, psuje CLS. Powinien mieć zarezerwowane miejsce od pierwszej sekundy.
Co musi zrobić wykonawca
Sześć rzeczy wymagających dostępu do kodu i serwera. Możesz przekleić tę listę do wiadomości - dla osoby technicznej jest zrozumiała bez tłumaczenia.
01Nowoczesny format i leniwe ładowanie obrazków
Konwersja zdjęć do formatu WebP i wczytywanie tych spod ekranu dopiero przy przewijaniu. Do tego wymiary wpisane w kod, co od razu naprawia CLS.
02Wpisanie wymiarów wszystkich elementów
Obrazki, banery, ramki wideo i reklamy muszą mieć zarezerwowane miejsce przed doładowaniem. Bez tego treść skacze niezależnie od prędkości serwera.
03Ograniczenie i odłożenie skryptów
Czaty, piksele reklamowe i narzędzia analityczne wczytywane po treści, nie przed nią. Największy zysk na INP, przy zerowej zmianie w tym, co widzi klient.
04Usunięcie nieużywanego kodu CSS i JS
W stronach na szablonach zwykle 60-80 procent kodu nie jest używane na danej podstronie. Wycięcie tego skraca czas do pierwszego wyświetlenia.
05Cache i CDN
Zapamiętywanie gotowych stron i podawanie plików z serwera bliżej użytkownika. Pojedyncza konfiguracja, która działa na wszystkich podstronach naraz.
06Zmiana hostingu, jeśli to on jest problemem
Najtańszy hosting współdzielony potrafi odpowiadać po sekundzie i żadna optymalizacja tego nie nadrobi. Warto sprawdzić czas odpowiedzi serwera przed innymi pracami.
Ile realnie da się zyskać
Nie wszystko jest warte tego samego. Poniżej rzeczy w kolejności od największego zysku za najmniejszy nakład.
Kompresja zdjęć
Sam, jeden wieczór
Największy pojedynczy zysk na LCP - często 1-2 sekundy
Wymiary obrazków w kodzie
Wykonawca, kilka godzin
CLS zwykle wchodzi do zieleni
Odłożenie skryptów
Wykonawca, kilka godzin
Wyraźna poprawa INP, strona reaguje od razu
Cache i CDN
Wykonawca, jednorazowo
Krótszy czas odpowiedzi na wszystkich podstronach
Zmiana hostingu
Przeprowadzka, 1-2 dni
Do sekundy mniej, gdy stary serwer był wąskim gardłem
Szybkość jest w Google jednym z wielu czynników i waży mniej niż trafność treści. Ale na zapytania wpływa od pierwszego dnia - część klientów wychodzi, zanim strona się otworzy, i nie zobaczysz ich w żadnym raporcie.
Sprawdzimy Twoje wskaźniki za darmo
Przejrzymy trzy wskaźniki na wszystkich podstronach i odeślemy listę poprawek podzieloną na te do zrobienia samemu i te wymagające kodu. Bez zobowiązań.
Chcę darmowy audyt SEOKolejność prac
Pięć kroków w kolejności, w której faktycznie warto je wykonać:
→Sprawdź wynik w PageSpeed Insights dla telefonu i zapisz dzisiejsze liczby
→Skompresuj wszystkie zdjęcia i wgraj je ponownie - to zrobisz sam i dziś
→Usuń nieużywane wtyczki oraz suwak zdjęć z nagłówka, jeśli go masz
→Wyślij wykonawcy listę problemów z PageSpeed jako zakres prac
→Po dwóch tygodniach sprawdź raport w Search Console, nie sam PageSpeed
Błąd, który popełnia większość
Sprawdzanie efektu w PageSpeed dzień po poprawkach i wnioskowanie, że nic nie pomogło. Raport w Search Console opiera się na danych z 28 dni, więc po wdrożeniu potrzebuje kilku tygodni, żeby pokazać nowy stan.
Podsumowanie
→Trzy wskaźniki odpowiadają na trzy pytania: kiedy widać treść, jak szybko reaguje, czy nie skacze
→Zdjęcia są przyczyną większości problemów na stronach małych firm
→Wynik punktowy jest orientacyjny - liczy się zieleń na trzech wskaźnikach z realnego ruchu
→Połowę pracy zrobisz sam, bez wiedzy technicznej i bez kosztów
→Szybkość jest jednym z wielu czynników w Google, ale wpływa na zapytania od pierwszego dnia
Jeśli masz zrobić z tego wpisu jedną rzecz: skompresuj zdjęcia. W dziewięciu przypadkach z dziesięciu to one są przyczyną złego wyniku na stronie małej firmy, a naprawa nic nie kosztuje.
