Wprowadzenie do Lighthouse

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

Lighthouse możesz uruchomić w Chrome DevTools, 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żdy audyt zawiera wyjaśnienie, dlaczego jest on ważny i jak go rozwiązać.

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

Rozpocznij

Wybierz najbardziej odpowiedni dla siebie proces Lighthouse:

• W Narzędziach deweloperskich w Chrome Możesz kontrolować strony wymagające uwierzytelnienia i czytać raporty w łatwym w użyciu formacie bezpośrednio w przeglądarce.
• Z poziomu wiersza poleceń. Automatyzuj 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 w 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 audytu. Zostaw 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 programowo jako modułu Node znajdziesz w sekcji Używanie programowo.

Uruchamianie PageSpeed Insights

Aby uruchomić Lighthouse z 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 z Chrome Web Store.

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 na stronie, na której jest obecnie skupiona uwaga, a potem otwiera nową kartę z raportami wyników.

   

Udostępnianie i wyświetlanie raportów online

Za pomocą Lighthouse Viewer możesz wyświetlać i udostępniać raporty online.

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ń. Uruchomienie: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ępniaj raporty jako GitHub Gists

Jeśli nie chcesz ręcznie przekazywać plików JSON, możesz też udostępniać swoje raporty jako tajne pliki GitHub. Jedną z zalet tego narzędzia 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. Za pierwszym razem pojawi się wyskakujące okienko z prośbą o dostęp do podstawowych danych GitHub oraz możliwość odczytu i zapisu w Twoim interfejsie.

Aby wyeksportować raport jako gist z wersji Lighthouse dla interfejsu wiersza poleceń, ręcznie utwórz gist i wklejaj do niego 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 generowania danych wyjściowych 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.

Możliwość rozszerzania interfejsu Lighthouse

Celem narzędzia Lighthouse jest zapewnienie przydatnych i przydatnych wskazówek dla wszystkich programistów stron internetowych. 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. Zalecenia te są opracowywane i dobierane przez ekspertów ze społeczności.

Aby udostępnić pakiet gier, 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. Dane zbierane w Lighthouse możesz wykorzystać do tworzenia nowych audytów. Zasadniczo wtyczka Lighthouse to moduł węzłów, który implementuje zestaw testów, które mają być przeprowadzane przez Lighthouse i dodawane do raportu jako nowa kategoria.

Więcej informacji o tworzeniu własnej wtyczki znajdziesz w naszym Podręczniku do wtyczki w repozytorium Lighthouse na GitHubie.

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. Zapoznaj się z narzędziem Issue Tracker, aby znaleźć błędy, które możesz naprawić, i informacje o kontroli, 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.