Indeks prędkości: co to jest i jak zoptymalizować pod tym kątem witrynę

Indeks prędkości (SI) to interesujący wskaźnik, jeśli chodzi o szybkość strony. Jest to absolutnie wskaźnik wydajności Twojej strony, ale jest zupełnie inny od innych metryk skoncentrowanych na użytkowniku, takich jak First Contentful Paint i Largest Contentful Paint. SI wskazuje, jak szybko Twoja witryna ładuje się w części strony widocznej na ekranie. Innymi słowy, gdy cała zawartość w oknie użytkownika jest całkowicie widoczna. Patrząc na czasy wczytywania strony, prawdopodobnie nie zostaniesz ukarany ani nagrodzony za indeks prędkości. To nie jest powód, by to ignorować. Jako pojedynczy wskaźnik jest jednym z nielicznych, który obejmuje wiele innych wskaźników i może dać solidny obraz ogólnej szybkości, wydajności i wydajności witryny.

Subskrybuj nasz kanał YouTube

Co to jest indeks prędkości?

Lighthouse, szkielet Google dla PageSpeed ​​Insights, analizuje wiele wskaźników wydajności, aby ocenić Twoją witrynę. Jednym z nich jest indeks prędkości (SI), a raport będzie wyświetlał czas w sekundach, a nie w milisekundach, jak w przypadku niektórych innych wskaźników. Google definiuje SI jako „jak szybko zawartość strony jest w widoczny sposób wypełniana”.

Całkiem prosto, prawda?

Indeks prędkości nie uwzględnia skryptów zaplecza ani innych niepomalowanych ładunków. Jednak mają na to wpływ. SI to po prostu miara tego, ile czasu zajmuje użytkownikom zobaczenie Twoich treści w całości. To jest kicker. W całości . Podczas gdy inne wskaźniki, takie jak LCP, są mierzone w momencie wyświetlania największej części treści, indeks prędkości uwzględnia wszystkie treści, które powinny być wyświetlane.

Nie jest to miara ogólnej szybkości strony. Uwzględnia to, kiedy przeglądarka renderuje wszystkie elementy. W tym niewidoczne skrypty i elementy wpływające na wydajność. Jeśli jednak chcesz mieć dobry wskaźnik tego, kiedy użytkownicy postrzegają stronę jako w pełni załadowaną , SI jest wskaźnikiem do obejrzenia. Ze względu na to, jak bardzo jest zorientowany na użytkownika, SI może być dobrym wskaźnikiem ogólnego stanu witryny, a także punktem odniesienia dla doświadczenia użytkownika witryny (UX).

Jak zmierzyć indeks prędkości

Podobnie jak w przypadku większości wskaźników wydajności witryny, jednym z najlepszych narzędzi do wykorzystania jest własny PageSpeed ​​Insights firmy Google. To narzędzie jest również jednym z najbardziej szczegółowych wyników, które zwraca. Stosunkowo krytycznie odnosi się do nawet najlepiej skomponowanych witryn. PageSpeed ​​Insights najczęściej udostępnia dane laboratoryjne dotyczące Twojej witryny na podstawie danych zebranych z ostatnich 28 dni. Jeśli jednak masz wystarczającą liczbę odwiedzających, którzy przekazują informacje z powrotem do Google za pośrednictwem przeglądarki Chrome, możesz również uzyskać z raportu dane z rzeczywistego pola . Jednak nie każda witryna może to uzyskać.

Jak widać, prędkość wielu z tych wskaźników jest na zielono. Oznacza to, że są „dobre”. To jest oczywiście miejsce, w którym chcesz mieć swoją witrynę. Jednak indeks prędkości wynosi 4,0 sekundy i jest pomarańczowy. To bardzo długo, zanim użytkownik czeka, aby zobaczyć wszystko ponad zakładką.

Co to jest dobry wynik indeksu prędkości?

