Агрегиране на 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

Суровите данни от 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 за прозрения относно производителността

След като сте агрегирали данните от Resource Timing, можете да ги използвате, за да идентифицирате конкретни области за подобряване на производителността. Ето някои често срещани сценарии и потенциални решения:

Дълго време за DNS търсене

• Причина: Бавен DNS сървър, отдалечен DNS сървър, редки DNS търсения.
• Решение: Преминете към по-бърз DNS доставчик (напр. Cloudflare, Google Public DNS), използвайте CDN за кеширане на DNS записи по-близо до потребителите, внедрете DNS предварително извличане (prefetching).
• Пример: Уебсайт, насочен към потребители в цял свят, изпитва бавно време за зареждане в определени региони. Анализът на данните от 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: Предлага цялостни възможности за мониторинг на производителността, включително данни и визуализации на Resource Timing в реално време.
• Datadog: Предоставя подробни метрики за времето на ресурсите, заедно с по-широк мониторинг на инфраструктурата и приложенията, предлагайки цялостен поглед върху производителността.
• Sentry: Основно фокусиран върху проследяване на грешки, Sentry предоставя и функции за мониторинг на производителността, включително данни от Resource Timing за свързване на проблеми с производителността с конкретни грешки.
• 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 можете да идентифицирате „тесни места“, да подобрите времето за зареждане и да предоставите по-добро потребителско изживяване. Независимо дали сте опитен фронтенд разработчик или тепърва започвате, овладяването на Resource Timing API е от съществено значение за изграждането на високопроизводителни уеб приложения. Прегърнете силата на оптимизацията, задвижвана от данни, и отключете пълния потенциал на вашия уебсайт или приложение. Не забравяйте да приоритизирате поверителността на потребителите и етичните съображения при събирането и анализа на данни за производителността. Като се информирате за най-новите тенденции и техники, можете да гарантирате, че вашият уебсайт ще остане бърз, отзивчив и лесен за използване през следващите години. Използването на тези техники и инструменти ще допринесе за по-производителен и глобално достъпен уеб.

Практически съвет: Започнете с внедряване на основно агрегиране на данни от Resource Timing по тип на ресурса и по домейн. Това предоставя незабавни прозрения за това къде са вашите „тесни места“ в производителността. След това се интегрирайте с инструмент за мониторинг на производителността като Google PageSpeed Insights или WebPageTest, за да автоматизирате събирането и анализа на данни.