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

Взгляд на веб-производительность 🚄

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

На самом высоком уровне мы можем перечислить несколько, которые уже специфичны для Интернета:

  • Внутренняя работа браузера в качестве хост-платформы
  • Полезные данные
  • Пользовательский интерфейс/пользовательский опыт

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

Маяк

Было бы достаточно щепотки понимания, и вот тут-то и появляется Маяк.

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

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

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

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

На вашем месте я бы сразу изучил категории и возможности, рентабельность инвестиций огромна!

После того, как вы оправитесь от удара, который вы получили от потрясающего инструмента… 🤯

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

В действии!

Маяк в одну линию 🛤

Если конкретная страница или набор страниц, для которых вы хотите запустить Lighthouse, действительны для всех следующих критериев:

– Общедоступный
– Нет различий между известными и анонимными пользователями
– Не требуется предыдущее состояние приложения

Затем вы можете просто использовать lighthouse-cli или использовать Google Pagespeed Insights (который использует Lighthouse для внутреннего использования), и вам не нужно ничего дополнительно.

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

В вашей командной строке давайте создадим новый проект для нашей задачи:

mkdir auto-lighthouse
cd auto-lighthouse
npm init -y

После скаффолдинга проекта следует установка необходимой библиотеки:

npm install lighthouse

Теперь вы можете запустить только с установленным модулем Lighthouse npm:

npx lighthouse https://dev.to

Что произойдет сейчас, так это то, что вы увидите, как экземпляр Google Chrome запускается на вашем компьютере, автоматически переходит к предоставленному URL-адресу, выполняет некоторые магические действия 🧙‍♂️ и, наконец, создает один файл в папке проекта. Сгенерированный файл представляет собой HTML-файл с именем, имеющим следующую структуру:
{SUPPLIED_URL}{DATE}

Идите и откройте этот файл в выбранном вами браузере. У вас есть замечательный отчет, который вы можете распространить в своей команде, чтобы выявить их некомпетентность 🤣

Особый совет. Если вы хотите сохранить файл, но также автоматически открыть отчет в браузере, вы можете запустить команду cli с параметром --view.

** Если вам интересно, почему в вашем отчете поле устройства отображается как Эмулированный Moto G4, вы не единственный, кто запутался. Следите за кроличьими норами здесь 🐰

На шаг впереди специально для вас 👔

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

  • Пользователь должен пройти аутентификацию, чтобы увидеть целевую страницу
  • Должно быть инициализировано некоторое состояние браузера/приложения

Хм…
Мы не можем предварительно запечь состояние в браузере с помощью интерфейса Lighthouse…
Мы не можем безопасно аутентифицировать пользователя без прохождения как минимум действие входа…

Как бы мы поступили в таких случаях? 🤔

Конечно, мы можем использовать наши любимые библиотеки автоматизации браузера Node.js, Puppeteer или Playwright. Используя эти библиотеки, мы могли бы организовать шаги, необходимые для достижения правильного состояния приложения, а затем запустить Lighthouse.

Теперь код 👨‍💻

*Я уверен, что вам не терпится погрузиться в код, и это то, что мы собираемся сделать. Но по мере того, как мы продвигаемся по нему, я постараюсь изо всех сил объяснить, что казалось неясным (по крайней мере, мне) при попытке упростить этот процесс.

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

npm install puppeteer

Затем создайте новый файл с именем index.js со следующим контекстом:

const puppeteer = require("puppeteer");
const lighthouse = require("lighthouse");
(async function(){
  const url = "https://dev.to"; /* Random */
  const PORT = 9222; /* Not arbitrary, the default Lighthouse would look for if not specified in options */
  const browser = await puppeteer.launch({
    args: [`--remote-debugging-port=${PORT}`], /* Expose this so we can use it below */
  });
  const lighthouseOpts = {
    port: PORT,
    disableStorageReset: true /* For the custom steps we will show later */
    logLevel: 'info', /* To observe the good stuff */
  };
  /* Run Lighthouse, using the options specified */
  const lighthouseResult = await lighthouse(url, lighthouseOpts);
  console.log(lighthouseResult.lhr) /* Inspect the "lhr" (lighthouse report) property in the console */
  /* Kill the browser 🔪 */
  await browser.close()
})();

Вероятно, первый вопрос, который приходит вам на ум: Зачем мы используем этотпорт удаленной отладки?

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

Если вы запустите скрипт сейчас, он будет вести себя точно так же, как и версия CLI, но это не приведет к созданию нового HTML-отчета в вашем каталоге, вместо этого он просто зарегистрирует свойство lhr на консоли. .

Добавление пользовательских шагов 🔧

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

const browser = await puppeteer.launch({/*...*/});
/*
 * Additional Web Automation logic
 * await authenticate(browser, ...args);
 * await fillEphemeralStorage(browser, ...args);
 * ...
 */
const lighthouseOpts = { /*...*/ };

Пример функции, которую вы будете использовать:

async function authenticate(browser, signinUrl){
  const page = await browser.newPage();
  await page.goto(signinUrl);
  const emailInput = await page.$("input[type=email]");
  await emailInput.type("[email protected]");
  await page.click("button[id=go]");
  await page.waitForNavigation();
  await page.close();
}

Подобные функции приведут к состоянию, специфичному для потребностей вашего приложения, но помните, что это, вероятно, будет связано с чем-то вроде:

– Учетные данные, сохраненные в браузере (файлы cookie) 🍪
– Состояние локального браузера (IndexedDB, LocalStorage и т. д.) 🏦
– Эфемерные условия, специфичные для приложения 👻

После завершения функций настройки можно вызвать Lighthouse для запуска по целевому URL-адресу.

Важный параметр маяка 🚦

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

Чтобы наша установка не была сброшена Lighthouse, мы передаем параметр

disableStorageReset: true

Теперь наша установка в безопасности!

Обработка отчета 📈

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

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

/* ... */
const { generateReport } = require("lighthouse/lighthouse-core/report/report-generator");
const fs = require("fs");
/* ... */
const { lhr } = await lighthouse(url, lighthouseOpts);
fs.writeFileSync("./report.json", generateReport(lhr, "json") );

Здесь мы продемонстрировали, как можно использовать функцию generateReport для создания нового отчета в формате JSON и помещения его в новый файл с именем report.json в текущем каталог.

*На данный момент функцию generateReport можно использовать для вывода форматов JSON, CSV и HTML.

Если вы пойдете и откроете этот файл, вы увидите множество показателей качества сети. Очень велика вероятность того, что вы не знали, сколько вещей собирает и сообщает Lighthouse 🎉

Запланируйте запуск сценария для всех веб-сайтов, которыми вы управляете, и все готово!

Закрытие 🎗

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

Распространяйте отчет и специализированные идеи внутри своей команды/организации, чтобы способствовать изменениям к лучшему, которые принесут пользу конечному пользователю. В ближайшем будущем мы увидим еще кое-что, связанное с веб-автоматизацией и мониторингом производительности. Увидимся позже!

Кросс-пост из Главной страницы веб-автоматизации