Core Core Web Vitals – darmowe i szybkie rozwiązania dla zbyt wolnej strony

Artykuł uaktualniony 3 miesiące

Czy Core Web Vitals są istotne dla Twojej strony? Uzyskanie 100% w Google Szybkość Witryny nie jest łatwe. Jednak po drodze do tego ideału jest kilka kroków, które znacząco poprawią działanie Twojej strony. Rozwiązania te nie tylko są darmowe, ale też mają bezpośrednie przełożenie na to, ile zarabia Twoja strona.

Co to są Core Web Vitals?

Podstawowe funkcje Web Vitals to zbiór określonych czynników, które Google uważa za istotne dla przeciętnego użytkownika strony internetowej. Core Web Vitals składa się z trzech konkretnych parametrów szybkości lądowania strony i interakcji użytkownika: largest contentful paint, first input delay, i cumulative layout shift.

Largest Contentful Paint (LCP), to czas potrzebny na załadowanie się największego elementu na konkretnej podstronie , może to być video, kawałek tekstu czy obraz.

First Input Delay (FID) to czas, po którym użytkownik jest w stanie rozpocząć interakcję na twojej stronie internetowej, oznacza to czas w jakim strona staje się interaktywna czyli ma aktywne łącza,

CLS, czyli Cumulative Layout Shift odpowiada za pomiar zmian położenia elementów layoutu podczas ładowania się strony. Mierzony jest on w skali od 0 do 1.

Krótko mówiąc, Core Web Vitals to podzbiór czynników, które będą częścią wyniku Google „jakość strony” (czyli sposób, w jaki Google ocenia ogólny poziom UX strony).

Na co wpływa prędkość ładowania strony?

Prędkość ładowania strony jest kluczowa zmienna.

Niestety, Google daje preferencje stronom o czasie ładowania nie dłuższym niż 3 sekundy, co niełatwo osiągnąć. Powolna strona zatem nie tylko może irytować użytkownika, ale jest też trudniejsza do znalezienia w wyszukiwarce.  

Nawet ci, którzy już trafią na Twoją stronę, szybko się mogą zniechęcić, gdy strona będzie się zbyt długo ładować. Aż 79% osób robiących zakupy w sieci uznało, że nie wróci na stronę, która miała problemy z ładowaniem.

Statystyki mówią także, że witryny, które ładują się w 5 sekund, mają o 70% dłuższe sesje niż te, które potrzebują do załadowania 19 sekund. Nawet 100 milisekund różnicy w ładowaniu może spowodować spadek współczynnika konwersji o 7%!

Choć liczby są brutalne, nie powinny dziwić. Szybko zapomnieliśmy czasy, gdy otworzenie e-maila zajmowało wystarczająco długo, że można było w międzyczasie zrobić herbatę czy wyjść na papierosa. Co gorsza, naszym zniecierpliwieniem lubimy się dzielić. 44% ankietowanych przyznało, że na słabe doświadczenia w Internecie narzeka ze znajomymi albo wystawia serwisowi negatywną recenzję.

Jaki jest optymalny czas ładowania strony?

Odpowiedź jest prosta: jak najkrótszy. Z badań nad zwyczajami internautów wynika, że liczy się dosłownie każda sekunda.

Dowodem może być badanie Amazona, który przeprowadził symulację sytuacji, gdy prędkość ładowania strony spada o 1 sekundę. Rezultatem była strata roczna w wysokości 1,6 mld dolarów.

Ale nie tylko w teorii istnieje bezpośredni związek pomiędzy szybkością ładowania strony a zyskami ze strony. AliExpress zaobserwował wzrost zamówień o 10,5% i 27% więcej konwersji wśród nowych klientów po zredukowaniu czasu ładowania strony o 36%.
Ideałem jest 2,4 sekundy, a ocena w PageSpeed Insights powinna wynosić minimum 80/100 punktów. 

Dla urządzeń mobilnych sprawdź Test my site.

Wartości Core Web Vitals w Google dla urządzeń mobilnych to:

1. średni speed index — do 3 sekund,
2. czas do załadowania pierwszego bajta — poniżej 1,3 sekundy,
3. średni request count — nie więcej niż 50,
4. średnia waga strony — maksymalnie 500KB.

Narzędzie to poinformuje Cię też, ilu potencjalnych klientów tracisz przez niewystarczającą wydajność serwisu.

