Использование Google Lighthouse для повышения производительности приложений


Содержание
  1. Введение
  2. Инструменты для предварительных условий
  3. Что такое Google Lighthouse
  4. Как использовать Google Lighthouse из Chrome DevTools
  5. Шаг 1 — Перейдите на сайт, который вы хотите проверить
  6. Шаг 2 — Откройте Chrome DevTools
  7. Шаг 3 — Выберите категории для аудита
  8. Шаг 4 — Запуск аудита
  9. Шаг 5 — Интерпретация результатов аудита
  10. Лучшие практики
  11. Производительность
  12. Доступность
  13. Прогрессивные веб-приложения
  14. Оптимизация для поисковых систем
  15. Как использовать Google lighthouse Node CLI
  16. Как использовать модуль Google Lighthouse Node
  17. Как использовать расширение для браузера Google Lighthouse Chrome
  18. Шаг 1 — Перейдите на сайт, который вы хотите аудитировать
  19. Шаг 2 — Откройте всплывающее окно расширения
  20. Шаг 3 — Выберите категории для аудита
  21. Шаг 4 — Генерировать отчет
  22. Как использовать Google lighthouse для аудита прогрессивных веб-приложений
  23. Как просмотреть отчет Google Маяк
  24. Как добавить Google lighthouse в рабочий процесс CI
  25. Шаг 1 — Создайте каталог рабочего процесса GitHub Actions
  26. Шаг 2 — Создайте файл рабочего процесса GitHub Actions
  27. Шаг 3 — Внесите изменения в GitHub
  28. Заключение
  29. Создавайте CRUD-приложения на основе React без ограничений

Введение

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

Если он не удовлетворяет вашим потребностям в составе Chrome DevTools, Google lighthouse также легко доступен в виде пакета Node или утилиты командной строки. Вы можете использовать его для аудита веб-сайта на предмет производительности, лучших практик, доступности, прогрессивных веб-приложений (PWA) и поисковой оптимизации (SEO).

В этой статье вы рассмотрите различные способы использования Google Lighthouse. Вы также узнаете, как устранить некоторые проблемы, выявленные при измерении производительности, и использовать Google Lighthouse в рабочем процессе непрерывной интеграции (CI).

Шаги, которые мы рассмотрим:

  • Что такое Google Lighthouse
  • Как использовать Google Lighthouse из Chrome DevTools
  • Как использовать Google Lighthouse Node CLI
  • Как использовать модуль Google Lighthouse Node
  • Как использовать расширение для браузера Google Lighthouse Chrome
  • Как использовать Google lighthouse для аудита прогрессивных веб-приложений
  • Как просмотреть отчет Google lighthouse
  • Как добавить Google lighthouse в рабочий процесс CI

Инструменты для предварительных условий

В зависимости от того, как вы собираетесь использовать Google lighthouse, вам необходимо иметь некоторые или все из следующих инструментов.

  • Node версии 14 или выше. Если вы еще не скачали Node для своей системы, скачайте его.
  • Браузер Chrome. Если вы еще не скачали Chrome для своей системы.

Что такое Google Lighthouse

Google Lighthouse — это инструмент с открытым исходным кодом и лицензией Apache, разработанный и поддерживаемый компанией Google. Он распространяется в основном как часть Chrome DevTools и других браузеров на базе Chromium, таких как Opera, Brave и Edge.

Вы можете использовать его для аудита веб-страницы или расширения браузера в первую очередь на предмет производительности, лучших практик, доступности, PWA и SEO. Он представляет результаты тестирования в процентах и предоставляет практические советы по устранению выявленных проблем в указанных категориях.

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

Как использовать Google Lighthouse из Chrome DevTools

Большинство браузеров на базе Chromium поставляют Google Lighthouse как часть своих DevTools, однако в этой статье мы сосредоточимся на Chrome DevTools. Использование этого инструмента в других браузерах должно быть аналогичным, с небольшими изменениями.

