Google Lighthouse: мониторинг производительности сайта, SEO, доступность

  1. Улучшение вашего сайта
  2. Полезные результаты
  3. Используя Маяк
  4. Решения

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

Маяк доступно в нескольких формах, в том числе через текущие версии веб-браузера Google Chrome.

Владелец или менеджер электронной коммерции просто открывает инструменты разработчика Chrome, щелкая по любой части веб-страницы, выбирая «Проверять», а затем открывая вкладку «Аудит», чтобы найти Lighthouse.

Lighthouse - бесплатный инструмент Google с открытым исходным кодом для автоматического мониторинга сайтов

Lighthouse доступен на вкладке «Аудиты» инструментов разработчика Chrome.

При проведении аудита Lighthouse будет загружать целевой веб-сайт несколько раз, поскольку он собирает информацию о структуре сайта, тегах и производительности. Этот инструмент ставит премию за мобильную связь, поэтому Lighthouse делает все возможное, чтобы эмулировать смартфон, даже ограничивая сетевое подключение до чего-то вроде 3G и тестируя страницу в автономном режиме.

Улучшение вашего сайта

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

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

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

Аудит Lighthouse предоставит пять категорий отзывов, каждая с рейтингом от нуля до 100.

  • Спектакль. Как быстро ваш сайт загружается или как быстро ключевые элементы становятся доступными для пользователей на мобильных устройствах. Этот аудит основан на нескольких точках данных, в том числе, когда нарисованы первые элементы и когда страница становится интерактивной.
  • Прогрессивное веб-приложение. На основе базовый контрольный список для прогрессивного веб-приложения , Маяк ищет уровень завершенности вашего сайта. Google подчеркивает альбиносы , которые улучшают производительность мобильных устройств и могут повысить рейтинг в поисковых системах.
  • Доступность. Этот показатель представляет собой средневзвешенное значение около 35 признаков доступности. доступность является одной из самых важных вещей, которые могут отслеживать онлайн-продавцы; это очень полезно иметь встроенный. Не предоставляя доступный сайт может быть незаконным ,
  • Лучшие практики. Проверяет использование текущих лучших практик веб-разработки, таких как использование HTTP / 2 ,
  • SEO Проверяет девять основ поисковой оптимизации. Это значительно менее тщательно, чем некоторые сторонние инструменты SEO-аудита или расширения, но это все еще может помочь вашему бизнесу понять, как он будет работать в Google и других поисковых системах.

Полезные результаты

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

В качестве примера, аудит Larmthouse Walmart.com, проведенный 7 мая 2018 года, обнаружил несколько ошибок доступности, включая iframe без атрибута title. Маяк указывает, что этот отсутствующий заголовок может сделать понимание страницы относительно трудным для покупателей, использующих программу чтения с экрана, и отображает конкретный рассматриваемый тег iframe.

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

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

Точно так же аудит Lighthouse на Kohls.com 7 мая 2018 года выявил несколько неиспользуемых объявлений CSS. Инструмент указал на конкретные таблицы стилей и оценил, сколько байтов данных Коля может сохранить, если он отредактирует этот CSS.

Инструмент указал на конкретные таблицы стилей и оценил, сколько байтов данных Коля может сохранить, если он отредактирует этот CSS

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

Используя Маяк

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

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

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

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

В качестве примера автоматизации Lighthouse разработчики Google Эрик Бидельман и Брендан Кенни продемонстрировали на Google I / O 2017, как компания может использовать маяк с GitHub и инструмент тестирования Travis.

Решения

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