Браузер. Рендеринг. Производительность

Второй год я помогаю с поиском спикеров на CodeFest — крупнейшая конференция за Уралом. В прошлом году у нас выступал Сергей Ufocoder — автор канала @ufostation — с докладом "Браузер. Рендеринг. Производительность".

В докладе рассказывается о производительности рендеринга в Chromium с точки зрения архитектуры браузера. Подробно объясняется работа пайплайна рендеринга на примере about://tracing и профилировки страниц с помощью вкладки Performance в DevTools. Рассматриваются несколько случаев оптимизации производительности с объяснением, почему это работает именно так. При подготовке доклада Сергей консультировался с официальной документацией Chromium и с разработчиками браузера.

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

#performance #chromium #internals #talks

https://www.youtube.com/watch?v=tbDxm1hiEI4

Ускорение отрисовки комментарии Хабра

Станислав Лашманов поделился опытом ускорения отрисовки комментариев в web-версии Хабра — "Как мы ускоряли комментарии Хабра".

Фронтенд Хабра — это SPA-приложение, написанное на Vue.js. Самой большой проблемой после переписывания фронта Хабра стала производительность комментариев. Страницы с большим количеством комментариев рендерились медленно, а на слабых устройствах им не хватало памяти.

Для решения этой проблемы ребята реализовали стриминг. Благодаря ему комментарии рендерятся на сервере и по мере готовности передаются на клиент. Клиенту больше не приходится ждать загрузки всех комментариев. Однако с добавлением стриминга возникли другие проблемы: перестали работать якорные ссылки, надо было реализовывать восстановление скролла после перезагрузки страницы, были проблемы с переходами по истории. Все проблемы удалось решить.

Респект ребятам за то, что смогли дотащить эту фичу, но работы у них ещё осталось много. Хабр сейчас работает гораздо медленнее по сравнению со старой версией — оценка производительности в Lighthouse 25 баллов из 100. С точки зрения обычного пользователя кажется, что переход на SPA был не самой хорошей идеей.

#performance #spa #vue

https://habr.com/ru/company/habr/blog/590111/

Улучшилась ли скорость веба благодаря Web Vitals?

Барри Поллард опубликовал исследование влияния метрик Web Vitals на производительность веба в целом — "Have Core Web Vitals made the web faster?".

Внедрение метрик Core Web Vitals (CWV) по данным Google дало положительный эффект. По сравнению с прошлым годом количество сайтов, удовлетворяющих CWV, увеличилось более чем на 20%. Однако Барри пишет о том, что сложно судить о динамике изменения метрик, если их определения за последний год претерпели значительные изменения. Именно это произошло с метриками LCP и CLS.

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

Барри пишет про то, что ответ на вопрос про улучшение производительности веба лежит где-то посередине. Нельзя сказать, что благодаря CWV скорость веба улучшилась. Но введение CWV заставило владельцев крупных сайтов инвестировать ресурсы в улучшение производительности. Также крупные игроки (Wordpress, Wix) стали более серьёзно стали относиться к производительности благодаря добавлению показаний метрик CWV в алгоритм ранжирования поиска Google.

#performance #research

https://calendar.perfplanet.com/2021/have-core-web-vitals-made-the-web-faster/

Тюнинг производительности Next.js-приложений

Бен Шварц поделился рекомендациями по улучшению производительности Next.js-приложений — "Next.js Performance: Making a Fast Framework Even Faster".

Для загрузки сторонних скриптов рекомендуется использовать компонент next/script со стратегией lazyOnload, чтобы код начинал грузиться тогда, когда завершается загрузка основного кода приложения. Для вставки изображений рекомендуется использовать компонент next/image. Он берёт на себя конвертацию изображений, генерацию плейсхолдеров и поддержку ленивой загрузки. Для уменьшения размера основного бандла приложения можно использовать динамическую загрузку кода с помощью import(). Для динамической загрузки React-компонентов — хелпер next/dynamic.

Полезная статья. Рекомендую почитать, если работаете с Next.js.

#jsframeworks #performance #react

https://calibreapp.com/blog/nextjs-performance

Новые метрики для измерения отзывчивости сайтов

Разработчики Chrome уже более полугода работают над добавлением новых метрик, отвечающих за измерение отзывчивости сайтов. Хонгбо Санг рассказывает, как их можно подсчитать — "Hands On with the new Responsiveness Metrics".

В Core Web Vitals за отзывчивость страницы отвечает метрика First Input Delay. FID показывает величину задержки между пользовательским событием и временем, когда это событие начинает обрабатываться. У этой метрики много ограничений: оно показывает время задержки только первого события, оно не включает в себя время обработки события, с её помощью нельзя понять, лагает ли страница.

