Web Performance API: измерение времени для превосходного пользовательского опыта

В современном цифровом мире быстрый и отзывчивый сайт — это уже не роскошь, а необходимость. Пользователи ожидают бесперебойной работы, и даже малейшая задержка может привести к разочарованию, брошенным корзинам и, в конечном итоге, к потере дохода. Web Performance API предоставляют разработчикам инструменты для точного измерения различных аспектов производительности сайта, позволяя выявлять узкие места и оптимизировать пользовательский опыт (UX).

Понимание важности метрик пользовательского опыта

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

• Показателе отказов: Медленное время загрузки часто приводит к тому, что пользователи покидают ваш сайт, не ознакомившись с его содержимым.
• Коэффициенте конверсии: Неудовлетворительный пользовательский опыт может отпугнуть потенциальных клиентов от завершения транзакций.
• Ранжировании в поисковых системах: Поисковые системы, такие как Google, отдают предпочтение сайтам с хорошей производительностью, что влияет на вашу видимость в результатах поиска. Core Web Vitals, которые в значительной степени полагаются на API производительности, являются фактором ранжирования.
• Восприятии бренда: Медленный сайт может создать негативное впечатление о вашем бренде, указывая на недостаток внимания к деталям и плохой пользовательский опыт.

Ключевые Web Performance API и метрики

Существует несколько Web Performance API, каждый из которых предоставляет уникальную информацию о различных аспектах производительности сайта. Вот некоторые из самых важных:

1. Navigation Timing API

Navigation Timing API предоставляет подробную информацию о времени, связанном с загрузкой документа. Он позволяет измерять время, затраченное на различные этапы процесса загрузки, такие как:

• navigationStart: Временная метка непосредственно перед тем, как браузер начинает запрашивать документ.
• fetchStart: Временная метка непосредственно перед тем, как браузер начинает запрашивать документ из сети.
• domainLookupStart: Временная метка непосредственно перед тем, как браузер начинает DNS-поиск для домена документа.
• domainLookupEnd: Временная метка сразу после того, как браузер завершает DNS-поиск.
• connectStart: Временная метка непосредственно перед тем, как браузер начинает устанавливать соединение с сервером.
• connectEnd: Временная метка сразу после того, как браузер завершает установку соединения с сервером.
• requestStart: Временная метка непосредственно перед тем, как браузер отправляет HTTP-запрос на документ.
• responseStart: Временная метка сразу после того, как браузер получает первый байт HTTP-ответа.
• responseEnd: Временная метка сразу после того, как браузер получает весь HTTP-ответ.
• domLoading: Временная метка непосредственно перед тем, как браузер устанавливает document.readyState в "loading".
• domInteractive: Временная метка сразу после того, как браузер разобрал HTML-документ и DOM готов.
• domContentLoadedEventStart: Временная метка непосредственно перед тем, как браузер вызывает событие DOMContentLoaded.
• domContentLoadedEventEnd: Временная метка сразу после того, как браузер вызывает событие DOMContentLoaded.
• domComplete: Временная метка сразу после того, как браузер устанавливает document.readyState в "complete".
• loadEventStart: Временная метка непосредственно перед тем, как браузер вызывает событие load.
• loadEventEnd: Временная метка сразу после того, как браузер вызывает событие load.

Пример: Вычисление времени, затраченного на DNS-запрос:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Resource Timing API

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

Ключевые метрики:

• name: URL ресурса.
• startTime: Временная метка, когда браузер начинает запрашивать ресурс.
• responseEnd: Временная метка, когда браузер получает последний байт ресурса.
• duration: Общее время, затраченное на загрузку ресурса (responseEnd - startTime).
• transferSize: Размер ресурса, переданного по сети.
• encodedBodySize: Размер ресурса до сжатия.
• decodedBodySize: Размер ресурса после распаковки.

Пример: Определение самого большого изображения на странице:

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

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. User Timing API

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

Ключевые методы:

• performance.mark(markName): Создает временную метку с указанным именем.
• performance.measure(measureName, startMark, endMark): Создает измерение производительности между двумя метками.
• performance.getEntriesByType("measure"): Получает все измерения производительности.