Выполните следующие шаги, чтобы начать использовать Google lighthouse в Chrome DevTools.

Шаг 1 — Перейдите на сайт, который вы хотите проверить

Чтобы использовать Google lighthouse в Chrome DevTools, перейдите на сайт, который вы хотите проверить. Для примера в этой статье мы будем использовать целевую страницу refine.

Шаг 2 — Откройте Chrome DevTools

Вы можете открыть Chrome DevTools, нажав клавишу F12 клавишу. После этого перейдите на вкладку «Маяк».

Шаг 3 — Выберите категории для аудита

Как было указано в разделе «Введение», вы можете использовать Google lighthouse для аудита веб-сайта на предмет производительности, доступности, лучших практик, SEO и PWA. Вы можете выбрать различные категории, которые вы хотите проверить с помощью Google Lighthouse. Если ваш сайт не будет работать как PWA, нет необходимости оставлять категорию PWA отмеченной.

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

Шаг 4 — Запуск аудита

Вы можете нажать кнопку Analyze page load, чтобы начать аудит сайта.

Шаг 5 — Интерпретация результатов аудита

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

Вы можете скопировать и сохранить данные аудита в формате JSON из меню Инструменты.

Как было сказано выше, Google Lighthouse проверяет веб-страницу на производительность, лучшие практики, доступность, SEO и PWA при имитации мобильного устройства или настольного компьютера. Он представляет оценку по каждой категории в процентах. Он не ограничивается объяснением того, почему тест в той или иной категории пройден или не пройден. Давайте рассмотрим эти категории в следующих подразделах.

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

Существуют определенные лучшие практики, которым необходимо следовать при разработке Front-end. Некоторые из них включают добавление doctype к элементу HTML, использование HTTPS, отображение изображений с правильным соотношением сторон и подачу изображений с соответствующим разрешением. Google Lighthouse проверит ваш сайт на соответствие некоторым из этих лучших практик и выделит пройденные и неудачные тесты.

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

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

  • First Contentful Paint — Продолжительность (в секундах), необходимая для отображения первого содержимого DOM после перехода на страницу.
  • Время до интерактивности — Время в секундах, необходимое для того, чтобы страница стала полностью интерактивной.
  • Индекс скорости — показатель в секундах, характеризующий скорость визуального отображения содержимого при загрузке страницы.
  • Общее время блокировки — общее количество времени в миллисекундах, в течение которого страница не способна реагировать на ввод пользователя, например, на щелчки мыши.
  • Largest Contentful Paint — время в секундах, в течение которого браузер закрашивает самый большой текст или изображение.
  • Кумулятивный сдвиг макета — измеряет перемещение видимых элементов в пределах области просмотра.

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

Доступность

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

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

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

Оптимизация для поисковых систем

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

Стоит также отметить, что новые версии Google Lighthouse работают в трех режимах (потоках пользователей). Это режим навигации, режим временного интервала и режим моментального снимка.

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

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

Как использовать Google lighthouse Node CLI

У вас есть возможность запускать Google lighthouse как инструмент командной строки. Инструмент командной строки требует наличия Node версии 14 или выше. Если у вас нет Node, вы можете установить его для своей системы со страницы загрузки Node.

Если вы установили Node, вы можете установить lighthouse из реестра пакетов NPM следующим образом:

# NPM
npm install -g lighthouse

# Yarn
yarn global add lighthouse
Войти в полноэкранный режим Выйти из полноэкранного режима

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

lighthouse <url> <options>
Войти в полноэкранный режим Выйти из полноэкранного режима

Инструмент командной строки Google lighthouse имеет исчерпывающую документацию, доступную с помощью приведенной ниже команды.

lighthouse --help
Войти в полноэкранный режим Выйти из полноэкранного режима

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

lighthouse https://refine.dev/  --output=json --output-path=./report.json --only-categories=accessibility
Вход в полноэкранный режим Выход из полноэкранного режима