В новых экспериментальных метриках измеряется время обработки взаимодействий пользователя (interactions) на протяжении всей жизни страницы. Взаимодействие — это комбинация логически связанных DOM-событий. Например, для нажатия кнопки на клавиатуре такими событиями будут keydown, keypress и keyup.

На данный момент ещё нет окончательного списка метрик отзывчивости, так как у разных вариантов есть свои плюсы и минусы. В статье есть ссылка на код, который можно запустить в DevTools, чтобы получить все метрики, которые находятся на рассмотрении. Также есть экспериментальный плагин для Lighthouse для получения этих метрик.

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

#performance #metrics

https://calendar.perfplanet.com/2021/hands-on-with-the-new-responsiveness-metrics/

Важность тестирования сайтов на слабых устройствах

Эрик Бейли призывает тестировать сайты на слабых устройствах — "Test Your Product on a Crappy Laptop".

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

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

У меня есть небольшая история на эту тему. Как-то мне пришлось работать на слабом ноуте, благодаря этому я нашёл редкую проблему с перформансом в React DevTools. Если бы работал на мощном ноуте, то проблема осталась бы незамеченной.

#performance #mobile

https://css-tricks.com/test-your-product-on-a-crappy-laptop/

Возможно, вам не нужен Rust и WASM, если у вас есть JavaScript

Увидел в канале @ufostation ссылку на статью Вячеслава Егорова про анализ проблем производительности библиотеки source-map — "Maybe you don't need Rust and WASM to speed up your JS".

Авторы source-map переписали основную логику библиотеки на Rust и WebAssembly, чтобы улучшить производительность. Егор решил проверить оригинальный код на предмет возможных оптимизаций. Там были найдены и исправлены проблемы, связанные с неоптимальной сортировкой, была уменьшена нагрузка на сборщик мусора заменой большого числа объектов типизированным массивом с ссылками на нужные данные, была испралвена проблема с деоптимизацией кода, связанной с передачей двух аргументов в функцию, которая ожидает на вход три аргумента.

В результате всех оптимизаций JavaScript-код стал уступать по скорости Rust и WebAssembly всего лишь на 15%.

Крутая статья. Рекомендую почитать всем.

#performance #js #internals #webassembly #rust

https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
https://habr.com/ru/post/350018/ (перевод на русский)

Анализ производительности HTTP/3

В блоге requestmetrics была опубликована статья, посвящённая анализу производительности HTTP/3 — "HTTP/3 is Fast".

HTTP/3 — это новая версия протокола HTTP, работающая поверх транспортного протокола QUIC. Более подробно про HTTP/3 можно почитать в публикации HTTP/3: the past, the present, and the future.

В этой же статье проверялась скорость загрузки трёх видов сайтов: простой сайт, тяжёлый сайт, SPA. Ресурсы загружались с трёх разных серверов в Нью-Йорке, Лондоне и Бангалоре. Чем больше было расстоянее, тем лучше всего показывал себя HTTP/3. Если для передачи данных между Миннесотой и Нью-Йорком выйгрыш скорости состоавил более 200 мс, то для соединения между Миннесотой и Бангалором выйгрыш был уже 3-4 секунды. Такой значительный разрыв в скорости загрузки объясняется тем, что в HTTP/3 решена проблема с “head-of-line blocking” — блокировкой передачи данных из-за потери пакетов.

#http #performance #benchmark

https://requestmetrics.com/web-performance/http3-is-fast

Self-Profiling API на практике

Ник Джансма написал статью про новое экспериментальное API для профилировки производительности сайтов на устройствах пользователей — "JS Self-Profiling API In Practice".

Self-Profiling API предоставляет программный доступ к семплирующему профилировщику для получения детальной информации о выполнении JavaScript-кода у пользователей сайта. API можно использовать как для анализа производительности кода сайта, так и для анализа производительности скриптов внешних сервисов. Проанализировать выполнение кода можно на любом этапе жизни страницы. Доступ к Self-Profiling API включается с помощью HTTP-заголовка Document-Policy: js-profiling. Оно оказывает минимальный эффект на производительность сайта у пользователей.

Несмотря на экспериментальный статус Facebook и Microsoft уже начали использовать Self-Profiling API в своих сервисах для поиска проблем производительности.

На данный момент поддержка Self-Profiling API есть только в Chrome версии 94 и выше.

#performance #api

https://calendar.perfplanet.com/2021/js-self-profiling-api-in-practice/

