Core Web Vitals i przewaga stron JAMstack

Core Web Vitals to trzy nowe wskaźniki wbudowane w nowy algorytm Google (wprowadzony od czerwca 2021) oceniający zadowolenie użytkowników z korzystania ze stron internetowych. Te nowe wskaźniki wpływają znacząco na sposób pozycjonowania stron w wynikach wyszukiwania. Opanowanie ich staje się kluczowe dla Twoich działań i decyzji w zakresie SEO.

6 min read

Core Web Vitals: Why JAMstack could hold the key

Zespół ds. treści Cobiro

W tym artykule opiszemy wspomniane wskaźniki, sposoby ich mierzenia (również w odniesieniu do Twojej witryny) oraz wyjaśnimy dlaczego witryny JAMstack są idealnie przystosowane do spełniania i przekraczania wyznaczonych, przez te wskaźniki, nowych standardów.

Nowy algorytm oceny zadowolenia z odwiedzanych stron internetowych od Google

Nadrzędnym celem nowego algorytmu Google jest zwiększenie zadowolenia użytkowników sieci, a sposobem w jaki to osiąga jest pomiar zadowolenia użytkowników z interakcji z ocenianą stroną internetową. Witryny, które reagują na potrzeby użytkowników w najbardziej efektywny sposób zdobywają szansę na uzyskanie wyższej pozycji w porównaniu ze witrynami, które tego nie zrobią.

Wraz ze stopniowym wdrażaniem od czerwca 2021 r. Google zacznie łączyć niektóre ze stosowanych już miar z nowymi wskaźnikami Core Web Vitals, co w sumie złoży się na nowy algorytm oceny stron, w pełni wdrożony z końcem sierpnia. 

Obecnie istniejące już miary, takie jak przyjazność dla urządzeń mobilnych, bezpieczne przeglądanie oraz połączenie, opisaliśmy w naszym artykule objaśniającym pomiar zadowolenia użytkowników stron internetowych. W tym artykule skupimy się na nowych wskaźnikach Core Web Vitals.

Core Web Vitals

Trzy wskaźniki Core Web Vitals oceniają te zagadnienia, które według Google w istotny sposób wpływają na ogólne zadowolenie użytkownika z korzystania z danej strony internetowej.

Sięgają one głębiej niż kiedykolwiek wcześniej, mierząc takie kwestie, jak czas ładowania, interaktywność i stabilność stron – wszystko co ma znaczący wpływ na to, jak użytkownik postrzega i wchodzi w interakcję ze stroną internetową. Poniżej użyjemy oryginalnych – angielskich - nazw wskaźników i ich skrótów, zaproponowanych przez Google, jednocześnie wyjaśniając poniżej ich znaczenie i zastosowanie.

1. Largest Contentful Paint (LCP)

Jest to pomiar czasu niezbędnego do wczytania największego fragmentu treści na Twojej stronie. 

Google bierze pod uwagę największy obraz lub blok tekstu na stronie i oblicza czas potrzebny do jego wyświetlenia (a więc do jego pełnego załadowania i ukazania) jaki minął od początku wczytywania całej strony. Im dłużej użytkownicy będą czekać na wczytanie, tym gorszy będzie ogólny odbiór interakcji z witryną.

Cel do którego należy dążyć: czas wczytywania największego elementu wynoszący 2,5 sekundy lub mniej.

2. First Input Delay (FID)

Jest to pomiar czasu, po którym strona staje się w pełni interaktywna i odpowiadająca na działania użytkownika.

Google oblicza czas, jaki upłynął od pierwszej interakcji użytkownika z Twoją stroną (czyli kliknięcia linku, dotknięcia przycisku lub przesłania formularza) do momentu, w którym przeglądarka jest w stanie odpowiedzieć na zapytanie.

Cel do którego należy dążyć: opóźnienie mniejsze niż 100 milisekund.

3. Cumulative Layout Shift (CLS)

Jest to pomiar wskazujący jak często, na Twoje witrynie, zdarzają się nieoczekiwane przez użytkownika zmiany wyświetlanej treści.

Elementy, takie jak reklamy firm zewnętrznych lub obrazy bez zadanych stałych wymiarów, które zmieniają swój kształt podczas przeglądania strony mogą przyczynić się do obniżenia postrzeganej jakości. Aby wyliczyć wartość CLS Google analizuje przestrzeń jaką zajmuje element i jak bardzo porusza się on na ekranie podczas przeglądania strony przez użytkownika.

