Маленькая деталь, чтобы показать, что вы заботитесь о производительности
Я просматривал веб-сайт Тима Кадлека и заметил, что он показывает время, необходимое для загрузки страницы, в нижнем колонтитуле.
Стоян Стефанов также понял и написал « Эта страница загружается за X секунд », сообщение в блоге, описывающее код, используемый для этого. Стоян также создал закладку, которая показывает предупреждение со временем загрузки текущей страницы. Данные получены из window.performance.
Идея мне понравилась, и я добавил похожий фрагмент, который показывает время загрузки страницы в нижнем колонтитуле на моем сайте (вы должны увидеть это, если прокрутите вниз).
Если ваш браузер поддерживает Paint Timing API, вы увидите несколько дополнительных показателей: First Paint и First Contentful Paint.
Первая отрисовка и первая содержательная отрисовка
Время загрузки страницы - это показатель, который рассказывает нам часть истории. Однако это может не отражать, насколько быстро загружается видимая область. Например, страница с большим количеством изображений будет сообщать о большом времени загрузки страницы, поскольку событие load будет запущено, когда все они будут извлечены, даже если верхний контент может загружаться намного раньше. Это по-прежнему хорошая идея, поскольку заставляет задуматься о ленивой загрузке ресурсов, когда это необходимо.
Я уже писал раньше о воспринимаемой пользователем производительности и показателях, которые показывают, сколько времени требуется для отображения чего-либо на странице. Используя Paint Timing API, мы можем получить метрики First Paint и First Contentful Paint.
Мой фрагмент кода расширяет фрагменты кода Тима и Стояна, чтобы сообщать эти показатели, полученные при выполнении performance.getEntriesByType('paint'):
window.addEventListener('load', () => {
setTimeout(() => {
const t = window.performance && performance.timing;
const round2 = num => Math.round(num * 100) / 100;
if (t) {
const timingStats = document.querySelector('.timing-stats');
const loadTime = (t.loadEventEnd — t.navigationStart) / 1000;
let timingStatsHTML = `This page loaded in ${round2(loadTime)} seconds. `;
const perfEntries = performance.getEntriesByType(‘paint’);
perfEntries.forEach((perfEntry, i, entries) => {
timingStatsHTML += `${perfEntry.name} was ${round2(perfEntry.startTime / 1000)} seconds. `;
});
timingStats.innerHTML = timingStatsHTML;
}
}, 0);
});
В будущем я хотел бы расширить отчетные метрики, включив в них First Meaningful Paint (всякий раз, когда это реализовано, см. Описание эвристики здесь) и Time to Interactive (с использованием GoogleChromeLabs / tti-polyfill) .
Леонардо Зиццамия работает над Perfume.js, библиотекой для измерения этих показателей, аннотирования их на временной шкале инструментов разработки и, при необходимости, сообщения о них в Google Analytics. Он также имеет запасной вариант для браузеров, не поддерживающих Paint Timing API.
Вы можете узнать больше о библиотеке в этих публикациях на Medium:
Если вам интересна эта тема, я также рекомендую вам посмотреть доклад Производительность в Интернете: использование показателей, которые больше всего влияют на взаимодействие с пользователем из Google I / O 17.
Как рассчитать размер перевода
Resource Timing API позволяет узнать размер передаваемых ресурсов, загруженных страницей. Для запросов CORS необходимо включить правильно настроенный timing-allow-origin header, чтобы получить размер передачи. В противном случае они сообщат 0 как размер передачи.
Еще одно предостережение: не существует способа узнать размер передаваемой страницы самой страницы. Можно было вычислить длину innerHTML документа, но это не будет соответствовать размеру передачи, если ответ был сжатым (что, надеюсь, было).
Давайте посмотрим на пример:
Страница, которую я загружаю, обслуживается с jmperezperez.com, делает запросы на получение ресурсов с res.cloudinary.com и www.google-analytics.com, которые являются внешними доменами. После загрузки я запускаю этот код, чтобы вычислить переданный размер:
const totalBytes = performance.getEntriesByType('resource')
.reduce((a, r) => {
return a + r.transferSize;
}, 0);
console.log(`Page size is ${Math.round(totalBytes / 1024)} kB`);
Сообщаемый размер переданного в соответствии с инструментами разработки составляет 113 КБ, а рассчитанный с использованием приведенного выше кода (Resource Timing API) - 107 КБ. И res.cloudinary.com, и www.google-analytics.com устанавливают заголовок timing-allow-origin: * response, что позволяет нам получить правильный размер передачи.
Вы можете узнать больше об использовании Cloudinary Server Timing в их недавнем посте Внутри черного ящика с Server-Timing.
Хотя мы не можем получить точный размер загрузки страницы, использование этих API позволяет нам приблизиться.
Встроенные метрики отчетов и RUM
Эти новые API-интерфейсы браузера позволяют нам получать доступ к метрикам из JavaScript, к которым раньше можно было получить доступ только вручную с помощью инструментов разработчика. Доступ из браузера означает, что мы можем показать их пользователю или сообщить о них в решение Real User Monitoring, чтобы отслеживать и оптимизировать взаимодействие с пользователем.
Отображение этих показателей на наших сайтах - это способ публично заявить о том, что мы серьезно относимся к производительности.
Первоначально опубликовано на jmperezperez.com.
