Zrozumienie audytów szybkości witryny

W Eastside Co projektujemy i budujemy jedne z najlepszych na świecie witryn Shopify i Shopify Plus. Zwracamy uwagę na to, aby wrażenia użytkownika były optymalne – a kluczowym elementem jest zrozumienie wydajności witryny i tego, jak wygląda „dobry”. Dostępnych jest wiele rodzajów audytu strony internetowej, jednym z nich jest audyt szybkości.

Ten artykuł ma na celu omówienie sposobu działania audytów szybkości witryny.

Najpierw zacznijmy od tego, dlaczego miałbyś przeprowadzić audyt prędkości. Cel jest prosty: jak dobrze Twoja strona załaduje się dla odwiedzających korzystających z różnych urządzeń? Przeprowadzenie skutecznego audytu prędkości pozwoli określić, jak szybko się ładuje, i dać wskazówki, jak przyspieszyć. (Nie zapomnij zapoznać się z naszym szczegółowym artykułem na temat sposobów zwiększenia szybkości witryny Shopify po przeprowadzeniu audytu).

Audyt szybkości pokaże porównanie sposobu, w jaki Twoja witryna ładuje się na komputerze i urządzeniu mobilnym. Należy jednak pamiętać o kilku ważnych zastrzeżeniach.

Moc do przeprowadzenia audytu prędkości

Przeprowadzenie audytu szybkości witryny z laptopa przyniesie mylące wyniki. Lub będzie, jeśli masz zainstalowaną Lighthouse i liczysz na dane w czasie rzeczywistym.

Po pierwsze, podczas przeprowadzania audytu należy wziąć pod uwagę wiele czynników. Za chwilę nastąpi przełamanie powszechnych mitów. Ale po pierwsze, należy pamiętać o uprawnieniu do przeprowadzenia audytu.

Możesz polegać na PageSpeed ​​Insights (PSI) jako narzędziu do audytu szybkości. Mógłbyś. Ale jest kluczowy czynnik do zapamiętania:

PSI nie uchwyci rzeczywistych wąskich gardeł. Lub zmierz się z rzeczywistymi kluczowymi wskaźnikami wydajności strony (KPI)

PSI to symulowane środowisko umożliwiające debugowanie problemów z wydajnością.

Aby znaleźć rzeczywiste wąskie gardła i wskaźniki KPI strony, potrzebujesz narzędzia takiego jak Google Lighthouse. Ale do jego uruchomienia potrzebny jest również sprzęt.

Chociaż możesz zainstalować Lighthouse na swoim laptopie/komputerze, uzyskane wyniki metryczne będą zaniżone. Dzieje się tak, ponieważ Lighthouse wykorzystuje algorytmy ograniczania przepustowości do tworzenia rzeczywistych wąskich gardeł i opóźnień w sieci.

To wymaga dużej mocy obliczeniowej od sprzętu, na którym jest uruchomiony. Dlatego w Eastside Co korzystamy z dedykowanego serwera audytowego. Ma mnóstwo mocy obliczeniowej, aby przeprowadzać audyty z całym dławieniem, jakie może na niego narzucić Google.

Słowo o wynikach PSI

Popularnym narzędziem jest PageSpeed ​​Insights (PSI) firmy Google. Do przeprowadzenia audytu wykorzystuje Lighthouse (również narzędzie Google). Pamiętaj jednak, że dzieje się to w symulowanym środowisku.

Wkrótce pojawi się szczegółowe omówienie wskaźników wydajności i ich znaczenia. Najpierw zajmijmy się tymi mitami na temat wyników PSI:

• Doświadczenie użytkownika pochodzi z jednego wskaźnika : nie, tak nie jest. Musiałbyś oceniać metryki na podstawie wielu wartości, a nie od razu.

• Możesz zdefiniować użytkownika przedstawiciela : ponownie, nie. Użytkownicy będą odwiedzać Twoją witrynę z różnych urządzeń i połączeń sieciowych.

• Twoja strona ładuje się szybko dla Ciebie, więc będzie dla wszystkich : nie, nieprawda. Opóźnienie sieci i szybkość sieci to dwie rzeczy, które mogą zmienić wrażenia użytkownika.

Zebrane dane dotyczące wydajności dzielą się na dwa typy: dane laboratoryjne i dane terenowe.

Dane laboratoryjne

