Tworzenie lepszej strony przy użyciu Lighthouse

Od czasu konferencji Google I/O ciężko pracujemy nad Lighthouse, aby uczynić z niego świetnego towarzysza w tworzeniu świetnych progresywnych aplikacji internetowych:

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

Raport Lighthouse

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

Stosuj sprawdzone metody dotyczące stron internetowych.

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.

Osoba wyświetlająca raport.
Przeglądanie raportów

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.

Architektura przeglądarki
Architektura odtwarzacza

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

Architektura przeglądarki 2.
Architektura wyświetlacza 2

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.