Браузерные бенчмарки и производительность

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Всем

Браузерные бенчмарки и производительность

Браузерный бенчмарк — это специализированная программа или набор тестов, предназначенных для оценки скорости и эффективности работы веб-браузера при выполнении различных задач.

Производительность браузера складывается из множества компонентов — скорость загрузки страниц, время отклика на действия пользователя, плавность анимаций, эффективность обработки JavaScript-кода, работа с графикой и мультимедиа. Каждый из этих аспектов влияет на итоговый пользовательский опыт.

Современные веб-приложения выполняют сложные вычисления прямо в браузере — обрабатывают изображения, запускают трёхмерную графику, работают с большими объёмами данных, выполняют криптографические операции. Браузер превратился из простого просмотрщика документов в полноценную вычислительную платформу.

Play ITЗагрузка интерактивного демо…

Зачем нужны бенчмарки и как их читать

Бенчмарки решают несколько важных задач в экосистеме веб-технологий.

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

Для разработчиков браузеров бенчмарки служат ориентиром при оптимизации движков. Команды Chrome, Firefox, Safari и других браузеров постоянно соревнуются в производительности, используя бенчмарки как объективный критерий прогресса.

Для веб-разработчиков понимание принципов работы бенчмарков помогает писать более эффективный код. Знание того, какие операции браузер выполняет быстро, а какие медленно, позволяет принимать правильные архитектурные решения.

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

Основные браузерные бенчмарки

JetStream 2

JetStream 2 — это комплексный бенчмарк, измеряющий производительность JavaScript и WebAssembly при выполнении задач, типичных для современных веб-приложений.

JetStream 2 включает тесты из различных источников:

SunSpider (устаревший, но показательный для базовых операций)
Octane (тесты от Google)
ARES-6 (тесты для современных паттернов JavaScript)
WebAssembly-тесты

Бенчмарк оценивает:

Скорость выполнения числовых вычислений
Эффективность работы с объектами и массивами
Производительность при компиляции и выполнении кода
Скорость запуска приложений
Работу с регулярными выражениями
Производительность WebAssembly

Результат выражается единым числом — чем выше, тем лучше. JetStream 2 использует геометрическое среднее для объединения результатов отдельных тестов.

Speedometer 3

Speedometer 3 — бенчмарк, разработанный Apple и Google совместно, измеряет отзывчивость веб-приложений через симуляцию реальных пользовательских сценариев.

Speedometer 3 запускает тестовые приложения, построенные на популярных фреймворках:

React
Vue
Angular
Svelte
Ember
Backbone
Preact
Lit
Vanilla JavaScript

Каждое тестовое приложение выполняет типичные операции — создание элементов списка, редактирование, удаление, фильтрацию. Бенчмарк измеряет время выполнения этих операций.

Особенность Speedometer 3 — фокус на реальных сценариях использования. Вместо синтетических вычислений бенчмарк проверяет, как быстро браузер обрабатывает действия, которые пользователи совершают ежедневно.

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

MotionMark

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

MotionMark включает несколько тестов:

Canvas — рисование геометрических фигур с использованием Canvas API
Leaves — анимация множества элементов с трансформациями
SVG — работа с векторной графикой
Paths — анимация сложных путей
Lines — отрисовка большого количества линий
Design — комбинация различных графических техник
Painter — сложные операции рисования

Бенчмарк нагружает графический конвейер браузера, проверяя эффективность работы с:

Canvas 2D API
SVG
CSS-анимациями и трансформациями
WebGL (в расширенных тестах)

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

WebXPRT 4

WebXPRT 4 — бенчмарк от Principled Technologies, измеряющий производительность браузера при выполнении задач, характерных для продуктивной работы.

WebXPRT 4 включает шесть сценариев:

Photo Enhancement — обработка изображений с применением фильтров
Organize Album — работа с коллекцией фотографий
Stock Option Pricing — финансовые расчёты
Encrypt Notes — шифрование текстовых данных
Graph Data — визуализация данных в виде графиков
Online Homework — работа с математическими формулами

Каждый сценарий использует современные веб-технологии:

Canvas;
WebGL;
Web Workers;
сложные JavaScript-алгоритмы.

Результат выражается общим баллом, который рассчитывается как среднее геометрическое отдельных тестов. WebXPRT 4 показывает, насколько комфортно работать с ресурсоёмкими веб-приложениями.

Kraken

Kraken — бенчмарк от Mozilla, фокусирующийся на производительности JavaScript при выполнении научных и вычислительных задач.

Kraken включает тесты:

