Przegląd

Lighthouse to zautomatyzowane narzędzie open source służące do poprawiania jakości stron internetowych. Możesz ją uruchomić na dowolnej stronie internetowej, publicznej lub wymagającej uwierzytelnienia. Usługa obejmuje audyty wydajności, ułatwień dostępu, progresywnych aplikacji internetowych, SEO i innych.

Logo Lighthouse

Lighthouse możesz uruchomić w Narzędziach deweloperskich w Chrome z poziomu wiersza poleceń lub jako moduł węzła. Przekazujesz aplikacji Lighthouse adres URL do sprawdzenia, przeprowadza ona serię kontroli strony i generuje raport z jej wynikami. Następnie użyj niezaliczonych audytów jako wskazówek, które pomogą Ci ulepszyć stronę. Każdy audyt ma dokument referencyjny z wyjaśnieniem Dlaczego audyt jest ważny, a także sposobami jego rozwiązania.

Możesz też użyć Lighthouse CI, aby zapobiec regresjom w witrynie.

Obejrzyj poniższy film z Google I/O, aby dowiedzieć się więcej o tym, jak wykorzystać tę platformę i pomóc w jej tworzeniu.

Rozpocznij

Wybierz odpowiedni dla siebie przepływ pracy w Lighthouse:

Uruchom Lighthouse w Narzędziach deweloperskich w Chrome

Lighthouse ma własny panel w Narzędziach deweloperskich w Chrome. Aby uruchomić raport:

  1. Pobierz Google Chrome na komputer.
  2. W Google Chrome otwórz adres URL, który chcesz sprawdzić. Możesz kontrolować każdy adres URL w internecie.
  3. Otwórz Narzędzia deweloperskie w Chrome.
  4. Kliknij kartę Lighthouse.

    Panel Lighthouse w Narzędziach deweloperskich w Chrome
    Po lewej stronie znajduje się widoczny obszar strony, która zostanie poddana kontroli. Po prawej stronie znajduje się panel Lighthouse korzystający z Narzędzi deweloperskich w Chrome oparty na Lighthouse.

  5. Kliknij Analizuj wczytanie strony. W Narzędziach deweloperskich zobaczysz listę kategorii kontroli. Pozostaw je wszystkie włączone.

  6. Kliknij Uruchom kontrolę. Po 30–60 sekundach narzędzie Lighthouse wyświetli raport na stronie.

    Raport Lighthouse w Narzędziach deweloperskich w Chrome
    Raport Lighthouse w Narzędziach deweloperskich w Chrome

Instalacja i uruchomienie narzędzia wiersza poleceń węzła

Aby zainstalować moduł węzła:

  1. Pobierz Google Chrome na komputer.
  2. Zainstaluj bieżącą wersję Node ze wsparciem długoterminowym.
  3. Zainstaluj Lighthouse. Flaga -g instaluje ją jako moduł globalny.
npm install -g lighthouse

Aby przeprowadzić kontrolę:

lighthouse <url>

Aby wyświetlić wszystkie opcje:

lighthouse --help

Automatyczne uruchamianie modułu węzła

Przykład automatycznego uruchamiania Lighthouse jako modułu węzła znajdziesz w sekcji Automatyczne uruchamianie.

Uruchom Statystyki PageSpeed

Aby uruchomić Lighthouse za pomocą PageSpeed Insights:

  1. Otwórz PageSpeed Insights.
  2. Wpisz adres URL strony internetowej.
  3. Kliknij Analizuj.

    Interfejs PageSpeed Insights
    Interfejs PageSpeed Insights

Uruchamianie Lighthouse jako rozszerzenia do Chrome

Aby zainstalować rozszerzenie:

  1. Pobierz Google Chrome na komputer.
  2. Zainstaluj rozszerzenie Lighthouse do Chrome z Chrome Web Store.

Aby przeprowadzić kontrolę:

  1. W Chrome otwórz stronę, którą chcesz sprawdzić.
  2. Kliknij ikonę latarni morskiej Rozszerzenie Lighthouse. Powinien znajdować się obok paska adresu Chrome. Jeśli nie, otwórz menu rozszerzenia Chrome i otwórz go. Po kliknięciu pojawi się menu Lighthouse.

    Rozszerzenie Lighthouse
    Panel rozszerzenia Lighthouse

  3. Kliknij Wygeneruj raport. Lighthouse przeprowadza audyty względem aktualnie wybranej strony, a potem otwiera nową kartę z raportem z wynikami.

    Raport dotyczący rozszerzenia Lighthouse
    Raport Lighthouse z rozszerzenia

Udostępnianie i wyświetlanie raportów online

Użyj przeglądarki Lighthouse, aby wyświetlać i udostępniać raporty online.

Wyświetlający Lighthouse
Wyświetlający Lighthouse

Udostępnianie raportów w formacie JSON

