Первичная производительность интерфейса: используйте Lighthouse для анализа производительности основного сайта Nuggets.

оптимизация производительности

В качестве front-end разработки мы часто обсуждаем анализ производительности, если мы хотим поговорить о том, как оптимизировать производительность, мы всегда можем сказать несколько терминов:

  • Сжать внешние ресурсы
  • Подпакет JavaScript
  • Ленивая загрузка различных внешних ресурсов
  • Оптимизации по ссылке запроса (cache, cdn, http2 и т.д.)

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

Цель этой статьи — понять индикаторы производительности внешнего интерфейса и соответствующие им методы оптимизации с помощью анализа конкретного случая.

Что такое Маяк

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

Lighthouse — это инструмент с такими возможностями Что такое Lighthouse? Вот как он представляет себя:

Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

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

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

Так как же нам использовать такую ​​хорошую вещь?

Использование через Chrome Devtool

Такая полезная вещь уже давно интегрирована в Devtool, и мы можем легко использовать Devtool для анализа производительности веб-сайта.

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

Поэтому Lighthouse также предоставляет метод cli для тестирования интерфейса.

Использование через интерфейс командной строки узла

В настоящее время Lighthouse выпустила пакет npm, и мы можем легко протестировать интерфейс с помощью следующей команды:

$ npm i lighthouse -g
$ lighthouse https://juejin.cn --view

Поскольку это пакет npm, Lighthouse также открыл интерфейс для вторичной разработки для настройки и управления Lighthouse.

Вы можете легко интегрировать Lighthouse в конвейер ci/cd с помощью скрипта:

// 运行代码后，访问/performance会返回掘金主站的性能分析结果
const Koa = require('koa');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results => {
      return chrome.kill().then(() => results.report)
    });
  });
}

app.use(async (ctx, next) => {
  if(ctx.path.match('/performance')) {
    const report = await launchChromeAndRunLighthouse('https://juejin.cn', { output: 'html' });
    ctx.body = report;
    return;
  }
  return next();
});

app.listen(8080)

Использовать через плагин Chrome

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

Использование Lighthouse для анализа производительности главной станции Nuggets

