PageSpeed Insights: co znaczy każdy wynik i jak go poprawić
PageSpeed Insights w praktyce
PageSpeed Insights: wyniki, metryki i poprawki | We.Inc
Co znaczy każda liczba w PageSpeed Insights, dane terenowe a laboratoryjne, progi LCP, INP, CLS, FCP i TTFB, wagi wyniku i kod, który naprawia czerwone wyniki.
PageSpeed Insights pokazuje dwa raporty. Górny to dane terenowe od prawdziwych użytkowników Chrome z ostatnich 28 dni, oceniane na 75. percentylu. Dolny to test laboratoryjny Lighthouse z wynikiem od 0 do 100: 90 lub więcej to dobrze, 50 do 89 wymaga pracy, poniżej 50 to słabo. Najpierw popraw metryki terenowe.
Progi metryk terenowych używane przez PageSpeed Insights
Metryka
Dobrze
Wymaga poprawy
Słabo
LCP (Largest Contentful Paint)
2.5 s lub mniej
2.5 do 4 s
powyżej 4 s
INP (Interaction to Next Paint)
200 ms lub mniej
200 do 500 ms
powyżej 500 ms
CLS (Cumulative Layout Shift)
0.1 lub mniej
0.1 do 0.25
powyżej 0.25
FCP (First Contentful Paint)
1.8 s lub mniej
1.8 do 3 s
powyżej 3 s
TTFB (eksperymentalna)
0.8 s lub mniej
0.8 do 1.8 s
powyżej 1.8 s
Większość osób wpatruje się w duży okrągły wynik, ale ta liczba pochodzi z jednej symulowanej wizyty na spowolnionym telefonie. Ten poradnik rozdziela obie połowy raportu, pozwala ocenić własne liczby według oficjalnych progów i przypisuje każdej czerwonej metryce zmianę, która zwykle ją poprawia.
Sprawdź swój URL na pagespeed.web.dev i najpierw spójrz na blok danych terenowych. Jeśli jest tam informacja o braku wystarczających danych, dostępny jest tylko test laboratoryjny.
Wpisz swoje wartości LCP, INP, CLS, FCP i TTFB do poniższego oceniacza, aby zobaczyć, do jakiego przedziału trafia każda z nich.
Otwórz sekcję poprawek dla najgorszej metryki i wprowadź odpowiednią zmianę w kodzie.
Poczekaj na nowe dane terenowe. Raport od prawdziwych użytkowników obejmuje kroczące 28 dni, więc poprawa pojawia się stopniowo, a nie następnego ranka.
Mobilny test laboratoryjny działa na emulowanym telefonie ze średniej półki z wolną siecią, więc niższy wynik mobilny niż desktopowy jest normalny.
Wyniki laboratoryjne zmieniają się o kilka punktów między uruchomieniami. Uruchom test trzy razy i spójrz na środkowy wynik, zanim uznasz, że coś się zmieniło.
Test laboratoryjny nie może zmierzyć INP, bo nikt niczego nie klika. Zastępuje go Total Blocking Time, więc wysoki TBT zwykle zapowiada słabe INP.
Zewnętrzne tagi, takie jak widżety czatu, mapy cieplne i skrypty reklamowe, często kosztują więcej niż Twój własny kod. Przejrzyj listę zewnętrznych żądań, zanim zaczniesz przepisywać aplikację.
Najczęściej zadawane pytania
Dlaczego moje dane terenowe i wynik laboratoryjny tak się różnią?
Mierzą różne rzeczy. Dane terenowe to doświadczenia prawdziwych użytkowników Chrome na ich własnych urządzeniach i sieciach przez 28 dni. Wynik laboratoryjny to jedno symulowane ładowanie ze stałym spowolnieniem. Strona może dostać 60 w laboratorium i mimo to zaliczyć Core Web Vitals w terenie, albo odwrotnie.
Czy wynik Lighthouse wpływa na pozycje w Google?
Google opisuje Core Web Vitals jako miary rzeczywistego doświadczenia użytkownika, zgodne z tym, co nagradzają jego główne systemy rankingowe. Wytyczne Search nie wymieniają laboratoryjnego wyniku od 0 do 100 jako czynnika rankingowego, więc traktuj go jako narzędzie diagnostyczne do znajdowania problemów.
Czym jest TTFB i jaka wartość jest dobra?
Time to First Byte to czas, przez jaki przeglądarka czeka na pierwszy bajt HTML, wliczając przekierowania, DNS, nawiązanie połączenia i pracę serwera. PageSpeed Insights uznaje 800 ms lub mniej za dobry wynik. Najczęstszą poprawką jest buforowanie HTML na brzegu CDN.
Jak obliczany jest wynik wydajności Lighthouse?
Od Lighthouse 10 to ważona mieszanka pięciu metryk laboratoryjnych: Total Blocking Time 30 procent, LCP 25 procent, CLS 25 procent, FCP 10 procent i Speed Index 10 procent. Każda metryka jest najpierw zamieniana na podwynik od 0 do 100 według krzywej.
Dlaczego raport mówi, że moja strona nie ma danych terenowych?
Chrome User Experience Report publikuje dane tylko dla stron i domen z wystarczającą liczbą kwalifikujących się wizyt. Nowe witryny lub te z małym ruchem często ich nie mają, więc do czasu wzrostu ruchu polegaj na teście laboratoryjnym i własnym monitoringu.
Czytaj raport od góry do dołu
Pierwszy blok odpowiada na pytanie, czy prawdziwi odwiedzający mieli dobre doświadczenie. Pokazuje wartość 75. percentyla dla każdej metryki, co znaczy, że trzy na cztery wizyty były co najmniej tak szybkie. Celem jest zaliczenie wszystkich trzech Core Web Vitals (LCP, INP i CLS).
Drugi blok to pojedyncze uruchomienie Lighthouse. W jego diagnostyce i możliwościach dowiesz się, dlaczego metryka terenowa jest wolna, bo ślad laboratoryjny wymienia konkretne pliki, obrazy i skrypty.
Przykład przed i po
Weźmy typową stronę główną małej firmy ze zdjęciem hero na całą szerokość ładowanym leniwie, fontem webowym bez strategii zastępczej i trzema tagami marketingowymi w head. W tym przykładzie obraz LCP zaczyna się pobierać dopiero po zakończeniu skryptu, więc LCP ląduje w przedziale słabym.
Usunięcie loading=lazy z hero, dodanie fetchpriority=high, serwowanie zdjęcia jako AVIF lub WebP w wyświetlanym rozmiarze i przeniesienie tagów tak, by ładowały się, gdy strona jest już interaktywna, atakuje każdą część składową LCP. To właśnie zmiany pokazane w kodzie poniżej; Twoje liczby zależą od Twojej strony.
Gdzie każda metryka zwykle się psuje
LCP dzieli się na cztery części: czas do pierwszego bajtu, opóźnienie ładowania zasobu, czas ładowania zasobu i opóźnienie renderowania elementu. Najpierw znajdź największą część, potem popraw właśnie ją.
INP dotyczy długich zadań JavaScript wykonywanych, gdy ktoś stuka lub pisze. CLS wynika z elementów, które zmieniają rozmiar po pierwszym malowaniu: obrazów bez wymiarów, spóźnionych banerów i fontów, które podmieniają się na inną szerokość.
Jak ważony jest wynik laboratoryjny
Od Lighthouse 10 łączy się pięć metryk laboratoryjnych. Największą wagę ma Total Blocking Time, więc ciężki JavaScript szkodzi wynikowi bardziej niż cokolwiek innego.
Wagi wyniku wydajności Lighthouse
Metryka laboratoryjna
Waga
Powiązana metryka terenowa
Total Blocking Time
INP
Largest Contentful Paint
LCP
Cumulative Layout Shift
CLS
First Contentful Paint
FCP
Speed Index
Brak bezpośredniej
Częste audyty i poprawka dla każdego
Co mówi Ci czerwony audyt
Audyt lub objaw
Dlaczego jest czerwony
Typowa poprawka
Obraz Largest Contentful Paint był ładowany leniwie
Przeglądarka czeka na układ, zanim pobierze hero
Usuń loading=lazy z hero i dodaj fetchpriority=high
Wyeliminuj zasoby blokujące renderowanie
CSS lub synchroniczne skrypty w head opóźniają pierwsze malowanie
Wstaw krytyczny CSS inline, odrocz skrypty
Dobierz właściwy rozmiar obrazów
Obrazy są większe niż ich wyświetlany rozmiar
Użyj srcset i sizes, eksportuj w szerokości wyświetlania
Wyświetlaj obrazy w nowoczesnych formatach
JPEG lub PNG tam, gdzie AVIF lub WebP byłby mniejszy
Konwertuj i serwuj przez picture lub CDN obrazów
Ogranicz nieużywany JavaScript
Kod wysyłany dla funkcji, których nie ma na tej stronie
Dziel paczki według tras, usuń nieużywane biblioteki
Ogranicz wpływ kodu zewnętrznego
Tagi blokują główny wątek
Ładuj tagi po interakcji lub w czasie bezczynności
Elementy obrazów nie mają jawnej szerokości i wysokości
Miejsce nie jest zarezerwowane, więc treść skacze
Ustaw width i height lub aspect-ratio
Zapewnij widoczność tekstu podczas ładowania fontów
Tekst jest ukryty, gdy font się pobiera
Użyj font-display: swap i wstępnie załaduj główny font
Początkowa odpowiedź serwera trwała długo
Wolny TTFB z niebuforowanego HTML
Buforuj HTML na brzegu, ogranicz przekierowania
Fragmenty kodu z poprawkami
Obraz hero ładowany jako pierwszy
Bez leniwego ładowania prawdopodobnego elementu LCP, z wysokim priorytetem pobierania, nowoczesnymi formatami i rzeczywistymi wymiarami, żeby nic się nie przesuwało.
Font, który nie ukrywa tekstu
Wstępnie załaduj jeden plik fontu używany na pierwszym ekranie i pozwól tekstowi wyświetlać się fontem zastępczym, dopóki font nie dotrze.
Zewnętrzny tag ładowany, gdy strona się ustabilizuje
Wstrzykuje skrypt marketingowy, gdy przeglądarka jest bezczynna, więc nie konkuruje z pierwszym renderowaniem ani pierwszym dotknięciem.
Rezerwuj miejsce na spóźnioną treść
Osadzenie lub slot reklamowy ze stałymi proporcjami chroni treść poniżej przed skakaniem, gdy się załaduje.
Lista kontrolna szybkości
Przejdź przez to po kolei
Krok
Sprawdź
Dane terenowe: która z metryk LCP, INP i CLS nie przechodzi na 75. percentylu?
Element LCP: czy to obraz i czy jest ładowany leniwie lub wykrywany późno?
TTFB: czy HTML jest buforowany i czy są przed nim przekierowania?
JavaScript: jaki jest Total Blocking Time i które skrypty go powodują?
Układ: czy obrazy, osadzenia i banery mają zarezerwowane miejsce?
Fonty: czy ustawiono font-display i czy główny plik jest wstępnie ładowany?
Dobrze
Wymaga poprawy
Słabo
Oceń swoje liczby
Wpisz wartości ze swojego raportu, aby zobaczyć, czy każda jest dobra, wymaga poprawy, czy jest słaba.