Использование Google Lighthouse для аудита веб-приложений

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

Что такое Google Lighthouse?

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

Как использовать Google Lighthouse

Самый простой способ начать работу — установить расширение Google Lighthouse для Chrome.

Далее перейдите на определенную страницу в вашем браузере и нажмите кнопку «Generate Report» в расширении Lighthouse.

Lighthouse расскажет вам, насколько ваш веб-сайт соответствует стандартам Google. В отчете будут объяснены сильные и слабые стороны вашего сайта, а также предложены способы повысить его оценку.

Кроме того, вы можете запустить Lighthouse с помощью Node CLI. Для этого требуется Node 6 или новее, и его можно установить с помощью следующей команды:

npm install -g lighthouse

После установки запустите Lighthouse с помощью следующей команды и замените yourwebsite.com реальным веб-сайтом, который вы хотите протестировать.

lighthouse https://yourwebsite.com/

Google Lighthouse: краткий обзор

Аудит веб-страницы с Lighthouse очень прост, если вы знакомы с Chrome DevTools. Перейдите на страницу с Chrome, откройте DevTools (Ctrl + Shift + I или ⌥ + ⌘ + i в зависимости от вашей системы), а затем перейдите в раздел Audits (Аудиты).

Перед запуском аудита с помощью кнопки «Run audit», вы можете настроить уровень аудита в соответствии с вашими интересами (Производительность (Performance), SEO, Доступность (Accessibility) и т. д.).

После запуска аудита вы сможете увидеть, как страница загружается и перезагружается, и через некоторое время в новом окне отобразится ваш аудиторский отчет.

Когда Lighthouse завершит оценку вашей страницы, вы получите аудиторский отчет, который начинается с нескольких баллов (столько баллов, сколько категорий выбрано при настройке аудита).

Показатель эффективности (Performance Score) рассчитывается на основе результатов теста скорости, сравнивая скорость вашего сайта с другими. Получение 100 баллов означает, что протестированная веб-страница работает быстрее, чем 98% или более веб-страниц. Оценка 50 означает, что страница работает быстрее, чем 75% Интернета (источник).

Когда вместо оценки отображается знак вопроса, это значит что некоторые запущенные тесты не были проведены должным образом и помечены как «Ошибка!».

После scores overview вы найдете результаты по 6 метрикам:

First ContentFul Paint: измеряет время за которое, первый текст/ изображение отобразилось на экране.
First Meaningful Paint: измеряет время за которое, отобразился основной контент страницы.
Speed Index: показывает, насколько быстро содержимое страницы отображается визуально.
First CPU Idle: измеряет время, когда основной поток страницы стал ожидать обработку ввода в первый раз.
Time to Interactive: показывает время, когда страница стала полностью интерактивной.
Estimated Input Latency: является оценкой того, как долго ваше приложение реагирует на ввод пользователя в миллисекундах в течение самого загруженного 5-секундного окна загрузки страницы. Если ваша задержка превышает 50 мс, пользователи могут воспринимать ваше приложение как тормозящее.

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

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

Что делает Lighthouse отличным инструментом аудита, так это количество автоматических контролей: около ста. Lighthouse также выделяет некоторые «Дополнительные элементы для проверки вручную» (Additional items to manually check), которые будут полезным напоминаниями (например, в категории специальных возможностей «Страница имеет логический порядок вкладок» (The page has a logical tab order)).

Обратите внимание, что некоторые рекомендации дублируются в нескольких категориях, например, элемент управления, относящийся к смешанному контенту, присутствует в категории «Progressive Web App», а также в «Best Practices».

С большой властью приходит большая ответственность

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

• Интернет-соединение: вы уверены, что у вас нет фонового приложения, потребляющего некоторую интернет трафик? Если вы предоставляете ваш интернет кому еще, уверены ли вы, что никто не будет влияет на ваши тесты? Предлагает ли ваш интернет-провайдер стабильное соединение?
• CPU: вы уверены, что использование вашего процессора другими программами не влияет на ваш текущий тест?
• Расширения Chrome (Chrome extensions): как отмечает Aymen Loukil, они могут сильно повлиять на ваши результаты. Будьте особенно осторожны с расширениями, связанными с блокировкой рекламы!
• Пользовательские настройки: вы уверены, что ваш тест Lighouse начинается с чистого состояния? Как насчет ваших файлов cookie, состояния вашего локального хранилища, открытых сокетов (вы можете проверить на chrome://net-internals/#sockets) и т. д.
• Версия Lighthouse: возможно, Lighthouse обновлялся со времени вашего последнего отчета. Вы проверили журнал изменений? Помните, что расширение автоматически обновляется по умолчанию, и версия, доступная через DevTools, будет обновляться при обновлении Chrome.

На первые два пункта может влиять Lighthouse в режиме «Simulate throttling for performance audits (faster)» (Имитация регулирования для аудита производительности ). Вместо того, чтобы полагаться на Chrome DevTools для формирования трафика, Lighthouse теперь использует новый механизм внутреннего аудита: Lantern. Он направлен на снижение зависимости показателей производительности без потери излишней точности. Подход очень интересный. Для более подробной информации доступны общественный обзор, а также подробный анализ. Посмотрим в будущем, насколько этот способ надежный!

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

Так для проверки влияние на производительности тестов локального окружения, мы провели небольшой эксперимент.

Мы провели 3 теста с помощью Lighthouse на Apache.org из нашего офиса (оптоволоконная связь — среднее значение ping для Apache.org составляет 40 мс). Вот средние значения результатов:

PERFORMANCE SCORE	FIRST CONTENTFUL PAINT	SPEED INDEX	TIME TO INTERACTIVE
85	1690	1730	5380

Те же тесты, но при интернет соединение с добавлением задержки в 500 мс (с помощью команды tc Unix):

PERFORMANCE SCORE	FIRST CONTENTFUL PAINT	SPEED INDEX	TIME TO INTERACTIVE
67	2780	3880	7320

Мы получаем изменение Performance Score на 21%, в то время как Speed Index более чем удвоился во втором тесте. Мы получили эти результаты, используя режим Lantern (эмулированное регулирование Lighthouse), который на самом деле направлен на уменьшение изменчивости локальной сети.

Надеемся, что ваша задержка в сети не сильно будет влиять на ваши тесты. Но имейте в виду, что задержка является лишь одним из множества переменных параметров в вашей локальной среде!

При использовании Lighthouse, если вы хотите сравнить несколько отчетов, помните о нестабильности вашего контекста и связанной с этим предвзятости!

Примечание: Если вы используете Lighthouse с регулируемым соединение (throttled connection), имейте в виду, что вы используете возможность формирования трафика Chrome DevTools. Задержка будет вводится на уровне HTTP, как результат Chrome DevTools не добавляет задержки во время TCP-соединения и SSL-handshakes.