Полезный инструмент для улучшения качества ваших веб-страниц.

При открытии Chrome DevTools вы увидите эту выделенную вкладку на изображении выше. Что это? Это Lighthouse, автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц.

По умолчанию он измеряет производительность, прогрессивное веб-приложение, передовые практики, доступность и оптимизацию поисковых систем (SEO), хотя вы можете адаптировать их к своим потребностям, установив и сняв флажки в элементах в категориях.

Для наших сценариев использования мы выбрали тип устройства Desktop.

Также есть кнопка «Очистить хранилище» в верхнем левом углу. Он был хорошо спрятан, но мы нашли кнопку настройки, чтобы отобразить его в правом верхнем углу. Это не было отмечено. В противном случае он завершает тестирование страниц входа с информацией о пользователе, которая должна быть очищена.

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

Измерьте веб-сайт

Давайте измерим сайт Lighthouse с помощью Lighthouse:

После нажатия кнопки «Создать отчет» для выбранной веб-страницы создается следующая карточка отчета:

Баллы окрашены в соответствии с этими диапазонами:

  • 0 - 49 (красный): плохо
  • 50 - 89 (оранжевый): требует улучшения.
  • 90 - 100 (зеленый): хорошо

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

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

Оценка производительности

Выше приведена таблица показателей производительности, состоящая из шести показателей:

  • First Contentful Paint: он отмечает время, когда нарисован первый текст или изображение.
  • Индекс скорости: показывает, насколько быстро содержимое страницы заметно заполняется.
  • Самая большая Contentful Paint: отмечает время, в которое нарисован самый большой текст или изображение.
  • Время до интерактивности: это время, необходимое для того, чтобы страница стала полностью интерактивной.
  • Общее время блокировки: это сумма всех периодов времени между первой отрисовкой содержимого и временем до взаимодействия.
  • Накопительный сдвиг макета: измеряет перемещение видимых элементов в области просмотра.

В разделе «Метрики» есть несколько снимков, показывающих, как загружается эта веб-страница. Нажатие кнопки View Trace приведет к переходу на вкладку Performance, где отслеживаются детали загрузки:

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

«Возможности» в сводке - это предложения, которые помогут ускорить загрузку страницы. Одно из предложений касается правильного размера изображений. Открываем этот элемент, и мы видим пять самых больших изображений:

Щелкните ссылку на самое большое изображение. Было неожиданно обнаружить рекламу мужской верхней одежды.

Как ни странно, при повторном просмотре отчета мы получаем оценку производительности 100. При повторном запуске снова получаем оценку около 82.

Что случилось?

Есть много фактов, влияющих на счет. Возможно, это вызвано A / B-тестами, изменениями в обслуживаемой рекламе, изменениями маршрутизации интернет-трафика и т. Д.

Оценка доступности

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

Это список прошедших аудитов:

Другой список неприменимых предметов:

Вместе они соответствуют всем критериям доступности, используемым Lighthouse. Он фиксирует большинство измерений, упомянутых в 10 шагов к созданию веб-приложений с доступностью (a11y).

Оценка лучших практик

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

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

Пройденные аудиты показывают, что еще проверено на соответствие лучшим практикам:

  • Использует HTTPS
  • Избегает запроса разрешения геолокации при загрузке страницы
  • Избегает запроса разрешения на уведомление при загрузке страницы
  • Избегает интерфейсных библиотек JavaScript с известными уязвимостями безопасности
  • Позволяет пользователям вставлять в поля пароля
  • Отображает изображения с правильным соотношением сторон
  • Отображает изображения подходящего размера
  • Страница имеет тип документа HTML
  • Правильно определяет кодировку
  • Избегает кеширования приложений
  • Обнаруженные библиотеки JavaScript
  • Избегает устаревших API

Оценка SEO

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

Lighthouse использует следующие критерии:

  • Имеет тег <meta name=”viewport”> с шириной или начальным масштабом (для мобильных устройств)
  • В документе есть элемент <title>
  • Документ имеет метаописание
  • Страница имеет успешный код статуса HTTP
  • Ссылки имеют описательный текст
  • Страница не заблокирована для индексации
  • robots.txt, файл сообщает поисковым системам, какие страницы можно сканировать, является допустимым
  • Элементы изображения имеют [alt] атрибуты
  • Документ имеет действующий hreflang
  • Документ имеет действительный rel=canonical, который сообщает поисковым системам, что он совпадает с каноническим URL-адресом.
  • В документе отсутствуют плагины
  • В документе используются удобочитаемые размеры шрифта.
  • Коснитесь мишеней соответствующего размера

Оценка PWA

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

Lighthouse тестирует применимые критерии PWA:

  • Быстро запускается и остается быстрым
  • Устанавливается
  • Работает в любом браузере
  • Отзывчивый к любому размеру экрана
  • Предоставляет настраиваемую автономную страницу
  • Полностью доступен
  • Можно найти с помощью поиска
  • Работает с любым типом ввода, таким как мышь, клавиатура, стилус или сенсорный ввод
  • Предоставляет контекст для запросов разрешений
  • Следует передовым практикам для здорового кода

Заключение

Lighthouse - полезный инструмент для измерения и оптимизации наших продуктов. Он находится на расстоянии одного клика с Chrome DevTools.

Он также доступен как инструмент командной строки или как модуль узла:

npm install -g lighthouse
lighthouse --help 
or npm install --save-dev lighthouse

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

Готовы попробовать?

Спасибо за прочтение. Я надеюсь, что это было полезно. Вы можете увидеть другие мои публикации в Medium здесь.