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

Znajdź wszystko, co musisz wiedzieć o Lighthouse: co to jest, dlaczego ma znaczenie dla podstawowych wskaźników internetowych i jak używać go do testowania wydajności. Może jesteś tutaj, ponieważ jesteś zagorzałym fanem wskaźników wydajności. A może nie wiesz, czym jest Lighthouse i boisz się zapytać.

 

Przyjrzymy się:

  • Czym do cholery jest latarnia morska? (Na wypadek, gdybyś nie wiedział i bał się zapytać.)
  • Aktualizacje sposobu obliczania Wyniku Skuteczności (wersje 6 i 7).
  • Jak przetestować wydajność za pomocą Lighthouse.
  • Jakie metryki składają się na wynik Lighthouse’s Performance.
  • Co oznaczają te dane.
  • Jak je ulepszyć.

Co to jest Lighthouse?

Lighthouse to narzędzie do audytu typu open source , które zapewnia ustandaryzowane wyniki w pięciu obszarach:

  • Wydajność.
  • Progresywna aplikacja internetowa.
  • Najlepsze praktyki.
  • Dostępność.
  •  

rekalma

Drzwi wewnętrzne

Drzwi wewnętrzne w Hermes Warszawa

optymalizacja stron

Optymalizacja stron SEO alphabet

kantor Świnoujście

Kantor Świnoujście – sprawdź.

Na potrzeby tego artykułu będziemy używać nazwy Lighthouse w odniesieniu do serii testów wykonywanych przez wspólne repozytorium Github, niezależnie od metody wykonania.

 

Lighthouse przeprowadza testy wydajności przy użyciu emulowanych danych, znanych również jako dane laboratoryjne. Są to dane dotyczące wydajności zebrane w kontrolowanym środowisku ze wstępnie zdefiniowanymi ustawieniami urządzenia i sieci. Dane laboratoryjne są pomocne przy debugowaniu problemów z wydajnością. Nie oznacza to, że doświadczenie na lokalnym komputerze w kontrolowanym środowisku reprezentuje doświadczenia prawdziwych ludzi na wolności.

Aktualizacje Lighthouse: Web Core Vitals

5 maja 2020 r. projekt Chromium ogłosił zestaw trzech wskaźników, za pomocą których wspierana przez Google przeglądarka typu open source będzie mierzyć wydajność. Wskaźniki, znane jako Web Vitals, są częścią inicjatywy Google mającej na celu zapewnienie ujednoliconych wskazówek dotyczących sygnałów jakościowych. Celem tych wskaźników jest mierzenie wydajności sieci w sposób zorientowany na użytkownika.

 

W ciągu dwóch tygodni wprowadzono Lighthouse v6 ze zmodyfikowaną wersją Web Core Vitals w sercu aktualizacji. W lipcu 2020 r. ujednolicone wskaźniki Lighthouse v6 zostały przyjęte w produktach Google wraz z wydaniem Chrome 84. Panel Audyty Chrome DevTools został przemianowany na Lighthouse. Statystyki Pagespeed i Google Search Console również odnoszą się do tych ujednoliconych danych.

 

Web Core Vitals stanowią 55% ważonego wyniku wydajności Lighthouse. Ta zmiana punktu widzenia wyznacza nowe, bardziej wyrafinowane cele. Ogólnie rzecz biorąc, większość stron miała minimalny wpływ, a 83,32% testów przesunęło o dziesięć punktów lub mniej przy przejściu na wersję 6. Wersja 7 jest obecnie dostępna na Github i została zaplanowana do wdrożenia na dużą skalę wraz ze stabilną wersją Chrome 89 w marcu 2021 roku.

Jak przetestować wydajność za pomocą latarni morskiej?

Kwestie metodologiczne

Po wyjęciu z pudełka Lighthouse kontroluje pojedynczą stronę na raz. Wynik pojedynczej strony nie reprezentuje Twojej witryny, a szybka strona główna nie oznacza szybkiej witryny. Przetestuj wiele typów stron w swojej witrynie. Zidentyfikuj główne typy stron, szablony i punkty konwersji celu (strony rejestracji, subskrypcji i kasy).

Przed rozpoczęciem optymalizacji uruchom Lighthouse na każdej z przykładowych stron i zapisz dane raportu. Zapisz swoje wyniki i listę spraw do załatwienia. Zapobiegaj utracie danych, zapisując wyniki JSON i wykorzystując Lighthouse Viewer, gdy potrzebne są szczegółowe informacje o wynikach.

 

Uzyskaj zaległości, aby odgryźć się, korzystając z ROI

Wprowadzenie zasobów programistycznych do działania zaleceń SEO jest trudne. Wewnętrzny specjalista SEO może zniszczyć trzustkę, organizując tort urodzinowy na każde zaległe urodziny biletu. Albo przynajmniej naucz się nienawidzić ciasta.

Z mojego doświadczenia jako wewnętrznego profesjonalisty SEO w przedsiębiorstwie, aby nadać priorytet inicjatywom związanym z wydajnością, jest posiadanie liczb, które wspierają inwestycję. Te początkowe dane staną się znakami dolara, które posłużą do uzasadnienia i nagrodzenia wysiłków na rzecz rozwoju.

 

Istnieje szansa, że ​​podczas testów zostanie oznaczony więcej niż jeden obszar. W porządku! Jeśli zastanawiasz się, które zmiany będą najbardziej opłacalne, sprawdź Kalkulator punktacji latarni morskiej .

 

Jak przeprowadzać testy latarni morskiej

