Techniczny przewodnik SEO dotyczący wskaźników wydajności Lighthouse

Co powoduje słaby LCP?

Słaby LCP zwykle wynika z czterech problemów:

• Długie czasy odpowiedzi serwera.
• Blokujący renderowanie JavaScript i CSS.
• Czasy ładowania zasobów.
• Renderowanie po stronie klienta.

Jak naprawić słaby LCP

Jeśli przyczyną jest długi czas odpowiedzi serwera:

• Zoptymalizuj swój serwer.
• Kieruj użytkowników do pobliskiej sieci CDN.
• Zasoby pamięci podręcznej.
• Wyświetlaj strony HTML jako pierwsze w pamięci podręcznej.
• Wcześnie nawiązuj połączenia z innymi firmami.

Jeśli przyczyną jest blokowanie renderowania kodu JavaScript i CSS:

• Zminimalizuj CSS.
• Odłóż niekrytyczny CSS.
• Wbudowany krytyczny CSS.
• Zminimalizuj i skompresuj pliki JavaScript.
• Odłóż nieużywany JavaScript.
• Zminimalizuj nieużywane wypełnienia.

Jeśli przyczyną są czasy ładowania zasobów:

• Optymalizuj i kompresuj obrazy.
• Wstępnie ładuj ważne zasoby.
• Kompresuj pliki tekstowe.
• Dostarczaj różne zasoby na podstawie połączenia sieciowego (serwowanie adaptacyjne).
• Zasoby w pamięci podręcznej za pomocą Service Workera.

Całkowity czas blokowania (TBT)

Co reprezentuje: Reakcja na dane wejściowe użytkownika.

Waga oceny wydajności latarni morskiej: 25%

Co mierzy: TBT mierzy czas między First Contentful Paint a Time to Interactive. TBT jest laboratoryjnym odpowiednikiem First Input Delay (FID) – danych terenowych używanych w raporcie Chrome User Experience Report i nadchodzącym sygnale rankingowym Google Page Experience.

Jak to się mierzy: Całkowity czas, w którym główny wątek jest zajęty przez zadania trwające ponad 50 ms. Jeśli wykonanie zadania zajmie 80 ms, 30 ms z tego czasu zostanie wliczone do TBT. Jeśli wykonanie zadania zajmie 45 ms, do TBT zostanie dodane 0 ms.

Czy całkowity czas blokowania jest kluczowym elementem sieci? Tak! Jest to odpowiednik danych laboratoryjnych pierwszego opóźnienia wejścia (FID).

Cel: Osiągnij wynik TBT poniżej 300 milisekund.

Długie zadania i całkowity czas blokowania

TBT mierzy długie zadania — te trwające dłużej niż 50 ms.

Kiedy przeglądarka ładuje Twoją witrynę, zasadniczo czeka na wykonanie jedna linia skryptów.

Wszelkie dane wejściowe od użytkownika muszą trafić do tej samej kolejki.

Gdy przeglądarka nie może odpowiedzieć na dane wejściowe użytkownika, ponieważ wykonywane są inne zadania, użytkownik postrzega to jako opóźnienie.

Zasadniczo długie zadania są jak osoba w Twojej ulubionej kawiarni, której zamówienie drinka zajmuje zbyt dużo czasu.

Podobnie jak ktoś, kto zamawia 2% czteropompową waniliową venti, pięciopompową pełnotłustą piankę mokki, długie zadania są głównym źródłem złych doświadczeń.

Pierwsze malowanie treści (FCP)

Co reprezentuje: FCP oznacza czas, w którym pierwszy tekst lub obraz jest malowany (widoczny).

Waga oceny wydajności latarni morskiej: 15%

Co to mierzy: Czas, w którym widzę żądaną stronę, odpowiada. Mój kciuk może przestać unosić się nad przyciskiem Wstecz.

Jak to się mierzy: Twój wynik FCP w Lighthouse jest mierzony przez porównanie czasu FCP Twojej strony z czasami FCP dla prawdziwych danych witryny przechowywanych w archiwum HTTP . Twój FCP wzrasta, jeśli jest szybszy niż inne strony w archiwum HTTP.

Czy pierwsza zawartość treściowa ma kluczowe znaczenie dla sieci Web? Nie

Indeks prędkości

Co to oznacza: ile jest widoczne na raz podczas ładowania.

Waga oceny wydajności latarni morskiej: 15%

Co to mierzy: Indeks prędkości to średni czas, w którym wyświetlane są widoczne części strony.

Jak to się mierzy: Pomiar wskaźnika prędkości Lighthouse pochodzi z modułu węzła o nazwie Speedline.

Będziesz musiał zapytać uprzejmych czarodziejów na stronie webpagetest.org o szczegóły, ale z grubsza wyniki Speedline różnią się w zależności od rozmiaru widocznego obszaru (czytanego jako ekran urządzenia) i mają algorytm obliczania kompletności każdej klatki.

Czas na interaktywność

Co to reprezentuje: Reakcja na obciążenie; określić, gdzie strona wygląda na responsywną, ale jeszcze nie jest.

Waga oceny wydajności latarni morskiej: 15%

Co mierzy: czas od rozpoczęcia ładowania strony do załadowania jej głównych zasobów i umożliwienia odpowiedzi na dane wejściowe użytkownika.

Jak to się mierzy: TTI mierzy, ile czasu zajmuje strona, aby stała się w pełni interaktywna. Strona jest uważana za w pełni interaktywną, gdy:

Strona wyświetla użyteczną zawartość, która jest mierzona przez First Contentful Paint .

Programy obsługi zdarzeń są rejestrowane dla większości widocznych elementów strony.

Strona reaguje na interakcje użytkownika w ciągu 50 milisekund.

Zbiorcza zmiana układu (CLS)

Co reprezentuje: postrzeganie przez użytkownika stabilności wizualnej strony.

Waga oceny wydajności latarni morskiej: 5%*

* Spodziewaj się, że CLS wzrośnie, gdy rozwiążą błędy. Sprytny zakład mówi o czwartym kwartale 2021 r.

Co mierzy: określa ilościowo przesunięcie elementów strony do końca ładowania strony.

Jak to się mierzy: w przeciwieństwie do innych metryk CLS nie jest mierzony w czasie. Zamiast tego jest to wyliczona metryka oparta na liczbie klatek, w których poruszają się elementy, oraz całkowitej odległości w pikselach, na jaką przesunęły się elementy.

Wniosek

Złożoność wskaźników wydajności odzwierciedla wyzwania stojące przed wszystkimi witrynami. Używamy wskaźników wydajności jako proxy dla doświadczenia użytkownika – oznacza to uwzględnienie niektórych jednorożców.

Narzędzia takie jak Google Test My Site i Ile kosztuje moja witryna? może pomóc w przedstawieniu konwersji i argumentów zorientowanych na klienta, dlaczego wydajność ma znaczenie. Mamy nadzieję, że gdy Twój projekt zacznie działać, te definicje pomogą Ci przetłumaczyć pojedynczy wskaźnik wydajności Lighthouse na bilety działań dla wykwalifikowanego i współpracującego zespołu inżynierów.

Śledź swoje dane i krzycz je z dachów. Podczas gdy Google stara się oszacować jakościowe doświadczenia, specjaliści SEO i programiści muszą rozszyfrować, jak przełożyć koncepcję na kod. Testuj, powtarzaj i dziel się tym, czego się nauczyłeś!