Od czasu konferencji Google I/O ciężko pracujemy nad Lighthouse, aby uczynić z niego świetnego towarzysza w tworzeniu świetnych progresywnych aplikacji internetowych:
- przywitało 50 nowych współtwórców projektu.
- Wysłano 15 wersji
- Dodano około 20 dodatkowych testów kontroli (łącznie około 50 testów)
Z przyjemnością ogłaszamy dziś wydanie Lighthouse 1.3. Lighthouse 1.3 zawiera wiele nowych funkcji, audytów i zwykłych poprawek błędów. Możesz zainstalować go z npm (npm i -g lighthouse
) lub pobrać rozszerzenie ze sklepu Chrome Web Store.
Co nowego?
Nowy wygląd i sposób działania
Jeśli korzystasz z poprzedniej wersji Lighthouse, prawdopodobnie zauważysz, że logo jest nowe. Raport HTML i rozszerzenie do Chrome zostały też całkowicie odświeżone, dzięki czemu ocena jest lepiej przedstawiona, a wyniki audytu są bardziej spójne. Dodaliśmy też przydatne informacje o debugowaniu, które wyświetlają się po niepomyślnym wykonaniu testu, oraz wskazówki dotyczące zalecanych obejść.

Nowe sprawdzone metody
Do tej pory Lighthouse skupiał się na danych o wydajności i jakości aplikacji internetowych. Jednak głównym celem projektu jest stworzenie przewodnika po całym procesie tworzenia stron internetowych. Obejmuje to wskazówki dotyczące ogólnych sprawdzonych metod, wydajności oraz ułatwień dostępu, a także kompleksową pomoc w tworzeniu aplikacji o wysokiej jakości.
„Do Better Web” to inicjatywa w ramach projektu Lighthouse, która ma pomóc deweloperom w poprawieniu jakości ich witryn. Innymi słowy: pomóż im zmodernizować i zoptymalizować aplikacje internetowe. Często deweloperzy stron internetowych używają przestarzałych metod, nieprawidłowych wzorców lub nieświadomie popełniają znane błędy dotyczące wydajności. Na przykład powszechnie wiadomo, że animacje oparte na JS należy tworzyć za pomocą requestAnimationFrame()
, a nie setInterval()
. Jeśli jednak deweloper nie zna nowszego interfejsu API, jego aplikacja internetowa może nie działać prawidłowo.
Lighthouse 1.3 zawiera ponad 20 sugerowanych nowych sprawdzonych metod, od wskazówek dotyczących unowocześniania funkcji CSS i JavaScriptu po zalecenia dotyczące wydajności, takie jak: „Zmniejsz liczbę komponentów blokujących renderowanie” czy „Używaj biernych odbiorników zdarzeń, aby poprawić wydajność podczas przewijania”.

Z czasem będziemy dodawać kolejne rekomendacje. Jeśli masz sugestie dotyczące sprawdzonych metod lub chcesz pomóc nam w sporządzeniu audytu, zgłoś problem na GitHubie.
Przeglądarka raportów
Na koniec chcielibyśmy ogłosić, że udostępniliśmy nowy widok internetowy wyników Lighthouse. Otwórz stronę googlechrome.github.io/lighthouse/viewer, przeciągnij i upuść dane wyjściowe Lighthouse (lub kliknij, aby przesłać plik), a potem gotowe. „Insta” Raport HTML Lighthouse.

Narzędzie Lighthouse Viewer umożliwia też udostępnianie raportów innym osobom. Kliknięcie ikony udostępniania spowoduje zalogowanie się w GitHub. Raporty są przechowywane jako tajne gisty na Twoim koncie, dzięki czemu możesz łatwo usunąć udostępniony raport lub zaktualizować go w późniejszym terminie. Korzystanie z GitHuba do przechowywania danych oznacza też, że masz bezpłatną kontrolę wersji.

Istniejące raporty można ponownie załadować w Lighthouse Viewer, dodając ?gist=GIST_ID
do adresu URL:

Wszystkie szczegóły dotyczące najnowszej wersji Lighthouse znajdziesz w kompletnych informacjach o wersji na GitHubie. Jak zawsze skontaktuj się z nami, aby zgłaszać błędy, przesyłać prośby o dodanie funkcji lub przedstawiać sugestie dotyczące tego, co chcielibyście zobaczyć w przyszłości.