Dane laboratoryjne (wytwarzane przez PSI) to dane dotyczące wydajności z kontrolowanego środowiska. Wykorzystuje ustawienia wstępne dla ustawień sieci i urządzenia. Chodzi o to, że otrzymasz zestaw odtwarzalnych danych do celów debugowania.

Dane terenowe

Dane pola to dane o wydajności zebrane z rzeczywistych wczytań stron. Są to więc dane, których doświadczają Twoi użytkownicy w ujęciu realnym.

Główna różnica polega na tym, że dane laboratoryjne generowane przez PSI mają szerszy zakres metryk. Dane terenowe są bardziej ograniczone, ale są prawdziwym doświadczeniem użytkownika.

Odkodowane metryki wydajności

Jest kilka kluczowych punktów, które należy zrozumieć, zanim przejdziemy do wyników metryk i ich znaczenia.

Dlaczego wyniki się zmieniają

Latarnia pokaże wahania w wynikach audytu. Są ku temu powody i nie mają one nic wspólnego z samą latarnią morską.

• Wyświetlane reklamy zmieniają się. Jeśli wyświetlasz reklamy w swojej witrynie lub przeprowadzasz testy A/B, spowoduje to różnice w wydajności.

• Zmiany w routingu ruchu internetowego. Droga do samej witryny w sieci może ulec zmianie.

• Zmiany w używanym sprzęcie. Potężny komputer stacjonarny w porównaniu z urządzeniem mobilnym.

• Oprogramowanie antywirusowe może powodować zapotrzebowanie na przepustowość. Spowoduje to wahania wyników audytu.

• Wszelkie rozszerzenia przeglądarki, które wprowadzają JavaScript na stronę.

Ważenie

Metryki wykorzystują średnią ważoną wbudowaną w algorytmy Lighthouse. Te wagi nie są widoczne w raporcie. Zapewniają wyważoną miarę postrzegania wydajności przez użytkowników. Wynika to z regularnych badań przeprowadzanych przez zespół Lighthouse.

Metryki

Teraz możemy przejrzeć metryki najwyższego poziomu, aby odszyfrować ich znaczenie:

First contentful paint (FCP) — ten wskaźnik mierzy, ile czasu zajmuje wczytanie tekstu w części strony widocznej na ekranie. To jest zawartość, którą widzisz bez konieczności przewijania. Zbyt wiele czcionek i duże pliki czcionek wpłyną na ten wynik. Podobnie jak spowolni ładowanie czcionek z zasobów zewnętrznych.

Indeks prędkości (SI) — ta metryka rejestruje zmiany wizualne powyżej przystanku. Oznacza to, że wszystkie filmy i zdjęcia bohaterów wpływają na wynik indeksu prędkości.

Największe wymalowanie treści (LCP) — ta metryka wyszukuje największy obraz lub blok tekstu. Mierzy, ile czasu zajmuje wczytanie tego elementu do widocznego obszaru. Może to być obraz bohatera lub duża część tekstu.

Czas na interakcję (TTI) — ten wskaźnik mierzy, ile czasu zajmuje przygotowanie strony do wprowadzenia danych przez użytkownika. Późne ładowanie aplikacji i skryptów śledzenia lub analizy wpłynie na ten wskaźnik.

Całkowity czas blokowania (TBT) — ta metryka jest podobna do TTI. Ale mierzy całkowity czas blokowania na stronie. Odnosi się to do tego, że użytkownik nie może klikać elementów ani przewijać strony.

Kumulatywne przesunięcie układu (CLS) — ta metryka mierzy stabilność wizualną. innymi słowy, mierzy, jak bardzo zmienia się treść podczas ładowania strony, co utrudnia czytanie lub przeglądanie treści.

Wreszcie...

Główne punkty dotyczące audytów szybkości witryny to: istnieją dane laboratoryjne i dane terenowe. Tam, gdzie dane laboratoryjne są symulowanym środowiskiem, a dane terenowe to doświadczenie użytkownika w czasie rzeczywistym. Aby uruchomić Lighthouse, aby zobaczyć dane terenowe, musisz mieć maszynę hosta, która ma jak największą moc obliczeniową. Dane laboratoryjne z PSI są w porządku dla podstawowych wskazówek i celów debugowania.

Jeśli chcesz dowiedzieć się więcej o naszych audytach szybkości witryny lub o tym, jak możemy zaprojektować i zbudować sklep Shopify lub Shopify Plus dla Twojej firmy e-commerce, napisz do nas!