PageSpeed ​​Insights korzysta z następujących wyników w celu uszeregowania indeksu szybkości witryny i odpowiedniego oznaczenia kolorami:

• Zielony (dobry) – od 0 do 3,4 sekundy
• Pomarańczowy (umiarkowany) – 3,4 do 5,8 sekundy
• Czerwony (wolny) – ponad 5,8 sekundy

Jak powiedzieliśmy wcześniej, PageSpeed ​​Insights ma bardzo krytyczne znaczenie w swoich pomiarach. Jeśli jesteś w kolorze pomarańczowym lub czerwonym, możesz użyć narzędzia takiego jak GTmetrix lub Pingdom's Speed ​​Test, aby zobaczyć, co pokazują ich dane w czasie rzeczywistym. Uważamy, że najlepiej przetestować witrynę przy użyciu wielu narzędzi w różnym czasie, aby uzyskać najlepszy obraz ogólnej wydajności.

Jak zoptymalizować swój wynik indeksu prędkości

Możesz podjąć szereg kroków, aby zoptymalizować swój wynik indeksu prędkości. Jeśli próbowałeś zoptymalizować swoją witrynę pod kątem jakiegokolwiek wzrostu szybkości strony (lub, technicznie, zmniejszenia), prawdopodobnie w jakiś sposób wpłynęło to również na wynik SI. Pokażemy Ci kilka sposobów na ukierunkowanie na czas SI, aby Twoja strona ładowała się tak szybko, jak to możliwe, aby zapewnić odwiedzającym jak najlepsze wrażenia.

Zmniejsz zasoby blokujące renderowanie

Mówiąc dokładniej, skrócenie czasu wykonywania kodu JavaScript jest jednym z najlepszych sposobów na zwiększenie wyniku indeksu szybkości. Zasoby blokujące renderowanie to skrypty i kod, które mają pierwszeństwo przed załadowaniem innych części witryny. Zamiast wczytywania przez witrynę różnych elementów jednocześnie, niektóre elementy wstrzymują wszystkie inne, dopóki nie zostaną zakończone.

A to obniża indeks szybkości Twojej witryny. Aby obejść ten problem, możesz odroczyć ładowanie dowolnej liczby skryptów i bitów kodu do momentu, gdy widoczne elementy zostaną pomalowane na DOM. Zidentyfikowanie winowajców jest w rzeczywistości stosunkowo łatwe, ponieważ możesz użyć narzędzi programistycznych Chrome, aby przyjrzeć się swojej witrynie podczas jej ładowania, a narzędzie wskaże, co powstrzymuje elementy przed renderowaniem.

Dodatkowo, użytkownicy WordPressa mogą skorzystać z wtyczki do buforowania (lub wtyczki do optymalizacji witryny), takiej jak W3 Total Cache lub WP Rocket, aby sobie z tym poradzić. Często te wtyczki mają prosty przełącznik, aby odroczyć zasoby blokujące renderowanie.

Użytkownicy Divi również mają dużą przewagę w blokowaniu takich zasobów, ponieważ opcje motywu umożliwiają przełączanie odroczenia CSS blokującego renderowanie, a także skryptów jQuery. Co więcej, krytyczne funkcje CSS motywu rozbijają duże fragmenty kodu, które mogą opóźniać zawartość witryny i powodować, że ładują się one znacznie szybciej niż w innym przypadku. Podczas gdy niektóre z nich są przełącznikami, Divi automatycznie włącza inne. W większości przypadków zainstalowanie Divi powinno natychmiast pomóc w uzyskaniu wyniku SI.

Zmniejszenie pracy głównego wątku Twojej witryny

Podobnie jak zasoby blokujące renderowanie, możesz zmniejszyć wydajność swojej witryny, ładując różne elementy, które pochłaniają dużo mocy obliczeniowej serwera. Zmniejszenie ich może pomóc w szybszym przeniesieniu witryny do przeglądarki.

Najprostszym rozwiązaniem jest zaprzestanie używania tak dużej ilości JavaScriptu . GTmetrix przedstawia to najlepiej:

Ogólnie rzecz biorąc, im więcej kodu JavaScript ma Twoja strona, tym dłuższy jest proces parsowania/kompilacji; skutkuje dłuższym oczekiwaniem na wyświetlenie treści i interakcję z Twoją stroną przez użytkowników.

Zdajemy sobie sprawę, że może to nie być łatwe. Zaprojektowałeś witrynę tak, aby działała w określony sposób. Może jednak istnieć niewykorzystany kod, który można wyciąć, i być może uda się zoptymalizować kod JavaScript innych firm, który ładujesz do swojej witryny. Ponadto zminimalizuj swój JavaScript.

Oprócz audytu JS upewnij się, że skróciłeś CSS i HTML. To złagodzi jeszcze większe obciążenie głównego wątku. Wtyczki do buforowania i optymalizacji często również mają te opcje.

Użytkownicy Divi, po raz kolejny, mają tutaj przewagę, ponieważ motyw automatycznie minimalizuje i dzieli CSS i JavaScript na kawałki o niewielkich rozmiarach, aby uzyskać szybszą przepustowość, eliminując potrzebę skupienia się na głównym wątku.

Często zadawane pytania dotyczące indeksu prędkości

Speed ​​Index to prosta koncepcja, która ma złożone konsekwencje. Chcemy odpowiedzieć na niektóre często zadawane pytania dotyczące SI, aby pomóc Ci zoptymalizować Twoją witrynę tak dobrze, jak tylko możesz.

Jak indeks prędkości pasuje do ogólnej wydajności mojej witryny?

Speed ​​Index, jako pojedynczy wskaźnik, jest bardzo dobrym wskaźnikiem wydajności Twojej witryny w wielu różnych obszarach. Ponieważ uwzględnia w pełni widoczną zawartość strony widocznej na ekranie, możesz użyć go jako wskaźnika nie tylko postrzeganego przez użytkownika obciążenia, ale także przybliżonego oszacowania tego, co robi Twoja witryna w wielu różnych obszarach.

W rzeczywistości sam w sobie nie daje wielu informacji na temat tego, co robi Twoja witryna. Może być postrzegany jako miara typu catch-all, która sprawia, że, jak mówi GTmetrix, „przydatny ogólny punkt odniesienia do oceny wydajności Twojej witryny jako całości”.

Czy powinienem skupić się konkretnie na moim wyniku indeksu prędkości?

Chyba nie, nie.

Chociaż bardzo przydatne jest porównywanie witryny, skupianie się na innych, bardziej szczegółowych problemach, takich jak pierwsze wyrenderowanie treści (FCP), największe wyrenderowanie treści (LCP), czas do pierwszego bajtu (TTFB) i opóźnienie pierwszego wejścia (FID). ważniejsze. Możesz podjąć dowolną liczbę kroków, aby je poprawić indywidualnie, co z kolei poprawi Twój Indeks Prędkości. A kiedy weźmiemy pod uwagę ogólny test porównawczy, możesz zobaczyć, jak dobrze działają Twoje optymalizacje za pomocą SI.

Wniosek

Optymalizacja szybkości strony to niekończąca się bitwa, z którą walczą właściciele witryn. Musisz znaleźć równowagę między użytecznością, doświadczeniem i wydajnością, a znalezienie tej równowagi może być trudne. Kiedy testy zwracają tak wiele różnych wyników w tak wielu różnych elementach, może być trudno wiedzieć, gdzie umieścić swoją energię i zasoby. Speed ​​Index może w tym pomóc, jako pojedynczy wskaźnik, który pokazuje, jak dobrze działa Twoja witryna, gdy dostosowujesz inne, bardziej szczegółowe elementy wydajności witryny.

Co zrobiłeś, aby zoptymalizować indeks prędkości swojej witryny na przestrzeni lat?

Artykuł wyróżniony obrazem autorstwa HappyDrawing / shutterstock.com