AI — алгоритмы искусственного интеллекта
Audio — обработка аудиосигналов
Imaging — работа с изображениями (повороты, фильтры)
JSON — парсинг и сериализация JSON-данных
Stanford — криптографические алгоритмы из Стэнфордского университета

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

Бенчмарк полезен для оценки скорости выполнения математически интенсивных операций, характерных для научных веб-приложений и инструментов анализа данных.

Octane 2

Octane 2 — бенчмарк от Google, долгое время служивший стандартом для измерения производительности JavaScript.

Octane 2 включает 17 тестов:

Box2D — физический движок
CodeLoad — загрузка и компиляция кода
Crypto — криптографические операции
DeltaBlue — решатель ограничений
EarleyBoyer — классические алгоритмы
Gbemu — эмулятор Game Boy
Mandreel — компилятор C++ в JavaScript
NavierStokes — симуляция жидкости
PdfJS — рендеринг PDF-документов
RayTrace — трассировка лучей
RegExp — регулярные выражения
Richards — симулятор планировщика задач
Splay — работа с деревьями
Typescript — компилятор TypeScript
zlib — сжатие данных

Google прекратил поддержку Octane в 2017 году, считая его устаревшим. Тем не менее, Octane 2 остаётся полезным для сравнения производительности старых версий браузеров и понимания эволюции JavaScript-движков.

Что измеряют бенчмарки

JavaScript-движок

JavaScript-движок — компонент браузера, отвечающий за парсинг, компиляцию и выполнение JavaScript-кода.

Основные JavaScript-движки:

V8 (Chrome, Edge, Opera, Node.js)
SpiderMonkey (Firefox)
JavaScriptCore (Safari)
Chakra (устаревший, использовался в Internet Explorer и старых версиях Edge)

JavaScript-движок выполняет несколько этапов обработки кода:

Парсинг — преобразование исходного кода в абстрактное синтаксическое дерево (AST)
Компиляция — преобразование AST в байт-код или машинный код
Оптимизация — улучшение производительности часто выполняемого кода через JIT-компиляцию (Just-In-Time)
Выполнение — запуск скомпилированного кода
Сборка мусора — освобождение памяти от неиспользуемых объектов

Бенчмарки проверяют эффективность каждого этапа. Некоторые тесты фокусируются на скорости парсинга, другие — на производительности оптимизированного кода, третьи — на эффективности сборки мусора.

Работа с DOM

DOM (Document Object Model) — программный интерфейс для работы с HTML-документами, представляющий структуру страницы в виде дерева объектов.

Операции с DOM включают:

Создание элементов
Изменение атрибутов
Добавление и удаление узлов
Перемещение элементов
Чтение свойств
Обработку событий

Работа с DOM — одна из самых ресурсоёмких операций в браузере. Каждое изменение может вызвать пересчёт макета (reflow) и перерисовку (repaint), что требует значительных вычислительных ресурсов.

Бенчмарки оценивают:

Скорость создания элементов
Эффективность пакетных обновлений
Производительность при работе с большими DOM-деревьями
Скорость обработки событий

Графический конвейер

Графический конвейер браузера — последовательность этапов преобразования HTML, CSS и JavaScript в пиксели на экране.

Этапы графического конвейера:

Построение DOM — парсинг HTML
Построение CSSOM — парсинг CSS
Создание Render Tree — объединение DOM и CSSOM
Layout (Reflow) — вычисление геометрии элементов
Paint — отрисовка элементов в слои
Composite — объединение слоёв в финальное изображение

Бенчмарки графической производительности проверяют:

Скорость выполнения layout-операций
Эффективность работы с Canvas и WebGL
Производительность CSS-анимаций
Скорость композитинга слоёв
Использование аппаратного ускорения

WebAssembly

WebAssembly (Wasm) — бинарный формат инструкций для стековой виртуальной машины, позволяющий запускать в браузере код, написанный на языках вроде C++, Rust, Go.

WebAssembly обеспечивает производительность, близкую к нативным приложениям, что делает возможными сложные веб-приложения:

Игры с трёхмерной графикой
Системы автоматизированного проектирования (CAD)
Инструменты редактирования видео и аудио
Научные симуляции
Криптографические системы

Бенчмарки WebAssembly измеряют:

Скорость загрузки и компиляции Wasm-модулей
Производительность выполнения вычислений
Эффективность взаимодействия между JavaScript и WebAssembly
Скорость работы с памятью

Факторы, влияющие на производительность

Аппаратное обеспечение

Производительность браузера напрямую зависит от характеристик устройства.

Процессор определяет скорость выполнения JavaScript-кода, парсинга HTML и CSS, компиляции WebAssembly. Многоядерные процессоры позволяют браузеру распределять задачи между ядрами через Web Workers.

Оперативная память влияет на способность браузера работать с большими объёмами данных, держать открытыми множество вкладок, кэшировать ресурсы. Недостаток памяти приводит к частой сборке мусора и замедлению работы.

Графический ускоритель ускоряет отрисовку Canvas, WebGL, CSS-анимаций, композитинг слоёв. Браузеры используют GPU для аппаратного ускорения графических операций.

Накопитель влияет на скорость загрузки кэшированных ресурсов, работу с IndexedDB, чтение и запись файлов через File System API. SSD-накопители обеспечивают значительно более высокую скорость по сравнению с HDD.

Оптимизации браузера

Браузеры применяют множество техник для повышения производительности.

JIT-компиляция (Just-In-Time) — компиляция JavaScript-кода в машинный код во время выполнения. JIT-компилятор анализирует, какие функции вызываются часто, и оптимизирует их для максимальной скорости.

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

Инлайнинг функций — встраивание кода небольших функций в места их вызова для устранения накладных расходов на вызов функции.

Оптимизация скрытых классов — JavaScript-движки создают внутренние структуры (hidden classes или shapes) для объектов с одинаковой структурой свойств, что ускоряет доступ к свойствам.

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

Влияние расширений

Расширения браузера — дополнительные модули, расширяющие функциональность браузера.

Расширения могут существенно влиять на производительность:

Блокировщики рекламы ускоряют загрузку страниц, предотвращая загрузку рекламных скриптов и баннеров
Менеджеры паролей добавляют задержки при заполнении форм
Расширения для проверки орфографии замедляют ввод текста
Расширения для скриншотов потребляют память для хранения изображений
VPN-расширения увеличивают задержки сети

Количество активных расширений коррелирует с потреблением памяти и временем отклика браузера.

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

Performance API

Performance API — набор интерфейсов JavaScript для точного измерения времени выполнения операций прямо в коде.

// Начало измерения
performance.mark('start-operation');

// Выполнение операции
const data = processData(largeDataset);

// Конец измерения
performance.mark('end-operation');

// Вычисление длительности
performance.measure('operation-duration', 'start-operation', 'end-operation');

// Получение результата
const measure = performance.getEntriesByName('operation-duration')[0];
console.log(`Операция заняла ${measure.duration} миллисекунд`);

Здесь:

performance.mark() — создаёт временную метку с указанным именем
performance.measure() — вычисляет разницу между двумя метками
performance.getEntriesByName() — retrieves записи производительности по имени
measure.duration — длительность в миллисекундах с точностью до микросекунд

PerformanceObserver

PerformanceObserver — интерфейс для наблюдения за записями производительности в реальном времени.

// Создание наблюдателя
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  
  entries.forEach((entry) => {
    console.log(`Тип: ${entry.entryType}`);
    console.log(`Имя: ${entry.name}`);
    console.log(`Длительность: ${entry.duration} мс`);
    console.log(`Начало: ${entry.startTime} мс`);
  });
});

// Подписка на типы записей
observer.observe({
  entryTypes: ['measure', 'resource', 'paint', 'longtask']
});

PerformanceObserver отслеживает:

measure — пользовательские измерения
resource — загрузка ресурсов (изображения, скрипты, стили)
paint — события отрисовки (first-paint, first-contentful-paint)
longtask — длительные задачи, блокирующие основной поток
navigation — метрики навигации по странице

Web Vitals

Web Vitals — набор ключевых метрик, отражающих пользовательский опыт при работе с веб-страницей.

Core Web Vitals включают три метрики:

LCP (Largest Contentful Paint) — время загрузки самого большого видимого элемента. Хорошее значение — до 2.5 секунд.

FID (First Input Delay) — задержка между первым взаимодействием пользователя и откликом браузера. Хорошее значение — до 100 миллисекунд.

CLS (Cumulative Layout Shift) — совокупное смещение макета, измеряющее визуальную стабильность страницы. Хорошее значение — до 0.1.

// Измерение LCP
new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  
  console.log(`LCP: ${lastEntry.startTime} мс`);
  console.log(`Элемент: ${lastEntry.element}`);
  console.log(`Размер: ${lastEntry.size}`);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Измерение FID
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log(`FID: ${delay} мс`);
  }
}).observe({ type: 'first-input', buffered: true });

// Измерение CLS
let clsValue = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log(`CLS: ${clsValue}`);
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

Инструменты Chrome DevTools

Chrome DevTools — встроенные инструменты разработчика в браузерах на основе Chromium. Разбор вкладок, сочетаний клавиш и сценариев отладки — DevTools в браузере — справочник.

