Как проверить свой сайт с помощью Google Lighthouse?

Новый инструмент от Google – протестировать и дать вам рекомендации по улучшению производительности, SEO, безопасности, лучших практик и доступности..


Google недавно запустил Маяк, инструмент с открытым исходным кодом для аудита вашего сайта вручную и автоматически.

Какие показатели тестируются Google Lighthouse?

Есть более 75 метрик он тестирует и дает вам общий балл. Некоторые из следующих популярных, которые могут вас заинтересовать в качестве владельца сайта, SEO-аналитика, веб-мастеров.

  • Представление – время до взаимодействия, время ожидания, индекс скорости, оптимизация ресурсов, TTFB, доставка ресурсов, время выполнения сценариев, размер DOM и т. Д..
  • SEO – Мобильный, мета, ползучий, канонический, структура и т. Д..
  • Лучшие практики – Оптимизация изображения, библиотеки JS, регистрация ошибок браузера, доступ через HTTPS, известные уязвимости JS и т. Д
  • доступность  – Элементы страницы, язык, атрибуты ARIA и т. Д..
  • PWA (Прогрессивное веб-приложение) – перенаправление HTTP на HTTPS, код ответа в порядке, быстрая загрузка по 3G, заставка, окно просмотра и т. Д..

Это фантастический инструмент, и вы можете использовать его несколькими способами.

Это верно – так много способов. Если вы разработчик, вы можете использовать его с Node.js для программного запуска теста. На рынке уже есть несколько инструментов от Lighthouse, которые предлагают постоянный мониторинг производительности сайта..

Давайте узнаем, как вы проводите тестирование маяка на своем сайте.

Начните с самого простого.

Измерение по web.dev

Google выпустил web.dev несколько месяцев назад и приобрел хорошую популярность. Тестировать онлайн легко.

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

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

Не тратьте слишком много времени на получение 100. Даже сайты Google не получают этого.

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

Примечание: web.dev эмулирует тест с помощью мобильного устройства, и во время записи я не вижу опции для тестирования с помощью Desktop.

Хром

Знаете ли вы, что Lighthouse доступен в вашем браузере Chrome? И хорошая новость в том, что вы можете выбрать тестирование с помощью Mobile или Desktop. Это доступно в инструментах разработчика.

  • Открыть браузер Chrome
  • Получите доступ к своему сайту для тестирования
  • Откройте Инструменты разработчика (нажмите F12, если используется Windows) или щелкните правой кнопкой мыши страницу и выберите «Проверить».
  • Перейти на вкладку аудита

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

Результаты выглядят и чувствуются от Chome и web.dev почти аналогичны.

Но если вы внимательно посмотрите, здесь есть одна дополнительная группа метрик – Прогрессивное веб-приложение. Так что еще одна причина для аудита с использованием Chrome.

Node.js

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

Установка Маяка на Ubuntu 18.x

Следующее, я проверил на DigitalOcean сервер. Для Lighthouse требуется Node LTS 8.9 или более поздней версии, и я предполагаю, что он уже установлен. Если нет, обратитесь к этому руководству по установке Node.js..

Вам также потребуется браузер хром быть установленным на сервере. Я рассмотрел инструкцию по установке здесь.

Установка Lighthouse проста, как и другие модули.

  • Войдите на ваш сервер
  • Запустите следующую команду для установки

НПМ установить -G маяк

Я использую -g здесь, чтобы он был установлен как глобальный модуль.

[Электронная почта защищена]: ~ # npm установить -g маяк
/ USR / бен / маяк -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ USR / бен / хром отладки -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [Электронная почта защищена] postinstall / usr / lib / node_modules / lighthouse / node_modules / ax-core
> сборка узла / utils / postinstall.js

+ [Электронная почта защищена]
добавил 179 пакетов от 119 участников в 10.094s
[Электронная почта защищена]: ~ #

После установки выполните команду lighthouse, чтобы убедиться, что она установлена ​​правильно.

[Электронная почта защищена]: ~ # маяк
Пожалуйста, укажите URL

Укажите –help для доступных опций
[Электронная почта защищена]: ~ #

Хорошо, маяк готов к проведению аудита. Давайте попробуем несколько вариантов теста.

Чтобы запустить тест с использованием безголового браузера

URL маяка –chrome-flags ="–без головы"

Вы должны предоставить абсолютный URL, включая http или https.

Пример:

[Электронная почта защищена]: ~ $ маяк https://geekflare.com –chrome-flags ="–без головы"
ChromeLauncher Ожидание браузера. + 0ms
ChromeLauncher Ожидание браузера … + 1 мс
ChromeLauncher Ожидание браузера ….. + 511мс
ChromeLauncher Ожидание браузера ….. ✓ + 2ms
статус Подключение к браузеру + 176мс
состояние Сброс состояния с около: пусто + 24 мс
тест состояния машины + 30 мс
Инициализация статуса… + 508мс
статус Загрузка страницы & ждет OnLoad Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, доступность, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots , Hreflang, EmbeddedContent, Canonical, RobotsTxt + 27 мс
Получение статуса на странице: скрипты + 2с
Получение статуса на странице: CSSUsage + 0ms
Статус Восстановление на странице: Viewport + 0ms
получение статуса на странице: ViewportDimensions + 0ms
Восстановление статуса на странице: ThemeColor + 0ms
Восстановление статуса на странице: Манифест + 0мс
Получение статуса на странице: RuntimeExceptions + 0ms
Получение статуса на странице: ChromeConsoleMessages + 0ms
Восстановление статуса на странице: ImageUsage + 0ms
Статус Восстановление на странице: Доступность + 0 мс
Получение статуса на странице: LinkElements + 0ms
Получение статуса на странице: AnchorsWithNoRelNoopener + 1ms
Получение статуса на странице: AppCacheManifest + 0ms
Получение статуса на странице: Doctype + 0ms
Восстановление статуса на странице: DOMStats + 0ms
Получение статуса на странице: JSLibraries + 0ms
Получение статуса на странице: OptimizedImages + 0ms
Получение статуса на странице: PasswordInputsWithPreventedPaste + 0ms
Получение статуса на странице: ResponseCompression + 0ms
Получение статуса на странице: TagsBlockingFirstPaint + 0ms
Статус Восстановление на странице: MetaDescription + 0ms
Получение статуса на странице: FontSize + 0ms
Получение статуса на странице: CrawlableLinks + 0ms
Восстановление статуса на странице: MetaRobots + 0ms
Восстановление статуса на странице: Hreflang + 0ms
Получение статуса на странице: EmbeddedContent + 0ms
Восстановление статуса на странице: Canonical + 0ms
Получение статуса на странице: RobotsTxt + 0ms
Статус Получение трассировки + 1мс
Восстановление статуса devtoolsLog & сетевые записи + 110 мс
Получение статуса: скрипты + 27мс
Получение статуса: CSSUsage + 53ms
Получение статуса: Viewport + 192ms
Получение статуса: ViewportDimensions + 5ms
Получение статуса: ThemeColor + 13ms
Получение статуса: Манифест + 2мс
Получение статуса: RuntimeExceptions + 295ms
Получение статуса: ChromeConsoleMessages + 1ms
Получение статуса: ImageUsage + 2ms
Получение статуса: Доступность + 22мс
Получение статуса: LinkElements + 526ms
Получение статуса: AnchorsWithNoRelNoopener + 10ms
Получение статуса: AppCacheManifest + 6ms
Получение статуса: Doctype + 20ms
Получение статуса: DOMStats + 4ms
Получение статуса: JSLibraries + 50ms
Получение статуса: OptimizedImages + 25ms
Получение статуса: PasswordInputsWithPreventedPaste + 234ms
Получение статуса: ResponseCompression + 3ms
Получение статуса: TagsBlockingFirstPaint + 7ms
Получение статуса: MetaDescription + 6ms
Получение статуса: FontSize + 7ms
Получение статуса: CrawlableLinks + 245ms
Восстановление статуса: MetaRobots + 6ms
Восстановление статуса: Hreflang + 2ms
Получение статуса: EmbeddedContent + 2ms
Получение статуса: Canonical + 3ms
Получение статуса: RobotsTxt + 6ms
состояние Сброс состояния с около: пусто + 19мс
статус Загрузка страницы & ожидание загрузки ServiceWorker, в автономном режиме, StartUrl + 24 мс
Восстановление статуса на странице: ServiceWorker + 59ms
Статус Восстановление на странице: Offline + 0ms
Получение статуса на странице: StartUrl + 1ms
Восстановление статуса devtoolsLog & сетевые записи + 0 мс
Получение статуса: ServiceWorker + 2ms
Получение статуса: Offline + 1ms
Получение статуса: StartUrl + 1ms
состояние Сброс состояния с около: пусто + 5 мс
статус Загрузка страницы & ожидание загрузки HTTPRedirect, HTMLWithoutJavaScript + 48ms
Получение статуса на странице: HTTPRedirect + 260ms
Получение статуса на странице: HTMLWithoutJavaScript + 0ms
Восстановление статуса devtoolsLog & сетевые записи + 0 мс
Получение статуса: HTTPRedirect + 7ms
Получение статуса: HTMLWithoutJavaScript + 12ms
статус Отключение от браузера … + 7мс
анализ состояния и проведение аудита … + 6 мс
Оценка состояния: использует HTTPS + 3 мс
Оценка состояния: перенаправляет HTTP-трафик на HTTPS + 24 мс
Оценка состояния: регистрирует работника службы, который контролирует страницу и start_url + 1ms
Оценка состояния: текущая страница отвечает 200 в автономном режиме + 0 мс
Оценка состояния: имеет тег “ с `width` или` initial-scale` + 1ms
Оценка состояния: Содержит некоторое содержимое, когда JavaScript недоступен + 1 мс
Оценка состояния: первая содержательная краска + 6 мс
Оценка состояния: Первая значимая краска + 54 мс
Оценка состояния: загрузка страницы в мобильных сетях достаточно быстрая + 10 мс
Оценка состояния: Индекс скорости + 33 мс
Оценка состояния: миниатюры скриншотов + 529мс
Оценка состояния: окончательный снимок экрана + 287мс
Оценка состояния: предполагаемая задержка ввода + 2 мс
Оценка состояния: нет ошибок браузера, зарегистрированных на консоли + 16 мс
Оценка состояния: время отклика сервера низкое (TTFB) + 1 мс
Оценка состояния: Первый процессор простаивает + 1 мс
Оценка состояния: Время до Интерактивности + 30 мс
Оценка состояния: пользовательские временные метки и показатели + 0 мс
Оценка состояния: Минимизация критических запросов Глубина + 2 мс
Оценка состояния: Избегайте перенаправления нескольких страниц + 3 мс
Оценка состояния: манифест веб-приложения соответствует требованиям к установке + 2 мс
Оценка состояния: Настроен для пользовательского заставки + 1 мс
Оценка состояния: Устанавливает цвет темы адресной строки + 0 мс
Оценка состояния: содержимое имеет правильный размер для области просмотра + 1 мс
Оценка состояния: отображение изображений с правильным соотношением сторон + 0 мс
Оценка состояния: позволяет избежать устаревших API + 1 мс
Оценка состояния: минимизирует работу основного потока + 0 мс
Оценка состояния: время выполнения JavaScript + 11мс
Оценка состояния: предварительная загрузка ключей + 3 мс
Оценка состояния: предварительно подключиться к требуемым источникам + 2 мс
Оценка состояния: весь текст остается видимым во время загрузки веб-шрифта + 2 мс
Оценка состояния: Сетевые запросы + 1 мс
Оценка состояния: Метрика + 2 мс
Оценка состояния: start_url отвечает 200 в автономном режиме + 1 мс
Оценка состояния: Сайт работает кросс-браузерно + 1мс
Оценка состояния: переходы страниц не чувствуются, как будто они блокируются в сети + 0 мс
Оценка состояния: каждая страница имеет URL + 0 мс
Оценка состояния: атрибуты `[aria – *]` соответствуют их ролям + 1ms
Оценка состояния: у `[role]` есть все обязательные атрибуты `[aria – *]` + 1ms
Оценка состояния: присутствуют элементы с `[role]`, которые требуют определенных потомков `[role]`, + 0ms
Оценка состояния: `[роль]` содержит требуемый родительский элемент + 1ms
Оценка состояния: `[роль]` значения действительны + 1 мс
Оценка состояния: атрибуты `[aria – *]` имеют допустимые значения + 0 мс
Оценка состояния: атрибуты `[aria – *]` действительны и не содержат ошибок + 1ms
Оценка состояния: элементы “ содержат элемент “ с `[kind ="подписи"] `+ 1мс
Оценка состояния: кнопки имеют доступное имя + 1 мс
Оценка состояния: страница содержит заголовок, пропущенную ссылку или область ориентира + 1 мс
Оценка состояния: цвета фона и переднего плана имеют достаточную контрастность + 1 мс
Оценка состояния: “ ‘содержит только правильно упорядоченные группы “ и “, элементы “ или “. + 1мс
Оценка состояния: элементы списка определений заключены в “ elements + 0ms
Оценка состояния: документ имеет элемент “ + 1ms
Оценка состояния: атрибуты `[id]` на странице уникальны + 1ms
Оценка состояния: элементы “ или “ имеют заголовок + 1ms
Оценка состояния: “ элемент имеет атрибут `[lang]` + 0ms
Оценка состояния: “ элемент имеет допустимое значение для своего атрибута `[lang]` + 1ms
Оценка состояния: элементы изображения имеют атрибуты `[alt]` + 1ms
Оценка состояния: “ элементы имеют `[alt]` text + 1ms
Оценка состояния: с элементами формы связаны метки + 0 мс
Оценка состояния: Презентационный

