Aktualizacja Lighthouse ze stycznia 2017 r.

Lighthouse to zautomatyzowane narzędzie typu open source do poprawiania jakości aplikacji internetowych. Możesz je zainstalować jako rozszerzenie do Chrome lub uruchomić jako narzędzie wiersza poleceń węzła. Gdy podasz adres URL narzędzia Lighthouse, narzędzie przeprowadzi serię testów na stronie, a potem wygeneruje raport wyjaśniający, jak dobrze strona działała, i wskazywać obszary wymagające poprawy.

Logo Lighthouse
Logo Lighthouse

Z przyjemnością informujemy, że dziś z przyjemnością ogłaszamy wprowadzenie wersji 1.5 narzędzia Lighthouse, które ma ponad 128 informacji o publikacji. Lighthouse 1.5 zawiera wiele nowych funkcji, kontrole i zwykłe poprawki błędów. Możesz je zainstalować z npm (npm i -g lighthouse) lub pobrać je z Chrome Web Store.

Nowe audyty

Kontrola wykorzystania usług porównywania cen podaje liczbę nieużywanych reguł stylów na stronie oraz oszczędności związane z ich usunięciem:

Kontrola wykorzystania usługi porównywania cen

Kontrola zoptymalizowanych obrazów raportuje obrazy, które są niezoptymalizowane, oraz informacje o oszczędnościach finansowych i czasowych wynikających z ich optymalizacji:

Audyt zoptymalizowanych obrazów

Kontrola obrazów elastycznych raportuje obrazy, które są za duże, oraz potencjalne oszczędności czasowe i kosztowe związane z ich prawidłowym dopasowaniem do danego urządzenia:

Audyt zoptymalizowanych obrazów

Kontrola wycofań i interwencji zawiera ostrzeżenia w konsoli dotyczące Chrome, jeśli Twoja strona korzysta z wycofanych interfejsów API lub funkcji, które stosują interwencje:

Audyt wycofanych elementów i interwencji

Zgłoś zmiany

Jak zapewne wiesz, skupiliśmy się na tym, by poprawić czytelność raportu poprzez dodanie danych tabelarycznych, ukrywanie zbędnych tekstów pomocy i dodanie nowych funkcji ułatwiających poruszanie się po danych.

Ustawienia emulacji

Łatwo zapomnieć, które ustawienia ograniczania i emulacji zostały użyte w przypadku konkretnego uruchomienia Lighthouse. Raporty Lighthouse obejmują teraz ustawienia emulacji środowiska wykonawczego użyte do ich utworzenia; prośbę o dodanie funkcji długoterminowej:

Ustawienia emulacji

Bardziej przydatne dane śledzenia

Dane z Lighthouse, takie jak „Pierwsze wyrenderowanie”, „Czas do interakcji” itp., są przedstawiane jako imitacje w czasie działań użytkownika, które są następnie wstawiane z powrotem do danych śledzenia zapisanych za pomocą flagi --save-assets.

Jeśli używasz flagi --save-assets, możesz teraz upuścić log czasu w Narzędziach deweloperskich lub otworzyć go w przeglądarce osi czasu DevTools. Najważniejsze wskaźniki możesz zobaczyć w kontekście pełnego śledzenia wczytywania strony.

Dane śledzenia

Wyświetlający Lighthouse

W raportach HTML znajdziesz nowy przycisk z opcjami eksportu raportu do różnych formatów. Jedną z nich jest „Otwórz w przeglądarce”. Kliknięcie tego przycisku spowoduje wysłanie raportu do przeglądarki online, z którego możesz skorzystać, aby udostępnić go użytkownikom GitHuba.

Przycisk Otwórz w przeglądarce
Otwórz w wynikach widocznych w przeglądarce

Wyświetlający w sposób niewidoczny otrzymuje przez OAuth Twoje uprawnienia do utworzenia tajnego pliku gist GitHuba i zapisuje w nim raport. Ponieważ raport działa w Gist, zachowujesz pełną kontrolę nad udostępnianiem raportu i możesz go w każdej chwili usunąć. Te uprawnienia możesz anulować w ustawieniach GitHuba.

Eksperyment ze skutecznością

Pierwsza wersja projektu Eksperyment ze skutecznością jest dostępna w wersji 1.5.0. Pozwoli Ci to eksperymentować z czasem wczytywania strony i interaktywnie testować skutki blokowania lub opóźniania zasobów na ścieżce krytycznej w trakcie programowania.

Po uruchomieniu Lighthouse z flagą --interactive generowany jest specjalny raport, który umożliwia interaktywny wybór kosztownych zasobów strony. Serwer eksperymentu ponownie uruchamia Lighthouse na tej stronie z zablokowanymi zasobami.

Przełączam ustawienia środowiska wykonawczego

Dowiedz się więcej o eksperymencie dotyczącym skuteczności w Lighthouse.

Nowa dokumentacja

Na koniec zmodernizowaliśmy dokumentację na stronie developers.google.com/web/tools/lighthouse/ i dodaliśmy nowe odwołania do audytu.

Nowa dokumentacja

To wszystko na dziś.

Wszystkie szczegóły dotyczące najnowszej wersji Lighthouse znajdziesz w pełnych informacjach o wersji na GitHubie. Jak zawsze skontaktuj się z nami w celu zgłoszenia błędów, zgłoszenia prośby o dodanie funkcji lub przeprowadzenia pomysłów nad kolejnym produktem.