Tworzenie lepszej strony przy użyciu Lighthouse

Od Google I/O ciężko pracujemy, by aplikacja Lighthouse była świetnym towarzyszem do tworzenia świetnych progresywnych aplikacji internetowych:

z przyjemnością ogłaszamy wydanie wersji 1.3 Lighthouse. Lighthouse 1.3 obejmuje kilka nowych, ważnych 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.

Co nowego?

Nowy wygląd i styl

Użytkownicy, którzy używali starszej wersji Lighthouse, zauważyli, że logo jest nowe. Zupełnie odświeżyliśmy też raport HTML i rozszerzenie do Chrome, zapewniając przejrzystą prezentację punktacji i spójność wyników audytu. Dodaliśmy też informacje o debugowaniu, które mogą pomóc w przypadku niepowodzenia testu, oraz wskazówki, jak obejść ten problem.

Raport Lighthouse

Nowe sprawdzone metody

Do tej pory firma Lighthouse skupiła się na danych dotyczących wydajności i jakości aplikacji PWA. Naczelnym celem projektu jest jednak udostępnienie przewodnika po tworzeniu stron internetowych. Znajdziesz w nim ogólne sprawdzone metody, wskazówki dotyczące wydajności i ułatwień dostępu, a także kompleksową pomoc w tworzeniu wysokiej jakości aplikacji.

„Do Better Web” (Do Better Web) to przedsięwzięcie w ramach projektu Lighthouse, które ma pomóc programistom w znajdowaniu się w internecie. Innymi słowy, pomóż im w modernizacji i optymalizacji aplikacji internetowych. Twórcy stron internetowych często nieświadomie stosują przestarzałe metody i antywzorce lub napotykają znane pułapki związane z wydajnością. Powszechnie wiadomo na przykład, że do tworzenia animacji opartych na języku JavaScript należy używać języka requestAnimationFrame(), a nie setInterval(). Jeśli jednak deweloper nie wie o nowszym interfejsie API, niepotrzebnie ucierpi na tym jego aplikacja internetowa.

Lighthouse w wersji 1.3 zawiera ponad 20 sugestii dotyczących nowych sprawdzonych metod, od wskazówek dotyczących modernizacji funkcji CSS i JavaScript po rekomendacje dotyczące wydajności, takie jak: „Zmniejsz liczbę zasobów blokujących renderowanie”, „Używaj pasywnych detektorów zdarzeń, aby poprawić szybkość przewijania”.

Poznaj sprawdzone metody tworzenia witryn.

Z czasem będziemy dodawać kolejne rekomendacje. Jeśli masz propozycje sprawdzonych metod lub chcesz pomóc nam w przeprowadzeniu kontroli, zgłoś problem na GitHubie.

Przeglądarka raportów

Z przyjemnością informujemy, że wprowadziliśmy nową przeglądarkę internetową z wynikami z Lighthouse. Wejdź na stronę googlechrome.github.io/lighthouse/viewer, przeciągnij i upuść dane wyjściowe uruchomionego działania Lighthouse (lub kliknij, aby przesłać plik). Gotowe. Raportu „Insta” HTML Lighthouse.

Przeglądarka raportów.
Przeglądający raporty

Lighthouse umożliwia też udostępnianie raportów innym osobom. Kliknięcie ikony udostępniania spowoduje zalogowanie się na GitHubie. Zgłoszenia chowamy na Twoim koncie jako tajny klucz, aby można było łatwo usunąć udostępniony raport lub później go zaktualizować. Przechowywanie danych w GitHubie zapewnia też bezpłatną kontrolę wersji.

Architektura gogli.
Architektura przeglądającego

Istniejące raporty można ponownie załadować przez narzędzie Lighthouse. Aby to zrobić, dodaj do adresu URL ciąg ?gist=GIST_ID:

Architektura widza 2.
Architektura przeglądającego 2

Wszystkie szczegóły dotyczące najnowszej wersji Lighthouse znajdziesz w pełnych informacjach o wersji w GitHubie. Jak zawsze skontaktuj się z nami, aby zgłosić błędy, przesłać prośbę o dodanie funkcji lub pomyśleć o tym, co chcesz zobaczyć w następnej kolejności.