Пример: Измерение времени, необходимого для рендеринга сложного компонента React:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Long Tasks API

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

Пример: Логирование длительных задач в консоль:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Paint Timing API

Paint Timing API предоставляет две ключевые метрики, связанные с визуальным рендерингом веб-страницы:

• First Paint (FP): Время, когда браузер отображает первый пиксель на экране.
• First Contentful Paint (FCP): Время, когда браузер отображает первый элемент контента (например, изображение, текст) на экране.

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

Пример: Получение FCP:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) — это одна из метрик Core Web Vitals, которая измеряет время, необходимое для того, чтобы самый большой элемент контента (например, изображение, видео, текстовый блок) стал видимым в области просмотра. Хороший показатель LCP означает, что основное содержимое страницы загружается быстро, обеспечивая лучший пользовательский опыт.

Что оптимизировать для LCP:

• Оптимизация изображений: Используйте подходящие форматы изображений (например, WebP), сжимайте изображения и используйте адаптивные изображения.
• Оптимизация CSS: Минимизируйте и сжимайте CSS-файлы, избегайте CSS, блокирующего рендеринг.
• Оптимизация JavaScript: Откладывайте выполнение некритичного JavaScript и избегайте длительных задач JavaScript.
• Время ответа сервера: Убедитесь, что ваш сервер быстро отвечает на запросы.

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) — это еще одна метрика Core Web Vitals, которая измеряет визуальную стабильность веб-страницы. Она количественно оценивает объем неожиданных сдвигов макета, происходящих в процессе загрузки. Низкий показатель CLS означает, что страница визуально стабильна, что обеспечивает более приятный пользовательский опыт.

Что вызывает сдвиги макета:

• Изображения без указания размеров: Всегда указывайте атрибуты width и height для изображений.
• Реклама, встраиваемые элементы и iframe без зарезервированного места: Резервируйте место для этих элементов, чтобы они не вызывали сдвиги макета.
• Динамически вставляемый контент: Будьте осторожны при динамическом добавлении контента, так как это может вызвать неожиданные сдвиги макета.
• Веб-шрифты, вызывающие FOIT/FOUT: Оптимизируйте загрузку шрифтов, чтобы минимизировать влияние Font-Of-Invisible-Text (FOIT) и Font-Of-Unstyled-Text (FOUT).

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP) — это метрика Core Web Vitals, которая измеряет отзывчивость веб-страницы на взаимодействия пользователя. Она оценивает задержку всех кликов, касаний и нажатий клавиш, которые пользователь совершает во время посещения страницы. INP заменяет First Input Delay (FID) в качестве метрики Core Web Vitals с марта 2024 года.

Улучшение INP:

• Оптимизация выполнения JavaScript: Разбивайте длительные задачи на более мелкие асинхронные части, чтобы не блокировать основной поток.
• Отложенная загрузка некритичного JavaScript: Загружайте только необходимый для начального рендеринга JavaScript, а остальной откладывайте.
• Использование Web Workers: Переносите ресурсоемкие задачи в Web Workers, чтобы они не блокировали основной поток.
• Оптимизация обработчиков событий: Убедитесь, что обработчики событий эффективны и не выполняют ненужных операций.

Практические примеры и фрагменты кода

Вот несколько практических примеров того, как использовать Web Performance API для измерения и оптимизации производительности сайта:

Пример 1: Измерение времени загрузки страницы

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

Пример 2: Выявление медленно загружающихся ресурсов

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

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

Пример 3: Измерение времени до интерактивности (TTI) - Приблизительная оценка

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

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

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

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

