предисловие
В последнее время работаю инструментом для тестирования производительности, и многие моменты знаний неясны, планирую проверить недостатки и восполнить их.
Далее из официально предоставленного Performance Tools Lighthouse (Маяка) мы узнаем некоторые моменты от Lighthouse.
Прочитав эту статью, вы сможете узнать
- Что такое Маяк.
- Как быстро начать работу с Lighthouse (Начало работы).
- Некоторые метрики в Lighthouse.
Резюме, связанные с производительностью, подготовлены для составления карты разума, вы можетекликните сюда:
Что такое Маяк
Официальная интерпретация этого:
Lighthouseэто инструмент автоматизации с открытым исходным кодом для улучшения качества веб-приложений. Вы можете запустить его как расширение Chrome или из командной строки. Вы даете Lighthouse URL-адрес, который хотите проверить, и он запускает серию тестов для страницы, а затем создает отчет о производительности страницы.
Как это работает?
Если вы, как и я, пролистал его код, вы, должно быть, очень запутались после прочтения его введения.Его зависимости кода следующие:
Желающие могут заглянуть в его репозиторий, ссылка дана.
Начиная
Есть два способа запустить Lighthouse: как расширение Chrome или как инструмент командной строки. Расширение Chrome предоставляет более удобный интерфейс для удобного чтения отчетов. Инструмент командной строки позволяет интегрировать Lighthouse в систему непрерывной интеграции.
Расширение Chrome
Загрузите Google Chrome 52 или более позднюю версию.
УстановитьРасширение Маяк для Chrome.
нажмитеGenerate reportкнопку, чтобы запустить тест Lighthouse для текущей открытой страницы.
инструмент командной строки
Node CLI обеспечивает наибольшую гибкость в настройке операций Lighthouse и составлении отчетов. Если пользователям нужны более продвинутые функции или они хотят автоматизировать Lighthouse, они могут использовать Node CLI. Установите Lighthouse в качестве модуля глобального узла.
Установить:
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
Запустите проверку Lighthouse на странице.
lighthouse https://www.example.com --view
передача--helpфлаг, чтобы увидеть доступные параметры ввода и вывода.
lighthouse --help
Для некоторых неясных вариантов вы можете нажать на эту ссылку:
Допустим, просмотрим, будет такой результат:
Всего вы можете увидеть 6 метрик, а Lighthouse 6.0 представляет в отчете три новых метрики. Две новые метрики — Максимальная отрисовка содержимого (LCP) и Совокупное смещение макета (CLS) — являются лабораторными реализациями Core Web Vitals.
Итак, теперь давайте посмотрим на значение этих индикаторов Metrics.
Несколько индикаторов метрик
First Contentful Paint (FCP)
Метрика First Rich Paint (FCP) измеряет время с момента начала загрузки страницы до момента отображения какой-либо части содержимого страницы на экране. Для этой метрики «контент» относится к тексту, изображениям (включая фоновые изображения), элементам или небелым элементам.
На приведенной выше временной шкале загрузки FCP происходит во втором кадре, как и первые элементы текста и изображения, отображаемые на экране.
Вы заметите, что хотя некоторое содержимое отображается, не все содержимое отображается. Это важное различие между First Contentful Paint (FCP) и Largest Contentful Paint (LCP) — цель LCP — определить, когда основное содержимое страницы закончилось.
Зная концепцию, как измерить FCP, мы можем связаться сField toolsа такжеLab tools
Чтобы измерить FCP в JavaScript, вы можете использовать Paint Timing API. В следующем примере показано, как создать PerformanceObserver, который прослушивает запись рисования с именем first-contentful-paint и регистрирует ее на консоли.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
Speed Index
Индекс скорости — это один из шести показателей, отслеживаемых в разделе «Производительность» отчета Lighthouse. Каждая метрика отражает некоторый аспект скорости загрузки страницы.
Так как же это обнаружить?
Индекс скорости измеряет, насколько быстро контент визуально отображается во время загрузки страницы. Сначала Lighthouse снимает видео загрузки страницы в браузере и вычисляет визуальный прогресс между кадрами. Затем Lighthouse использует модуль Speedline Node.js для создания индекса скорости.
Что касается конкретного расчета, вы можете обратиться к коду в GitHub, который здесь не будет расширяться.
Так есть ли шанс, что мы сможем улучшить его производительность?
Воспользуйтесь преимуществами "Opportunities", чтобы определить, какие улучшения наиболее ценны для вашей страницы. Чем важнее возможность, тем больше влияние на показатель производительности. Например, приведенный ниже снимок экрана Lighthouse показывает, что устранение ресурсов, блокирующих отображение, приведет к наибольшему улучшению.
Largest Contentful Paint (LCP)
Метрика Largest Content Paint (LCP) сообщает о времени рендеринга самого большого блока изображения или текста, видимого в области просмотра, по отношению к тому моменту, когда страница впервые начала загружаться.
Из рисунка также видно, что для обеспечения хорошего взаимодействия с пользователем веб-сайт должен стремиться к тому, чтобы максимальный размер кадра контента составлял 2,5 секунды или меньше.
Для получения дополнительной информации посмотрите подробный анализ LCP Пола Айриша.
Cumulative Layout Shift (CLS)
Официальное объяснение этому:
Кумулятивное смещение макета (CLS) — это мера визуальной стабильности, которая количественно определяет, насколько содержимое страницы перемещается визуально. Он количественно определяет, насколько содержимое страницы визуально перемещается.
Простое понимание:
CLS измеряет сумму всех индивидуальных оценок перехода макета для каждого неожиданного перехода макета, который происходит на протяжении всей жизни страницы.
Смещение макета происходит каждый раз, когда видимый элемент меняет свое положение от одного кадра рендеринга к другому. См. ниже, как рассчитываются оценки смещения отдельных макетов).
На приведенном выше графике низкий показатель CLS является сигналом для разработчиков о том, что их пользователи не сталкиваются с ненужным движением контента; показатель CLS ниже 0,10 считается «хорошим».
Total Blocking Time (TBT)
Давайте посмотрим на официальную интерпретацию этого:
Общее время блокировки (TBT) количественно определяет реакцию на нагрузку, измеряя общее время, в течение которого основной поток блокируется достаточно долго, чтобы заблокировать входные ответы. TBT измеряет общее время между первым окрашиванием контента (FCP) и время до взаимодействия (TTI). Это дополнительная метрика для TTI, и она вносит больше нюансов в количественную оценку активности основного потока, которая мешает пользователям взаимодействовать с вашей страницей.
Кроме того, TBT имеет хорошую корреляцию с задержкой первого ввода (FID), полевым индикатором жизнеспособности базовой сети.
Нужно больше понимания, вы можете обратиться к ссылке:
последние критерии оценки
Оценка производительности в Lighthouse рассчитывается на основе взвешенной комбинации нескольких показателей, суммирующих скорость страницы. Формула оценки производительности для 6.0 выглядит следующим образом.
| Phase | Metric Name | Metric Weight |
|---|---|---|
| Early (15%) | First Contentful Paint (FCP) | 15% |
| Mid (40%) | Speed Index (SI) | 15% |
| Largest Contentful Paint (LCP) | 25% | |
| Late (15%) | Time To Interactive (TTI) | 15% |
| Main Thread (25%) | Total Blocking Time (TBT) | 25% |
| Predictability (5%) | Cumulative Layout Shift (CLS) | 5% |
Так будете ли вы, как я, в сомнениях, мы не можем изменить этот вес, вы, конечно, можете попробовать:
Если щелкнуть ссылку выше, отобразится этот экран:
Этот сайт публикует калькулятор оценки, который поможет вам понять оценки производительности. В то же время калькулятор также может предоставить вам сравнение оценок Lighthouse версии 5 и 6. Когда вы проводите аудит с помощью Lighthouse версии 6.0, в отчете будет ссылка, которая ссылается на инструмент расчета и заполняет его результатами.
наконец
Вот, собственно, как пользоваться Lighthouse, а также разъяснены некоторые ключевые индикаторы, у вас должны возникнуть вопросы:
- Как рассчитать их конкретное значение, есть соответствующий JavaScript API?
- Теперь, когда Lighthouse можно использовать для измерения производительности и поиска возможностей для ускорения загрузки страниц, как мы можем оптимизировать?
Вы, должно быть, видели те же сомнения, что и раньше, так как их решить.
Ну, упомянутые выше части не были подробно раскрыты, по остальным частям попробуйте полистать официальные документы и проверить информацию, и выигрыш должен быть большим.
Начало работы, очень простое, никаких сложностей, продолжу разбираться в дальнейшем, ментальная карта находится вздесь:
Я TianTianUp, увидимся в следующем выпуске! ! !
Ссылаться на
[1] Lighthouse performance scoring: Web.Разработка/производительность…
[2] GoogleChrome-lighthouse: GitHub.com/Google CHROM…
[3] What's New in Lighthouse 6.0: Web.Dev/маяк-…
[4] Measure: web.dev/measure/
[5] How does Lighthouse work?: GitHub.com/Google CHROM…
[6] Largest Contentful Paint (LCP): web.dev/lcp/
[7] Total Blocking Time (TBT): web.dev/tbt/
[8] Cumulative Layout Shift (CLS): web.dev/cls/
[9] First Contentful Paint (FCP): web.dev/fcp/
[10] Speed Index: Web.Dev/индекс скорости…