Wprowadzenie do Lighthouse

Lighthouse to automatyczne narzędzie typu open source, które pomaga poprawić jakość stron internetowych. Możesz go uruchomić na dowolnej stronie internetowej, publicznej lub wymagającej uwierzytelnienia. Umożliwia prowadzenie audytów wydajności, ułatwień dostępu, SEO i innych obszarów.

Lighthouse możesz uruchomić w Narzędziach deweloperskich Chrome, z poziomu wiersza poleceń lub jako moduł Node. Podajesz Lighthouse adres URL do zweryfikowania, narzędzie przeprowadzi serię audytów strony, a potem wygeneruje raport o jej wydajności. Użyj nieudanych audytów jako wskazówek, jak ulepszyć stronę. Każda kontrola ma odniesienie, które wyjaśnia, dlaczego jest ona ważna, a także jak ją naprawić.

Możesz też używać Lighthouse CI do zapobiegania regresjom w Twoich witrynach.

Rozpocznij

Wybierz odpowiedni przepływ pracy Lighthouse:

• W Narzędziach deweloperskich w Chrome Sprawdzać strony, które wymagają uwierzytelnienia, oraz czytać raporty w przyjaznym dla użytkownika formacie bezpośrednio w przeglądarce.
• Z poziomu wiersza poleceń. Zautomatyzuj testy Lighthouse za pomocą skryptów powłoki.
• Jako moduł węzła. Zintegruj Lighthouse z systemami ciągłej integracji.
• Z interfejsu internetowego. Uruchom Lighthouse i utwórz link do raportów bez konieczności instalacji.

Uruchamianie Lighthouse w Narzędziach deweloperskich w Chrome

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

1. Pobierz Google Chrome na komputer.
2. Otwórz Chrome i przejdź do adresu URL, który chcesz sprawdzić. Możesz sprawdzić dowolny adres URL w internecie.
3. Otwórz Narzędzia deweloperskie w Chrome.

4. Kliknij kartę Lighthouse.

5. Kliknij Analizuj wczytywanie strony. W narzędziu DevTools znajdziesz listę kategorii kontroli. Pozostaw je wszystkie włączone.

6. Kliknij Uruchom audyt. Po 30–60 sekundach Lighthouse wygeneruje raport dotyczący strony.

Instalowanie i uruchamianie narzędzia wiersza poleceń Node

Aby zainstalować moduł Node:

1. Pobierz Google Chrome na komputer.
2. Zainstaluj aktualną wersję Node z długoterminowym wsparciem.
3. Zainstaluj Lighthouse. Flaga -g instaluje go jako moduł globalny.

npm install -g lighthouse

Aby przeprowadzić kontrolę:

lighthouse <url>

Aby zobaczyć wszystkie opcje:

lighthouse --help

Uruchamianie modułu Node za pomocą kodu

Przykład uruchomienia Lighthouse za pomocą kodu, jako modułu Node, znajdziesz w sekcji Używanie kodu.

Uruchamianie PageSpeed Insights

Aby uruchomić Lighthouse w PageSpeed Insights:

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

3. Kliknij Analyze (Analizuj).

Uruchamianie Lighthouse jako rozszerzenia do Chrome

Aby zainstalować rozszerzenie:

1. Pobierz Google Chrome na komputer.
2. Zainstaluj rozszerzenie Lighthouse do Chrome ze sklepu internetowego Chrome.

Aby przeprowadzić kontrolę:

1. W Chrome otwórz stronę, którą chcesz sprawdzić.

2. Kliknij  Lighthouse obok paska adresu w Chrome lub w menu rozszerzeń w Chrome. Po kliknięciu menu Lighthouse się rozwinie.

3. Kliknij Wygeneruj raport. Lighthouse przeprowadza audyty w przypadku aktualnie wybranej strony, a potem otwiera nową kartę z raportami wyników.

Udostępnianie i wyświetlanie raportów online

Aby wyświetlać i udostępniać raporty online, użyj Lighthouse Viewer.

Udostępnianie raportów w formacie JSON

Narzędzie Lighthouse Viewer potrzebuje danych wyjściowych w formacie JSON raportu Lighthouse. Wygeneruj dane wyjściowe w formacie JSON w ten sposób:

• W raporcie Lighthouse. Kliknij more_vert, aby otworzyć menu, a potem kliknij  Zapisz jako plik JSON.
• Wiersz poleceń. Uruchom: shell lighthouse --output json --output-path <path/for/output.json>

Aby wyświetlić dane z raportu:

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

Udostępnianie raportów jako plików Gist w GitHubie

Jeśli nie chcesz ręcznie przekazywać plików JSON, możesz też udostępniać raporty jako tajne fragmenty kodu na GitHubie. Jedną z zalet gistów jest bezpłatna kontrola wersji.

Aby wyeksportować raport jako gist:

1. Kliknij menu more_vert, a następnie kliknij  Otwórz w przeglądarce. Raport znajduje się na stronie https://googlechrome.github.io/lighthouse/viewer/.
2. W przeglądarce kliknij menu more_vert, a następnie kliknij  Zapisz jako Gist. Gdy to zrobisz po raz pierwszy, wyświetli się wyskakujące okienko z prośbą o pozwolenie na dostęp do podstawowych danych GitHub oraz odczyt i zapisywanie danych w gistach.

Aby wyeksportować raport jako gist z wersji Lighthouse na interfejsie wiersza poleceń, ręcznie utwórz gist i wklejaj w nim dane wyjściowe w formacie JSON. Nazwa pliku gist zawierającego dane wyjściowe w formacie JSON musi kończyć się na .lighthouse.report.json. Przykład wygenerowania danych wyjściowych w formacie JSON za pomocą narzędzia wiersza poleceń znajdziesz w sekcji Udostępnianie raportów w formacie JSON.

Aby wyświetlić raport zapisany jako gist:

• Dodaj ?gist=<ID> do adresu URL przeglądarki, gdzie <ID> to identyfikator gist. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Otwórz przeglądarkę i wklej do niej adres URL gist.

Rozszerzalność Lighthouse

Lighthouse ma na celu dostarczanie wskazówek, które są przydatne i możliwe do zastosowania przez wszystkich programistów. W tym celu dostępne są 2 funkcje, które umożliwiają dostosowanie Lighthouse do Twoich konkretnych potrzeb.

Pakiety sekcji

Do tworzenia stron internetowych deweloperzy używają wielu różnych technologii (systemów backendowych, systemów zarządzania treścią i ramek JavaScript). Zamiast ogólnych zaleceń Lighthouse podaje trafne i przydatne porady, które zależą od używanych narzędzi.

Pakiety pakietów umożliwiają Lighthouse wykrywanie platformy, na której została zbudowana witryna, oraz wyświetlanie konkretnych rekomendacji dotyczących pakietu. Te rekomendacje są definiowane i wybierane przez ekspertów z społeczności.

Aby udostępnić pakiet zbiorczy, zapoznaj się z wytycznymi.

Wtyczki Lighthouse

Wtyczki Lighthouse umożliwiają ekspertom w danej dziedzinie rozszerzanie funkcjonalności Lighthouse pod kątem konkretnych potrzeb ich społeczności. Możesz wykorzystać dane zebrane przez Lighthouse do tworzenia nowych audytów. W podstawie wtyczka Lighthouse to moduł węzła, który wdraża zestaw kontroli do wykonania przez Lighthouse i dodania do raportu jako nowa kategoria.

Więcej informacji o tworzeniu własnych wtyczek znajdziesz w podręczniku dotyczącym wtyczek w repozytorium GitHub Lighthouse.

Integracja z Lighthouse

Jeśli jesteś firmą lub osobą, która integruje Lighthouse w ramach oferowanych produktów lub usług, to świetnie! Chcemy, aby Lighthouse mogło być używane przez jak najwięcej osób.

Aby pokazać, że Lighthouse jest używany, jednocześnie chroniąc naszą markę, zapoznaj się z wskazówkami i zasobami marki dotyczącymi integrowania Lighthouse.

Współtworzenie Lighthouse

Lighthouse to oprogramowanie typu open source, a współpraca jest mile widziana. Sprawdź śledzik problemów repozytorium, aby znaleźć błędy, które możesz naprawić, lub audyty, które możesz utworzyć lub ulepszyć. W sekcji Problemy możesz omawiać dane o skuteczności, pomysły na nowe audyty i inne kwestie związane z Lighthouse.