🧠 ИИ не понимает «it depends»: почему AI-линтеры не заменили чутьё инженера по производительности

Использование AI-skill для поиска перформанс-антипаттернов в React-приложении Notion привело к краху эксперимента, поскольку языковые модели пока не способны учитывать контекст и тонкий баланс компромиссов в производительности.

Проблема заключалась в каскадных перерисовках, вызванных нестабильными ссылками в самописной системе стейт-менеджмента. ИИ легко находил типовые ошибки (например, лишний useMemo или нестабильные объекты), но не мог усвоить специфику конкретного кода. Он продолжал предлагать обёртки для хуков со встроенной защитой от лишних ререндеров, игнорируя документацию проекта, создавая бесполезную работу и вредные «улучшения».

Наибольшую практическую пользу принесло обратное применение AI: не пытаться натренировать «вкус» модели, а заставить её писать детерминированные ESLint-правила. Клод смог генерировать кастомные линтеры для описанных антипаттернов, которые предотвращали их повторное появление в CI. Также полезным оказался сброс сырых JSON-профилей React DevTools в анализатор для поиска узких мест — так ИИ выступал в роли пассивного анализатора, а не архитектора.

Источник

#React #WebPerf #AI #DevTools #JavaScript

Проверь, что замедляет твой сайт @milten_io

⚡️ React App: LCP с 28 до 1.27 секунд — пошаговый разбор

В видео разбирают полный цикл оптимизации медленного React-приложения (Netflix-клон): без кеша и на Slow 4G Largest Contentful Paint составлял 28 секунд, а финальный результат — 1.27 секунды. Автор даёт практический фреймворк, который можно применять к любому фронтенд-проекту, и на каждом шаге фиксирует метрики.

Технические шаги включают аудит бандла через rollup-plugin-visualizer, удаление неиспользуемых зависимостей с npx depcheck, включение минификации и code splitting на уровне сборки. Затем с помощью React DevTools Profiler и Performance-треков React 19 выявляют дорогие ререндеры, после чего подключают React Compiler для автомемоизации компонентов, виртуализируют списки и переносят клиентские fetch на серверные функции TanStack Start — это убирает element render delay и основную блокировку рендера. Финально настраивают fetchpriority=high для LCP-изображения, выносят его на CDN, добавляют loading=lazy для второстепенных картинок и preload для CSS.

Такой подход важен командам, которые хотят системно улучшать Core Web Vitals: начинать с анализа бандла, затем профилировать рендеры React, внедрять серверный рендеринг и управлять приоритетами загрузки. Все изменения стоит проверять поэтапно, имитируя реальное сетевое окружение (Slow 4G/3G). Это даёт предсказуемый результат без гаданий.

Источник

#React #WebPerf #CoreWebVitals #LCP #SSR #JavaScript

Проверь, что замедляет твой сайт @milten_io

🤖 Modern Web Guidance: как заставить AI‑агентов писать современный код

Chrome представил Modern Web Guidance — набор экспертных руководств, которые подключаются к AI‑агенту через CLI или плагин и автоматически обогащают промпты актуальными практиками веб‑платформы. Это ответ на три главные проблемы генерации фронтенд‑кода: устаревшие паттерны, незнание свежих API и отсутствие учёта кросс‑браузерной совместимости.

Инструмент содержит 100+ гидов: от высокоуровневых (Performance, UX, Security) до низкоуровневых, покрывающих конкретные фичи вроде CSS‑селектора :has или View Transitions. При отправке промпта агент выполняет семантический поиск по локальному бандлу гидов и добавляет в контекст только релевантные. Каждый гид включает baseline‑информацию: идеальная реализация и fallback‑стратегия для возможностей, ещё не ставших Baseline Widely Available, — агент выбирает подходящий вариант исходя из требований к браузерной поддержке проекта.

На практике это позволяет одним промптом поднять Core Web Vitals: выставить fetchpriority=high для LCP‑изображения, почистить render‑blocking CSS/шрифты, удалить обвязку из JS‑фолбеков, когда нужная функция уже поддерживается везде (пример с :user‑invalid), или добавить swipe‑to‑remove, не жертвуя кросс‑браузерностью. Работает с любым AI‑агентом, включая Antigravity, Cursor и Copilot. Исходные коды гидов открыты на GitHub.

Источник

#WebPerf #CoreWebVitals #Frontend #JavaScript #DevTools #BrowserAPI

Проверь, что замедляет твой сайт @milten_io

