Как использовать google chrome lighthouse

Обновлено: 06.07.2024

Что такое Google Lighthouse?

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

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

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

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

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».

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

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

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

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

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

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, если вы хотите сравнить несколько отчетов, помните о нестабильности вашего контекста и связанной с этим предвзятости!

Встроенный инструмент тестирования Google Lighthouse оценивает доступность (accessibility) сайтов по шкале от 0 до 100. Похвально стремиться к максимальной читаемости контента, но оценка 100 не означает, что сайт идеально доступен. Для доказательства я провёл небольшой эксперимент.

Всегда приятно видеть, как люди хвастаются в твиттере своими оценками Lighthouse: это значит, что они заботятся о качестве.

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

Оценка качества кода важна, но ещё важнее правильно её интерпретировать. Если автоматический инструмент говорит, что сайт доступен на 100%, это не обязательно так. Это только значит, что мы заложили основу для тестирования вручную. Для тестов Lighthouse использует библиотеку axe-core со своим набором правил. Она выявляет некоторые плохие практики, но не все. Другие практики не плохи сами по себе, но могут быть вредными, если ими злоупотреблять.

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

Зак Летерман недавно написал в твиттере:

Как построить самый медленный веб-сайт с идеальной оценкой Lighthouse

И ответ Вадима Макеева вдохновил меня на работу.

Было бы интересно почитать! Подкидываю идейку:
<img src=picture.jpg alt=picture.jpg>

Я подумал, что это замечательная мысль: не только запутать максимальное количество посетителей сайта, но и получить сверху идеальную оценку Lighthouse.

Возьмём за основу эту простую, хорошо доступную страницу.

Обязательный CSS

