Создание лучшего Интернета с помощью Lighthouse

Начиная с Google I/O, мы усердно работали над тем, чтобы сделать Lighthouse отличным помощником для создания отличных прогрессивных веб-приложений :

Сегодня мы рады объявить о выпуске Lighthouse 1.3. Lighthouse 1.3 включает в себя множество крупных новых функций, проверок и обычных исправлений ошибок. Вы можете установить его из npm ( npm i -g lighthouse ) или загрузить расширение из Интернет-магазина Chrome.

Так что нового?

Новый внешний вид

Если вы использовали более раннюю версию Lighthouse, возможно, вы заметили, что логотип новый! Отчет в формате HTML и расширение Chrome также подверглись полному обновлению: теперь оценки стали более четкими, а результаты аудита более согласованными. Мы также добавили полезную информацию об отладке, если вы не прошли тест, и включили указатели на рекомендуемые обходные пути.

Отчет маяка

Новые лучшие практики

На сегодняшний день Lighthouse сосредоточился на показателях производительности и качестве PWA. Однако главная цель проекта — предоставить руководство для всех веб-разработок. Сюда входят рекомендации по общим рекомендациям, советы по производительности и доступности, а также комплексная помощь по созданию качественных приложений.

«Do Better Web» — это попытка проекта Lighthouse помочь разработчикам добиться большего успеха в Интернете. Другими словами, помогите им модернизировать и оптимизировать их веб-приложения. Зачастую веб-разработчики используют устаревшие методы, антишаблоны или сталкиваются с известными проблемами производительности, даже не осознавая этого. Например, широко известно , что анимацию на основе JS следует создавать с помощью requestAnimationFrame() вместо setInterval() . Однако, если разработчик не знает о новом API, его веб-приложение напрасно пострадает.

Lighthouse 1.3 включает в себя более 20 новых рекомендаций, начиная от советов по модернизации функций CSS и JavaScript и заканчивая рекомендациями по производительности, такими как: «Уменьшите количество ресурсов, блокирующих рендеринг», «Используйте пассивные прослушиватели событий для повышения производительности прокрутки».

Используйте лучшие веб-практики.

Со временем мы продолжим добавлять новые рекомендации. Если у вас есть предложения по лучшим практикам или вы хотите помочь нам провести аудит, сообщите о проблеме на GitHub.

Средство просмотра отчетов

И последнее, но не менее важное: мы рады объявить о новом веб-просмотрщике результатов Lighthouse. Посетите googlechrome.github.io/lighthouse/viewer , перетащите выходные данные запуска Lighthouse (или щелкните, чтобы загрузить файл) и вуаля. HTML-отчет «Инста» Маяк.

Просмотрщик отчетов.
Средство просмотра отчетов

Lighthouse Viewer также позволяет вам делиться отчетами с другими. Нажав на значок «Поделиться», вы войдете в GitHub. Мы храним отчеты как секретные сведения в вашей учетной записи, чтобы вы могли легко удалить общий отчет или обновить его позже. Использование GitHub для хранения данных также означает, что вы получаете контроль версий бесплатно!

Архитектура просмотра.
Архитектура просмотра

Существующие отчеты можно перезагрузить с помощью Lighthouse Viewer, добавив ?gist=GIST_ID к URL-адресу:

Архитектура просмотра 2.
Архитектура просмотра 2

Все подробности о последних версиях Lighthouse см. в полных примечаниях к выпуску на GitHub. Как всегда, свяжитесь с нами, чтобы сообщить об ошибках , отправить запросы на функции или обсудить идеи о том, что вы хотели бы видеть дальше.