🔬 rumcap: сбор полевых профилей через JS Self-Profiling и LoAF

Патрик Минан (создатель WebPageTest) выпустил опенсорсный инструмент rumcap для захвата детальных данных о производительности с реальных пользовательских сессий. Он использует современные браузерные API, которые давно доступны, но почти не применялись из-за отсутствия готовых решений.

rumcap внедряется на страницу как JavaScript-сниппет и собирает события из Performance Timeline, скриптовые профили через JS Self-Profiling API и атрибуцию долгих задач через Long Animation Frames (LoAF). Данные передаются в ClickHouse, а для визуализации предложены готовые дашборды Grafana с flame graphs и детализацией источников задержек — от вызовов функций до парсинга стилей.

Такой подход превращает RUM в инструмент не только для метрик, но и для инженерного анализа: теперь можно отследить конкретный JS-фрейм или операцию, которая вызывает просадку INP на реальных устройствах. Это снижает разрыв между синтетическими тестами и полевыми данными, позволяя командам быстрее находить корневые причины проблем.

Источник #RUM #WebPerf #BrowserAPI #Observability #JavaScript #Profiling

Проверь, что замедляет твой сайт @milten_io

🛡 Lighthouse Best Practices: быстрые победы, которые упускают

Категория Best Practices в Lighthouse не влияет на Core Web Vitals или позиции в поиске, поэтому её часто игнорируют. Но её аудиты находят реальные проблемы: неработающий JavaScript, небезопасные соединения, запросы разрешений, которые вводят пользователей в заблуждение.

В категорию входят проверки использования HTTPS, отсутствия устаревших API, известных уязвимостей в JS-библиотеках, ошибок в консоли, корректного соотношения сторон изображений. Некоторые аудиты, например, запрос геолокации или уведомлений при загрузке страницы, напрямую влияют на доверие пользователей и могут снижать конверсию.

Для разработчиков это быстрый способ улучшить общий счёт Lighthouse и реально защитить сайт. Внедрите проверки Best Practices в CI (например, через Lighthouse CI), чтобы ловить регрессии до деплоя.

Источник

#Lighthouse #WebPerf #Frontend #DevTools #JavaScript

Проверь, что замедляет твой сайт @milten_io

🔗 Загрузка страницы: DNS, TCP, TLS, HTTP и браузерные движки

Когда вы кликаете по ссылке, Chrome запускает цепочку сетевых протоколов и внутренних механизмов, чтобы превратить URL в интерактивную страницу.
Сначала DNS преобразует домен в IP-адрес, затем через сетевой стек ОС и оборудование устанавливается TCP-соединение (трёхстороннее рукопожатие). Поверх TCP выполняется TLS-рукопожатие, после чего по HTTP отправляется запрос. Сервер возвращает HTML, CSS, JS, изображения и другие файлы — в заголовках могут передаваться cookie.

За обработку контента отвечают движки: Blink (рендеринг HTML/CSS), V8 (парсинг и выполнение JavaScript/WebAssembly) и Skia (отрисовка графики через GPU). WebGL используется для 2D/3D-графики. Понимание этого конвейера помогает находить узкие места: задержки DNS, лишние RTT при установке соединений, блокирующие ресурсы и тяжелый рендеринг. RUM- и synthetic-мониторинг позволяют изолировать вклад каждого этапа.

Источник

#WebPerf #BrowserInternals #Frontend #Networking #Rendering #JavaScript
Проверь, что замедляет твой сайт @milten_io

🤖 Chrome DevTools MCP сам перезагружает расширения

Ручной цикл «поправил manifest — перезагрузил — проверил» исчезает: Chrome DevTools for Agents через MCP даёт coding agent прямой доступ к установке, удалению, перезагрузке и отладке расширений прямо в Chrome.

Под капотом два компонента. Modern Web Guidance добавляет агенту extension skill с актуальными best practices и данными о совместимости браузерных API. Chrome DevTools for Agents добавляет MCP-инструменты для extensions: достаточно включить category extensions в конфиге, например в .gemini/config/mcpconfig.json, после чего агент пишет код, сам перезагружает расширение и проверяет состояние в открытой браузерной сессии.

Для разработчиков расширений с Codex, Cloud Code или Antigravity это убирает ручную перезагрузку и ускоряет итерации. Перед запуском агента стоит включить extension skill pack через CLI Modern Web Guidance и просмотреть implementation plan, который предлагает агент.

Источник

#DevTools #BrowserAPI #Frontend #JavaScript

Проверь, что замедляет твой сайт @milten_io