W artykule:
Czy Twoja strona ładuje zawartość stale, jak żółw, czy poczekaj, aż wyścig się prawie skończy, zanim zacznie biegać, jak zając? W wyścigu, aby zapewnić najlepsze wrażenia użytkownika, stabilny jest najlepszy. Dlatego Google PageSpeed Insights mierzy indeks prędkości WordPress, aby określić, jak zawartość witryny ładuje się z czasem.
Wskaźnik prędkości informuje, czy podczas ładowania witryny wyświetlana jest wystarczająca ilość opinii wizualnych. Jest to ważny wskaźnik pozwalający zrozumieć, czego doświadczają odwiedzający.
W tym poście pokażę Ci, jak obliczany jest indeks prędkości, jak uruchomić test indeksu prędkości WordPress w Chrome i powiem ci, do czego powinieneś dążyć. Następnie omówimy kilka technik, których możesz użyć, aby poprawić swój indeks prędkości.
Co To jest indeks prędkości w Lighthouse?
Lighthouse jest narzędziem open source Google PageSpeed Insights wykorzystuje do analizy strony internetowej.
Lighthouse ocenia Twoją stronę internetową według następujących kryteriów:
- Czy serwowane jest z bezpiecznego miejsca?
- Czy jest dostępny dla wszystkich użytkowników?
- Czy odwiedzający, którzy są na nierzetelnym połączeniu sieciowym (jak ci na urządzeniach mobilnych), są w stanie do niego dotrzeć?
- Czy użytkownicy postrzegają Twoją stronę tak szybko?
W interesie Google leży priorytetowe traktowanie wysokiej jakości witryn w rankingach wyszukiwania, aby zapewnić najlepsze wrażenia użytkownika. Indeks prędkości to jeden wskaźnik używany do oceny, jak szybko twoja witryna czuje się dla użytkowników, w sposób, który rejestruje, jak twoja witryna faktycznie działa w prawdziwym życiu.
Jak mierzy się indeks prędkości Google
Oto jak zdefiniowano indeks prędkości w dokumentacji Lighthouse:
Indeks prędkości to wskaźnik wydajności ładowania strony, który pokazuje, jak szybko zawartość strony jest wyraźnie wypełniana.
Czy to może być bardziej niejasne? To nie mówi nam zbyt wiele o tym, jak te informacje są przechwytywane, abyśmy mogli poprawić nasze wyniki, więc musiałem udać się do źródła.
WebPagetest.org, we współpracy z Google, wprowadzili metrykę indeksu prędkości do swojego testu w kwietniu 2012 r.i w pełni wyjaśniają, jak działają obliczenia indeksu prędkości. Lighthouse wykorzystuje moduł węzła o nazwie Speedline, którego obecna implementacja oparta jest na Postęp wizualny z Przechwytywania wideo metoda, która została wprowadzona przez WebPagetest.org.
Mimo że jest mierzony w milisekundach, indeks prędkości nie jest mierzony stoperem, jak pierwszy paint; jest obliczany przy użyciu funkcji rozkładu kumulatywnego rozkładu log-normal. Wiem, co?
Oto Jak to działa, gdy wykonujesz audyt Google PageSpeed Insights, Lighthouse rejestruje wideo z ładowania strony internetowej. Obejmuje on tylko wszystko powyżej zakładki, dlatego indeks prędkości będzie się różnić w zależności od widoczności ustawionej do testu.
Film jest jak Lighthouse jest w stanie” zobaczyć ” swoją stronę. Następnie rozkłada cały mały film na klatki. Jest 10 klatek na sekundę. Jeśli więc witryna ładuje się w ciągu 3 sekund, pojawi się 30 ramek pokazujących postęp witryny.
Lighthouse porównuje każdą klatkę z ostateczną klatką, aby określić, jak kompletna jest. Czy jest naładowany 5%? 10%? 20%? 30%? itd.
Następnie wykreśla kompletność Twojej strony na osi y i upłynął czas na osi x, dzięki czemu może określić średnią. Wynik ogólny jest sumą poszczególnych przedziałów. Wykres dla powyższych ramek wyglądałby mniej więcej tak, z Niebieskim obszarem reprezentującym indeks prędkości.
Istnieje również Postęp wizualny z metody Paint Events aby określić indeks prędkości przeglądarki WebKit, która nie wymaga przechwytywania wideo, a zamiast tego opiera się na zbieraniu danych osi czasu, takich jak zdarzenia paint i inne przydatne zdarzenia. Nie jest to obsługiwane we wszystkich przeglądarkach, więc różni się i nie jest tak szeroko stosowany, więc nie będziemy się do tego szczegółowo tutaj.
Jak uzyskać indeks prędkości z Google Chrome
Teraz, gdy wiesz, jak obliczany jest indeks prędkości, powinieneś poświęcić trochę czasu na uruchomienie najpopularniejszych stron za pośrednictwem Google PageSpeed Insights.
Jeśli chcesz to zrobić bezpośrednio w Google Chrome, naciśnij Ctrl + Shift + i lub kliknij prawym przyciskiem myszy w oknie przeglądarki i wybierz Inspekcja
Przejdź do Audyty tab. Stamtąd będziesz mógł wybrać rodzaj audytu, który chcesz uruchomić test dla urządzeń mobilnych lub stacjonarnych. Wybierz Osiągi pole wyboru, aby uzyskać indeks prędkości, a następnie naciśnij niebieski Przeprowadzanie Audytów przycisk na początek.
Jaki wynik indeksu prędkości powinieneś osiągnąć w Google?
Dobra, przeprowadziłeś testy, ale jaki jest dobry wynik?
Według Paula Irish ’ a, który pracuje w zespole Google Chrome, idealny indeks prędkości wynosi mniej niż 1000ms, co odpowiada 1 sekundzie.
Aby poprawić, musisz uzyskać jak najniższy wynik indeksu prędkości.
W marcu 2018 r. Grupa NCC przeanalizowała Strony domowe 50 sprzedawców detalicznych w Wielkiej Brytanii i stwierdziła, że średni wynik indeksu prędkości wynosił między 3500-8000 ms.Dareboost przeprowadził podobną analizę na europejskich wydawcach, a mniej niż 5% witryn miało wynik indeksu prędkości poniżej 1000 ms.
Biorąc to pod uwagę, zmniejszenie indeksu prędkości do mniej niż sekundy nie zawsze jest wykonalne. W takich przypadkach najlepszym podejściem jest po prostu wyprzedzenie konkurencji.
Napisaliśmy Przewodnik, Jak uzyskać 100 W Google PageSpeed Insights.
Jak poprawić indeks prędkości WordPress
Poprawa indeksu prędkości to kwestia poprawy rzeczywistej wydajności, a także postrzeganej wydajności witryny.
Możesz zoptymalizować wydajność poprzez:
- Optymalizacja Wydajności Treści
- Optymalizacja krytycznej ścieżki renderowania
Aby poprawić percepcję, możesz użyć szerokiej gamy progresywnych technik ładowania.
Jeśli nie wywołuje konwersji, pozbądź się go
Najskuteczniejszym sposobem poprawy zarówno wydajności, jak i percepcji jest wyeliminowanie niepotrzebnych zasobów witryny. Twoja strona też się zaśmieca! Obrazy, pliki JavaScript, CSS itp. które nie dodają dużej wartości lub nie są już używane, powinny być luźne. Powinieneś powtarzać ten proces okresowo, zwłaszcza gdy dodajesz nowe elementy do swojej witryny.
Zmierz również wartość, którą nowe komponenty dodają do witryny. Jeśli ten nowy suwak obrazu, tło wideo lub trzecia czcionka nie konwertuje odwiedzających, pozbądź się go.
Potrzebujesz pomocy w przekonaniu klientów do pominięcia elementów strony? Uruchom test Mobile PageSpeed. Na stronie wyników Przewiń w dół i otwórz Oceń wpływ szybszej witryny sekcji. Kalkulator pomoże Ci pokazać, jak zwiększenie prędkości witryny może poprawić roczne przychody.
Użyj predefiniowanych wysokości i elementów zastępczych
Ładowanie struktury dla reszty treści daje użytkownikowi wrażenie, że witryna ładuje się w zorganizowany i zamierzony sposób.
Aby utworzyć ramy, Utwórz miejsce na elementy witryny, które wymagają dłuższego ładowania, takie jak obrazy i filmy. Możesz to zrobić, ustawiając predefiniowane wysokości elementów zawierających w CSS lub ładując obrazy zastępcze lub ikony.
Nie tylko informuje to odwiedzającego, że nadchodzi więcej treści, więc może zdecydować, czy chce poczekać, ale zapobiega to błędnemu przesuwaniu się zawartości witryny, gdy więcej elementów znajdzie się na swoim miejscu.
Zoptymalizuj Swoje Obrazy
Obrazy są jednym z najgorszych przestępców, jeśli chodzi o dodawanie niepotrzebnej wagi do stron internetowych. Najlepszym sposobem na zmniejszenie wagi strony jest wyeliminowanie niepotrzebnych obrazów, a następnie zoptymalizowanie tego, co pozostało, wykonując następujące czynności:
- Leniwe ładowanie obrazów, które znajdują się poniżej fałdy
- Korzystanie z obrazów progresywnych
- Używanie bardziej wydajnych formatów obrazów nowej generacji
- Zmiana rozmiaru obrazów, które są zbyt duże dla kontenera
- Kompresowanie zdjęć
- Użyj odpowiedniego typu pliku, na przykład zastępując animowane pliki GIF wideo
Szybkim i łatwym sposobem na optymalizację zdjęć jest użycie wtyczki takiej jak Smush Pro. Wypróbuj Smush Pro za darmo.
Optymalizacja arkuszy stylów, skryptów i czcionek
Gdy przeglądarka tworzy stronę, gdy natknie się na plik CSS lub plik JavaScript, musi wykonać te pliki, zanim będzie kontynuować renderowanie strony. Dlatego pliki CSS i JavaScript znajdujące się w nagłówku strony są określane jako zasoby blokujące renderowanie. Ponieważ blokują renderowanie treści, musisz je zoptymalizować, aby załadowanie zajęło jak najmniej czasu.
Czcionki dodają również wiele wagi do stron internetowych,ponieważ każda czcionka jest dodatkowym zasobem, który przeglądarka musi poświęcić na pobieranie. Niektóre czcionki mogą blokować renderowanie strony. Domyślnie pobieranie czcionek nie rozpoczyna się, dopóki nie zostaną skonstruowane DOM i CSSOM, co może spowodować opóźnione renderowanie tekstu.
Oto jak zoptymalizować dodatkowe zasoby potrzebne do zbudowania strony:
- Jak powiedziałem wcześniej, najlepszym sposobem na optymalizację czegoś jest płaskie usunięcie go. Zmniejsz ciężar i idź dalej. W przypadku webfonts zmniejsz liczbę wariantów czcionek, więc zamiast trzech różnych pogrubień, możesz użyć jednej lub żadnej, jeśli możesz sobie bez niej poradzić.
- Nie ładuj jednego ogromnego pliku JavaScript. Użyj dzielenia kodu, aby podzielić plik i załadować skrypty, które nie są krytyczne dla renderowania drzewa DOM na dół strony.
- Kompresuj i minimalizuj pliki, aby pobierać je mniej czasu.
Chcesz Łatwe rozwiązanie all-in-one, który został zaprojektowany, aby pomóc poprawić swój wynik Google PageSpeed Insights? Koliber może pomóc.
Optymalizacja krytycznej ścieżki renderowania
Krytyczna ścieżka renderowania odnosi się do wszystkich zasobów, które przeglądarka musi renderować, aby odpowiedzieć na bieżące żądanie odwiedzającego. Chcesz priorytetyzować aktywa powyżej fold, które są najważniejsze right now i załaduj je tak szybko, jak to możliwe.
Wymaga to analizy komponentów w krytycznej ścieżce renderowania i poszukiwania sposobów na ulepszenie, konsolidację i uporządkowanie całego obciążenia. Pomyśl o tym jak o załatwianiu spraw. Jeśli zaplanujesz trasę z wyprzedzeniem, możesz zrobić więcej w krótszym czasie, niż gdybyś biegał po całym mieście, robiąc rzeczy tak, jak o nich myślałeś. Przypadkowy sposób spali zasoby, które biegną tam iz powrotem.
Oto jak Google zaleca optymalizację krytycznej ścieżki renderowania:
- Analizuj i scharakteryzuj elementy ścieżki krytycznej.
- Zminimalizuj liczbę krytycznych zasobów. Jeśli możesz, wyeliminuj ich. Dla reszty, odrocz ich pobieranie lub załaduj je asynchronicznie.
- Zoptymalizuj rozmiar zasobów, kompresując lub minimalizując, aby skrócić czas pobierania.
- Pobierz wszystkie krytyczne zasoby tak szybko, jak to możliwe, aby skrócić długość ścieżki krytycznej.
Wykorzystaj Buforowanie
Po zakończeniu nowej zoptymalizowanej strony możesz korzystać z buforowania stron.
Buforowanie to niezawodny sposób na zwiększenie szybkości witryny dla odwiedzających, przechowując zasoby w pamięci podręcznej w celu szybszego pobierania. Istnieje kilka rodzajów skrzynek.
Dzięki buforowaniu HTTP przeglądarka przechowuje kopię zasobów pobranych przez Użytkownika za pośrednictwem protokołu HTTP w pamięci podręcznej, dzięki czemu będzie mogła je odzyskać bez dodatkowej podróży na serwer. To znacznie poprawia wydajność dla powtarzających się odwiedzających, gdy odbywa się prawidłowo.
Niedawno porównaliśmy Hummingbird do innych popularnych wtyczek buforujących i Hummingbird zoptymalizował je wszystkie.
Należy również używać pamięci podręcznych pośredniczących, takich jak sieci dostarczania treści lub sieci CDN, aby obsługiwać zasoby z bliższego centrum danych dla użytkownika.
Ograniczenia Indeksu Prędkości
Chociaż indeks prędkości jest lepszy niż metryki oparte na osi czasu, aby pomóc nam mierzyć wrażenia użytkownika, nie jest idealny.
Jeśli Twoja witryna ma ruch, indeks prędkości nie będzie dokładny.
Oto kilka ruchomych elementów, które mogą mieć wpływ na wynik:
- Filmy, które autoplay
- Karuzele
- Gify
Ponadto, jeśli nie utworzysz elementów zastępczych dla elementów w witrynie i zawartości strony, gdy ładuje się zawartość, niestabilność układu zwróci również niedokładny indeks prędkości.
Mimo to indeks prędkości jest jednym z najlepszych narzędzi, jakie mamy w tej chwili, więc nawet przy tych ograniczeniach nadal jest przydatny. Używany w połączeniu z innymi danymi dostępnymi w Google PageSpeed Insights, Speed Index pomaga uzyskać pełny przegląd tego, nad czym trzeba pracować, aby poprawić swoją witrynę dla odwiedzających.
Jak poprawić indeks prędkości za pomocą wtyczki WordPress
Wtyczki wydajności WordPress przeszły długą drogę. Nie musisz już używać zestawu różnych wtyczek, aby poprawić każdy aspekt wydajności witryny. Możesz użyć wtyczki all-in-one, takiej jak Hummingbird, która została zaprojektowana, aby pomóc ci przejść wszystkie audyty w Google PageSpeed Insights.
Zaprojektowaliśmy Koliber nie tylko po to, aby pomóc ci pozytywnie zwiększyć wynik indeksu prędkości, ale aby naprawdę pomóc ci zapewnić lepsze wrażenia użytkownika dla Twoich podglądaczy. Połącz Hummingbird z Smush, aby uzyskać jak najwięcej z usługi optymalizacji prędkości WordPress WPMU dev oferuje.
Tagi:
