Агрегация данных Resource Timing API для анализа производительности загрузки фронтенда

В стремлении обеспечить исключительный пользовательский опыт, оптимизация производительности фронтенда имеет первостепенное значение. Критически важным аспектом этой оптимизации является понимание того, как ресурсы загружаются на вашем веб-сайте или в приложении. Resource Timing API, часть более широкого набора Performance API, предоставляет детальную информацию о времени загрузки каждого ресурса, запрашиваемого браузером. Эта информация бесценна для выявления узких мест и улучшения общей производительности загрузки. В этом исчерпывающем руководстве мы рассмотрим, как использовать Resource Timing API, агрегировать его данные и применять их для аналитики производительности загрузки.

Понимание Resource Timing API

Resource Timing API предоставляет подробную информацию о времени загрузки ресурсов веб-страницы, таких как изображения, скрипты, таблицы стилей и другие активы. Это включает в себя такие метрики, как:

• Initiator Type: Тип элемента, инициировавшего запрос (например, 'img', 'script', 'link').
• Name: URL-адрес ресурса.
• Start Time: Временная метка, когда браузер начинает запрашивать ресурс.
• Fetch Start: Временная метка непосредственно перед тем, как браузер начинает получать ресурс из дискового кэша или сети.
• Domain Lookup Start/End: Временные метки, указывающие, когда начинается и заканчивается процесс поиска DNS.
• Connect Start/End: Временные метки, указывающие, когда начинается и заканчивается TCP-соединение с сервером.
• Request Start/End: Временные метки, указывающие, когда начинается и заканчивается HTTP-запрос.
• Response Start/End: Временные метки, указывающие, когда начинается и заканчивается HTTP-ответ.
• Transfer Size: Размер переданного ресурса в байтах.
• Encoded Body Size: Размер закодированного (например, сжатого GZIP) тела ресурса.
• Decoded Body Size: Размер декодированного тела ресурса.
• Duration: Общее время, затраченное на получение ресурса (responseEnd - startTime).

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

Доступ к данным Resource Timing

Доступ к Resource Timing API осуществляется через объект performance в JavaScript:

            const resourceTimingEntries = performance.getEntriesByType("resource");

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

Этот фрагмент кода извлекает все записи о времени загрузки ресурсов и выводит в консоль имя и продолжительность каждого ресурса. Обратите внимание, что из соображений безопасности браузеры могут ограничивать уровень детализации, предоставляемый Resource Timing API. Это часто контролируется заголовком timingAllowOrigin, который позволяет междоменным ресурсам раскрывать информацию о времени их загрузки.

Агрегация данных Resource Timing

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

По типу ресурса

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

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

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

По домену

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

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

Этот код вычисляет среднее время загрузки для каждого домена и выводит его в консоль. Если вы заметите, что определенный CDN постоянно работает медленно, возможно, стоит изучить его производительность или перейти к другому провайдеру. Например, рассмотрим сценарий, в котором вы используете и Cloudflare, и Akamai. Эта агрегация позволит вам напрямую сравнить их производительность в вашем конкретном контексте.

По странице

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

Это часто требует интеграции с системой маршрутизации вашего приложения. Вам нужно будет связать каждую запись о времени загрузки ресурса с текущим URL-адресом страницы или маршрутом. Реализация будет зависеть от используемого вами фреймворка (например, React, Angular, Vue.js).

Создание пользовательских метрик

Помимо стандартных метрик, предоставляемых Resource Timing API, вы можете создавать пользовательские метрики для отслеживания конкретных аспектов производительности вашего приложения. Например, вы можете захотеть измерить время, необходимое для загрузки определенного компонента или отрисовки конкретного элемента.

Этого можно достичь с помощью методов performance.mark() и performance.measure():

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

Этот фрагмент кода измеряет время, необходимое для загрузки компонента, и выводит его в консоль. Затем вы можете агрегировать эти пользовательские метрики так же, как и стандартные метрики Resource Timing API.

Анализ данных Resource Timing для получения инсайтов по производительности

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

Длительное время поиска DNS

• Причина: Медленный DNS-сервер, удаленный DNS-сервер, редкие DNS-запросы.
• Решение: Переключиться на более быстрого DNS-провайдера (например, Cloudflare, Google Public DNS), использовать CDN для кэширования DNS-записей ближе к пользователям, реализовать предварительную выборку DNS.
• Пример: Веб-сайт, ориентированный на пользователей по всему миру, испытывал медленную загрузку в определенных регионах. Анализ данных Resource Timing показал длительное время поиска DNS в этих регионах. Переход на CDN с глобальными DNS-серверами значительно сократил время поиска DNS и улучшил общую производительность.

Медленное время соединения

• Причина: Перегрузка сети, проблемы на стороне сервера, помехи от брандмауэра.
• Решение: Оптимизировать серверную инфраструктуру, использовать CDN для распределения контента ближе к пользователям, настроить брандмауэры для эффективной коммуникации.
• Пример: Сайт электронной коммерции испытывал медленное время соединения в часы пик. Анализ данных Resource Timing указал на перегрузку сервера как на основную причину. Обновление серверного оборудования и оптимизация запросов к базе данных улучшили время соединения и предотвратили снижение производительности во время пикового трафика.