После стольких разговоров мы все же хотим, чтобы весь бой был полезен. Я выбрал Nuggets в качестве подопытного кролика. Давайте посмотрим, как работает домашняя страница Nuggets? Что нужно оптимизировать (моя машина плохая, поэтому оценка будет ниже (:).

Я использую форму node CLI для тестирования производительности здесь, и тест здесь находится на стороне рабочего стола (чтобы мы могли просматривать схему оптимизации через консоль), выполнить$ lighthouse https://juejin.cn --emulated-form-factor desktop --view, здесь мы перехватываем только часть производительности для анализа.

Видно, что показатель производительности основного сайта Nuggets равен 64. Прежде чем обсуждать этот показатель, давайте разберемся с несколькими показателями:

  • First Content Paint: время, когда браузер впервые отрисовывает текст. Этот показатель не имеет значения для веб-приложений, не использующих технологию ssr, потому что время, когда происходит первое отрисовка, обычно происходит до загрузки JS.
  • First Meaningful Paint: время отрисовки осмысленного содержимого браузера, например время отрисовки основной части сообщения в блоге, конкретное значение — это время, когда единица времени отрисовки содержимого увеличивается больше всего.
  • Speed Index: время, когда в браузере появляется визуальный контент (обычно после того, как браузер впервые отправляет инструкцию по рисованию), этот индикатор фиксирует время, когда на странице появляется пиксель.
  • First CPU idle: первое время простоя основного потока, что означает, что взаимодействие пользователя в это время может быть обработано.Например, здесь может появиться первая асинхронная отправка реакции.
  • Time to Interactive: время взаимодействия, этот показатель относится не к самому раннему времени взаимодействия, а к времени плавного взаимодействия.Конкретное значение — это время, когда нет длительного выполнения задачи (задачи более 50 мс) через 5 секунд после FMP.
  • Max Potential First Input Delay: максимальное время отсутствия ответа, с которым может столкнуться пользователь. Конкретное значение — это максимальное время выполнения задачи.

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

Давайте посмотрим на точки оптимизации с менталитетом обучения.

где можно оптимизировать

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

Где Opportunities относится к возможностям оптимизации, а Diagonstics относится к существующим проблемам.

На уровне возможности оптимизации я вижу существительные для многих наших атрибутов:

  • Используйте формат кодирования изображений следующего поколения для использования изображений, который относится к формату webp. Очевидно, что первая картинка не сжата. Я думаю, что это рекламная картинка брошюры. Возможно, она не сжата во время работы и Вы можете рассмотреть возможность поддержки платформы управления.
  • Уменьшите ресурсы, которые блокируют рендеринг, который относится к файлам CSS (после загрузки css загрузка js не будет блокировать рендеринг), вы можете видеть, что размер шрифта небольшой, но загрузка медленная. необходимо оптимизировать время, связанное с сетью, например: поиск DNS, соединение TCP, TTFB.
  • Заранее установите ссылку с источником ресурса, который нужно извлечь, и используйте preconnect, dns-prefetch, dns-prefetch и другие атрибуты в теге ссылки для выполнения операций связи в сети (например: ).
  • Включить сжатие текста относится к текстовым ресурсам, которые должны быть сжаты и переданы, например: gzip
  • Изображения правильного размера относятся к использованию ресурсов изображения соответствующего размера.Например, в iOS система будет выбирать изображения, такие как @2x или @3x, в соответствии с разрешением, которое по-прежнему может поддерживаться на уровне операционной системы (загрузка @ Изображения 3x автоматически генерируют @2x и @1x для изображений)
  • Отложить закадровые изображения относится к ленивой загрузке изображений, которые не находятся в видимой области.

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

решить существующие проблемы

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

Давайте рассмотрим их один за другим и внесем свой вклад, чтобы помочь интерфейсу Nuggets работать сверхурочно (:

  • Убедитесь, что шрифт может отображаться во время загрузки файла шрифта. Многих это может смутить: если в нашем стиле используются сторонние шрифты, браузер будет задерживать отрисовку шрифта до загрузки словаря (Chrome задержит три секунды), если файл шрифта слишком большой, время загрузки слишком велико. long Контент будет пустым с полками и без текста. решение:схема загрузки шрифта, конечно же, у Наггетс здесь используются иконки шрифтов, а слота нет.
  • Минимизируйте задачи основного потока Задачи основного потока намного больше, чем мы себе представляли Мы можем оптимизировать только: выполнение скрипта/парсинг/компиляцию, остальное связано с контентом, который мы хотим вывести, поэтому мы можем ограниченное. Выполнение скрипта занимает больше всего времени и является лучшей оптимизацией, ведь мы часто инициализируем слишком много вещей в записи приложения, чтобы облегчить последующее использование этих ресурсов синхронно.
    • Используйте веб-пакет, чтобы вырезать сценарии инициализации и использовать эти ресурсы сценариев асинхронно.
  • Настройте разумную стратегию кэширования. Основная причина здесь заключается в том, что время кэширования самородков слишком мало. Эта стратегия имеет разные мнения и не будет обсуждаться. В Интернете существует множество конкретных стратегий кэширования.
  • Слишком много DOM приведет к тому, что приложение будет потреблять больше памяти, а потребление производительности компоновкой и перекомпоновкой будет слишком высоким.Эта проблема в основном предотвращается на уровне разработки, таком как проверка кода.

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

Другие способы использования Маяка:web.dev

Слепая зона маяка

На самом деле, Lighthouse — это инструмент тестирования производительности, который не может полностью отражать реальный пользовательский опыт. Когда мы используем Lighthouse, он основан на результатах производительности хост-компьютера. Хотя мы можем ограничить скорость сети, ЦП и т. д., Есть еще разница.

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

Как собирать и анализировать показатели эффективности в реальных условиях? см. следующую статью

Категории