`элементы избегают использования` `,` `или атрибута [summary]. + 1мс
Оценка состояния: ссылки имеют различимое имя + 1мс
Оценка состояния: списки содержат только `
  • `элементы и элементы поддержки скриптов (` `и` `). + 1мс
    Оценка состояния: элементы списка (`
  • `) содержатся внутри`
      `или`
        `родительские элементы + 1мс
        Оценка состояния: документ не использует “ + 0ms
        Оценка состояния: `[user-scalable ="нет"] `не используется в элементе` `, а атрибут` [Maximum-scale] `не менее 5. + 1ms
        Оценка состояния: “ элементы имеют `[alt]` text + 1ms
        Оценка состояния: ни один элемент не имеет значения `[tabindex]` больше 0 + 1 мс
        Оценка состояния: клетки в
  • Элемент `, использующий атрибут` [headers] `, ссылается только на другие ячейки этой же таблицы. + 1мс
    Оценка состояния: “ элементы и элементы с `[role ="ColumnHeader"/"rowheader"] `имеют ячейки данных, которые они описывают. + 0ms
    Оценка состояния: атрибуты `[lang]` имеют допустимое значение + 1 мс
    Оценка состояния: элементы “ содержат элемент “ с `[kind ="подписи"] `+ 1мс
    Оценка состояния: элементы “ содержат элемент “ с `[kind ="описание"] `+ 1мс
    Оценка состояния: `[accesskey]` значения уникальны + 1ms
    Оценка состояния: пользовательские элементы управления имеют ассоциированные метки + 0 мс
    Оценка состояния: пользовательские элементы управления имеют роли ARIA + 1 мс
    Оценка состояния: пользовательский фокус не случайно попал в регион + 0 мс
    Оценка состояния: Интерактивные элементы управления могут фокусироваться на клавиатуре + 0 мс
    Оценка состояния: заголовки не пропускают уровни + 0 мс
    Оценка состояния: Интерактивные элементы указывают свое назначение и состояние + 1 мс
    Оценка состояния: страница имеет логический порядок табуляции + 0 мс
    Оценка состояния: фокус пользователя направлен на добавление нового контента на страницу + 1 мс
    Оценка состояния: закадровый контент скрыт от вспомогательных технологий + 0 мс
    Оценка состояния: элементы ориентира HTML5 используются для улучшения навигации + 0 мс
    Оценка состояния: Визуальный порядок на странице соответствует порядку DOM + 0 мс
    Оценка состояния: использует эффективную политику кэширования для статических активов + 1 мс
    Оценка состояния: позволяет избежать огромных нагрузок на сеть + 3 мс
    Оценка состояния: Отложить закадровые изображения + 1 мс
    Оценка состояния: устранение ресурсов, блокирующих рендеринг, + 12 мс
    Оценка состояния: Minify CSS + 28ms
    Оценка состояния: минимизировать JavaScript + 64ms
    Оценка состояния: отложить неиспользованный CSS + 69 мс
    Оценка состояния: подача изображений в формате следующего поколения + 12 мс
    Оценка состояния: эффективное кодирование изображений + 11 мс
    Оценка состояния: Включить сжатие текста + 6 мс
    Оценка состояния: правильный размер изображения + 6 мс
    Оценка состояния: Используйте видео форматы для анимированного контента + 7 мс
    Оценка состояния: предотвращает кэш приложений + 11 мс
    Оценка состояния: страница имеет тип документа HTML + 0ms
    Оценка состояния: позволяет избежать чрезмерного размера DOM + 1 мс
    Оценка состояния: ссылки на перекрестные пункты назначения безопасны + 2 мс
    Оценка состояния: предотвращает запрос разрешения геолокации при загрузке страницы + 1 мс
    Оценка состояния: избегает `document.write ()` + 0ms
    Оценка состояния: избегает интерфейсных библиотек JavaScript с известными уязвимостями безопасности + 0 мс
    Оценка состояния: обнаружены библиотеки JavaScript + 9 мс
    Оценка состояния: позволяет не запрашивать разрешение на уведомление при загрузке страницы + 1 мс
    Оценка состояния: позволяет пользователям вставлять в поля пароля + 0 мс
    Оценка состояния: использует HTTP / 2 для своих собственных ресурсов + 0 мс
    Оценка состояния: использует пассивных слушателей для улучшения производительности прокрутки + 1 мс
    Оценка состояния: у документа есть мета-описание + 0 мс
    Оценка состояния: страница имеет успешный код состояния HTTP + 1 мс
    Оценка состояния: в документе используются четкие размеры шрифтов + 5 мс
    Оценка состояния: ссылки имеют описательный текст + 1 мс
    Оценка состояния: страница не заблокирована от индексации + 1 мс
    Оценка состояния: robots.txt действителен + 2 мс
    Оценка состояния: Документ имеет действительный `hreflang` + 1ms
    Оценка состояния: документ избегает плагинов + 1 мс
    Оценка состояния: Документ имеет действительное значение `rel = canonical` + 0ms
    Оценка статуса: Страница дружественна для мобильных устройств + 1мс
    Оценка состояния: структурированные данные действительны + 0 мс
    статус Генерация результатов … + 0мс
    ChromeLauncher Killing Chrome экземпляр 7098 + 59мс
    Вывод html на принтер записан в /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    CLI Protip: запустите маяк с `–view`, чтобы сразу открыть отчет HTML в вашем браузере + 1ms

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

    Но что делать, если вам нужно создать отчет в JSON формат?

    Это выполнимо как следующее.

    URL маяка –chrome-flags ="–без головы" –выходной json – выходной путь URL.json

    Используя Lighthouse CLI, вы получаете полный контроль над тем, как хотите. Я настоятельно рекомендую проверить GitHub хранилище узнать больше об использовании CLI или программно.

    Вывод

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map