Мониторинг производительности веб-компонентов. Кассондра Робертс объясняет, как User Timing API позволяет замерять этапы жизненного цикла, вычислять время апгрейда и понимать поведение компонентов на реальных устройствах. Подход с базовыми классами, миксины, аналитика и самые важные метрики, влияющих на пользователей. #performance #webcomponents

https://allons-y.llc/posts/2025-11-23/

Ускорение загрузки CSS с помощью словарей сжатия. Йоав Вейс объясняет, как использование словарей сжатия делает загрузку CSS почти мгновенной, сочетая подходы critical и full CSS. Метод снижает трафик и ускоряет переходы между страницами. Поддерживается в Chromium и имеет плавный откат. #performance #css

https://calendar.perfplanet.com/2025/how-to-load-css-fast/

Улучшение перфоманса с URL-параметрами. Барри Поллард объясняет, как ненужные параметры, такие как UTM-метки, создают дубликаты страниц и мешают кэшированию. Новый HTTP-заголовок No-Vary-Search позволяет указывать, какие параметры можно игнорировать, улучшая производительность и снижая нагрузку на сервер. Поддержка пока есть только в Chrome 141. #performance #http

https://calendar.perfplanet.com/2025/fixing-the-url-params-performance-penalty/

Отладка веб-перфоманса с Chrome DevTools. Жоан Леон показывает, как искать тяжелые ресурсы и слабое кеширование в Network, сравнивать локальные метрики с CrUX и разбирать LCP, CLS и INP в Performance Insights и трассировках. А также снипеты, content-visibility и оптимизация видео через HandBrake бонусом. #performance #devtools #chrome

https://calendar.perfplanet.com/2025/chrome-devtools-for-debugging-web-performance/

Расследование размера бандла. Надя Макаревич пошагово проходит анализ сборки в Vite, находит как wildcard-импорты ломают tree-shaking, почему lodash без ESM раздувает бандл и убирает дубликаты библиотек дат, чтобы сократить приложение на React с 5 МБ до 601 КБ. #js #performance

https://www.developerway.com/posts/bundle-size-investigation

Хватит превращать всё в массивы. Мэтт Смит показывает, как iterator helpers в JavaScript дают ленивые цепочки map, filter и take без промежуточных массивов и прекращают работу, когда UI получил нужные элементы. Это удобно для больших списков, потоков и пагинации, поддержка есть в современных браузерах и Node 22+. #js #performance

https://allthingssmitty.com/2026/01/12/stop-turning-everything-into-arrays-and-do-less-work-instead/

Практическое руководство по элементу <img>: от основ до LCP. Джоан Леон разбирает атрибуты srcset и sizes для адаптивных изображений, <picture> с AVIF и WebP, а также loading=lazy, width и height против CLS, decoding и fetchpriority. Отдельно о том, когда стоит добавить preload для LCP-картинок и почему иногда всё-таки нужны CDN. #performance #html

https://joanleon.dev/en/guia-practica-elemento-img/

Словарное сжатие наконец здесь, и результаты впечатляют. Тим Перри объясняет, как Compression Dictionary Transport работает с Zstandard и Brotli поверх HTTP: предыдущие ответы используются как словари для сжатия данных почти до размера дельт. JS-бандлы YouTube уменьшаются до 90% по сравнению с Brotli, HTML поиска Google — почти на 50%. Уже используется в Google, Shopify, Pinterest и Notion. Chrome 130+, Safari и Firefox на подходе. #performance #http

https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/

SVG в вебе: сравнение скорости в зависимости от способа загрузки. Джоан Леон сравнивает пять методов и то, как каждый влияет на кеширование, запросы и рендеринг: инлайн <svg>, <img>, <object>, CSS-фон и спрайты с <use>. Главный анти-паттерн: встраивание растровых изображений в base64 внутри SVG увеличивает размер файла на 33% и блокирует рендеринг. #svg #performance

https://joanleon.dev/en/svg-optimization/

Squarespace и веб-стандарты: как мы помогли добавить ленивую загрузку видео и аудио в HTML. Скотт Джел рассказывает, как инженеры Squarespace предложили loading="lazy" для элементов <video> и <audio>, работали с WHATWG, написали Web Platform Tests и сотрудничали с командами Mozilla, Apple и Chromium, чтобы фича стала официальным стандартом 23 марта 2026 года. #html #performance

https://engineering.squarespace.com/blog/2026/squarespace-and-web-standards-how-we-helped-bring-html-video-and-audio-lazy-loading-to-todays-browsers