Lighthouse to narzędzie typu open source, które automatycznie poprawia jakość aplikacji internetowych. Możesz je zainstalować jako rozszerzenie do Chrome lub uruchomić jako narzędzie wiersza poleceń Node. Gdy podasz adres URL, Lighthouse przeprowadzi na stronie serię testów, a potem wygeneruje raport z omówieniem wyników i wskazaniem obszarów wymagających poprawy.
Z przyjemnością ogłaszamy dziś wersję 1.5 Lighthouse – ogromną aktualizację, która zawiera ponad 128 PR. Lighthouse 1.5 zawiera wiele nowych funkcji, audytów i standardowych poprawek błędów. Możesz go zainstalować za pomocą npm (npm i -g lighthouse) lub pobrać rozszerzenie ze sklepu Chrome Web Store.
Nowe kontrole
Sprawdzanie użycia kodu CSS podaje liczbę nieużywanych reguł stylów na stronie oraz oszczędność czasu i pieniędzy wynikającą z ich usunięcia:
Audyt zoptymalizowanych obrazów zawiera informacje o obrazach, które nie są zoptymalizowane, oraz o oszczędnościach na kosztach i czasie, jakie można uzyskać dzięki ich optymalizacji:
Sprawdzanie responsywnych obrazów podaje informacje o obrazach, które są zbyt duże, oraz o potencjalnych oszczędnościach czasu i pieniędzy, które można uzyskać, dostosowując ich rozmiar do danego urządzenia:
Audyt wycofanych interfejsów API i interwencji zawiera ostrzeżenia w konsoli Chrome, jeśli Twoja strona korzysta z wycofanych interfejsów API lub funkcji, które zostały poddane interwencji:
Zgłoś zmiany
Jak już wiesz, skupiliśmy się na zmniejszeniu wizualnego chaosu w raporcie przez dodanie danych w postaci tabeli, ukrycie zbędącego tekstu pomocy i dodanie nowych funkcji, które ułatwiają nawigację po danych.
Ustawienia emulacji
Łatwo zapomnieć, jakie ustawienia ograniczania i emulacji zostały użyte w przypadku konkretnego uruchomienia Lighthouse. Raporty Lighthouse zawierają teraz ustawienia emulacji czasu wykonywania, które zostały użyte do utworzenia raportu. Prośba o dodanie funkcji od dawna:
bardziej przydatne dane śladu,
Dane Lighthouse takie jak „Pierwsze znaczące wyświetlenie” czy „Czas do interakcji” są symulowane jako pomiary czasu użytkownika i zapisywane ponownie w danych śladu z flagą --save-assets.
Jeśli używasz flagi --save-assets, możesz teraz przekazać ślad do DevTools lub otworzyć go w przeglądarce osi czasu w Narzędziach deweloperskich.
Kluczowe dane będą widoczne w kontekście pełnego śledzenia wczytywania strony.
Lighthouse Viewer
W raportach HTML zobaczysz nowy przycisk z opcjami eksportowania raportu w różnych formatach. Jedną z nich jest „Otwórz w przeglądarce”. Kliknięcie tego przycisku spowoduje wysłanie raportu do widoku online, gdzie możesz go udostępnić innym użytkownikom GitHuba.
W tle usługa Podgląd uzyskuje Twoją zgodę za pomocą OAuth na utworzenie tajnego gista w GitHubie i zapisuje w nim raport. Ponieważ jest to Twoja strona Gist, masz pełną kontrolę nad udostępnianiem raportu i możesz go w każdej chwili usunąć. W ustawieniach GitHuba możesz cofnąć uprawnienia widza do tworzenia gistów.
Eksperyment dotyczący skuteczności
Pierwsza wersja projektu Performance Experiment została udostępniona w wersji 1.5.0. Dzięki temu możesz eksperymentować ze skutecznością wczytywania strony, interaktywnie testując efekty blokowania lub opóźniania zasobów na ścieżce krytycznej podczas tworzenia.
Gdy Lighthouse jest uruchamiany z oznaczeniem --interactive, generowany jest specjalny raport, który umożliwia interaktywny wybór kosztownych zasobów strony. Następnie serwer eksperymentu ponownie uruchamia Lighthouse na tej stronie z zablokowanymi zasobami.
Dowiedz się więcej o eksperymencie dotyczącym wydajności w Lighthouse.
Nowa dokumentacja
I wreszcie zmodernizowaliśmy dokumentację na stronie developers.google.com/web/tools/lighthouse/ i dodaliśmy nowe odniesienia do audytu.
To wszystko na dziś.
Wszystkie szczegóły dotyczące najnowszej wersji Lighthouse znajdziesz w kompletnych informacjach o wersji na GitHubie. Jak zawsze skontaktuj się z nami, aby zgłaszać błędy, przesyłać prośby o dodanie funkcji lub przedstawiać swoje pomysły na temat tego, co chcielibyście zobaczyć w przyszłości.