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.

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:

• W Narzędziach deweloperskich w Chrome. Możesz łatwo kontrolować strony, które wymagają uwierzytelniania, i odczytywać raporty w przyjaznym dla użytkownika formacie.
• W wierszu poleceń. Zautomatyzuj uruchamianie Lighthouse za pomocą skryptów powłoki.
• Jako moduł węzła. Zintegruj Lighthouse z systemami ciągłej integracji.
• W interfejsie internetowym. Uruchamiaj Lighthouse i łącz się z raportami bez konieczności instalowania niczego.

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.

   

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.

   

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.

   

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 . 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.

   

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

   

Udostępnianie i wyświetlanie raportów online

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

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 w prawym górnym rogu i kliknij 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 w prawym górnym rogu i kliknij 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 w prawym górnym rogu, a następnie kliknij 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.