Podstawowe wskaźniki internetowe: przewodnik po zwiększaniu szybkości strony

Jakie są podstawowe wskaźniki internetowe?

Podstawowe wskaźniki internetowe dotyczące doświadczenia użytkownika są następujące:

  1. Największe wyrenderowanie treści (LCP): Ta metryka mierzy czas potrzebny na wyświetlenie użytkownikom głównej treści na stronie internetowej. Google zaleca LCP poniżej 2,5 sekundy.
  2. Opóźnienie pierwszego wejścia (FID): FID mierzy czas odpowiedzi Twojej strony internetowej, gdy użytkownik wchodzi w interakcję ze stroną po raz pierwszy. Obejmuje to kliknięcia linków, stuknięcia przycisków i niestandardowe działania JavaScript. Google zaleca FID poniżej 100 milisekund.
  3. Kumulacyjne przesunięcie układu (CLS): Mierzy liczbę przesunięć układu, które nieoczekiwanie przenoszą główną zawartość strony internetowej. Zmiany te wpływają na zdolność użytkownika do prawidłowego czytania treści i interakcji ze stroną. Google zaleca wynik CLS równy 0,1 lub mniej.

reklama:

Narzędzia do mierzenia kluczowych wskaźników internetowych

Google włączyło Core Web Vitals do kilku swoich najlepszych narzędzi dla programistów i webmasterów, zaczynając od raportu Chrome User Experience Report .

Ten raport zbiera prawdziwe dane od użytkowników przeglądających internet, a następnie udostępnia je programistom za pomocą narzędzi takich jak PageSpeed ​​Insights i Google Search Console.

PageSpeed ​​Insights analizuje wydajność Twojej strony internetowej i sugeruje, jak zwiększyć jej szybkość. Przegląda wszystkie trzy kluczowe wskaźniki internetowe zarówno w przeglądarkach mobilnych, jak i stacjonarnych. Dane pola odnoszą się do rzeczywistych danych użytkownika z raportu Chrome User Experience Report.

W Google Search Console znajdziesz podstawowe wskaźniki internetowe dla swoich stron internetowych. Google Search Console wykorzystuje dane z raportu z doświadczeń użytkowników Chrome, aby pokazać problemy w Twojej witrynie.

Rozszerzenie Chrome Web Vitals umożliwia wyświetlanie podstawowych wskaźników internetowych podczas przeglądania sieci lub wprowadzania zmian na stronach internetowych.

Rozszerzenie może również przeglądać aktualne wyniki konkurencji. Korzysta z biblioteki web-vitals wraz z danymi pola z raportu Chrome User Experience Report.

Każde z tych narzędzi umożliwia przeglądanie LCP, FID i CLS Twojej witryny. Witryny o zbyt małym ruchu mogą nie mieć niektórych wskaźników, w szczególności w Google Search Console.

Aby szybko przejrzeć swoje kluczowe wskaźniki internetowe, możesz rozpocząć projekt swojej witryny w Semrush . Korzystając z narzędzia Site Audit, możesz zobaczyć LCP i CLS dla dowolnych 10 stron, które wybierzesz.

Nie będziesz w stanie sprawdzić swojego FID za pomocą narzędzia audytu witryny, ale śledzi on podobny wskaźnik: łączny czas blokowania (TBT). Przeczytaj więcej o tym, jak ten wskaźnik działa, w przewodniku Semrush dotyczącym mierzenia CWV za pomocą narzędzia Site Audit.

Możesz przeglądać swoje podstawowe wskaźniki internetowe zarówno w przeglądarkach stacjonarnych, jak i mobilnych, ale musisz utworzyć projekt dla każdego urządzenia. Po ponownym przeprowadzeniu audytu narzędzie zwraca wszelkie zmiany w najważniejszych danych od ostatniego audytu. Może to być przydatne, jeśli aktualizujesz wiele stron jednocześnie w celu zwiększenia wydajności.

Dlaczego kluczowe wskaźniki internetowe są ważne

Google oficjalnie dodał Core Web Vitals do swojego algorytmu wyszukiwania . Pełne wdrożenie aktualizacji jakości strony powinno zakończyć się do sierpnia 2021 roku .

