Возможности Lighthouse для оптимизации сайта

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

Непосредственно на скорость загрузки влияет огромное количество факторов, и большинство из них относятся к оптимизации сайта. Когда ресурс попадает к нам, наши специалисты детально его изучают на всех уровнях. Находят ошибки в JavaScript, CSS, построении дерева DOM, изображениях, шрифтах и другом контенте. Исследования базируются на данных сразу нескольких инструментов, что позволяет максимально точно выявить проблемы и решить, как их устранить без вреда для страницы. Наиболее сложная ситуация, когда до нас оптимизировать сайт пытался человек, который не является специалистом. В таких случаях, нам иногда даже приходится полностью его восстанавливать. Проведение всех настроек позволяет не только существенно повысить скорость, но и провести SEO-оптимизацию. Сайт становится полноценным инструментом маркетинга, а поисковые системы повышают его в позициях выдачи.

Одним из инструментов, которые позволяют провести эффективный аудит, является Google Lighthouse. Именно на его данные и опирается поисковая система. Но, при проведении корректных настроек только его не достаточно — это важно учитывать. В данной статье мы рассмотрим, что такое Lighthouse и как им пользоваться.

Что такое Google Lighthouse

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

По представленным функциям он схож с Google Analytics и PageSpeed Insights. При этом, Lighthouse является самостоятельным инструментом с целым рядом преимуществ:

В нём собраны основные функции сразу всех сервисов Google
Доступно проведение аудита как тестовых, так и авторизованных страниц
Есть общие комментарии, которые позволяют понять в какую сторону двигаться для решения проблемы

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

Как запустить Lighthouse и начать с ним работать

Запустить Lighthouse можно несколькими способами: в Chrome DevTools, из командной строки или в виде модуля Node. Указав Lighthouse необходимый для проведения тестирования URL, инструмент запускает серию аудитов на странице, после чего генерирует отчет. Проведя анализ успешных и не удавшихся аудитов, выявляется проблематика сайта. С этими данными веб-разработчик уже может работать, чтобы привести сайт в соответствие требованиям.

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

В Chrome DevTools. Можно легко проверять страницы, которые требуют проверки подлинности, и читать отчеты в удобном формате
Из командной строки. Можно автоматизировать работу Lighthouse с помощью сценариев
В качестве Node-модуля. Доступна интегрирация Lighthouse в системы непрерывной интеграции
Из веб-интерфейса. Или просто запустите Lighthouse и делайте ссылки на отчеты, не устанавливая ничего.

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

Запустить Lighthouse в DevTools

Аудит Lighthouse можно выполнить в DevTools. Чтобы выполнить проверку необходимо осуществить ряд простых действий:

Загрузить Google Chrome
Перейти по нужному URL
Открыть DevTools
Нажать вкладку Аудит
Нажать «Выполнить аудит» и оставить включёнными все списки
Нажать «Запустить аудит»

Спустя минуту-полторы инструмент выдаст все доступные данные по странице.

Запуск из командной строки Node

Для установки модуля Node Откройте Google Chrome

Установите текущую версию Node
Установите Lighthouse. Тег -g устанавливает его в качестве глобального модуля

Для запуска аудита задайте:

lighthouse <url>

Чтобы посмотреть варианты аудита необходимо задать:

lighthouse —help

Также можно запустить Lighthouse программно в качестве модуля Node.

Как просматривать отчёты Lighthouse и поделиться ими онлайн

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

Chrome DevTools . Нажмите «Скачать отчет»
Командная строка . Задайте:lighthouse –output json –output-path <path/for/output.json>
Расширение Chrome. Нажмите «Экспорт» > Сохранить как JSON

Чтобы посмотреть данные потребуется открыть Свойства просмотра отчётов. Перетащить в него файл JSON и щёлкнуть по любому месту, чтобы открыть навигатор выбора файлов.

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