Poznaj najnowsze funkcje PageSpeed Insights, które pomogą Ci lepiej mierzyć i optymalizować jakość strony i witryny.
Z biegiem lat narzędzie PageSpeed Insights (PSI) zmieniło się w jednorazowe źródło informacji zarówno o danych branżowych, jak i laboracyjnych. Zawiera informacje z Raportu na temat użytkowania Chrome (CrUX) i diagnostyki Lighthouse, aby dostarczać statystyki pomagające poprawić wydajność Twojej witryny.
Z przyjemnością przedstawiamy zaktualizowaną wersję PSI. Chociaż jest to kluczowy element naszego pakietu narzędzi do szybkiego działania, baza kodu PSI miała już 10 lat, zawierała wiele starszego kodu i należała do przeprojektowania. Wykorzystaliśmy tę okazję jako okazję do rozwiązania problemów z interfejsem w PSI, które czasem utrudniały użytkownikom poruszanie się po raporcie. Naszym głównym celem było:
- Zapewnij bardziej intuicyjny interfejs, wyraźnie odróżniając dane pochodzące ze środowiska syntetycznego od danych zbieranych od użytkowników.
- Jasno przedstaw w interfejsie, jak obliczane są podstawowe wskaźniki internetowe.
- Zmień wygląd i styl PSI, korzystając z Material Design.
W tym poście przedstawiamy nowe funkcje PSI, które zostaną udostępnione jeszcze w tym roku.
Co nowego?
Nowy wygląd interfejsu PSI ma na celu poprawę sposobu przedstawiania danych w raportach oraz zwiększenie ich przejrzystości i szczegółowości. Nowy interfejs jest bardziej intuicyjny i pomaga programistom szybko znajdować statystyki wydajności modułów i pól na ich stronach. Najważniejsze zmiany w interfejsie obejmują:
Usuń dane pola i modułu
Zmieniliśmy interfejs, aby wyraźnie oddzielić dane pól od danych modułu. Etykiety „Dane pól” i „Dane modułu” zostały zastąpione tekstem, który pokazuje, co oznaczają te dane i jak mogą pomóc. U góry przenieśliśmy też sekcję danych pola. Tradycyjny wynik laboratoryjny, który jest obecnie wyświetlany u góry, został przeniesiony w dół do sekcji Dane modułu, aby uniknąć niejasności co do źródła wyniku.
ocena podstawowych wskaźników internetowych
Wynik oceny podstawowych wskaźników internetowych, który wcześniej występował w danych terenowych jako pojedynczy wyraz „zaliczony” lub „niepowodzenie”, wyróżnia się teraz jako osobną podsekcję z odrębną ikoną.
Pamiętaj, że proces oceny podstawowych wskaźników internetowych nie ulegnie zmianie. Dane FID, LCP i CLS dotyczące podstawowych wskaźników internetowych mogą być agregowane na poziomie strony lub źródła. W przypadku agregacji z wystarczającą ilością danych we wszystkich 3 wskaźnikach agregacja przechodzi ocenę Podstawowych wskaźników internetowych, jeśli 75 centyl wszystkich 3 wskaźników jest Dobry. W przeciwnym razie agregacja nie zakończy testu. Jeśli agregacja ma niewystarczające dane FID, przejdzie ocenę, jeśli zarówno 75 centyl LCP, jak i CLS są dobre. Jeśli LCP lub CLS mają niewystarczające dane, nie można ocenić agregacji na poziomie strony lub źródła.
Etykiety skuteczności na komórkach i komputerach
Zmieniliśmy menu nawigacyjne u góry, umieszczając na stronie raportu centralnie linki do wersji na urządzenia mobilne i komputery. Linki są teraz dobrze widoczne i wyraźnie wskazują platformę, z której wyświetlane są dane. Pomogło to też poprawić przejrzystość paska nawigacyjnego.
Podsumowanie źródła
Po kliknięciu pola wyboru wyświetla się obecnie podsumowanie informacji o źródle, które zawiera zbiorczy wynik oceny CrUX dla wszystkich stron ze źródła. Przenieśliśmy tę sekcję raportu na nową kartę „Źródło” w sekcji Dane pól.
Dodatkowe informacje
U dołu każdego pola raportu znajduje się teraz nowa sekcja z informacjami oraz karta modułu z tymi informacjami o próbkowanych danych:
- Okres gromadzenia danych
- Czasy trwania wizyt
- Urządzenia
- Połączenia sieciowe
- Rozmiar próbki
- Wersje Chrome
Informacje te powinny wzmocnić różnicę między danymi laboratoryjnymi a danymi terenowymi i pomóc użytkownikom, którzy nie byli pewni, czym mogą się różnić te 2 źródła danych (moduł i pole).
Rozwiń widok
Stworzyliśmy nową funkcję „Rozwiń widok”, która dodaje funkcję do bardziej szczegółowego widoku danych w sekcji danych pól i pozwala wyświetlać szczegółowe informacje o podstawowych wskaźnikach internetowych.
Obraz strony
Usunęliśmy obraz załadowanej strony, który pojawia się obok danych pola. Obraz i miniatury strony, na której widać sekwencję wczytywania, będą dostępne w sekcji danych modułu.
Aktualną dokumentację usługi znajdziesz na https://developers.google.com/speed/docs/insights/..
Aktualizacje strony web.dev/measure
Aby zmniejszyć niespójności między różnymi narzędziami z naszego zestawu narzędzi do zarządzania wydajnością, aktualizujemy również stronę web.dev/measure, aby korzystała bezpośrednio z interfejsu PageSpeed Insights API.
Wcześniej deweloperzy uruchamiali raporty zarówno w narzędziu PSI, jak i w parametrze /measure, a także widzieli różne wartości w Lighthouse. Jedną z głównych przyczyn różnic była fakt, że wszystkie testy /measure pochodziły z USA (ze względu na to, że wcześniej miał backend w chmurze znajdujący się w USA).
Gdy interfejs /measure wywołuje ten sam interfejs API bezpośrednio co interfejs PSI, deweloperzy uzyskują bardziej spójną obsługę podczas korzystania z PSI i /measure. Wprowadziliśmy też kilka ulepszeń w zależności od tego, jak użytkownicy korzystają z narzędzia. Oznacza to, że nie będziemy już udostępniać metody logowania się w narzędziu /measure, ale nadal będzie można korzystać z najczęściej używanych funkcji, takich jak wyświetlanie wielu kategorii.
PSI dzisiaj
Spójrzmy o krok wstecz, by sprawdzić, co oferuje bieżący raport PageSpeed Insights. Raport PSI zawiera na osobnych kartach dane o wydajności urządzeń mobilnych i komputerów oraz sugeruje, jak można ulepszyć stronę. Kluczowe komponenty raportu są w każdym przypadku podobne i składają się z tych elementów:
Wynik wydajności: wynik wydajności jest wyświetlany u góry raportu PSI i podsumowuje ogólną wydajność strony. Ten wynik jest określany przez uruchomienie narzędzia Lighthouse w celu zbierania i analizowania danych laboratoryjnych o stronie. Wynik 90 lub wyższy oznacza dobry wynik, 50–90 wymaga poprawy, a poniżej 50 – niski.
Dane pola: dane terenowe pochodzące ze zbioru danych raportu na temat użytkowania Chrome zapewniają wgląd w rzeczywiste wrażenia użytkowników. Dane te obejmują wskaźniki takie jak Pierwsze wyrenderowanie treści (FCP) i mierzą podstawowe wskaźniki internetowe (opóźnienie po pierwszym działaniu (FID), największe wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS). Wraz z wartościami danych możesz też zobaczyć rozkład stron, w przypadku których dany rodzaj danych miał wartość Dobra, Wymagana poprawa lub Słabej jakości. Oznacza to odpowiednio zielone, bursztynowe i czerwone paski. Rozkład i wyniki są wyświetlane na podstawie wczytań stron przez użytkowników zbioru danych CrUX. Wyniki są obliczane za ostatnie 28 dni i nie są dostępne w przypadku nowych stron, których dane mogą być niedostępne dla rzeczywistych użytkowników.
Podsumowanie informacji o źródle: użytkownicy mogą kliknąć pole wyboru Pokaż podsumowanie informacji o źródle, aby wyświetlić zagregowany wynik danych dotyczących wszystkich stron z tego samego źródła w ciągu ostatnich 28 dni.
Dane modułu: wynik wydajności modułu obliczany za pomocą narzędzia Lighthouse jest pomocny w debugowaniu problemów z wydajnością, ponieważ są one zbierane w kontrolowanym środowisku. Raport pokazuje skuteczność na podstawie takich danych jak First ContentfulPaint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift (Skumulowane przesunięcie układu), Czas do interakcji i Total Zablokowano (Całkowity czas blokowania). Każdy rodzaj danych jest oceniany i oznaczony ikoną wskazującą, że stan to dobry, „wymagana poprawa” lub „słabe”. Ta sekcja zawiera dobre wskazanie wąskich gardła wydajności przed wdrożeniem funkcji i może pomóc w diagnozowaniu problemów, ale może nie uwzględniać rzeczywistych problemów.
Audyty: w tej sekcji znajdziesz listę wszystkich audytów prowadzonych przez Lighthouse, a także zdane audyty, a także możliwości wprowadzenia ulepszeń i dodatkowe informacje diagnostyczne.
Wyzwania związane z obecnym wyglądem systemu PSI
Jak widać na zrzucie ekranu powyżej, różne punkty danych z modułów i terenów nie są wyraźnie odseparowane, a deweloperzy, którzy dopiero zaczynają korzystać z PSI, mogą mieć trudności ze zrozumieniem kontekstu danych i dalszych działań. To zamieszanie spowodowało, że w wielu postach na blogu dotyczących interpretacji raportu PSI pojawiło się wiele instrukcji.
Mamy nadzieję, że dzięki tej zmianie deweloperzy będą mogli łatwiej interpretować raport, aby mogli szybko przejść od generowania raportu PSI do korzystania z zawartych w nim informacji.
Więcej informacji
Aby dowiedzieć się więcej o aktualizacjach narzędzi do zwiększania wydajności, obejrzyj prezentację na Chrome Dev Summit 2021. Będziemy Cię informować o dacie premiery PSI i zmianach w web.dev/measure.
Dziękujemy: Milica Mihajlija, Philip Walton, Brendan Kenny i Ewa Gasperowicz za opinie na temat tego artykułu.