Начнём с простого. Я хочу убедиться, что мой идеальный веб-сайт не работает без CSS. Для этого добавляю атрибут hidden в элемент body . Это HTML-эквивалент display: none; в CSS (если хотите почитать о скрытии контента с сохранением доступности, см. «Инклюзивное скрытие» Скотта О'Хары).

Идеально чистая страница

hidden визуально скрывает содержимое и удаляет его из дерева доступности (accessibility tree). Одного этого достаточно, чтобы устранить абсолютно всех посетителей и пройти тесты Lighthouse, но мы не ищем лёгких путей. Я хочу создать сайт, который совершенно недоступен и технически всё ещё отображает контент. Итак, добавим CSS и вернём контент обратно.

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

Обязательный JS

Добавим ещё одну зависимость. Класс для отображения контента я теперь добавляю не в HTML, а через JS.

Здорово! Сайт по-прежнему не изменился, но чтобы отображать хоть какой-то контент, обязательно должны загружаться и правильно работать файлы CSS и JS.

Кажется, пришло время для первого испытания Lighthouse. Скрестим пальцы!

Идеальный результат на сайте c CSS и JS. Это здорово, но мы можем сделать лучше.

К чёрту пользователей со скрин-ридерами

Есть много способов, чтобы помешать работе программ для чтения с экрана. Самый простой и эффективный — использовать атрибут aria-hidden="true" . Этот мощный атрибут, его следует применять с осторожностью, потому что он удаляет элементы из дерева доступности. Обычно его применяют для помощи людям со скрин-ридерами, удаляя избыточный или посторонний контент. На нашем сайте прописываем этот атрибут для элемента body .

Отсекаем пользователей с клавиатурами

Пользователи с клавиатурами могут перемещаться по странице, нажимая клавишу Tab для перехода от одного интерактивного элемента к другому. Браузер показывает контур вокруг элементов в фокусе.

Давай избавимся от этого.

Всего тремя строчками CSS мы отсекаем от сайта целую группу людей. Технически, они ещё могут взаимодействовать со страницей: по нажатию Tab по-прежнему происходит переход между интерактивными элементами, просто индикатор фокуса больше не показывается. Поскольку в нашем эксперименте требуется полностью ограничить возможности людей, давайте отключим клавиатуру вообще.

Наше приложение теперь удаляет функциональность по умолчанию всех клавиш.

Время для следующего теста.

Всё ещё идеально.

Ладно, пришло время для грязных трюков.

Эксплоит для режима высокой контрастности

В Windows люди со слабым зрением могут улучшить контраст, включив так называемый режим высокой контрастности.

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

Мы можем таргетировать свойство media специально на этих пользователей.

О боже. Это так подло. Теперь мне посыпятся предложения на работу от Facebook и Uber.

К чёрту пользователей с мышками

Здесь совсем легко: просто удаляем с экрана курсор.

Для пользователя с мышкой свойство cursor: none; делает то же самое, что для пользователя с клавиатурой делает свойство outline: none; . Без курсора сначала трудно ориентироваться, но элементы по-прежнему кликабельны. Давайте улучшим качество нашего приложения, ещё раз обрезав пользователям доступный интерфейс.

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

Этот запасной скрипт запускается и удаляет события click из всех элементов, если браузер не поддерживает свойство pointer-events .

Здорово! Сайт по-прежнему совершенно доступен!

К чёрту читаемость

Мы больше не можем использовать мышь или клавиатуру, но всё ещё видим текст на странице. Непорядок.

Контент остался на странице, но почти не заметен. Потрясающе!

Эксплоит режима чтения в Safari

Тестируя сайт в разных браузерах, я заметил, что он по-прежнему доступен в Safari в режиме чтения.

Как выяснилось, можно отключить этот режим, если указать минимальный размер шрифта в body .

Долой просмотр исходника

Сайт недоступен для людей с низким и хорошим зрением, пользователей мыши, клавиатуры и скрин-ридеров.

Если опытный пользователь попадёт на такой сайт, в нём может проснуться внутренний хакер и он попытается хакнуть его. Я имею в виду, просмотреть исходный код страницы.

Вишенка на торте недоступности нашего сайта — конвертация текста в HTML-мнемоники. Эти мнемоники (entity) обычно используются для отображения зарезервированных, невидимых символов и тех, которые трудно ввести с помощью стандартной клавиатуры. Мы используем их для обфускации.

И последнее испытание.

В статье я вовсе не хотел поиздеваться над системой Lighthouse или её движком axe-core. Я регулярно пользуюсь обоими инструментами и рад, что они есть.

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

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

«Данная проверка определяет возможности для улучшения доступности вашего веб-приложения. Автоматическая проверка способна обнаружить только часть проблем, поэтому рекомендуется также провести ручное тестирование».

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

Вы, вероятно, знакомы со следующей историей: вы проводите много времени, читая о том, как ускорить свой блог WordPress, и устанавливаете для этого инструменты и бесплатные плагины. Затем вы (или ваш клиент) вносите, казалось бы, небольшие изменения в одну из своих страниц, и скорость вашей страницы внезапно падает с обрыва.

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

Это решение – настроить Google Lighthouse для проведения аудита скорости по запросу для вашего сайта WordPress. Настройка может быть немного сложной, но и не так уж и сложной для опытного пользователя. В этой статье мы объясним, почему и как вы должны настроить Lighthouse CI для своего сайта WordPress.

Введение в тестирование скорости WordPress

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

По сути, есть две причины, по которым ваш веб-сайт – независимо от того, основан он на WordPress или нет – должен быть быстрым. Один из них заключается в том, что объем внимания среднего веб-пользователя уже очень короткий: 47% потребителей ожидают, что веб-страница загрузится менее чем за две секунды, и они быстро покинут страницу, если загрузка займет слишком много времени. По этой причине сокращение времени загрузки является важной проблемой, в частности, для магазинов электронной коммерции.

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

По этой причине собственная статистика Google PageSpeed является ключевым инструментом, обычно используемым специалистами по SEO и маркетологами, поскольку она дает прямой доступ к системе, через которую алгоритмы поиска Google оценивают скорость страницы.

Эти соображения применимы к WordPress так же, как и к сайтам, работающим на других платформах. Из-за этого, а также из-за доминирования WordPress на рынке теперь доступно несколько инструментов для проверки скорости вашего сайта. Они варьируются от одноразовых проверок на основе браузера до полнофункциональных наборов программного обеспечения для настольных ПК, которые предоставят вам подробное изложение того, как работает каждая страница на вашем сайте WordPress.

Google Lighthouse и WordPress

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

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

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

Хотя вы можете запускать Lighthouse прямо из Chrome DevTools, существует также версия инструмента, которая постоянно обновляется. Это известно как Lighthouse CI, и это будет версия Lighthouse, которая понадобится более продвинутым пользователям.

CI в этом контексте означает непрерывную интеграцию. Это парадигма разработки программного обеспечения, при которой обновления программного обеспечения постоянно загружаются разработчиками в центральный репозиторий, поэтому пользователи всегда имеют доступ к последней версии. CI теперь является стандартом во многих веб-технологиях и отраслях. Например, 43% банковских приложений запрограммированы с помощью COBOL, языка компьютерного программирования на основе CI.

Одна из причин, по которой CI не получил широкого распространения, заключается в том, что до сих пор существует широко распространенное (и часто необоснованное) предположение, что это вызывает серьезные проблемы с безопасностью. Однако правда в том, что CI может привести к более безопасным программным системам благодаря практике, обеспечивающей автоматическое обеспечение безопасности.

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

Кроме того, вы даже можете использовать эту автоматизированную систему для предотвращения изменений, которые замедлят развертывание вашего сайта на ваших (или ваших клиентских) сайтах WordPress. Это автоматически предотвращает влияние дорогостоящих изменений на ваш рейтинг PageRank.

Использование Lighthouse CI с WordPress

Процесс настройки Lighthouse CI для работы на вашем сайте WordPress не сложен, но требует немного усилий.

Для тех, кто хочет получить краткое изложение процесса или у кого есть немного больше технических знаний, вот основная схема процесса:

Во-первых, вам нужно будет настроить новый репозиторий GitHub, чтобы отслеживать изменения на вашем сайте WordPress. Если вы все равно регулярно тестируете скорость своего сайта, настройка репо, подобного этому, – отличный способ отслеживать ваш сайт, независимо от того, используете ли вы Lighthouse CI или нет.
Затем вам нужно будет загрузить Lighthouse CI и настроить его для поиска изменений. Затем вы можете создать действие Lighthouse, которое запускается автоматически каждый раз при изменении URL-адреса на вашем сайте WordPress.
Чтобы создать функцию, вам нужно будет создать отдельную функцию Google Cloud, которая может обновлять конфигурацию действия Lighthouse CI с недавно измененными URL-адресами из XML-карт сайта, а затем отправлять новую конфигурацию в репозиторий.

На этом этапе у вас будет экземпляр Lighthouse CI, который автоматически запускается на вашем сайте WordPress и предупреждает вас, когда ваши запланированные изменения замедлят его работу. Отсюда вы даже можете добавить автоматические действия в репозиторий GitHub, чтобы предотвратить публикацию изменений этого типа на вашем сайте.

Лучшая альтернатива использованию Lighthouse CI для повышения скорости вашего сайта WordPress – это использовать инструменты тестирования скорости, встроенные в ваш веб-хостинг. Наиболее распространенные хосты WordPress, такие как SiteGround или Kinsta, поставляются с определенными инструментами тестирования скорости, которые утверждают, что повышают скорость сайта более чем на 200%, а также могут использоваться вместе с Lighthouse CI, если вы того пожелаете.

Последние мысли

В конечном итоге цель установки Lighthouse CI на ваш сайт WordPress – дать вам лучший контроль за его работой; это не поможет вам улучшить эту производительность.

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

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

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

Через PageSpeed Insights

Заходите на PageSpeed Insights и осуществляйте проверку ресурса (отсутствует проверка PWA - "Progressive Web App");

Через web.dev

Зайти на web.dev и протестировать свой сайт (отсутствует проверка PWA);

Но сейчас в арсенале похожих инструментов появился Lighthouse от Google. Если Вы хотите улучшить производительность своего сайта, его доступность и SEO в целом, обратите внимание на Google Lighthouse. Lighthouse – это компактный, но мощный инструмент тестирования, который проверит основные показатели вашего сайта и предложит рекомендации по улучшению его производительности. 13 ноября 2018 года компания Google выпустила инструмент Lighthouse для комплексной проверки сайта. Lighthouse анализирует веб-приложения и веб-страницы, собирает современные показатели производительности и анализирует лучшие практики разработчиков. Его задача – взять ваше приложение/ сайт, проанализировать его и сгенерировать отчет, в котором информация о том, что можно улучшить. В сгенерированном документе вы увидите разделы «Производительность», «Прогрессивное веб-приложение», «Специальные возможности», «Лучшие практики» и SEO, которые разложены по полочкам и позволяют просматривать данные аудита. Инструмент Lighthouse полезен тем, кто проводит комплексную проверку сайтов для повышения общей производительности, маркетинговой эффективности, совершенствования имиджевой составляющей. Для того чтобы у вас была возможность анализировать производительность и качество своего сайта, Google создали автоматический инструмент Lighthouse с открытым исходным кодом.

Зачем это Google?

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

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

Lighthouse предназначен для тех, кто хочет улучшить производительность своего сайта и применить некоторые хитрости, чтобы подняться в рейтинге Google. Инструмент содержит 111 аудитов, распределенных по 5 разделам: Performance, PWA, Best Practices, SEO, Accessibility. Lighthouse отличный помощник для SEO-продвижения. После его использования вы получите рекомендации по таким категориям:

Сбор данных и индексация – проверка на доступность ботам;
Использование контента – корректное оформление;
Мобильная версия – убедитесь, что пользователям на телефонах не придётся уменьшать масштаб и читать мелкий шрифт.

Почему Lighthouse необходимо регулярно использовать для тестирования сайта

Является ли Lighthouse всеобъемлющим инструментом, который способен проверить каждый аспект вашего сайта? Нет. Но он и не претендует на это.

Вот несколько причин, почему стоит использовать Lighthouse в качестве инструмента для регулярного тестирования сайта:

Чек-лист от LightHouse

На момент написания статьи LightHouse умел уже делать такие проверки см. например для Lighthouse v5 (Score Weighting):

Производительность (Performance)

Аудит метрик, таких как время загрузки первых данных и быстрота отклика после взаимодействия с сайтом во время загрузки, включает в себя 22 проверки:

Reduce server response times (TTFB);
Properly size images;
Serve static assets with an efficient cache policy;
Minimize main-thread work;
Reduce JavaScript execution time;
Minimize Critical Requests Depth;
Eliminate render-blocking resources;
Defer offscreen images;
Minify CSS;
Minify JavaScript;
Defer unused CSS;
Efficiently encode images;
Serve images in next-gen formats;
Enable text compression;
Preconnect to required origins;
Avoid multiple page redirects;
Preload key requests;
Use video formats for animated content;
Avoids enormous network payloads;
Avoids an excessive DOM size;
User Timing marks and measures;
All text remains visible during webfont loads.

Оценивает страницу по контрольному чек-листу для прогрессивного веб-приложения. Включает в себя 15 проверок:

Does not respond with a 200 when offline;
User will not be prompted to Install the Web App;
Does not register a service worker;
Is not configured for a custom splash screen;
Site works cross-browser;
Page transitions don't feel like they block on the network;
Each page has a URL;
Page load is fast enough on 3G;
Uses HTTPS;
Redirects HTTP traffic to HTTPS;
Has a meta name="viewport" tag with width or initial-scale;
Contains some content when JavaScript is not available;
Address bar matches brand colors;
Content is sized correctly for the viewport;
The short_name won't be truncated on the homescreen.

Методы наилучшей практики (Best Practices)

Оптимизация поисковых систем (SEO)

Проверяет наличие базовых рекомендаций, таких как canonical, title, различные мета-теги. Включает в себя 13 проверок:

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

Включает в себя 46 проверок:

[id] attributes on the page are not unique;
frame or iframe elements do not have a title;
The page has a logical tab order;
Interactive controls are keyboard focusable;
Interactive elements indicate their purpose and state;
The user's focus is directed to new content added to the page;
User focus is not accidentally trapped in a region;
Custom controls have associated labels;
Custom controls have ARIA roles;
Visual order on the page follows DOM order;
Offscreen content is hidden from assistive technology;
Headings don't skip levels;
HTML5 landmark elements are used to improve navigation;
The page contains a heading, skip link, or landmark region;
Document has a title element;
Background and foreground colors have a sufficient contrast ratio;
html element has a [lang] attribute;
html element has a valid value for its [lang] attribute;
Image elements have [alt] attributes;
Links have a discernible name;
Lists contain only li elements and script supporting elements ( script and template );
List items ( li ) are contained within ul or ol parent elements;
[user-scalable="no"] is not used in the meta name="viewport" element and the [maximum-scale] attribute is not less than 5;
[accesskey] values are unique;
audio elements contain a track element with [kind="captions"];
input type="image" elements have [alt] text;
No element has a [tabindex] value greater than 0;
Cells in a table element that use the [headers] attribute only refer to other cells of that same table;
th elements and elements with [role="columnheader"/"rowheader"] have data cells they describe;
[aria-*] attributes match their roles;
[role]s have all required [aria-*] attributes;
Elements with [role] that require specific children [role]s, are present;
[role]s are contained by their required parent element;
[role] values are valid;
[aria-*] attributes have valid values;
[aria-*] attributes are valid and not misspelled;
Buttons have an accessible name;
dl 's contain only properly-ordered dt and dd groups, script or template elements;
Definition list items are wrapped in dl elements;
Form elements have associated labels;
Presentational table elements avoid using th , caption or the [summary] attribute;
object elements have [alt] text;
video elements contain a track element with [kind="captions"];
video elements contain a track element with [kind="description"];
The document does not use meta http-equiv="refresh" ;
[lang] attributes have a valid value.

Преимущества Google Lighthouse

По функциям Lighthouse напоминает нашумевшие сервисы поисковика – PageSpeed Insights и Analytics, но имеет больше плюсов:

Совмещает основной функционал всех сервисов одновременно – не нужно открывать каждый инструмент Google Chrome по отдельности;
Так как сервис выступает расширением, он может проводить аудит тестовых страниц и с авторизацией;
Обратная связь и постоянные обновления – авторы действительно читают комментарии разработчиков и регулярно дорабатывают инструмент.
Минусы – отсутствие русского языка – но из-за простого функционала это не вызывает проблем.

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

КАК ДОПОЛНЕНИЕ (ПЛАГИН) В GOOGLE CHROME

Зайдите в chrome web store и установите плагин Lighthouse (после установки он появится в верхней правой части окна браузера). Нажмите на него и после этого кликните на “Generate Report” (сгенерировать отчет). Затем начнётся сбор данных, и через несколько секунд отчет появится на экране.

ЧЕРЕЗ CHROME DEV TOOLS

Откройте сайт в Google Chrome;
Затем в Chrome Dev Tools нажмите на вкладку “Audits” (аудит);
Здесь находятся аудиты Lighthouse. Далее нажмите на кнопку “Run Audits” (запустить аудит). Затем начнётся игра с Вашим сайтом: сбор данных/игра с мобильной версией и т.д. После завершения Вы увидите вкладку аудита со всеми необходимыми данными.

КАК МОДУЛЬ NODE.JS

Чтобы использовать его на Вашей консоли, установите модуль Node (Lighthouse требует Node 10 LTS (10.13) или новее).

Установка

Запуск

После установки, запустите его.

Когда команда запустится, она покажет вам всю информацию, которая относится к аудиту. Затем откроется новое окно браузера Chrome, которое будет работать также, как и в предыдущем варианте с Dev Tools: оно проанализирует ваш сайт и сгенерирует документ с готовым аудитом, который можно просмотреть в браузере (по умолчанию генерируется отчёт в формате html, вот пример отчёта). И еще: если Вы запускаете Google Lighthouse в качестве модуля NPM, информация о состоянии аудита отображается в консоли. Например:

ОТЧЕТЫ Lighthouse

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

Performance (производительность),
Progressive Web App (прогрессивное веб-приложение),
Accessibility (доступность),
Best Practices (лучшие практики)
SEO

Performance (производительность)

Здесь Google Lighthouse измеряет скорость загрузки вашего сайта. Вы увидите количество времени (в секундах!), которое требуется сайту для отображения на нем различных элементов. Показатель эффективности (Performance Score) рассчитывается на основе результатов теста скорости, сравнивая скорость вашего сайта с другими. Получение 100 баллов означает, что протестированная веб-страница работает быстрее, чем 98% или более веб-страниц. Оценка 50 означает, что страница работает быстрее, чем 75% Интернета. Когда вместо оценки отображается знак вопроса, это значит что некоторые запущенные тесты не были проведены должным образом и помечены как «Ошибка!».

После scores overview Вы найдете результаты по 6 метрикам (Для Performance метрик):

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

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

Progressive Web App (Прогрессивное веб-приложение)

Accessibility (Доступность)

Всегда нужно помнить, что ваш сайт должен быть доступен каждому (у кого есть интернет, по крайней мере).

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

Best Practices (Лучшие практики)

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

Для проведения анализа Lighthouse использует факторы рейтинга Google, поэтому приведенная здесь информация надежна. Делайте заметки и повышайте ваш рейтинг в поисковых системах.

Осторожно.

Заключение

Одна из самых больших проблем разрабочика – создание сайта, который бы соответствовал всем стандартам Google, тем более, что эти стандарты все время меняются. К счастью, Google Lighthouse позволяет протестировать сайт на соответствие метрикам, которые Google считает необходимыми, и получить полезные советы по повышению его производительности.

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

Поисковый маркетинг или SEM (Search Engine Marketing) — это набор действий, направленных на увеличение потока клиентов на сайт через ул.

Как и для чего необходимо уменьшать вес страниц сайта?

Мы сейчас потребляем значительно больше информации, чем какое-либо поколение за всю историю человечества. Люди сидят в социальных сетях.

Обновление Google Page Experience и новый фактор ранжирования Core Web Vitals

В течение многих лет Google подчёркивал важность качества сайтов, их безопасности и удобства использования для пользователей. Занимая л.

Что может дать уменьшение загрузки сайта на 0,1 секунды на мобильных устройствах

Компании Akamai и SOASTA провели много исследований, в результате которых выявлено, что более половины посетителей покидают страницу, к.

Выбираем домен для сайта: на что следует обратить внимание

Выбор домена — одна из главных вещей, о которых необходимо подумать при создании сайта. Правильно подобранное доменное имя впечатляет п.

Юзабилити — удобство использования сайта: что это такое и рекомендации по его улучшению

Вы когда-нибудь закрывали сайт просто потому что загрузка занимала слишком много времени? Нет ничего утомительнее, чем ожидание пока эл.

Локальное SEO продвижение — как оптимизировать сайт под локальный поиск

В поисковой выдаче постоянно усовершенствуются алгоритмы, кроме того, она становится с каждым днём более персонализированной. Одним из .

Читайте также: