Как проводить аудит веб-сайта с помощью Chrome Lighthouse? »WebNots

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

Начало работы с Chrome Audit

Откройте веб-страницу, на которой вы хотите провести аудит. Перейдите в меню «Просмотр»> «Разработчик»> «Инструменты разработчика» или щелкните правой кнопкой мыши и выберите «Проверить». Если вы используете Chrome на ноутбуке с Windows, просто нажмите F12, чтобы открыть инструменты разработчика в Chrome.

• Перейдите на вкладку «Аудиты» в инструментах разработчика.
• Нажмите кнопку «Выполнить аудит…», чтобы начать аудит.
• Вы можете добавить сайт для проведения нового аудита, нажав кнопку «+».
• После аудита нажмите кнопку загрузки, чтобы получить отчет об аудите на свой компьютер.

SEO-аудит Google Chrome Lighthouse

Проведение аудита веб-сайта

Chrome покажет всплывающий экран со следующими категориями для аудита.

• Производительность
• Прогрессивное веб-приложение
• Лучшие практики
• Доступность
• SEO

Выберите нужные категории и нажмите кнопку «Выполнить аудит».

Lighthouse Audits для выполнения

Результаты аудита сайта

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

Отчет об аудите Lighthouse

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

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

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

Отчет об аудите эффективности Lighthouse

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

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

Прогрессивное веб-приложение

Инструмент Chrome Lighthouse проверит страницу на наличие рекомендации по прогрессивным веб-приложениям. В разделе «Прогрессивное веб-приложение» показаны неуспешные, пройденные и элементы, требующие ручной проверки. Некоторые из факторов, проверенных для прогрессивных веб-приложений, включают скорость загрузки при подключении 3G, загрузку контента в области просмотра, использование HTTPS и перенаправление HTTP на HTTPS.

Отчет о прогрессивном веб-приложении Lighthouse

Доступность

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

Отчет о доступности маяка

Лучшие практики

Инструмент проверит приложение или сайт на соответствие рекомендациям для современного мира и покажет результаты в разделе «Лучшие практики».

Лучшие практики Lighthouse

SEO

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

Отчет об аудите Lighthouse SEO

Средство просмотра отчетов Lighthouse

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

Средство просмотра отчетов Lighthouse

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

Просмотр отчета Chrome Lighthouse

Расширение Chrome Lighthouse

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

Вы можете перейти в Интернет-магазин Chrome и установить Пристройка маяка в браузере Chrome. Он добавит значок маяка рядом с адресной строкой Chrome. Нажмите «Параметры», чтобы выбрать категории для аудита, а затем нажмите кнопку «Создать отчет», чтобы запустить аудит веб-сайта.

Отчет об аудите веб-сайта откроется в новом окне после завершения аудита.

Вы можете просмотреть видео ниже, чтобы получить полную информацию о Chrome Lighthouse.

Заключительные слова

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