Вы можете прочитать документацию для получения дополнительной информации о параметрах, которые можно передавать команде lighthouse.

Как использовать модуль Google Lighthouse Node

Помимо запуска Google Lighthouse как инструмента командной строки, вы также можете запускать его программно как модуль Node. Вам нужно установить Lighthouse, скорее всего, как зависимость разработки из реестра пакетов NPM, как показано ниже:

# NPM

npm i -D lighthouse

# Yarn

yarn add --dev lighthouse
Войти в полноэкранный режим Выйти из полноэкранного режима

Обычно при программном запуске Lighthouse вы запускаете экземпляр Chrome перед запуском Lighthouse, как в примере ниже. Ниже мы запускаем экземпляр Chrome без головы с помощью пакета chrome-launcher. Это инструмент для легкого запуска Google Chrome из Node. Ознакомьтесь с документацией, чтобы узнать, как его использовать. После запуска Lighthouse вы можете сохранить данные аудита в файл и завершить работу экземпляра Chrome.

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

const fs = require("fs");
const chromeLauncher = require("chrome-launcher");
const lighthouse = require("lighthouse");

const launchChromeAndAudit = async (url) => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ["--headless"] });
  const result = await lighthouse(url, {
    output: "json",
    logLevel: "info",
    port: chrome.port,
    onlyCategories: ["accessibility"],
    screenEmulation: { mobile: true },
  });
  fs.writeFileSync(`${Date.now()}-audit-report.json`, result.report);
  chrome.kill();
};

launchChromeAndAudit("https://refine.dev/");
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код проведет аудит целевой страницы refine на доступность и сохранит отчет в файл в формате JSON. После этого вы можете загрузить данные в программу просмотра lighthouse для просмотра в браузере. Опустив поле onlyCategories, вы проведете аудит сайта для всех категорий.

Вы также можете сохранить отчет об аудите в виде HTML-файла, установив значение поля вывода html вместо json, как мы сделали в примере выше. То, что я привел выше, является простым примером. Подробнее о том, как программно запустить Google Lighthouse, читайте в документации.

Как использовать расширение для браузера Google Lighthouse Chrome

Помимо того, что Google Lighthouse входит в состав Chrome DevTools, он также поставляется в виде расширения для браузера. Расширение браузера не позволяет тестировать локальные сайты и аутентифицированные страницы. Поэтому предпочтительнее использовать Google lighthouse из Chrome DevTools, а не расширение для браузера.

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

Шаг 1 — Перейдите на сайт, который вы хотите аудитировать

Как и при использовании Google lighthouse в chrome DevTools, начните с перехода на сайт, который вы хотите проверить. Для данного примера перейдите на целевую страницу Refine.

Шаг 2 — Откройте всплывающее окно расширения

Откройте всплывающее окно расширения Google lighthouse в хроме, щелкнув значок расширения на панели инструментов Chrome.

Шаг 3 — Выберите категории для аудита

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

Шаг 4 — Генерировать отчет

Наконец, нажмите кнопку «Сгенерировать отчет», чтобы создать отчет об аудите. Отчет должен быть похож на тот, который мы получили после запуска Google lighthouse из Chrome DevTools. Вы также можете сохранить данные в формате HTML или JSON.

Как использовать Google lighthouse для аудита прогрессивных веб-приложений

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

Если вы перейдете на целевую страницу refine и с помощью Lighthouse проведете аудит сайта на предмет PWA-функций и лучших практик, вы получите отчет, похожий на изображение ниже. Поскольку refine не является PWA, большинство тестов будут провалены. Google Lighthouse выделит неудачный тест и предоставит ссылку на документацию, объясняющую эту функцию.

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

Как просмотреть отчет Google Маяк

При использовании Google lighthouse через Chrome DevTools или расширение для браузера отчет генерируется и сразу же отображается в браузере. В зависимости от того, как вы используете Google lighthouse, вы также можете сохранить данные о производительности в формате HTML или JSON.

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

Как добавить Google lighthouse в рабочий процесс CI

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

Lighthouse CI работает с такими провайдерами CI, как Circle CI, GitHub actions и Travis CI. Выполните следующие шаги, чтобы узнать, как использовать его с GitHub actions.

Шаг 1 — Создайте каталог рабочего процесса GitHub Actions

Создайте каталог .github/workflow для хранения файлов рабочего процесса GitHub в корне каталога вашего проекта, чтобы начать использовать действия GitHub.

Шаг 2 — Создайте файл рабочего процесса GitHub Actions

Создайте файл рабочего процесса YAML, который будет содержать код для запуска Google lighthouse CI при наступлении определенных событий. Мы будем запускать Google lighthouse CI при возникновении события push или pull_request. Дайте описательное имя файлу YAML. Я назову его lighthouse.yaml.

Скопируйте и вставьте приведенный ниже код в только что созданный YAML-файл. Код запускается всякий раз, когда вы вносите изменения в репозиторий Git или открываете запрос на притяжение. Я беру самый простой случай, когда у вас есть HTML-файл в корне каталога проекта. Вы можете немного изменить файл рабочего процесса, если ваш проект требует шага сборки.

name: Run lighthouse CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Run lighthouse CI
        run: | 
          npm install -g @lhci/cli@0.3.x && lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./

Вход в полноэкранный режим Выход из полноэкранного режима

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

Шаг 3 — Внесите изменения в GitHub

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

GitHub — далеко не единственный поставщик CI. Вы можете использовать Google lighthouse с другими инструментами CI, такими как Circle CI и Travis CI. В документации Google lighthouse CI описаны все поддерживаемые провайдеры CI.

Заключение

Вы можете использовать Google Lighthouse для аудита веб-сайта или приложения на предмет производительности, доступности, лучших практик, SEO и PWA. В зависимости от ваших предпочтений, вы можете использовать Chrome DevTools, как расширение Chrome, инструмент командной строки или модуль Node. Некоторые другие браузеры на базе Chromium, такие как Opera, Edge и Brave, также включают Google Lighthouse в состав своих DevTools.

С другой стороны, стоит отметить, что Google Lighthouse — это всего лишь инструмент. А инструмент хорош лишь настолько, насколько хорош пользователь. Стремление к наивысшим показателям Google Lighthouse похвально, но недостаточно. Одним из ярких примеров того, где маяк Google обычно не справляется, является аудит доступности. Часто бывает, что недоступный сайт имеет идеальный показатель доступности по версии Google lighthouse.

Поэтому вы должны пойти дальше и протестировать свой сайт с реальными пользователями, даже если у вас идеальные показатели доступности Google Lighthouse. В этой статье мы рассмотрели введение в Google Lighthouse. Более подробные руководства можно найти в документации.

Автор: Джозеф Мава


Создавайте CRUD-приложения на основе React без ограничений

Создание CRUD-приложений включает в себя множество повторяющихся задач, отнимающих ваше драгоценное время разработки. Если вы начинаете с нуля, вам также придется внедрять собственные решения для критически важных частей приложения, таких как аутентификация, авторизация, управление состоянием и сетевое взаимодействие.

Ознакомьтесь с refine, если вы заинтересованы в безголовом фреймворке с надежной архитектурой и полным набором лучших отраслевых практик для вашего следующего CRUD-проекта.

refine — это фреймворк на базе React с открытым исходным кодом для создания CRUD-приложений без ограничений.
Он может ускорить время разработки до 3 раз без ущерба для свободы стиля, кастомизации и рабочего процесса проекта.

refine является безголовым по своей конструкции и подключает 30+ бэкенд-сервисов «из коробки», включая пользовательские REST и GraphQL API.

Посетите GitHub-репозиторий refine для получения дополнительной информации, демонстраций, учебников и примеров проектов.

Оцените статью
devanswers.ru
Добавить комментарий