W artykule:
Interakcja z użytkownikiem jest jednym z kluczowych aspektów, na których musisz się skoncentrować, jeśli chcesz zapewnić przyjazną obsługę. Niestety, nie możesz usiąść na ich miejscu i zobaczyć swojej witryny z punktu widzenia odwiedzających, więc potrzebujesz sposobu, aby dowiedzieć się, jak twoja witryna reaguje na dane wejściowe.
Wprowadź Google PageSpeed Insights. Istnieją 3 metryki w Google PageSpeed Insights, które pomogą Ci zrozumieć doświadczenie interakcji użytkownika, dzięki czemu można poprawić, czas na interakcję, maksymalne opóźnienie pierwszego wejścia i pierwszy procesor bezczynny.
W tym poście omówimy wskaźniki, których Google PageSpeed Insights używa do pomiaru interakcji z użytkownikami. Pokażę Ci, jak poprawić czas do interaktywnego, maksymalnego opóźnienia pierwszego wejścia i pierwszego bezczynnego procesora, dzięki czemu możesz zapewnić najlepsze wrażenia użytkownika dla odwiedzających.
Czym jest projektowanie interaktywne?
Powiedz, czy ci się to przytrafiło. Wchodzisz na stronę i gdy ładuje się treść, klikasz coś, ale nic się nie dzieje. Więc klikasz na to ponownie i ponownie, a potem, gdy strona w końcu reaguje, kończysz na jakiejś przypadkowej stronie docelowej reklamy lub gdzieś indziej, gdzie nie chcesz być.
Że moi przyjaciele to negatywna interakcja użytkownika.
Interactive design koncentruje się na umożliwieniu użytkownikowi jak najprostszego osiągnięcia celów, niezależnie od tego, czy jest to zakup produktu, czy zapisanie się do newslettera.
Interaktywny projekt ma wiele wymiarów. W tym artykule najbardziej interesuje nas informacja zwrotna i czas jej dostarczenia, ponieważ pomaga odwiedzającym ocenić, czy ich działania są skuteczne.
Jeśli czas reakcji między działaniem (takim jak kliknięcie) a odpowiedzią trwa zbyt długo, użytkownicy stracą wiarę w Twoją witrynę i prawdopodobnie zwrócą się do konkurencji.
Aby zapewnić pozytywną interakcję z użytkownikiem podczas ładowania witryny, musimy skupić się na kilku metrykach, aby dać nam dobrze zaokrąglone wyobrażenie o tym, czego doświadcza użytkownik. Zobaczmy, co to jest teraz.
Pomiar Interakcji Użytkownika
Google PageSpeed Insights wykorzystuje Lighthouse do analizy wydajności strony internetowej zarówno dla urządzeń mobilnych, jak i stacjonarnych.
Lighthouse stosuje podejście zorientowane na użytkownika i mierzy następujące środki:
- Pierwsza Zadowolona Farba
- Pierwsza Znacząca Farba
- Indeks Prędkości
- Pierwszy procesor bezczynny
- Czas na Interactive
- Szacowane Opóźnienie Wejścia
Lighthouse zbiera dane laboratoryjne w kontrolowanym środowisku za pomocą predefiniowanych ustawień urządzenia i sieci, a następnie przypisuje każdemu metryce wynik. Wyniki w idealnym zakresie są wyświetlane na zielono, podczas gdy niskie wyniki są wyświetlane na Czerwono. Żółte wyniki mieszczą się w średnim przedziale.
Każda z tych sześciu metryk mówi coś innego o tym, co odczuwa użytkownik, czekając na załadowanie witryny i razem tworzą bardziej kompletny obraz.
Pierwsze bezczynność PROCESORA, czas do interaktywności i szacowane Opóźnienie wejścia to trzy, które powiedzą nam o interakcji z użytkownikiem. Aby dowiedzieć się więcej o First Contentful Paint I First meaning Paint oraz indeksie prędkości, zajrzyj do tych postów.
Czym jest Lighthouse Time To Interactive?
Time To Interactive metric (TTI) mierzy, ile czasu potrzeba, aby użytkownik mógł niezawodnie wchodzić w interakcje z treścią strony, wykonując takie czynności, jak klikanie linków lub wprowadzanie tekstu w pola wprowadzania.
Wynik TTI mniejszy niż 100ms jest idealny, ponieważ gdy odwiedzający podejmuje działanie, odpowiedź wydaje się niemal natychmiastowa. Dłużej, a użytkownik będzie postrzegać opóźnienie jako coś złego w Twojej witrynie.
Podczas gdy idealny czas na interakcję w WordPress powinien być poniżej 100ms, masz pewną elastyczność. Na stronie docelowej z formularzem internetowym czas na interaktywny benchmark byłby bardzo ważny. Na stronie bloga, z zaledwie kilkoma linkami, TTI byłoby mniej ważne niż widoczność treści. Każda witryna ma inne priorytety, więc powinieneś poświęcać widoczność treści na rzecz interaktywności tylko wtedy, gdy ma to sens.
Jak mierzony jest czas na Interactive?
Czas na interakcję jest trudny do zmierzenia, ponieważ nie ma dokładnego i jasno określonego punktu, w którym strona jest gotowa do interakcji.
Pomyśl o tym jak o mierzeniu czasu, jaki zajmuje zrobienie popcornu z płyty kuchennej. Nie da się powiedzieć dokładnie. jak długo to potrwa, ponieważ nie można zobaczyć wewnątrz doniczki i nie wiem, ile ziaren jeszcze trzeba pop. Więc aby zrobić popcorn bez palenia, musisz słuchać. Kiedy jest wystarczająco długie opóźnienie o kilka sekund między pops, można bezpiecznie założyć, że popcorn jest gotowy.
Pomiar czasu na Interactive to podobny proces. Lighthouse obserwuje główny wątek i aktywność sieci, aby dowiedzieć się, co się dzieje. Szuka wystarczająco dużego okna czasowego w pętli zdarzeń kontekstowych przeglądania i 5-sekundowego podokna ciszy sieci, w którym prawdopodobieństwo długich zadań lub ciężkiego przetwarzania jest niskie.
Wie, kiedy zwrócić uwagę, szukając pierwszego zadowolonego lakieru i wykrywając, kiedy procedury obsługi zdarzeń są rejestrowane dla najbardziej widocznych elementów strony.
Jak poprawić czas na interaktywne
Aby poprawić wynik TTI, skup się na ulepszaniu kodu JavaScript witryny. Pobieranie, analizowanie i wykonywanie JavaScript zużywa więcej procesora niż wszystkie inne działania przeglądarki razem wzięte.
Podczas gdy urządzenia mobilne i komputery mają teraz więcej procesora, ilość JavaScript na stronach internetowych gwałtownie wzrosła, zwiększając 3-krotnie w ciągu ostatnich 6 lat.
JavaScript działa w środowisku jednowątkowym, które tworzy wąskie gardło, gdy jeden proces trwa zbyt długo. Gdy jeden proces blokuje pojedynczy wątek, Wszystko inne musi czekać, w tym inne procesy i opinie użytkowników.
To jeszcze gorzej na komórce. Zadania mogą trwać 3-5 razy dłużej, a duże obciążenie procesora wyczerpuje baterie. Nie wspominając o tym, że strona będzie wyglądać janky, więc nie zapewnia to najlepszego doświadczenia użytkownika.
Zadania, które trwają dłużej niż 50 ms, są uważane za długie zadania. Aby poprawić wynik TTI, Usuń zbędny JavaScript lub odrocz go do momentu zakończenia ładowania strony. Należy również rozbić duże pliki, aby zapobiec wąskiemu gardłu.
Co to jest pierwsze Opóźnienie wejścia?
Metryka Google First Input Delay mierzy, ile czasu zajmuje przeglądarce odpowiedź na dane wprowadzone przez użytkownika, na przykład kliknięcie przycisku. Idealne pierwsze Opóźnienie wejścia 10ms jest idealne.
Podczas gdy czas do interaktywnego, może być mierzony w Ustawieniach laboratoryjnych, pierwsze Opóźnienie wejścia lub FID, wymaga dokładnego obliczenia użytkowników. Test Google PageSpeed Insights zawiera metrykę dla maksymalnego potencjalnego opóźnienia pierwszego wejścia, ale narzędzie analityczne, takie jak Google Analytics, zapewni dokładniejsze wyniki.
Jeśli zbierasz pierwsze dane o opóźnieniu wprowadzania z narzędzia analitycznego, rejestrujesz prawdziwy ból użytkownika. Jeśli czas oczekiwania jest długi, wiesz, że Twoi odwiedzający są prawdopodobnie sfrustrowani, ponieważ muszą czekać za każdym razem, gdy wchodzą w interakcję ze stroną. Jeśli ten czas oczekiwania jest szczególnie długi, a współczynnik odrzuceń jest wysoki, zgadnij co? Tracisz odwiedzających z powodu słabego doświadczenia strony. AUĆ.
Co liczy się jako pierwsze wejście?
Zdefiniujmy znaczenie pierwszego opóźnienia wejścia, ponieważ nie obejmuje ono wszystkich interakcji użytkownika.
FID mierzy działania, takie jak kliknięcia, naciśnięcia klawiszy i wprowadzanie tekstu w polach. Nie obejmuje przewijania ani powiększania, ponieważ mogą być uruchamiane w oddzielnym wątku przez przeglądarkę.
Dlatego jeśli Twoja witryna nie ma żadnych działań, które użytkownik może wykonać, innych niż przewijanie lub powiększanie, nie będziesz mieć pierwszego wskaźnika opóźnienia wprowadzania do dostarczenia.
Jak naprawić pierwsze Opóźnienie wejścia
TTI i FID są ze sobą ściśle powiązane, więc jeśli pracujesz nad efektywniejszym dostarczaniem JavaScript, aby poprawić czas na interakcję, poprawi to również opóźnienie pierwszego wejścia.
Jeśli główny wątek przeglądarki jest zajęty, nie będzie w stanie odpowiedzieć na dane wejściowe użytkownika, więc powinieneś pracować nad rozdzieleniem długich zadań lub nie uruchamiać ich w głównym wątku. Spowoduje to otwarcie głównego wątku.
Reklamy stron trzecich i widżety społecznościowe mają reputację chciwości, jeśli chodzi o zużywanie zasobów na swoich stronach hostingowych, więc powinieneś dążyć do uwzględnienia jak najmniejszej liczby możliwych ramek innych firm.
Jednym z podejść do poprawy opóźnienia pierwszego wejścia jest odroczenie niekrytycznych zadań, dopóki nie zostaną wezwane. Ta metoda nazywa się „Idle Until Urgent”, jeśli chcesz dowiedzieć się więcej o tym, jak jej używać.
Co to jest pierwszy procesor bezczynny w Lighthouse?
Pierwszy procesor bezczynności w Lighthouse mierzy, gdy strona jest minimalnie interaktywna i większość, ale nie wszystkie elementy są gotowe do interakcji. W przypadku interakcji z elementami na stronie może wystąpić opóźnienie, ale strona odpowie.
Pierwszy procesor bezczynności w PageSpeed Insights został pierwotnie nazwany Time to First Interactive. Wskazuje, kiedy w głównym wątku jest pierwszy okres 5 sekund, gdy zadania nie trwają dłużej niż 50 ms po pierwszym zadowolonym malowaniu.
Pierwszy procesor bezczynny jest podobny do Time To Interactive, ponieważ oba nasłuchują obsługi zdarzeń JavaScript w celu zwrócenia dokładnego pomiaru, ale pierwszy procesor bezczynny nie wymaga od przeglądarki odpowiedzi na dane użytkownika w czasie krótszym niż 50 milisekund.
Wartość 2-4 sekund dla pierwszego bezczynnego procesora w WordPress jest średnio.
Jak poprawić pierwszy procesor bezczynności?
Łatwą pierwszą poprawką bezczynności procesora jest zminimalizowanie liczby zasobów, które muszą zostać wykonane przed załadowaniem strony i zmniejszenie rozmiaru pozostałych zasobów.
Są to te same strategie poprawy TTI i FID, optymalizacji krytycznej ścieżki renderowania i optymalizacji wydajności treści.
Wytyczne Dotyczące Interakcji Z Użytkownikiem
Lighthouse nie ocenia całej witryny. Sprawdza jedną stronę na raz, więc aby zrozumieć, jak działa Twoja witryna, musisz przetestować różne typy stron w swojej witrynie. Przetestuj stronę bloga, stronę produktu, zamówienie itp. Zwróć szczególną uwagę na ważne strony konwersji, takie jak strony docelowe i koszyk na zakupy.
Lighthouse ocenia sześć wskaźników testów, ale nie zważa ich wszystkich tak samo, gdy pojawia się ogólny wynik. Każdy jest ważony inaczej.
Metryka o największej wadze to czas na interakcję, ponieważ ma większy wpływ na ogólną wydajność strony. Po tym następuje indeks prędkości, pierwszy Contentful Paint, pierwszy CPU Idle i pierwszy meaning Paint, w tej kolejności.
Jak poprawić swój wynik
Być może zauważyłeś wzorzec w sugestiach, aby poprawić czas do interaktywnego, pierwszego bezczynności procesora i pierwszego opóźnienia wejścia. Ponieważ te trzy wskaźniki są ze sobą ściśle powiązane, stosujesz holistyczne podejście do ich ulepszania. Poprawiając interakcje dla użytkowników, poprawisz wszystkie trzy.
Oto działania, które możesz podjąć, aby poprawić swoje wyniki:
- Optymalizacja krytycznej ścieżki renderowania
- Zminimalizuj lub wyeliminuj krytyczne zasoby w głównym wątku.
- Odrocz ich pobieranie lub załaduj je asynchronicznie, jeśli możesz.
- 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.
- Leniwe Ładowanie Zdjęć – Jeśli obraz znajduje się poniżej fałdy, poczekaj na załadowanie go, aż zajdzie taka potrzeba. Pierwszeństwo wczytywania strony, a następnie, gdy masz czas bezczynności w głównym wątku, możesz załadować obraz, gdy odwiedzający przewinie stronę w dół.
- Włącz buforowanie przeglądarki – Buforowanie plików znacznie skraca czas ładowania dodatkowych stron, przechowując zasoby w pamięci podręcznej w celu szybszego pobierania. 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. Niedawno porównaliśmy Hummingbird do innych popularnych wtyczek buforujących i Hummingbird zoptymalizował je wszystkie.
- Użyj CDN – Pośrednie pamięci podręczne, takie jak sieci dostarczania treści, mogą pomóc szybciej obsługiwać zasoby z bliższego centrum danych do użytkownika.
- Mądrze Używaj JavaScript
- Usuń niepotrzebne pliki JavaScript i nieużywane części w plikach.
- Dzielenie dużych plików JavaScript.
- Odrocz ładowanie plików JavaScript o niskim priorytecie.
- Minimalizuj i Kompresuj pliki JavaScript
Smush Pro ma CDN, który może pomóc w leniwym ładowaniu obrazów. Koliber może pomóc w włączeniu buforowania przeglądarki. Możesz uzyskać bezpłatny okres próbny dla obu tutaj, aby poprawić swój wynik Google PageSpeed Insights.
Tagi:
