Последние посты
Иван Акулов про разработку
22 сент., 19:19
в эфире рубрика «посты про перформанс раз в квартал»!три слабосвязанных факта:1) когда на странице загружаются шрифты, текст на ней становится чуть крупнее или чуть меньше. (это очевидно, это вы все каждый день видите.)2) когда в реакте происходит hydration mismatch, реакт удаляет весь DOM со страницы и заменяет его на новый (идентично выглядящий)3) когда страница загружается, lcp (гугловая метрика скорости загрузки) сканирует элементы на странице и ждёт, пока не отобразится самый большой. но! она сканирует только новые элементы. если существующий элемент стал больше, lcp этого не заметитесли сочесть эти три слабосвязанных факта, можно узнать, почему hydration mismatches в реакте часто убивает перформанс: https://3perf.com/blog/hydration-mismatch/PerfPerfPerfHidden Cost of Hydration MismatchesA single hydration mismatch on a page can take Largest Contentful Paint from green to redИван Акулов про разработку
14 апр., 13:31
📻 4G в хром-девтулзах ненастоящий Когда вы замедляете сеть в хром-девтулзах, хром делает то, что не делает ни один другой тул для замедления сети: он начинает добавлять задержку к каждому запросу. Настоящие сети работают не так.Из-за этого вещи, которые выглядят быстрыми в хроме, могут быть медленными в реальности, и наоборот.Написал вот тут, почему и что с этим делать: https://3perf.com/blog/chrome-throttling/
Иван Акулов про разработку
27 дек. 2025 г., 18:37изменён
🇷🇴 Вышла запись моего румынского доклада про невидимые оптимизации Реакта: https://www.youtube.com/watch?v=iC-asCLp3fMИван Акулов про разработку
27 дек. 2025 г., 18:37
Что ещё 😑 Потратил на это выходные, поэтому сэкономлю их вам:Оказывается, когда вы открываете девтулзы в Chrome, таймеры (и любые другие нативные функции — fetch, requestAnimationFrame и т.д.) становятся в 5-100 раз медленнее. Это происходит вне зависимости от того, делаете ли вы что-то в девтулзах или нет — достаточно того, чтобы они были открыты.Это проблема! Перформанс обычно измеряется с открытыми девтулзами. Из-за того, что таймеры в этом режиме кажутся дорогими, TanStack Query, например, имплементировал целое API, чтобы менеджить таймеры, а Сергей Гарин ушёл даже дальше и почти переписал таймер-менеджмент целиком.Мини-тред с исследованием (где в конце приходит Пол Айриш из Google и говорит, что все мы делали всё это зря): раз, два, триИван Акулов про разработку
27 дек. 2025 г., 18:21
описание, кстати, простое, но вот внутри: — speculation rules — реакт-рендеринг и как он отличается от браузерного рендеринга — React Activity API и React Concurrent Mode — малоизвестные особенности трекинга INP в CrUXприходите, в общем :)Иван Акулов про разработку
27 дек. 2025 г., 18:06
переслано из @tbilisi_js
aaaaaaaaaaaaaaaaaaaaaaa (href)💥Встречайте Ваню Акулова! Ваня любит React и веб-перформанс, числится Google Developer Expert, пытается писать в телеграм @iamakulov_channelПредзагрузка данных. Точечные DOM-обновления. Сохранение состояния. Всё это — фишки роутеров во фрейворках вроде Next.js, Nuxt.js или @angular/router, и всё это по-прежнему медленнее, чем простые HTML-ссылки из 90-х.В этом докладе Ваня побудет луддитом (на самом деле нет) и расскажет, когда и почему даже в 2026-м HTML-ссылки лучше роутерной навигации.🔔 Устраивайтесь поудобнее и присоединяйтесь к нашему онлайн стриму 28 декабря (вс) в 18:30 (GMT+4) — ссылка на стрим на нашем YouTube канале 🌐Tbilisi JS Chat | YouTube | LinkedIn | Instagram
Иван Акулов про разработку
27 дек. 2025 г., 18:06
завтра выступлю на новогоднем стриме с совсем новым докладом, вот это дела:Иван Акулов про разработку
12 июн. 2025 г., 16:17изменён
Что ещё 🇬🇪 Вышла запись доклада с TbilisiJS. Рассказываю (на кривом русском, прости господи, несколько лет не выступал на нём) про оптимизации, которые стреляют в ногу: https://t.me/tbilisi_js/401🌐 Внезапно понял, как работает CORS (пост не завиралился, видимо, больше никто не понял): https://x.com/iamakulov/status/1909698040253784072🇷🇴 Выступил на JS Heroes в Румынии про невидимые оптимизации Реакта. Запись попозже!Иван Акулов про разработку
12 июн. 2025 г., 16:11изменён
(Сложная картинка для привлечения внимания)
Иван Акулов про разработку
12 июн. 2025 г., 16:11изменён
😳 Лайтхаус и <link rel="preload"> Если вы когда-то боролись с плохим баллом в Лайтхаусе и не могли понять, почему он плохой, есть хорошие новости (ну или не очень?).В большинстве случаев плохой балл Лайтхауса всё ещё значит, что сайт медленный. Но иногда — то, что Лайтхаус — дурачок.Кейс Мы во Фреймере обнаружили кейс, когда Лайтхаус ухудшает балл за штуки, которые на самом деле улучшают перформанс. Конкретно:1️⃣ Когда вы запускаете тест в Лайтхаусе, Лайтхаус пытается понять, как долго страница будет загружаться на медленной сети2️⃣ Для этого он не замедляет сеть, а загружает страницу на быстрой сети — и пытается посчитать, как страница вела бы себя на медленной. (Это называется «simulated throttling». Кроме Лайтхауса, так не делает больше никто)3️⃣ Эти подсчёты не точные. Например, Лайтхаус считает, что все ресурсы, которые загрузились до LCPИван Акулов про разработку
1 апр. 2025 г., 08:13
🇬🇪 11 апреля (пт) буду в Тбилиси — и выступлю на Tbilisi JS! Расскажу про оптимизации, которые стреляют в ноги: как CDN может сделать сайт медленнее или как font-display: swap может ухудшить Core Web Vitals.Приходите на митап, если вы в Тби :) Там ещё тройка крутых докладов.https://t.me/tbilisi_js/355TelegramTbilisi JSTbilisi JS Web Performance Day, April 2025 🚀 Совершенно внезапно (даже для самих себя) мы врываемся с новым тематическим митапом! 11 апреля приглашаем всех-всех-всех в уютный офис компании TradingView — поговорим о производительности в вебе, послушаем доклады…Иван Акулов про разработку
26 мар. 2025 г., 00:16
Привет! Написал новый пост, где реверс-инжинирю минификатор из 2004-го: https://3perf.com/blog/packer/(Минификатор, внезапно, поддерживает ES2015+ и сжимает код компактнее, чем Terser?!)PerfPerfPerfPerformance Archaeology: Packer.js, a JS Minifier from 2004Reverse-engineering a surprisingly effective twenty-year-old JS minifierИван Акулов про разработку
28 февр. 2024 г., 10:30изменён
Чёрт, снова вышел длинный пост вместо ссылокИван Акулов про разработку
28 февр. 2024 г., 10:27
Компонент выше: — говорит «запускай view transition», когда рендерится — бросает исключение-промис, что заставляет Реакт ждать — когда скриншот готов, резолвит промис, что позволяет Реакту закончить рендерЕсли поместить этот компонент в конец дерева, то можно запустить view transition в конце рендера. Прямо как с useLayoutEffect, но асинхронно.Попробуем это решение во Framer в течение недель. Расскажу, как сработает 🙂Иван Акулов про разработку
28 февр. 2024 г., 10:27
Иван Акулов про разработку
28 февр. 2024 г., 10:27
5) Если хуки не подходят, почему бы не запускать view transition перед началом рендера? Так можно, и Framer делает именно так. Но это создаёт другую проблему: рендер большой страницы может занять секунды, и всё это время страница будет заморожена.6) Идеальных решений для этой проблемы сегодня нет. Но это не значит, что нет ужасных воркэраундов :DВоркэраунд — эмулировать асинхронный useLayoutEffect с помощью <Suspense>:Иван Акулов про разработку
28 февр. 2024 г., 10:27изменён
4) Удобное место, чтобы сказать «запускай view transition» — это хук useLayoutEffect. Этот хук вызывается, когда React уже закончил рендерить новую страницу, но браузер всё ещё показывает старую. Если запустить view transitions отсюда, то страница будет заморожена буквально долю секунды.Идеально, да? Нет. «Запускай view transition» — это асинхронный процесс, а useLayoutEffect не поддерживает асинхронность (и вряд ли будет, исходя из архитектуры Реакта).
Иван Акулов про разработку
28 февр. 2024 г., 10:27
View Transitions, React и перформанс Ну и давайте про челленджи поговорим. Из недавнего — я узнал, что view transitions фризят страницу, и это влияет на перформанс-метрики, которые собирает Google 🫠Следите за руками:1) View Transitions — это новый стандарт, с помощью которого можно анимировать переходы между страницами. Framer поддерживает view transitions, и часть сайтов (в том числе framer.com) их используют2) Переходы между страницами у Framer-сайтов работают как в любом реакт-приложении: вы нажимаете ссылку, а мы рендерим новую страницу Реактом. Это может быть медленно, поэтому, чтобы не фризить вкладку, мы оборачиваем рендер в startTransition(). (Вот как это работает)Тут придёт Никита Прокопов и скажет, что вообще-то Реакт не нужен, и новую страницу будет гораздо быстрее отрендерить, просто взяв HTML с сервера. Это правда (но, кстати, не всегда — мы измерили!), и мыИван Акулов про разработку
28 февр. 2024 г., 10:27
💻 Воркшоп (нет, канал я оживил не только для этого анонса): в марте пройдёт двенадцатый воркшоп по Реакт-перформансу! В консалтинге я помогал компаниям ускорять Реакт в 2-4 раза; в воркшопе я учу всему, чему сам научился в процессе.Как выглядит воркшоп: мы берём медленное приложение → дебажим его в Chrome DevTools и React Profiler → находим и чиним боттлнек → повторяем для всех типичных перформанс-антипаттернов. В процессе мы смотрим на дорогие рендеры, гидрацию, startTransition(), перевычисления стилей и ещё пачку всего.Приходите, цены на билеты вырастут с первого марта :) Отзывы и расписание вот тут → https://fwdays.com/en/event/react-performance-workshop-3FwdaysWorkshop: React Performance 3.0Workshop React PerformanceИван Акулов про разработку
28 февр. 2024 г., 10:27изменён
А давайте оживим канал, что ли. Правда, будет меньше длинных постов и больше ссылок, а то для длинного контента время остаётся только на английском 🫣🙋 Как дела: я закрыл консалтинг! Последние шесть лет я зарабатывал, консультируя компании (Google, CNBC, Toggl и кучу других) про веб-перформанс. Но в 2023-м мой консалтинг-драйв выгорел, и с 2024-го я ушёл в найм. Просуммировал выводы и уроки тут: https://iamakulov.com/notes/lessons-from-self-employment/(Теперь я лидю веб-перформанс во Framer.com — это no-code-платформа для создания сайтов. Сайты на Реакте, поэтому перформанс-челленджи интересные :D)