Вкладка Performance записывает и анализирует производительность страницы:

CPU activity — загрузка процессора по времени
Network — тайминги сетевых запросов
Screenshots — визуальная хронология загрузки
Main thread — задачи, выполняемые в основном потоке
Frame rate — частота кадров анимаций

Вкладка Lighthouse проводит комплексный аудит страницы:

Performance — оценка производительности
Accessibility — доступность для людей с ограниченными возможностями
Best Practices — следование рекомендуемым практикам
SEO — оптимизация для поисковых систем
PWA — соответствие критериям прогрессивных веб-приложений

Вкладка Memory анализирует использование памяти:

Heap snapshot — снимок объектов в куче JavaScript
Allocation instrumentation — отслеживание выделения памяти
Allocation sampling — выборочный анализ аллокаций

Интерпретация результатов бенчмарков

Понимание чисел

Результаты бенчмарков требуют правильного контекста для интерпретации.

Абсолютные значения сами по себе малоинформативны. Число 150 в JetStream 2 ничего не говорит без сравнения с результатами других браузеров или предыдущими измерениями.

Относительные сравнения показывают, насколько один браузер быстрее другого. Если браузер A набирает 100 баллов, а браузер B — 120 баллов, браузер B на 20% быстрее в данном тесте.

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

Ограничения бенчмарков

Бенчмарки имеют существенные ограничения, которые необходимо учитывать.

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

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

Устаревание — веб-технологии быстро развиваются, и бенчмарки перестают отражать современные паттерны использования. Octane 2, созданный в 2012 году, включает тесты, нерелевантные для современных веб-приложений.

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

Практическое применение

Бенчмарки полезны в конкретных ситуациях.

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

Оценка обновлений — сравнение результатов до и после обновления браузера показывает, улучшилась или ухудшилась производительность.

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

Разработка веб-приложений — понимание сильных и слабых сторон разных браузеров помогает принимать решения о поддержке функциональности и оптимизациях.

Производительность в реальных условиях

Метрики пользовательского опыта

Реальная производительность измеряется через пользовательский опыт, а не через синтетические тесты.

Время до первого байта (TTFB) — время от начала навигации до получения первого байта ответа от сервера. Отражает скорость серверной обработки и сетевые задержки.

First Contentful Paint (FCP) — время до отрисовки первого текстового или графического элемента. Пользователь видит, что страница начала загружаться.

Полный разбор девяти метрик загрузки страницы (RTT, Request Count, Page Size, render-blocking и др.) — в "Метрики производительности веб-страницы".

Time to Interactive (TTI) — время до момента, когда страница становится полностью интерактивной и реагирует на действия пользователя без задержек.

Speed Index — метрика, показывающая, как быстро содержимое страницы визуально заполняет экран. Учитывает прогресс отрисовки, а не только финальное состояние.

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

Веб-разработчики применяют различные техники для ускорения работы приложений.

Ленивая загрузка (Lazy Loading) — отложенная загрузка ресурсов до момента, когда они действительно понадобятся.

// Ленивая загрузка изображений
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

// Ленивая загрузка JavaScript-модулей
const heavyModule = await import('./heavy-module.js');

Code splitting — разделение приложения на чанки (по маршруту или функции), чтобы первая загрузка не тянула весь app.js. Динамический import() — языковой способ запросить чанк в момент действия пользователя; сборщик связывает вызов с отдельным файлом в build. Разбор приёмов и связь с LCP / INP — в оптимизации загрузки и рендеринга.

// React: lazy оборачивает dynamic import — чанк грузится при первом рендере компонента
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Кэширование — хранение ресурсов локально для повторного использования без сетевых запросов.

// Service Worker для кэширования
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
        '/logo.png'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Web Workers — выполнение ресурсоёмких вычислений в фоновых потоках без блокировки основного потока.

// Основной поток
const worker = new Worker('worker.js');

worker.postMessage({ data: largeDataset });

worker.onmessage = (event) => {
  console.log('Результат:', event.data.result);
};

// worker.js (фоновый поток)
self.onmessage = (event) => {
  const result = processData(event.data.data);
  self.postMessage({ result });
};

Сравнение браузеров

Chrome и Chromium-based

Браузеры на основе Chromium (Chrome, Edge, Opera, Brave, Vivaldi) используют движок V8 и Blink.

Сильные стороны:

Высокая производительность JavaScript
Отличная поддержка современных веб-стандартов
Эффективная работа с WebAssembly
Быстрая компиляция и оптимизация кода

V8 применяет агрессивные оптимизации — инлайнинг функций, специализацию типов, скрытые классы, компиляцию в машинный код.

Firefox

Firefox использует движок SpiderMonkey для JavaScript и Gecko для рендеринга.

Особенности:

Эффективная работа с DOM-операциями
Хорошая производительность CSS-анимаций
Сильная поддержка приватности без ущерба производительности
Quantum — проект по распараллеливанию задач между ядрами процессора

SpiderMonkey использует многоуровневую JIT-компиляцию — базовый интерпретатор, Baseline JIT для быстрой компиляции, IonMonkey для агрессивной оптимизации.

Safari

Safari использует JavaScriptCore (JSC) и WebKit.

Характеристики:

Высокая энергоэффективность на устройствах Apple
Оптимизация под аппаратное обеспечение Mac и iOS
Быстрая работа с CSS-анимациями и трансформациями
Эффективное использование памяти

JavaScriptCore применяет технику FTL (Faster Than Light) JIT для генерации высокооптимизированного кода.

Таблица сравнения

Аспект	Chrome	Firefox	Safari
JavaScript-движок	V8	SpiderMonkey	JavaScriptCore
Рендеринг	Blink	Gecko	WebKit
JIT-компиляция	TurboFan	IonMonkey	FTL JIT
WebAssembly	V8 Wasm	Cranelift	Wasm JIT
Аппаратное ускорение	Skia + GPU	WebRender	Core Animation
Оптимизация DOM	Incremental GC	Parallel DOM	Optimized selectors

Будущее браузерных бенчмарков

Эволюция тестов

Бенчмарки продолжают развиваться, отражая изменения в веб-технологиях.

WebGPU — новый графический API, заменяющий WebGL. Бенчмарки начинают включать тесты WebGPU для оценки производительности современных графических приложений.

WebAssembly System Interface (WASI) — стандарт для запуска WebAssembly вне браузера. Появляются бенчмарки, сравнивающие производительность Wasm-приложений в разных средах выполнения.

Искусственный интеллект в браузере — WebNN (Web Neural Network API) позволяет запускать нейросети прямо в браузере. Бенчмарки начинают тестировать производительность ML-моделей.

Персонализированные метрики

Тренд смещается от универсальных бенчмарков к персонализированным измерениям.

Real User Monitoring (RUM) — сбор метрик производительности от реальных пользователей в производственной среде.

// Отправка метрик на сервер аналитики
function sendMetrics() {
  const navigation = performance.getEntriesByType('navigation')[0];
  const paint = performance.getEntriesByType('paint');
  
  const metrics = {
    ttfb: navigation.responseStart,
    fcp: paint.find(p => p.name === 'first-contentful-paint')?.startTime,
    domContentLoaded: navigation.domContentLoadedEventEnd,
    load: navigation.loadEventEnd
  };
  
  navigator.sendBeacon('/analytics', JSON.stringify(metrics));
}

window.addEventListener('pagehide', sendMetrics);

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

Практика: как сравнивать браузеры корректно

Чтобы результаты не были случайными, полезно соблюдать простой протокол:

Закрыть лишние вкладки и фоновые приложения.
Выполнить 3-5 прогонов каждого теста и брать медиану, а не один запуск.
Проводить сравнение на одном и том же профиле питания устройства.
Отдельно фиксировать сетевые условия (Wi-Fi/LTE/кабель), потому что часть метрик чувствительна к сети.
Подкреплять синтетические баллы полевыми данными RUM.

Так бенчмарк становится инструментом принятия решений, а не просто "таблицей очков".

Смежные материалы — Анализ и мониторинг сетевого трафика, Cookie, Дополнительные сетевые технологии.

Мини-кейсы из практики

Кейс 1. Медленный внутренний веб-портал

Симптом: SPA на React "подвисает" при открытии списка заказов. Сервер отвечает быстро, сеть формально исправна.

Что измерили:

Lighthouse: высокий TTI и много long tasks в main thread;
Performance panel: тяжёлый ререндер таблицы на 2 000 строк;
Speedometer на том же железе показал нормальный балл, но реальный UX был плохим.

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

Кейс 2. Выбор браузера для рабочих станций дизайнеров

Нужно было выбрать браузер для веб-CAD и облачного рендера. Сравнивали Chrome, Firefox и Edge на одинаковом ПК:

JetStream 2 — оценка вычислительной части;
MotionMark — графика;
Web Vitals на тестовом стенде заказчика.

Победитель по сумме тестов не совпал с лучшим UX: Edge показал лучший LCP на их стенде из-за интеграции с GPU-драйвером. Решение приняли по RUM + пилоту на 10 пользователях, а не по одному числу в бенчмарке.