Cel do którego należy dążyć: punktacja poniżej 0.1.

Jak zmierzyć Core Web Vitals dla Twojej witryny

Ponieważ Core Web Vitals w największym stopniu, ze wskaźników stosowanych przez Google, wpływa na ocenę jakości strony, warto przeprowadzić audyt własnej witryny i podjąć kroki w celu jej optymalizacji pod względem nowego algorytmu.

Istnieje kilka narzędzi, które mogą w tym pomóc, ale Google’s PageSpeed Insights od Google wydaje się być optymalnym na początek. 

Aby rozpocząć, wprowadź pełny adres URL jednej ze swoich stron. Po kliknięciu „analizuj” pojawi się Twój wynik. Uwaga - u góry strony możesz przełączać się między testem strony dla urządzeń mobilnych i stacjonarnych.

Maksymalny wynik dla Twojej strony może wynieść 100 punktów. Poniżej 50 punktów (kolor czerwony) wynik jest uważany za słaby, wynik od 50 do 89 punktów (kolor pomarańczowy) oznacza, że strona wymaga poprawek natomiast wynik w zakresie 90 do 100 punktów (kolor zielony) to już wynik dobry.

Każdy obszar oceny strony jest następnie rozpisany z zaleceniami dotyczącymi działań, które mogą zostać podjęte, aby ten wynik poprawić.

Popraw swój wynik Core Web Vitals dzięki witrynie opartej na JAMstack

Wprowadzanie niezbędnych ulepszeń do Twoje witryny często jest skomplikowane i czasochłonne jednak przejście na JAMstack może znacznie ułatwić ten proces.

Przyjrzyjmy się bliżej, czym jest JAMstack i jak pomaga przezwyciężyć problemy, które wcześniej prowadziły do niskich wyników Core Web Vitals.

Czym jest JAMstack?

JAMstack to nowoczesne podejście do budowania stron internetowych. Nie jest to język programowania czy też narzędzie ale cała architektura, która dostarcza szybkie i przyjazne dla użytkownika strony internetowe.

JAMstack to akronim oznaczający połączenie języka JavaScript, interfejsów programowania aplikacji (API) oraz znaczników (Markup). Każdy komponent architektury jest odseparowany od pozostałych ułatwiając łatwiejszą nad nim pracę. Elementy te zostają od siebie oddzielone w sferze budowy strony, jednak nadal współdziałają ze sobą aby dostarczyć idealny efekt końcowy (stąd „stack”, czyli stos).

CDNs – Sieci Dostarczania Danych (ang. Content Delivery Networks)

Dla stron opartych na JAMstack treść witryny jest generowana w postaci statycznych plików bezpośrednio z serwera źródłowego witryny. Ten, jest buforowany i dostarczany do użytkowników poprzez sieć dostarczania treści (CDN) — opartą na globalnej sieć serwerów.

Ta sieć działa w taki sposób, aby zmniejszyć dystans jaki musi pokonać treść witryny zanim dotrze do użytkownika końcowego. Jeśli więc użytkownik z USA zainicjuje dostęp do Twojej hiszpańskiej witryny zawartość zostanie mu dostarczona z serwera CDN, który znajduje się  najbliżej jego lokalizacji, zamiast z serwera, na którym hostowana jest Twoja witryna w Hiszpanii.

Przeczytaj więcej o JAMstack w naszym kompleksowym przewodniku.

No więc jak połączyć to wszystko i wystartować?

Przyjrzyjmy się zatem dokładniej tym trzem wyzwaniom od Google w zakresie oceny zadowolenia użytkownika z odwiedzanej witryny i sprawdźmy jak przygotowane są witryny JAMstack aby te wyzwania przezwyciężyć.

Wyzwanie # 1: Strona ładuje się zbyt wolno

Rozwiązanie: zmień dostawcę hostingu Twoje strony. Dzięki witrynie JAMstack nie musisz dłużej opierać swej witryny na jednym serwerze aby dostarczyć zawartość stron użytkownikom. Ponieważ, w sieciach CDN, strony są prezentowane z najbliższego serwera (najbliższego w stosunku do faktycznej lokalizacji użytkownika) transfer danych nastąpi na mniejszym dystansie. To oznacza to, że strony będą niezwykle szybkie, często wczytując się w mniej niż jedną sekundę.

Wyzwanie #2: Obrazy i inne zasoby ładują się dopiero podczas przewijania strony w dół

Rozwiązanie: wygeneruj treść z wyprzedzeniem, aby wczytywanie nie spowalniało witryny. W witrynie JAMstack treść jest generowana w postaci statycznych plików, których kopie są następnie przechowywane w sieci CDN. Oznacza to, że gdy strona jest wczytywana, obrazy i zasoby są już dostępne i gotowe do wyświetlenia. 

Wyzwanie 3: Dynamiczne funkcje użyte w witrynie spowalniają jej prędkość

Rozwiązanie: wykonuj dynamiczne funkcje swojej witryny po stronie klienta (w przeglądarce internetowej użytkownika). Witryny JAMstack używają interfejsów API do komunikowania się z wstępnie wygenerowanymi funkcjami JavaScript w celu obsłużenia treści dynamicznych. Tak więc za każdym razem, gdy wymagana jest interakcja (np. wysłanie formularza), kod wykonuje się tak blisko miejsca, w którym znajduje się użytkownik, jak to tylko możliwe, dzięki czemu użytkownik ma wrażenie natychmiastowej odpowiedzi ze strony witryny.

To zaledwie kilka przykładów, ale w całym naszym opisie zauważysz z pewnością powtarzający się motyw: przewagę sieci CDN i ich zdolność do pokonywania tradycyjnie występujących problemów, które prowadzą do niezadowolenia użytkowników z działania witryny.

Jak rozpocząć przygodę z JAMstack

Zmień swoją istniejącą stronę internetową w rozwiązanie JAMstack

Posiadasz tradycyjną stronę internetową, ale chciałbyś ją hostować poprzez CDN? Pozwól Cobiro obsłużyć wszystkie potrzeby związane z hostingiem i przekształcić tą witrynę w błyskawicznie-szybkie rozwiązanie JAMstack.

Integracja Cobiro z GitHub (obecnie w wersji beta) zapewnia bezproblemowe połączenie między beznagłówkowym systemem CMS, statycznym generatorem witryn oraz hostem CDN. 

Po wdrożeniu, zawartość Twojej witryny będzie dostarczana za pośrednictwem CDN od Cloudflare, która obsługuje ruch online dla 16% firm z listy Fortune 1000 i obsługuje średnio 20 milionów (!) zapytań HTTP na sekundę.

Kiedy masz już stronę - od tradycyjnego kodu do JAMstack - sześć kroków:

1. Wybierz beznagłówkowy system CMS (np. Dato CMS, Contentful lub Agility)
2. Użyj generatora witryn, aby zbudować swoją statyczną witrynę
3. Zapisz swój kod w repozytorium Git w GitHub
4. Zaloguj się do platformy Cobiro i wybierz połączenie z GitHub
5. Kliknij „przebuduj”
6. Twoja witryna jest teraz hostowana przez CDN od Cloudflare

Już wkrótce hosting CDN będzie dostępny we wszystkich naszych płatnych planach (których ceny zaczynają się już od $1 miesięcznie). Dowiedz się więcej.

Stwórz stronę JAMstack całkowicie od podstaw

Kreator witryn Cobiro to jedyny darmowy program do tworzenia witryn internetowych na rynku, który wykorzystuje podejście JAMstack. Nie wymaga programowania, instalacji komponentów czy też dodatkowych wtyczek.

Twoja witryna będzie od samego początku szybka i bezpieczna.

Prostota

Skorzystaj z interfejsu „przeciągnij i upuść” i wybieraj spośród wielu elementów i projektów.

Wsparcie CDN

Zwiększ szybkość i wydajność swojej witryny, dystrybuując ją za pośrednictwem sieci CDN.

Integracje marketingowe

Wybierz aplikacje marketingowe i uzyskaj do nich dostęp bezpośrednio z platformy Cobiro.

Darmowy certyfikat SSL

Chroń poufne dane swoich klientów, stosując najlepsze standardy bezpieczeństwa stron internetowych.

Rejestracja domeny

Wybierz profesjonalną domenę. Wybierz domenę z pośród bezpłatnych rozszerzeń domen od Cobiro lub kup domenę za naszym pośrednictwem.

Wypróbuj kreator stron internetowych Cobiro za darmo!

People also read