Расшифровка веб-производительности нового поколения и показателей качества

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

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

При просмотре недавно опубликованногоChrome 83Когда я добавил еще несколько индикаторов производительности посередине, у меня голова закружилась...

Но не волнуйтесь, эти индикаторы предназначены для того, чтобы привлечь внимание и снизить стоимость понимания. Давайте взглянем на недавно добавленныеCore Web VitalsЧто это такое?

Как измерить качество пользовательского опыта?

Оптимизация качества взаимодействия с пользователем всегда была приоритетом для каждого.WebКритически важно для долгосрочного успеха сайта, есть много аспектов для измерения качества пользовательского опыта. Хотя некоторые аспекты пользовательского опыта должны быть конкретными на сайте и контекстным, на всех сайтах все еще есть общий набор метрикCore Web Vitals, эти показатели включают скорость загрузки, интерактивность и визуальную стабильность содержимого страницы, которые составляют2020ядро годаWebОснова показателей здоровья.

За прошедшие годы Google предоставил множество инструментов :(Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console's Speed Report) для измерения и отчета о производительности. Некоторые разработчики являются экспертами в использовании этих инструментов, в то время как большинство других считают множество инструментов и показателей сложными для изучения и использования.

Веб-разработчики не должны становиться экспертами по производительности, чтобы понимать показатели качества опыта, который они предоставляют своим пользователям.Web VitalsЦелью плана является упрощение сценариев, сокращение расходов на обучение и помогать сайтам сосредоточиться на наиболее важных метриках, а именноCore Web Vitals.

Core Web Vitals

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

Показатели производительности, лежащие в основе веб-страницы, должны меняться со временем. ток2020Годы сосредоточены на трех аспектах пользовательского опыта — загрузке, интерактивности и визуальной стабильности:

  • Largest Contentful Paint (LCP): Измерение опыта загрузки: чтобы обеспечить хорошее взаимодействие с пользователем,LCPдолжен начинаться после первой загрузки страницы2.5происходит за секунды.
  • First Input Delay (FID): измерить интерактивность, чтобы обеспечить хорошее взаимодействие с пользователем,FIDДолжно быть меньше 100 мс.
  • Cumulative Layout Shift (CLS): для измерения визуальной стабильности, чтобы обеспечить хорошее взаимодействие с пользователем, CLS страницы должен быть меньше 0,1.

Ниже мы подробно опишем эти три показателя эффективности:

LCP

Измерение опыта загрузки

мераWebСкорость загрузки основного контента страницы — это момент, на который обращают внимание многие разработчики, и есть много измеримых показателей.

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

Метрики производительности обновлений, ориентированные на пользователя (например,First Contentful Paint（FCP）) Это может только захватить самое начало опыта погрузки. Если страница изначально отображаетloadingАнимация, то на этот показатель трудно обратить внимание.

Позже промышленность стала рекомендовать использование такихFirst Meaningful Paint (FMP)а такжеSpeed Index (SI)(оба доступны наLighthouseметрики производительности, такие как полученные при первом рендеринге), чтобы помочь зафиксировать больше опыта загрузки после начального рендеринга, но эти метрики очень сложны, их трудно интерпретировать и они имеют высокий уровень ложных срабатываний.

Что такое ЛКП

Largest Contentful Paint (LCP)Используется для метрик, сообщающих о времени рендеринга самого большого элемента контента, видимого в области просмотра. Чтобы обеспечить хорошее взаимодействие с пользователем, веб-сайты должны стремиться начать загрузку страниц до2.5в секундах最大内容渲染.

в сравнении сFCP, этот показатель очень ценен, потому что это значение постоянно меняется в зависимости от загрузки страницы, если на странице естьlodaingанимацию, а затем визуализировать определенный контент, то этот индикатор рассчитывает скорость загрузки конкретного контента, а неlodaingСкорость загрузки анимации.

Какие элементы рассматривает LCP

LCPВ настоящее время рассчитываются не все элементы, поскольку это сделало бы метрику очень сложной. Теперь она фокусируется только на следующих элементах:

  • <img>элемент
  • <image>внутри элемента<svg>элемент
  • <video>элемент
  • пройти черезurl()Функция загружает элемент фонового изображения
  • Элементы уровня блока, содержащие текстовые узлы или дочерние элементы других встроенных текстовых элементов.

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

Как рассчитать ЛКП?

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

Площадь элементов изображения рассчитывается немного иначе, потому что это можно сделать с помощьюCSSРасширить или уменьшить отображение картинки, то есть картинка имеет две области: «рендеринговую область» и «реальную площадь». существуетLCPПри расчете площадь прорисовки картинки получит меньшее значение. Например: когда «отображаемая область» меньше, чем «реальная площадь», «отображаемая область» является «отображаемой областью» и наоборот.

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

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

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

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

Улучшить ЛКП

Наиболее распространенными причинами плохого LCP являются:

  • Медленное время отклика сервера
  • блокировка рендерингаJavascriptа такжеCSS
  • Медленная загрузка ресурсов
  • рендеринг на стороне клиента

Поэтому мы рассматриваем улучшение с вышеуказанной точки зренияLCP:

Оптимизировать сервер

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

Для измерения времени отклика сервера есть специальный показатель: время отклика первого байта (TTFB) — это время между начальным сетевым запросом и получением первого байта от сервера, он содержитTCPвремя подключения, отправитьHTTPВремя запроса и время получения первого байта ответного сообщения. Вы можете попробовать несколько удобных оптимизаций нижеTTFB:

  • тайникHTMLАвтономные страницы, кеширование ресурсов страницы, сокращение запросов браузера на ресурсы.
  • Минимизируйте рендеринг, блокирующий ресурсы:CSSа такжеJavaScriptСжатие, слияние, конкатенация, встраивание и многое другое
  • Оптимизируйте изображения.转化图片的格式为JPGилиWEBPд., уменьшите размер изображения, чтобы ускорить запрос.
  • правильноHTMLПереписать, сжать пробелы, удалить комментарии и т. д. уменьшатьHTMLразмер, скорость.
  • использоватьpreconnectУстановите соединение с сервером как можно быстрее, используйтеdns-prefetchкак можно скорееDNSНаходить.
  • использоватьCDNускорить запросы

Оптимизируйте ресурсы, которые блокируют рендеринг

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

Оптимизировать время загрузки ресурсов

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

  • <img>элемент
  • <image>внутри элемента<svg>элемент
  • <video>элемент
  • пройти черезurl()Функция загружает элемент фонового изображения
  • Элементы уровня блока, содержащие текстовые узлы или дочерние элементы других встроенных текстовых элементов.

Для оптимизации можно использовать следующие средства:

  • Оптимизируйте изображения. Формат преобразованного изображенияJPGилиWEBPи так далее, уменьшить размер изображения.
  • Предварительно загрузите важные ресурсы, такие какstyleдобавить тегиrel="preload"Атрибуты
  • использоватьGzipа такжеBrotliСжимайте ресурсы страницы, чтобы сократить время передачи
  • использоватьservice workerресурсы кэша

рендеринг на стороне сервера

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

FID

первое впечатление

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

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

разработчики используютFirst Contentful Paint（FCP）Может измерить первое впечатление о скорости загрузки сайта. Тем не менее, скорость, с которой веб-сайт может отображать пиксели на экране, является лишь частью уравнения, так же важно, насколько важен ваш веб-сайт, когда пользователи пытаются взаимодействовать с этими пикселями!

Что такое ФИД

FID（ First Input Delay）То есть фиксируется время, которое требуется пользователю для первого взаимодействия со страницей.。FIDМетрики влияют на первое впечатление пользователя об интерактивности и отзывчивости страницы. Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы первая задержка ввода была меньше100миллисекунда.

FIDпроизошло вFCPа такжеTTIМежду тем, потому что на данном этапе страница хоть и отобразила часть контента, но еще не полностью интерактивна. На этом этапе взаимодействие между пользователем и страницей часто имеет большую задержку.

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

Например, все следующиеHTMLВсе элементы должны дождаться завершения текущих задач в основном потоке, прежде чем реагировать на взаимодействие с пользователем:

  • Поле ввода текста, флажок и переключатель (<input>，<textarea>)
  • Выберите раскрывающееся меню (<select>)
  • Связь(<a>)

Как улучшить ФИД

Улучшены следующие аспектыFIDВажные показатели:

уменьшатьJavaScriptвремя исполнения

То же, что и вышеLCPМетоды:

  • уменьшить и сжатьJavaScriptдокумент
  • Ленивая загрузка выше сгиба не нужнаJavaScript
  • Свести к минимуму неиспользуемыеpolyfill

Разбивайте трудоемкие задачи

Упомянутая выше задача, требующая больше времени, — это воздействиеFIDВажный индикатор любой блокировки в основном потоке50Участки кода, которые составляют миллисекунды или больше, можно назвать «длинными задачами», и мы можем разделить длительные трудоемкие задачи на более мелкие асинхронные задачи.

Использование веб-воркеров

Блокирование основного потока — одна из основных причин задержки ввода.Web WorkersПозволяет работать на отдельной фоновой резьбе к основной нити выполненияJavaScript, преимуществом которого является выполнение трудоемких задач обработки в отдельном потоке, что позволяет основному (обычно пользовательскому) потоку работать без блокировки. не будетUIПеренос операций в отдельный рабочий поток сокращает время блокировки основного потока, улучшаяFID.

CLS

визуальная стабильность

Вы когда-нибудь посещалиWebЧто случилось со страницей? При чтении статьи слова внезапно двигаются, вы не можете найти позицию, которую читаете, кнопка перемещается в другие места, что вызывает у вас что-то еще?

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

Cumulative Layout Shift (CLS)Вы можете помочь себе в этом, измерив, как часто это происходит с реальными пользователями.

Что такое ЦЛС?

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

Как рассчитать CLS?

оценка смещения макета

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

layout shift score = impact fraction * distance fraction

Оценка воздействия

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

На изображении выше есть элемент, занимающий половину области просмотра в одном кадре. Затем в следующем кадре элемент перемещается вниз на высоту области просмотра.25％. Красный пунктирный прямоугольник представляет объединение видимых областей элементов в двух кадрах, что в данном случае является общим окном просмотра.75％, поэтому его показатель воздействия равен0.75.

оценка расстояния

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

В приведенном выше примере наибольший размер области просмотра — это высота, а нестабильный элемент перемещает высоту области просмотра на25%, что делает оценку расстояния как0.25.

Итак, в этом примере показатель воздействия равен0.75, оценка расстояния0.25, поэтому доля смещения макета равна0.75 * 0.25 = 0.1875.

Как улучшить КЛС?

Не используйте безразмерные элементы

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

В качестве альтернативы используйтеaspect-ratioСоотношение сторон также можно указать заранее:

img {
    aspect-ratio: attr(width) / attr(height);
}

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

<img 
    width="1000" 
    height="1000"
    src="puppy-1000.jpg"
    srcset="puppy-1000.jpg 1000w,
            puppy-2000.jpg 2000w,
            puppy-3000.jpg 3000w"
    alt="ConardLi"
/>
  • Никогда не вставляйте содержимое в верхней части существующего контента, кроме как в ответ на взаимодействие пользователя. Это обеспечивает ожидаемые изменения макета.
  • Предпочитайте анимацию перехода, а не анимацию перехода свойств, которая инициирует изменение макета. Анимируйте переходы таким образом, чтобы обеспечить контекст и непрерывность от одного состояния к другому.

Забронируйте место заранее

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

Будьте осторожны с изменениями шрифта

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

font-display: swapУкажите браузеру использовать системный шрифт для рендеринга по умолчанию и заменить его при загрузке пользовательского шрифта.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/xxx.woff2) format('woff2');
  font-display: swap;
}