Poprawa LCP, FID i CLS może pozytywnie wpłynąć na użytkowników i rankingi na mobilnych stronach wyników wyszukiwania. Wzrost nawet o jedną pozycję na pierwszej stronie wyników wyszukiwania może skutkować znacznym wzrostem ruchu.

To samo dotyczy doświadczenia użytkownika. Jeśli możesz poprawić wrażenia użytkownika, może to spowodować znaczny wzrost biznesu dzięki pozytywnym odesłaniom z ust do ust, recenzjom i powtarzającym się działaniom.

Zapewnienie słabego doświadczenia użytkownika w postaci wolno ładującej się strony internetowej może skutkować niekorzystnym wzrostem współczynnika odrzuceń. Wyższy współczynnik odrzuceń może oznaczać, że ludzie opuszczają Twoją witrynę bez przewijania, klikania lub, co ważniejsze, konwersji.

Google odkrył, że współczynnik odrzuceń dla strony internetowej, której ładowanie trwa od jednej do pięciu sekund, wzrasta o 90%.

Jak ulepszyć podstawowe wskaźniki internetowe

Teraz, gdy już wiesz, czym są podstawowe wskaźniki internetowe i jak je mierzyć w swojej witrynie, przyjrzyjmy się kilku zaleceniom, jak je ulepszyć i poprawić wrażenia użytkownika.

Poziom kontroli, jaką masz nad swoją witryną i serwerem, zależy od platformy, z której korzystasz w swojej witrynie (WordPress, Shopify itp.) oraz od firmy hostingowej.

 

Jak ulepszyć największą zawartość farby?

Google oferuje kilka wskazówek dotyczących optymalizacji witryny i ulepszania metryki największej zawartości treści dla Twoich stron internetowych. Zacznij od swojego serwera WWW. Jeśli doświadczasz poważnych opóźnień, być może nadszedł czas, aby zmienić hosting z serwera współdzielonego na serwer dedykowany.

Rozważ wszelkie procesy, które mogą działać w Twojej witrynie, które można wyłączyć lub lepiej zoptymalizować pod kątem wydajności. Na przykład w witrynie WordPress możesz zmniejszyć liczbę procesów obsługiwanych przez Twoją bazę danych, usuwając przestarzałe lub nieużywane wtyczki.

Drugą wskazówką oferowaną przez Google jest korzystanie z sieci dostarczania treści (CDN). Usługi CDN są czasami dołączane do planów hostingowych na poziomie biznesowym.

Jeśli nie, możesz skorzystać z usług takich jak Google Cloud lub Cloudflare, aby wydłużyć czas ładowania poprzez dystrybucję treści na serwerach na całym świecie. Usługi CDN zapewniają szybkie ładowanie Twojej witryny, bez względu na to, jak daleko od Twojego serwera znajdują się użytkownicy.

Następnie umieść zawartość w pamięci podręcznej, aby strony HTML były najpierw obsługiwane w pamięci podręcznej. Gdy Twoja statyczna zawartość HTML jest przechowywana w pamięci podręcznej, nie musi być ładowana za każdym razem, gdy użytkownik odwiedza Twoją stronę internetową.

Właściciele witryn WordPress mogą używać wtyczek do buforowania, takich jak W3 Total Cache lub WP Fastest Cache, aby automatycznie buforować zawartość w celu szybszego ładowania.

Jeśli korzystasz z innej usługi, może ona mieć ustawienia buforowania, które możesz skonfigurować w celu buforowania zawartości. Pamiętaj, że usługi buforowania nie mogą obsługiwać żądań serwera z usług innych firm, takich jak Facebook.

Połączenia wstępne mogą również poprawić prędkość ładowania. Są one niezbędne, gdy ładujesz treści pochodzące z domeny innej niż Twoja. Zamiast ładować nowe elementy z innych domen na stronie, użyj połączenia wstępnego w następujący sposób w sekcji HEAD kodu HTML swojej strony internetowej.

Nawiązując te połączenia z wyprzedzeniem, Twoja strona nie będzie musiała zatrzymywać się na częściowo załadowanej głównej treści, aby dostarczać obrazy lub inne zasoby odwiedzającym Twoją witrynę.

Możesz również wstępnie wczytać zasoby zewnętrzne, takie jak CSS i JavaScript, za pomocą następującego kodu:

 