Jeśli Twoja strona potrzebuje 10 sekund, żeby się załadować, prawdopodobieństwo, że użytkownik opuści w tym czasie stronę wynosi aż 120%!

Chociaż strony o najwyższych rankingach w Google wyświetlają się w mniej niż 3 sekundy, przeciętny czas, jaki większość stron potrzebuje do załadowania się to 8 sekund. To prawie trzy razy za długo!

Jak przyspieszyć ładowanie Twojej strony? Core Web Vitals

Czasami niełatwo zdiagnozować, co spowalnia Twoją stronę. Problemem może być kod, zbyt duże zdjęcia czy nieprawidłowe formatowanie.

Jak zatem uniknąć zniechęconych klientów i problemów z pozycjonowaniem?

Pierwszym krokiem, by przekonać się, jak wypada Twoja strona, jest wejście na PageSpeed Insights. Wpisz adres swojej strony i kliknij „analizuj”.  Szybki raport wyposaży Cię we wszystkie informacje, których potrzebujesz.

Warto pamiętać, że ponad połowa ruchu na przeciętnej stronie pochodzi z telefonów komórkowych, dlatego należy sprawdzić oddzielnie także wersję mobilną. 

Rozmiar ma znaczenie

Rozmiar strony nie powinien przekraczać 500KB.

To bardzo niewiele. Jedno zdjęcie o przeciętnej rozdzielczości potrafi ważyć 1.49MB. Wydawałoby się, że jedno zdjęcie na stronie internetowej to nie dużo, ale nawet niepozorne 1.49MB potrzebuje 7 sekund, żeby się wyświetlić.

Jednym z najprostszych rozwiązań, by przyspieszyć działanie strony jest plugin.

Zacznij od Smusha na WordPressie, który pomoże Ci w łatwy sposób skompresować zdjęcia. 

Przydatna jest też Optimizilla. W kilka sekund zmniejszysz ciężar zdjęcia nawet o 70 %.

Zaufaj pamięci caching

Istotnym narzędziem jest też caching. Jego funkcją jest zapamiętywanie już załadowanych elementów, więc gdy użytkownik porusza się po zakładkach strony, nie musi za każdym razem czekać od początku na ładowanie elementów stałych, np. loga. Na szczęście nie trzeba być programistą, żeby skorzystać z tej funkcji. Wystarczy, że zainstalujesz wtyczkę.

Wypróbuj W3 Total Cache dla witryn w WordPressie. To najbardziej popularna wtyczka tego typu z ponad milionem użytkowników.  Twórcy wtyczki obiecują przynajmniej dziesięciokrotną poprawę funkcjonowania strony. 

Minifikacja

Kolejnym krokiem jest minifikacja, czyli zmniejszenie kodu źródłowego HTML poprzez usunięcie zbędnych znaków bez zmiany funkcjonalności. Sztuczkę tę stosuje się najczęściej przy skryptach JavaScript. Proces opiera się na sformatowaniu kodu i usunięciu powtarzających się elementów. WordPress oferuje darmowe narzędzid także i do tego kroku.

W ustawieniach znajdziesz opcje “Minify HTML” oraz “Inline JavaScript”.

Zastosuj AMP

AMP, czyli Accelerated Mobile Pages to kodowanie open-source ulepszające działanie mobilnej strony internetowej. Znów wystarczy darmowa wtyczka, by stworzyć uproszczoną kopię swojej strony, która wyświetlać się będzie automatycznie tylko użytkownikom urządzeń mobilnych. Formatowanie takiej strony zawiera tylko to, co niezbędne. Zamiast zakładek, strona taka może być po prostu scrollowana, a zatem nie musi się ładować od nowa przy każdym kliknięciu.  

Zredukuj do minimum przekierowania

Każde przekierowanie rezultuje oczekiwaniem na przetworzenie przez HTTP żądania.

Przekierowania mają miejsce na skutek zmiany adresu podstrony. Stosuje się je też przy wdrażaniu certyfikatu SSL albo wybieraniu wersji adresów – z www lub bez. Wielokrotne zmiany adresu tworzą łańcuchy przekierowań,  które obciążają stronę.

Niezliczone badania nad ładowaniem strony po raz kolejny udowadniają, że czas to pieniądz. Jak w każdym wyścigu liczą się sekundy, a o tym, kto dotrze do mety jako pierwszy, decyduje wcześniejsze przygotowanie.