Google Lighthouse: обзор нового инструмента

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

Для проверки производительности сайта используют разные инструменты в зависимости от личных предпочтений владельца или разработчика сайта и ряда прочих факторов. Наиболее популярными считаются WebPageTest, PageSpeed Insights, GTmetrix и Google Lighthouse.

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

Понятие «производительность веб-ресурса» включает в себя ряд параметров, в том числе скорость загрузки страниц и время реагирования на действия пользователя. Эти факторы напрямую влияют на уровень юзабилити, то есть на удобство использования ресурса.

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

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

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

В числе преимуществ Google Lighthouse выделяют:

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

Инструмент проверяет и анализирует следующие параметры сайта:

Оценка по каждому параметру дается по шкале от 0 до 100 баллов:

• 0-49 баллов – низкая производительность, требуются доработки;
  
• 50-89 баллов – нормальная производительность, но можно улучшить;
  
• 90-100 баллов – высокая производительность сайта.
  
  

Запустить Маяк Гугла для проверки любого сайта можно разными способами. Используйте вариант, с которым вам удобнее работать. Специалисты рекомендуют делать аудит наиболее простым способом – через Chrome Dev Tools.

Открываем в браузере Google Chrome сайт, который необходимо проверить. Далее:

• Открываем инструменты разработчика командой Ctrl+Shift+i.
  
• Переходим на вкладку Lighthouse.
  
• Кликаем кнопку Analyze Page load.

Ждем результат аудита. Ожидание может занять до 1 минуты.

Скачиваем расширение Lighthouse Chrome из интернет-магазина, устанавливаем в браузер Chrome. Для того, чтобы запустить проверку:

• Открываем интересующую нас веб-страницу.
  
• Нажимаем на значок с изображением маяка рядом с адресной строкой браузера (если значок не отобразился, то ищем его в меню расширений Chrome).
  
• Нажимаем кнопку Generate Report.

После запуска проверки Lighthouse приступает к аудиту страницы, а затем формирует отчет о полученных данных.

Этот метод подойдет опытным разработчикам и тем, кто предпочитает работать с командной строкой в консоли. Скачиваем Node.js и устанавливаем на устройство, затем делаем следующее:

• Устанавливаем Lighthouse с помощью команды npm install -g lighthouse.
  
• Запускаем проверку посредством команды lighthouse <url>, где url – адрес сайта, производительность которого хотим узнать.

При использовании модуля Node результаты аудита будут отображаться в виде строк в консоли.

Разработчики инструмента Lighthouse предлагают два способа.

Чтобы просмотреть отчет через Lighthouse Viewer, необходимо вывести его в формате JSON. Для этого нужно:

• При использовании расширения: открыть меню в правом верхнем углу и сохранить файл как JSON.
  
• При использовании командной строки в консоли: задать команду shell lighthouse --output json --output-path <path/for/output.json>.
  
  

Полученные данные просматриваем через Lighthouse Viewer.

Способ подойдет тем, кто не хочет передавать отчеты вручную. Чтобы экспортировать данные отчета, делают следующее:

• При использовании Lighthouse Viewer. Открыть меню в верхнем правом углу и нажать «Сохранить как Gist».
  
• При использовании командной строки. Создать суть отчета вручную и вставить данные отчета JSON так, чтобы имя файла gist заканчивалось фрагментом lighthouse.report.json.
  
  

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

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

• Оптимизировать изображения, использовать графику в форматах WEBP, AVIF, объединять элементы SVG.
  
• Минифицировать коды, скрипты JS, CSS.
  
• Использовать элементы CSS в начале страницы, JS – в конце.
  
• Подключать меньше сторонних ресурсов.
  
• Уменьшить количество плагинов до 20 штук.
  
• Удалить или переписать коды, которые не используются.
  
• Улучшить кэширование страниц.
  
• Пользоваться быстрым хостингом.

Соблюдение указанных правил не только помогает продвигать сайт по SEO, но также напрямую влияет на поведение пользователей, конверсии и продажи. Пользователям удобнее работать с быстрыми и понятными сайтами, которые не отнимают лишнего времени и не действуют на нервы. Вероятность совершения покупки на оптимизированном сайте возрастает в разы.