Что такое Google Lighthouse?

Google Lighthouse — это инструмент для тестирования прогрессивных веб-приложений на удобство использования и производительность. Помимо веб-приложений, с помощью этого инструмента пользователи также могут оценивать обычные веб-сайты на предмет производительности и потенциала оптимизации. В отличие от многих других инструментов аналитики, новый инструмент Google позволяет адаптировать и фильтровать условия тестирования для наиболее реалистичной оценки фактических параметров работы сайта.

Прогрессивные веб-приложения (PWA) — это веб-сайты, которые выглядят, работают и управляются как мобильные приложения. Веб-приложения предлагают динамический контент и сейчас очень популярны. Примерами PWA являются такие сайты, как booking.com и Twitter, которые имеют удивительно много общих функций с нативными приложениями в своих браузерных версиях.

Чтобы PWA создавали у пользователей ощущение, что они работают с родными приложениями, они должны соответствовать определенным параметрам производительности и свойствам. Для измерения и оптимизации этих параметров производительности можно использовать тест Google Lighthouse. Lighthouse — это программное обеспечение с открытым исходным кодом, которое обычно используется в качестве расширения Chrome. Он очень прост в использовании: После установки расширения Lighthouse Chrome вы можете открыть любой сайт и протестировать его производительность, щелкнув по значку расширения. Оценка предоставляется в виде подробных таблиц измерений и графиков.

Google Lighthouse анализирует и сравнивает следующие области: PWA, производительность, доступность, лучшие практики и SEO. Вы можете получить доступ к подробной информации по каждой из анализируемых областей. После анализа инструмент предоставляет дополнительные советы по улучшению сайта.

Lighthouse очень гибкий и предлагает множество ценных аналитических и сравнительных данных, которые вы можете использовать для оптимизации вашего сайта. Благодаря изменяемой конфигурации вы можете составить карту любого возможного сценария для анализа. Инструмент подходит для новичков, опытных пользователей и профессионалов. Профессионалы и разработчики обычно не используют расширение Lighthouse Chrome. Вместо этого они используют командную строку, которая может быть настроена гораздо более детально. Однако для использования командной строки необходимо предварительно установить node.js на веб-сервер.

Lighthouse оценивает конкретный веб-сайт по пяти различным категориям.

Основная функция Google Lighthouse, доступная с момента выпуска, — анализ прогрессивных веб-приложений. Программа анализирует, работает ли веб-сайт так, как задумано. В деталях Lighthouse проверяет корректность отображения всех элементов и динамического контента, наличие случаев регистрации рабочих служб на сайте и доступность автономной функциональности. Рабочий сервис — это скрипт, который запускается для того, чтобы информация на сайте была доступна и в автономном режиме. Как правило, это делается путем установки прокси-интерфейса между сайтом и пользователями.

Когда речь идет о производительности, Lighthouse анализирует скорость работы сайта или веб-приложения и проверяет, правильно ли загруженные элементы отображаются пользователю. Аналитика состоит из следующих шести подкатегорий:

• Первая содержательная картина — показывает, сколько времени проходит до того момента, когда первое изображение или первый текст полностью отображаются на сайте.
• Первая содержательная картина — показывает, когда основное содержимое сайта становится полностью видимым.
• Индекс скорости — показывает, насколько быстро отображается содержимое сайта.
• Время до интерактивности — показывает, когда страница полностью загружена и готова к взаимодействию.
• First CPU Idle — указывает время, когда активность основного потока на сайте достаточно низкая, чтобы впервые обработать пользовательские записи.
• Расчетная задержка ввода — оценивает, сколько миллисекунд требуется странице или веб-приложению для реакции на ввод данных пользователем в течение пятисекундного окна с наибольшей загрузкой процессора при загрузке страницы. Если задержка составляет более 50 миллисекунд, пользователи часто воспринимают страницу или приложение как медленное.

Помимо анализа вышеперечисленных факторов, Lighthouse также предлагает улучшения. Предложения содержат широкий спектр вариантов оптимизации для сокращения времени загрузки. Например, сюда входит сжатие изображений, JavaScript или разбиение ресурсов, которые могут блокировать рендеринг сайта. Другие функции анализа производительности также включают рекомендации по следующим пунктам:

• Предоставлять файлы изображений в форматах с небольшими размерами и правильными размерами.
• Предоставляйте сжатые тексты и JavaScript.
• Включите оптимизацию кэша для улучшения отображения статического контента.
• Избегайте перенаправлений и загружайте наиболее важные запросы заранее, чтобы ускорить время отклика сервера.
• По возможности предоставляйте анимированный контент в компактных современных видеоформатах.
• Минимизируйте объем данных на сайте.
• Добавляйте разметку и теги соответствующим образом, чтобы улучшить результаты измерений и отслеживания.

Google Lighthouse также оценивает, насколько веб-сайт или прогрессивное веб-приложение подходит для людей с ограниченными физическими возможностями. В частности, Accessibility проверяет, достаточно ли описаны важные элементы, такие как кнопки или ссылки, или же изображения и графика имеют функцию озвучивания, которая выводит содержимое на слух для слепых.

В Best Practices Lighthouse в первую очередь анализирует аспекты безопасности веб-сайта или PWA. В этом тесте инструмент оценивает, используются ли технологии шифрования, такие как TLS, ресурсы сайта получены из безопасных источников, а библиотеки JavaScript считаются безопасными. Lighthouse также анализирует безопасность подключенных баз данных и указывает на небезопасные команды и используемые устаревшие API.

Google Lighthouse проводит различные тесты для анализа того, насколько хорошо поисковые системы могут обрабатывать приложение или веб-сайт. Однако эти тесты в Lighthouse очень ограничены. Lighthouse выводит результаты анализа по шкале от 0 до 100 баллов. Если сайт или приложение не набирает полных баллов, необходима оптимизация, и оператору сайта придется действовать.

Lighthouse фокусируется на поисковой оптимизации для мобильных устройств. Функция анализирует и тестирует сайт или прогрессивное веб-приложение, чтобы определить, является ли он дружественным к мобильным устройствам и оптимизированы ли теги и метаданные.

Пользователи уже несколько лет могут напрямую установить расширение Google Lighthouse Chrome. В целом, Lighthouse можно использовать по-разному. Однако все они имеют одну общую черту: на компьютере, где будет использоваться Lighthouse, должен быть установлен браузер Google Chrome.

Самый простой способ использования Lighthouse — через Google DevTools. Lighthouse доступен на вкладке «Аудит». Вы также можете использовать вышеупомянутый плагин Chrome. Преимущество варианта Lighthouse Chrome в том, что всегда доступна последняя версия инструмента. Пользователи также могут работать с Lighthouse через командную строку. Преимущество этого способа заключается в том, что вы также можете использовать инструменты Build. Для этого можно использовать модуль Node.

Google Lighthouse предоставляет ключевые показатели эффективности пользовательского опыта, такие как «Первая закраска содержимого» или «Первая задержка ввода», и делает это очень простым способом. Чтобы как можно точнее проанализировать сценарии, инструмент имитирует реальные условия, особенно на мобильных устройствах, адаптируя производительность процессора и другие факторы, с которыми сталкиваются пользователи в повседневной жизни.

После анализа Lighthouse выставляет оценки от 0 до 100, при этом 100 является наилучшим результатом. Вы можете использовать эти баллы в качестве руководства, которое поможет вам устранить потенциальные ошибки и оптимизировать производительность. При анализе скорости загрузки сайта он разбивает оценки на три категории. Оценки от 0 до 49 (красный цвет) относятся к медленной, от 50 до 89 (оранжевый цвет) — к средней и от 90 до 100 (зеленый цвет) — к быстрой.

На основании этих результатов вы можете внести необходимые изменения и оптимизацию, чтобы ускорить время загрузки сайта. Результаты анализа выводятся для всех измеряемых событий, включая производительность для PWA, доступность, лучшие практики и SEO.

Тесты Lighthouse предоставляют операторам веб-сайтов или прогрессивных веб-приложений большое количество информации и аналитических данных, которые позволяют им оптимизировать свои предложения. Цветовая шкала и рекомендуемые советы позволяют даже новичкам сделать первые шаги к оптимизации своих сайтов самостоятельно.