<link rel=”preload” as=”style” > href=”style.css”>

 

Zapewni to, że zostaną załadowane na początku i zapobiegnie pełnemu załadowaniu treści.

Inne sposoby optymalizacji zarówno CSS, jak i JavaScript obejmują „minifikację” (usuwanie niepotrzebnych znaków) z arkuszy stylów i skryptów, usuwanie nieużywanego kodu i przenoszenie kodu, który nie jest potrzebny do wstępnego załadowania strony internetowej do wstępnie załadowanego zasobu. Aby uzyskać najbardziej krytyczny kod, rozważ dodanie go online.

Google zaleca CSSnano i csso do minimalizowania CSS, a UglifyJS do minimalizowania JavaScript. Możesz także zminifikować HTML za pomocą HTML Minifier .

Google Chrome DevTools ma funkcję Coverage, która analizuje użycie CSS i JavaScript na Twojej stronie. Może identyfikować kod, który można przenieść do wstępnie załadowanego zasobu, zakładając, że nie jest on używany przez coś w twoim stosie technologicznym.

Signed Exchanges (SXG) umożliwiają witrynom certyfikację treści dostarczanych z ich domeny za pośrednictwem strony trzeciej. Google nawiązał współpracę z Cloudflare, aby utworzyć AMP Real URL, umożliwiając wydawcom wyświetlanie oryginalnego adresu URL ich treści w treściach AMP z wyników wyszukiwania Google. Witryny, które otrzymują ruch z wyszukiwania, odnotują wzrost LCP po wdrożeniu SXG.

Dodatkowym sposobem na ulepszenie LCP jest optymalizacja i kompresja dowolnych plików tekstowych, obrazów, wideo i elementów blokowych używanych na Twoich stronach internetowych. Weź pod uwagę obrazy wstawione do kodu HTML na stronie, a także obrazy używane w tle lub elementy projektu w plikach CSS lub motywach. 

Więcej szczegółów technicznych na temat LCP można znaleźć w W3C Community Group Draft Report.

Jak poprawić opóźnienie pierwszego wejścia?

Poprawa czasu opóźnienia pierwszego wejścia w witrynie polega na optymalizacji kodu JavaScript i wykorzystaniu skryptów innych firm. Te ostatnie zazwyczaj odwołują się do narzędzi analitycznych witryny i dowolnego kodu, który wywołuje skrypt z innej witryny.

Jak wspomniano wcześniej, można zoptymalizować użycie JavaScript, minimalizując (usuwając niepotrzebne znaki) ze skryptów, usuwając nieużywany kod i przenosząc kod, który nie jest potrzebny do wstępnego załadowania strony internetowej do wstępnie załadowanego zasobu.

Użyj funkcji Google Chrome DevTools Coverage, aby zidentyfikować kod, który można przenieść do wstępnie załadowanego zasobu.

Google zaleca UglifyJS, aby zminimalizować JavaScript. Możesz także zminimalizować HTML za pomocą HTML Minifier i CSS za pomocą CSSnano i csso .

Więcej informacji na temat szczegółów technicznych związanych z interfejsem Event Timing API, który analizuje opóźnienie interakcji użytkownika, można znaleźć w raporcie przygotowanym przez grupę społeczności W3C.

Jak poprawić skumulowane przesunięcie układu

Aby poprawić wynik CLS swoich stron internetowych, musisz poinformować przeglądarkę, ile miejsca ma zapewnić ładowanym elementom. Możesz to zrobić, dodając określone atrybuty rozmiaru do zdjęć i filmów.

Alternatywnie możesz użyć przyjaznych proporcji pól w CSS. Oba osiągną pożądany cel, jakim jest zapobieganie nieoczekiwanemu przesunięciu treści podczas ładowania strony.

Używanie wskaźników na stronie jest również zalecane dla elementów, które przesuną się po załadowaniu po interakcji użytkownika ze stroną. Poinformowanie użytkownika, że ​​elementy ładują się na stronie, może uniemożliwić mu klikanie w przesuwające się elementy.

 

Uwagi końcowe.

Jeśli nie wiesz, jak dobrze Twoja witryna radzi sobie z użytkownikami, przejrzyj kluczowe wskaźniki internetowe swoich najpopularniejszych stron.