За последние пару лет появилось несколько достойных инструментов для измерения показателей SEO сайтов, скорости страниц, доступности и прочего. Один из таких инструментов – Google Lighthouse.
Google Lighthouse – это автоматизированное дополнение к Google Chrome, которое помогает улучшить качество страниц. Работать можно с любойстраницей: общедоступной или требующей аутентификации.
Его задача – взять ваше приложение/ сайт, проанализировать его и сгенерировать отчет, в котором информация о том, что можно улучшить. В сгенерированном документе вы увидите разделы «Производительность», «Прогрессивное веб-приложение», «Специальные возможности», «Лучшие практики» и SEO, которые разложены по полочкам и позволяют просматривать данные аудита.
Инструмент Lighthouse полезен тем, кто проводит комплексную проверку сайтов для повышения общей производительности, маркетинговой эффективности, совершенствования имиджевой составляющей.
Lighthouse отличный помощник для SEO-продвижения. После его использования вы получите рекомендации по таким категориям:
- Сбор данных и индексация – проверка на доступность ботам;
- Использование контента – корректное оформление;
- Мобильная версия – убедитесь, что пользователям на телефонах не придётся уменьшать масштаб и читать мелкий шрифт.
Преимущества Google Lighthouse
По функциям Lighthouse напоминает нашумевшие сервисы поисковика – PageSpeed Insights и Analytics, но имеет больше плюсов:
- Совмещает основной функционал всех сервисов одновременно – не нужно открывать каждый инструмент Google Chrome по отдельности;
- Так как сервис выступает расширением, он может проводить аудит тестовых страниц и с авторизацией;
- Обратная связь и постоянные обновления – авторы действительно читают комментарии разработчиков и регулярно дорабатывают инструмент.
Минусы – отсутствие русского языка – но из-за простого функционала это не вызывает проблем.
Но прежде чем углубиться в аналитику, нужно понять, как запустить Lighthouse на вашем сайте. Существует три способа сделать это без особых усилий. Давайте рассмотрим их подробнее.
- КАК ДОПОЛНЕНИЕ В GOOGLE CHROME
Если вы когда-то скачивали расширения для браузера, вы справитесь за пару минут.
Зайдите в онлайн-магазин Chrome и установите плагин Lighthouse (после установки он появится в верхней правой части окна браузера).
Нажмите на него и после этого кликните на “Generate Report” (сгенерировать отчет).
Затем начнется сбор данных, и через несколько секунд отчет появится на экране.
- IN CHROME DEV TOOLS
- Откройте сайт в Google Chrome;
- Затем в Chrome Dev Tools нажмите на вкладку “Audits” (аудит);
- Здесь находятся аудиты Lighthouse. Далее нажмите на кнопку “Run Audits” (запустить аудит).
Этот процесс сделает ваш сайт немного сумасшедшим – он перейдет на мобильную версию, потеряет некоторые шрифты и может отключиться от интернета.
Все это – часть нашего плана, поэтому не беспокойтесь об этом зря и не звоните в панике своему программисту ☺
После завершения вы увидите вкладку аудита со всеми необходимыми данными.
- УСТАНОВИТЬ КАК МОДУЛЬ NODE
Если вы разработчик и хотите (или любите) использовать командную строку, Lighthouse поможет вам. Он поставляется в виде модуля Node и может запускаться как часть процесса сборки на основе Node.js.
Чтобы использовать его на вашей консоли, установите модуль Node.
После установки, запустите его. Когда команда запустится, она покажет вам всю информацию, которая относится к аудиту.
Затем откроется новое окно браузера Chrome, которое будет работать также, как и в предыдущем варианте с Dev Tools: оно проанализирует ваш сайт и сгенерирует документ с готовым аудитом, который можно просмотреть в браузере.
И еще: если вы запускаете Google Lighthouse в качестве модуля NPM, информация о состоянии аудита отображается в консоли.
Отчеты в Google Lighthouse
Отчет подробно охватывает пять отдельных элементов:
- Performance (производительность),
- Progressive Web App (прогрессивное веб-приложение),
- Accessibility (доступность),
- Best Practices (лучшие практики)
- SEO
Кратко о том, что в них можно увидеть:
Performance (производительность)
Здесь Google Lighthouse измеряет скорость загрузки вашего сайта.
Вы увидите количество времени (в секундах!), которое требуется сайту для отображения на нем различных элементов. Например, при загрузке первого изображения. Будет ли пользователь перезагружать страницу десятки раз и проверять, ловит ли wi-fi или же спокойно скроллить ваши страницы и радоваться жизни.
С помощью этого раздела вы увидите возможности для повышения производительности. Но будьте бдительны: некоторые советы могут и понизить скорость вашего сайта.
Progressive Web App (Прогрессивное веб-приложение)
Прогрессивное веб-приложение (PWA) – это тип веб-сайта, который предоставляет наилучшие возможности для веб-пользователей. Здесь Google Checklist исследует, как вашему PWA стать надежным, быстрым и жуть каким привлекательным для ваших клиентов. Здесь акцент именно на использование HTTPS, заставки и цветовой контраст.
Accessibility (Доступность)
Всегда нужно помнить, что ваш сайт должен быть доступен каждому (у кого есть интернет, по крайней мере).
Тут мы проверим, хорошо ли структурирован ваш контент, насколько ваш код семантически правильный. Тогда пользователи смогут просматривать страницы в режиме чтения, не отвлекаясь на рекламные баннеры, а также заходить на сайт с телефона и ничего не поплывет в сторону.
Best Practices (Лучшие практики)
В этом разделе показаны методы оптимизации работы вашего веб-сайта, в том числе ошибки браузера в консоли, изображения “пиксельного” разрешения и приложение HTTPS.
SEO
В последнем разделе контрольного списка приведены советы по оптимизации вашего сайта для ранжирования результатов в поисковых системах.
Для проведения анализа Lighthouse использует факторы рейтинга Google, поэтому приведенная здесь информация надежна. Делайте заметки и повышайте ваш рейтинг в поисковых системах.
Продвижение сайта в поисковиках станет в разы проще с таким инструментом. Но не всегда рекомендации Lighthouse являются истиной, скорее укажут на пробелы в вашем сайте.
22 Апр 2024
226