Tak jest w przypadku wielu dróg prowadzących do Oz. Jasne, niektóre strachy na wróble mogą być szczególnie głośne o pewnym odcieniu cegły, ale chodzi o twoje cele.

 

Chcesz zintegrować testy SEO z procesem wydania? Czas nauczyć się NPM. Masz mniej niż pięć minut na przygotowanie się do spotkania z potencjalnym klientem? Kilka jednorazowych raportów powinno wystarczyć. Niezależnie od tego, w jaki sposób wykonasz, domyślnie na urządzeniu mobilnym, chyba że masz specjalny przypadek użycia na komputerze.

Raporty jednorazowe: narzędzia programistyczne Chrome

Przetestuj jedną stronę naraz za pomocą panelu Lighthouse w Chrome DevTools . Ponieważ raport będzie emulować sposób korzystania z przeglądarki przez użytkownika, użyj instancji incognito ze wszystkimi rozszerzeniami i wyłącz pamięć podręczną przeglądarki.

Wskazówka dla profesjonalistów: utwórz profil Chrome do testowania. Zachowaj go lokalnie (bez włączonej synchronizacji, zapisywania hasła lub powiązania z istniejącym kontem Google) i nie instaluj rozszerzeń dla użytkownika.

Jak uruchomić testową latarnię morską za pomocą Chrome DevTools

  1. Otwórz incognito incognito Chrome.
  2. Przejdź do panelu Sieć w Chrome Dev Tools (Command + Option + I na Macu lub Control + Shift + I na Windows i Linux).
  3. Zaznacz pole, aby wyłączyć pamięć podręczną.
  4. Przejdź do panelu Latarnia morska.
  5. Kliknij Generuj raport.
  6. Zapisz plik.

Zalety prowadzenia latarni morskiej od DevTools

  • Możesz testować lokalne kompilacje i uwierzytelnione strony.
  • Zapisane raporty można porównać za pomocą narzędzia Lighthouse CI Diff.

 

Wady prowadzenia latarni morskiej od DevTools

  • Jeden raport na raz.
  • Wymaga ręcznego zapisywania wyników.

 

Do częstego testowania tych samych stron: web.dev

To zupełnie jak DevTools, ale nie musisz pamiętać o wyłączeniu wszystkich tych nieznośnych rozszerzeń!

  • Odwiedź web.dev/measure/ .
  • Zaloguj się przy użyciu swojego konta Google.
  • Wpisz swój adres URL.
  • Kliknij Uruchom audyt.

Zalety prowadzenia latarni morskiej Od web.dev

  • Przechwytuje fajną oś czasu wyników! (Tak długo, jak jesteś zalogowany).
  • Szybkie łącza do przewodników dotyczących rozwiązywania problemów.
  • Zapisane raporty można porównać za pomocą narzędzia Lighthouse CI Diff .

 

Wady prowadzenia latarni morskiej z web.dev

  • Jeden raport na raz.
  • Musisz pamiętać, które adresy URL śledzisz w czasie.

 

Do testowania na dużą skalę (i poczytalności): Wiersz poleceń węzła

  1. Zainstaluj npm .

(Wskazówka Mac Pro: użyj homebrew, aby uniknąć nieprzyjemnych problemów z zależnością).

  1. Zainstaluj moduł węzła Lighthouse z npm

zainstaluj -g lighthouse

  1. Uruchom pojedynczy tekst za pomocą

lighthouse <url>

  1. Uruchom testy na listach zastosowań, uruchamiając testy programowo.

Zalety prowadzenia latarni morskiej z węzła

  • Wiele raportów można uruchomić jednocześnie.
  • Można ustawić automatyczne uruchamianie, aby śledzić zmiany w czasie.

 

Wady uruchamiania latarni morskiej z węzła

  • Wymaga pewnej wiedzy na temat kodowania.
  • Bardziej czasochłonna konfiguracja.

Wyjaśnienie metryk wydajności

W wersjach 6 i 7 ocena wydajności Lighthouse składa się z siedmiu metryk, z których każda ma udział procentowy w całkowitym wyniku wydajności.

Największa zawartość farby (LCP)

Co reprezentuje: postrzeganie ładowania przez użytkownika.

Waga oceny wydajności latarni morskiej: 25%

Co mierzy: punkt na osi czasu wczytywania strony, w którym w widocznym obszarze widoczny jest największy blok obrazu lub tekstu na stronie.

Jak to się mierzy: Lighthouse wyodrębnia dane LCP z narzędzia do śledzenia Chrome .

Czy największa zawartość treściowa ma kluczowe znaczenie dla sieci Web? Tak!

Punktacja LCP

Cel: Osiągnij LCP w < 2,5 sekundy.

Jakie elementy mogą być częścią LCP?

·         – Tekst.

·         – Obrazy.

·         – Filmy.

·         – Obrazy tła.

Co liczy się jako LCP na Twojej stronie?

To zależy! LCP zazwyczaj różni się w zależności od szablonu strony.

Oznacza to, że możesz zmierzyć kilka stron przy użyciu tego samego szablonu i zdefiniować LCP.

Jak zdefiniować LCP za pomocą Chrome Devtools

  1. Otwórz stronę w Chrome.
  2. Przejdź do panelu Wydajność narzędzi programistycznych (Command + Option + I na Macu lub Control + Shift + I na Windows i Linux).
  3. Najedź kursorem na znacznik LCP w sekcji Czasy.
  4. Element(y) odpowiadające LCP są wyszczególnione w polu Węzeł powiązany.

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ś!