• Оптимизация изображений: Сжимайте изображения, используйте подходящие форматы (например, WebP) и адаптивные изображения для сокращения времени их загрузки.
• Минификация и сжатие кода: Минимизируйте и сжимайте файлы HTML, CSS и JavaScript, чтобы уменьшить их размер и ускорить загрузку.
• Использование кэширования в браузере: Настройте ваш сервер на отправку соответствующих заголовков кэширования, чтобы включить кэширование статических ресурсов в браузере.
• Использование сети доставки контента (CDN): Распределяйте контент вашего сайта по нескольким географически распределенным серверам, чтобы уменьшить задержку для пользователей в разных регионах. Популярные провайдеры CDN включают Cloudflare, Akamai и Amazon CloudFront.
• Оптимизация загрузки шрифтов: Используйте `font-display: swap`, чтобы предотвратить блокировку рендеринга шрифтами и улучшить воспринимаемую скорость загрузки вашего сайта.
• Сокращение количества HTTP-запросов: Минимизируйте количество HTTP-запросов, объединяя файлы CSS и JavaScript, встраивая критически важный CSS и используя CSS-спрайты.
• Отложенная загрузка некритичных ресурсов: Откладывайте загрузку некритичных ресурсов, таких как изображения и JavaScript-файлы, на время после начальной загрузки страницы.
• Оптимизация времени ответа сервера: Убедитесь, что ваш сервер быстро отвечает на запросы, оптимизируя серверный код и запросы к базе данных.
• Регулярный мониторинг производительности: Постоянно отслеживайте производительность вашего сайта с помощью Web Performance API и других инструментов мониторинга, чтобы выявлять и устранять любые проблемы. Инструменты, такие как Google PageSpeed Insights, WebPageTest и Lighthouse, могут предоставить ценную информацию.

Инструменты и библиотеки для мониторинга производительности

Существует несколько инструментов и библиотек, которые помогут вам отслеживать и анализировать производительность сайта с помощью Web Performance API:

• Google PageSpeed Insights: Бесплатный инструмент, который анализирует производительность вашего сайта и предоставляет рекомендации по улучшению.
• WebPageTest: Бесплатный инструмент, который позволяет тестировать производительность вашего сайта из разных местоположений и браузеров.
• Lighthouse: Автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Он проводит аудиты производительности, доступности, прогрессивных веб-приложений, SEO и многого другого.
• New Relic: Комплексная платформа для мониторинга производительности, предоставляющая информацию о производительности сайта в реальном времени.
• Datadog: Платформа для мониторинга и аналитики, обеспечивающая видимость всей вашей инфраструктуры, включая производительность сайта.
• Sentry: Платформа для отслеживания ошибок и мониторинга производительности в реальном времени.
• Web Vitals Chrome Extension: Расширение для Chrome, которое отображает метрики Core Web Vitals в реальном времени.

Что следует учитывать для глобальной аудитории

При оптимизации производительности сайта для глобальной аудитории важно учитывать следующие факторы:

• Географическое положение: Используйте CDN для распределения вашего контента по нескольким географически распределенным серверам, уменьшая задержку для пользователей в разных регионах.
• Состояние сети: Оптимизируйте ваш сайт для пользователей с медленным или ненадежным интернет-соединением, используя такие методы, как сжатие изображений, минимизация кода и кэширование в браузере.
• Возможности устройств: Оптимизируйте ваш сайт для различных устройств, включая мобильные телефоны, планшеты и настольные компьютеры, используя адаптивный дизайн и техники адаптивной загрузки.
• Язык и локализация: Убедитесь, что ваш сайт локализован для разных языков и регионов, включая перевод контента и адаптацию макетов для разного направления текста.
• Доступность: Убедитесь, что ваш сайт доступен для пользователей с ограниченными возможностями, следуя рекомендациям по доступности, таким как WCAG.

Заключение

Web Performance API предоставляют бесценные инструменты для измерения и оптимизации производительности сайта. Понимая и используя эти API, разработчики могут выявлять узкие места в производительности, улучшать пользовательский опыт и, в конечном итоге, способствовать успеху бизнеса. Не забывайте уделять первоочередное внимание метрикам Core Web Vitals (LCP, CLS и INP) как ключевым показателям общего состояния сайта и удовлетворенности пользователей. Постоянно отслеживая и оптимизируя производительность вашего сайта, вы можете обеспечить быстрый, отзывчивый и увлекательный опыт для пользователей по всему миру.