Большие размеры передаваемых данных

• Причина: Неоптимизированные изображения, неминимизированный код, ненужные активы.
• Решение: Оптимизировать изображения (например, сжать, изменить размер, использовать современные форматы, такие как WebP), минимизировать код JavaScript и CSS, удалить неиспользуемый код и активы, включить сжатие GZIP или Brotli.
• Пример: Новостной сайт использовал большие, неоптимизированные изображения, которые значительно увеличивали время загрузки страниц. Оптимизация изображений с помощью таких инструментов, как ImageOptim, и реализация отложенной загрузки (lazy loading) уменьшили размеры передаваемых изображений и улучшили производительность загрузки страниц.
• Аспект интернационализации: Убедитесь, что оптимизация изображений учитывает различные размеры экранов и разрешения, распространенные в разных регионах.

Медленное время ответа сервера

• Причина: Неэффективный код на стороне сервера, узкие места в базе данных, задержки в сети.
• Решение: Оптимизировать код на стороне сервера, улучшить производительность базы данных, использовать CDN для кэширования контента ближе к пользователям, реализовать HTTP-кэширование.
• Пример: Платформа социальных сетей испытывала медленное время ответа сервера из-за неэффективных запросов к базе данных. Оптимизация запросов к базе данных и внедрение механизмов кэширования значительно сократили время ответа сервера и улучшили общую производительность.

Ресурсы, блокирующие рендеринг

• Причина: Синхронный JavaScript и CSS, блокирующие отрисовку страницы.
• Решение: Отложить загрузку некритичного JavaScript, встроить критический CSS, использовать асинхронную загрузку для скриптов, удалить неиспользуемый CSS.
• Пример: Блог использовал большой CSS-файл, блокирующий рендеринг, что задерживало начальную отрисовку страницы. Встраивание критического CSS и откладывание загрузки некритического CSS улучшили воспринимаемую производительность веб-сайта.

Интеграция данных Resource Timing в инструменты мониторинга производительности

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

Популярные инструменты мониторинга производительности, поддерживающие данные Resource Timing, включают:

• Google PageSpeed Insights: Предоставляет рекомендации по улучшению скорости страницы на основе различных метрик производительности, включая данные Resource Timing.
• WebPageTest: Позволяет тестировать производительность вашего сайта из разных мест и браузеров, предоставляя подробную информацию о времени загрузки ресурсов.
• New Relic: Предлагает комплексные возможности мониторинга производительности, включая данные о времени загрузки ресурсов в реальном времени и визуализации.
• Datadog: Предоставляет подробные метрики времени загрузки ресурсов наряду с более широким мониторингом инфраструктуры и приложений, предлагая целостное представление о производительности.
• Sentry: В первую очередь ориентированный на отслеживание ошибок, Sentry также предоставляет функции мониторинга производительности, включая данные о времени загрузки ресурсов для сопоставления проблем производительности с конкретными ошибками.
• Lighthouse: Автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Он проводит аудиты производительности, доступности, прогрессивных веб-приложений, SEO и многого другого. Может быть запущен из Chrome DevTools, из командной строки или как модуль Node.

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

Этические соображения и конфиденциальность пользователей

При сборе и анализе данных Resource Timing крайне важно учитывать этические последствия и конфиденциальность пользователей. Будьте прозрачны с пользователями относительно данных, которые вы собираете, и того, как они используются. Убедитесь, что вы соблюдаете соответствующие нормативные акты о конфиденциальности, такие как GDPR и CCPA.

Избегайте сбора персонально идентифицируемой информации (PII) и анонимизируйте или псевдонимизируйте данные, где это возможно. Внедряйте соответствующие меры безопасности для защиты данных от несанкционированного доступа или раскрытия. Рассмотрите возможность предоставления пользователям опции отказа от мониторинга производительности.

Продвинутые техники и будущие тенденции

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

Server Timing API

Server Timing API позволяет серверам предоставлять информацию о времени обработки запроса. Эту информацию можно комбинировать с данными Resource Timing для получения более полной картины сквозной производительности.

Long Tasks API

Long Tasks API выявляет задачи, которые блокируют основной поток на длительное время, вызывая "тормоза" пользовательского интерфейса и проблемы с отзывчивостью. Эту информацию можно использовать для оптимизации кода JavaScript и улучшения пользовательского опыта.

WebAssembly (Wasm)

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

HTTP/3

HTTP/3 — это последняя версия протокола HTTP, которая использует транспортный протокол QUIC для обеспечения улучшенной производительности и надежности. HTTP/3 предлагает несколько преимуществ по сравнению с HTTP/2, включая уменьшенную задержку и улучшенное управление соединениями.

Заключение

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

Практический совет: Начните с реализации базовой агрегации времени загрузки ресурсов по типу и домену. Это даст немедленное представление о том, где находятся ваши узкие места в производительности. Затем интегрируйтесь с инструментом мониторинга производительности, таким как Google PageSpeed Insights или WebPageTest, для автоматизации сбора и анализа данных.