Кроме того, вы можете использовать<link rel="preload">Загружайте файлы шрифтов раньше.

Получите основные веб-показатели

Google считает, чтоCore Web VitalsНеобходим для любого веб-опыта. Поэтому он стремится отображать эти индикаторы в своих инструментах, а вот поддержка индикаторов в существующих инструментах:

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

web-vitals

Теперь вы можете использовать стандартныйWeb APIсуществуетJavaScriptизмерить каждую метрику.GoogleпредоставилnpmМешок:web-vitals, эта библиотека предоставляет очень простойAPI, измерение каждой метрики так же просто, как вызов обычной функции:

npm install web-vitals

Каждая функция измерения получаетreportФункция обратного вызова в качестве параметра функция обратного вызова будет запущена после завершения измерения, кроме того, дляLCPа такжеCLSТакие индикаторы постоянно меняются, поэтому их callback-функции могут срабатывать несколько раз, если вы хотите получить значение каждого изменения за этот период, вы можете указать второй параметрreportAllChanges, в противном случае функция обратного вызова сработает только один раз после завершения последнего измерения.

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log, true);
getFID(console.log); // Does not take a `reportAllChanges` param.
getLCP(console.log, true);

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

  • name: название индикатора
  • id: идентификатор локального анализа
  • delta: разница между текущим значением и последним полученным значением

