- Проведение аудита
- категории
- Спектакль
- Прогрессивное веб-приложение
- доступность
- Лучшие практики
- SEO
- Lighthouse CLI и другие инструменты
- Интерфейс командной строки
- Маяк как услуга
- web.dev
- Заключение
Знаете ли вы, что Chrome может проводить всесторонний аудит веб-страницы и анализировать множество различных категорий, таких как производительность, SEO, лучшие практики, специальные возможности, соответствие требованиям прогрессивного веб-приложения и многое другое?
Проведение аудита
В версии 60 Chrome представил отличное новое дополнение к инструментам разработчика. Это комплексная функция аудита для веб-страниц, работающая на инструменте под названием Lighthouse. Это инструмент с открытым исходным кодом, доступный на GitHub , Чтобы запустить аудит, вам нужно открыть Chrome Dev Tools (F12) и выбрать вкладку Аудит:
Перед запуском аудита вы можете выбрать различные параметры конфигурации. Прежде всего, вы можете выбрать категории, в которых вы хотите, чтобы целевой сайт проверялся. Отключение категории ускоряет анализ, но давайте пока оставим все категории. Кроме того, вы можете выбрать, будет ли Lighthouse тестировать ваш сайт в качестве мобильного или настольного агента. Наконец, вы можете сказать Chrome эмулировать устройство с более медленным процессором и более медленным сетевым подключением, чтобы вы могли проверить, как ваш сайт работает на мобильных устройствах более низкого уровня с худшей связью. Это стоит проверить, поскольку результаты могут существенно отличаться от результатов, полученных на ультрасовременном ПК с помощью сверхбыстрого соединения.
Теперь давайте нажмем Запустить аудит. Chrome анализирует вашу страницу на предмет возможных проблем в выбранных категориях. После завершения аудита вы получаете оценку в каждой из категорий до 100 баллов:
Обратите внимание, что установленные расширения Chrome могут оказать негативное влияние на результаты, поэтому может быть лучше запустить аудит в режиме инкогнито, где эти расширения отключены.
категории
В каждой из категорий оценка рассчитывается на основе проверок, которые не прошли и которые прошли. Вы можете точно увидеть, что было успешно, что нет, и можете прочитать подробности о каждой проверке. Кроме того, некоторые категории содержат список дополнительных ручных проверок - этапов, которые не могут быть проверены автоматически, но по-прежнему важны и заслуживают тестирования.
Спектакль
Первая категория - это производительность. Это, без сомнения, важная область, на которой нужно сосредоточиться. Тем более, что многие пользователи, как правило, имеют некачественное сетевое соединение или получают доступ к вашему сайту с мобильных устройств. Lighthouse может принять это во внимание и может симулировать медленное сетевое соединение и медленный процессор. Вы можете быть удивлены тем, насколько плохо работает ваш сайт в таких условиях. Это можно настроить перед запуском аудита.
В дополнение к рейтингу 0-100 баллов, Lighthouse измеряет различные метрики производительности, которые очень полезны при определении производительности с точки зрения пользователя. Не так важно, сколько времени занимает страница, чтобы полностью загрузить все мелкие детали. Что может оказать существенное влияние на пользовательский опыт, так это когда первый значимый контент отображается на вашей странице и когда он начинает быть интерактивным.
Под метриками вы можете увидеть представление Диафильм . Так выглядела ваша страница в процессе загрузки. Полезно проверить, отображает ли ваша страница постепенно какое-либо содержимое, а не остается белым в течение большей части времени, поскольку пользователи воспринимают такие страницы как более быстрые и с меньшей вероятностью уходят, когда страница все еще загружается.
Но что действительно полезно, так это то, что этот инструмент рекомендует вам разные способы повышения производительности в вашем случае с реальными данными - вот сколько времени вы можете реально сэкономить, решая различные проблемы.
Прогрессивное веб-приложение
Прогрессивные веб-приложения - это набор принципов и рекомендаций Google. Это должно привести к беспрепятственному взаимодействию с пользователем, похожему на собственное мобильное приложение Он использует сервисных работников, поэтому приложение может работать в сетях низкого качества или даже в автономном режиме. И когда он-лайн, у него всегда есть актуальные данные. Он должен загружаться только по протоколу HTTPS, использовать push-уведомления и обеспечивать отличное время загрузки и производительность. Lighthouse делает то, что тестирует ваше приложение на Контрольный список PWA ,
Чтобы узнать больше, попробуйте - Ваш первый PWA ,
доступность
В этом разделе описывается доступность, это означает, что ваше приложение может быть использовано как можно большим числом пользователей. Как правило, это означает, что пользователи с какими-либо нарушениями или инвалидностью имеют как можно более плавный опыт. Это включает, но не ограничивается, предоставлением достаточного количества метаданных для программ чтения с экрана, таких как атрибуты ARIA. Структура вашего контента также должна учитывать это, и вы должны убедиться, что используете правильные семантические элементы (например, сильный против b ). Ваши изображения должны иметь надлежащие атрибуты alt, поля формы должны иметь прикрепленные элементы меток и так далее. Это руководство по доступности резюмирует это красиво. Что приятно, так это то, что Lighthouse может на самом деле анализировать вашу страницу на предмет цветового контраста, то есть он гарантирует, что ваш текст будет легко читаться на его фоне.
Лучшие практики
Эта категория содержит различные элементы, такие как использование устаревших конструкций, HTTP / 2, HTTPS, ведение журнала консоли, обработка полей пароля и многое другое. Одним из пунктов, который я нашел действительно интересным и важным, является обнаружение библиотек Javascript с известные уязвимости безопасности , Это основано на интеграции со сторонним инструментом под названием Snyk ,
SEO
Эта категория фокусируется на поисковой оптимизации. В основном это касается того, что ваше приложение содержит достаточно метаданных для поисковых систем, таких как метатеги заголовков HTML, заголовок, что страница не заблокирована для индексации, ссылки имеют описательный текст и так далее.
Lighthouse CLI и другие инструменты
Расширение Google Chrome
Первоначально, до того, как Lighthouse был интегрирован в Chrome Dev Tools, он был доступен как отдельное расширение Chrome. И это все еще есть. Это может быть удобно, если вы застряли в старой версии Chrome. Или, если вы хотите попробовать новейшие функции Lighthouse. Это связано с тем, что стабильный Chrome не включает в себя последнюю и лучшую версию Lighthouse, а расширение включает.
Интерфейс командной строки
Интеграция Lighthouse непосредственно в Chrome очень удобна, но имеет свои ограничения. Вы, скорее всего, проведете аудит несколько раз, когда он все еще новый и блестящий или во время первоначальной разработки. Или когда вы помните, чтобы сделать это. Но существует постоянный риск того, что новые изменения повлияют на производительность или нарушат некоторые передовые практики. Гораздо лучше интегрировать аудит как часть вашего процесса сборки, чтобы автоматизировать весь процесс аудита.
К счастью, маяк доступен как Утилита командной строки распространяется как пакет NPM. Это также удобно для случаев, когда вам нужна более детальная конфигурация, поскольку она предлагает большую настройку, чем Dev Tools в настоящее время. Чтобы сделать вещи еще проще для вашей сборки, он предлагает Веб-плагин ,
Маяк как услуга
Если вы хотите, чтобы интеграция с Lighthouse была еще проще, есть инструмент под названием Treo , В основном это «Маяк как услуга». Он предлагает приятную интеграцию с GitHub, а также средство для ломки сборки в случае, если ожидания не оправдаются.
web.dev
Web.dev это новый сайт, запущенный Google. Это позволяет вам тестировать ваш сайт прямо из браузера (не используя Developer Tools). Это может иметь несколько преимуществ по сравнению с использованием встроенного маяка. Прежде всего, он использует последнюю и лучшую версию, в отличие от Dev Tools (в настоящее время 4.0.0 против 3.2.0). Затем он больше не зависит от процессора и сети вашего текущего компьютера, так как он использует серверы Google. Это может быть полезно, если у вас медленная или нестабильная сеть. Если вы войдете в систему, вы сможете увидеть графики того, как ваш счет меняется со временем.
Но что хорошо в web.dev, так это то, что в дополнение к измерениям с Lighthouse, здесь есть много учебников и статей сгруппированы в несколько разделов. Они напрямую связаны с проблемами, которые контролирует Lighthouse, и включают безопасность, SEO, доступность, производительность и многое другое. Таким образом, вы можете узнать о современной веб-разработке и о том, как улучшить оценку вашей страницы в Lighthouse.
Заключение
Lighthouse предлагает хороший способ протестировать ваше веб-приложение на предмет проблем с производительностью, соответствия требованиям PWA, SEO, доступности и других лучших практик. Несмотря на то, что инструмент хорошо интегрирован с Chrome Developer Tools, вы можете рассмотреть возможность его интеграции с процессом сборки, чтобы постоянно проверять возможные проблемы.