Narzędzie Lighthouse wymaga danych wyjściowych raportu Lighthouse w formacie JSON. Na liście poniżej znajdziesz informacje o tym, jak uzyskać dane wyjściowe JSON w zależności od używanego przepływu pracy Lighthouse:

  • Raport Lighthouse. Otwórz menu Ikona menu w prawym górnym rogu i kliknij Przycisk Zapisz jako plik JSON Zapisz jako JSON.
  • Wiersz poleceń. Uruchom: shell lighthouse --output json --output-path <path/for/output.json>

Aby wyświetlić dane raportu:

  1. Otwórz Lighthouse Viewer.
  2. Przeciągnij plik JSON do przeglądarki lub kliknij dowolne miejsce w przeglądarce, aby otworzyć nawigator plików i wybrać plik.

Udostępnianie raportów jako Gists w GitHubie

Jeśli nie chcesz ręcznie przekazywać plików JSON, możesz też udostępniać raporty jako tajne repozytorium GitHub. Jedną z zalet tej usługi jest bezpłatna kontrola wersji.

Aby wyeksportować z niego raport jako podsumowanie:

  1. (Jeśli użytkownik jest już w przeglądarce, pomiń ten krok) Otwórz menu Ikona menu w prawym górnym rogu i kliknij Przycisk Otwórz w przeglądarce Otwórz w przeglądarce. Raport otworzy się w przeglądarce na stronie https://googlechrome.github.io/lighthouse/viewer/.
  2. W przeglądarce otwórz menu Ikona menu w prawym górnym rogu, a następnie kliknij Przycisk Otwórz w przeglądarce Zapisz jako Gist. Za pierwszym razem pojawi się wyskakujące okienko z prośbą o dostęp do podstawowych danych GitHuba oraz odczytywanie i zapisywanie plików gists.

Aby wyeksportować raport jako podsumowanie z poziomu interfejsu wiersza poleceń narzędzia Lighthouse, ręcznie utwórz raport gist, a następnie skopiuj jego dane wyjściowe i wklej je w danych ogólnych. Nazwa pliku gist zawierająca dane wyjściowe JSON musi kończyć się na .lighthouse.report.json. Przykład tego, jak wygenerować dane wyjściowe JSON przy użyciu narzędzia wiersza poleceń, znajdziesz w artykule Udostępnianie raportów w formacie JSON.

Aby wyświetlić raport, który został zapisany jako Gest:

  • Dodaj ?gist=<ID> do adresu URL przeglądającego (<ID> to identyfikator istotności). text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • Otwórz Podgląd i wklej w nim adres URL raportu.

Rozszerzanie możliwości latarni morskiej

Celem Lighthouse jest dostarczanie wskazówek, które są istotne i przydatne dla wszystkich deweloperów stron internetowych. Dostępne są 2 funkcje, które pozwolą Ci dostosować Lighthouse do swoich potrzeb.

Pakiety stosu

Deweloperzy korzystają z wielu różnych technologii (platformy backend, CMS/JavaScript) do tworzenia stron internetowych. Zamiast proponować tylko ogólne zalecenia, Lighthouse może teraz udzielać bardziej adekwatnych i praktycznych porad w zależności od używanych narzędzi.

Pakiety stosu umożliwiają Lighthouse określenie platformy, na której zbudowana jest Twoja witryna, i wyświetlenie konkretnych rekomendacji w stosunku do stosu. Te rekomendacje są tworzone i wyselekcjonowane przez ekspertów społeczności.

Aby przesłać pakiet stosu, zapoznaj się ze wskazówkami dotyczącymi dołączenia.

Wtyczki Lighthouse

Wtyczki Lighthouse umożliwiają ekspertom z dziedziny rozszerzania jego funkcjonalności zgodnie z potrzebami społeczności. Teraz możesz wykorzystywać dane zebrane w Lighthouse do tworzenia nowych audytów. Zasadniczo wtyczka Lighthouse to moduł węzłów, który implementuje zestaw testów, które zostaną przeprowadzone przez Lighthouse i dodane do raportu jako nową kategorię.

Więcej informacji na temat tworzenia własnej wtyczki znajdziesz w naszym podręczniku dotyczącym wtyczek w repozytorium Lighthouse na GitHubie.

Zintegruj z Lighthouse

Jeżeli reprezentujesz firmę lub jesteś osobą, która integruje Lighthouse z produktami lub usługami, które oferujesz, w pierwszej kolejności – bardzo się cieszymy. Staramy się, aby z Lighthouse korzystało jak najwięcej osób. Z tego wytycznych i zasobów związanych z integracją Lighthouse możesz w prosty sposób pokazać, że aplikacja Lighthouse działa zgodnie z oczekiwaniami, chroniąc jednocześnie naszą markę.

Pomóż w Lighthouse

Latarnia Lighthouse jest dostępna na licencji open source. Czekamy na jej wkład. Przejrzyj narzędzie do śledzenia problemów w repozytorium, aby znaleźć błędy, które możesz naprawić, lub kontrole, które można utworzyć lub poprawić. Narzędzie to może też służyć do omawiania danych o skuteczności, pomysłów na nowe audyty i innych kwestii związanych z Lighthouse.