Так что вам нужно только сообщать каждый разdelta(разница между текущим значением и последним полученным значением) без сообщения нового значения. Затем сервер может получить окончательный результат, вычислив сумму соответствующих значений всех id.

import {getCLS, getFID, getLCP} from 'web-vitals';

function logDelta({name, id, delta}) {
  console.log(`${name} matching ID ${id} changed by ${delta}`);
}

getCLS(logDelta, true);
getFID(logDelta);
getLCP(logDelta, true);

вы можете хорошо сочетатьGoogle AnalyticsЧтобы записать показатели отчетности:

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToGoogleAnalytics({name, delta, id}) {
  ga('send', 'event', {
    eventCategory: 'Web Vitals',
    eventAction: name,
    eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
    eventLabel: id,
    nonInteraction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Используйте плагин Chrome

Если вы не хотите рассчитывать в программе, вы также можете использоватьChromeПлагины более удобный способ,GoogleТакже предоставляется новый плагинweb-vitals-extensionчтобы помочь нам получить эти показатели:

Этот плагин очень прост, толькоCLS、FID、LCPЭти три основных показателя могут значительно сфокусировать наше внимание и снизить стоимость понимания.

Цвет значка может сказать вам, преодолела ли страница порог, установленный по умолчанию:

  • Серый: плагин не поддерживается или отключен.
  • Зеленый: пройти все метрики
  • Красный: один или несколько индикаторов не соответствуют стандарту.

Ссылаться на

резюме

Наконец, хотите использовать вышеуказанные инструменты и индикаторы в своем браузере? обновить быстроChrome 83версия, большеChrome 83Обновления кода можно нажатьВыпущен Chrome 83, поддерживающий прямое чтение и запись локальных файлов! Новая междоменная политика!Проверить.

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

Если вы хотите читать больше качественных статей, вы можете подписаться на меняблог на гитхабе, твоя звезда✨, лайки и внимание - движущая сила моего постоянного творчества!

Рекомендую обратить внимание на мой паблик WeChat [code secret garden], каждый день выкладывать качественные статьи, будем общаться и расти вместе.

Мы являемся научно-исследовательской командой ByteDance Interactive Entertainment, включая Douyin Short Video, Douyin Volcano, TikTok, Faceu, Qingyan, Jianying и т. д. По состоянию на январь 2020 года Douyin Daily Active (DAU) превысил 400 миллионов человек и продолжает поддерживать быстрый рост. . Вы будете поддерживать разработку продуктов и связанные с ними архитектурные работы, где каждая строка кода может повлиять на сотни миллионов пользователей.

Код набора в школу 2021:DRZUM5Z

Официальный сайт доставки:job.toutiao.com/s/JR8SthH

Категории