ИИ пишет код за минуты. Почему ваши веб-приложения все еще тормозят? Новинка «Современный Web Performance Engineering»

Привет, Хаброжители!

С помощью ИИ можно собрать интерфейс, сгенерировать компоненты и создать целое веб-приложение за считаные минуты. Но функциональность не означает высокую производительность: приложение медленно загружается, интерфейс реагирует с задержкой, браузер тратит ресурсы на ненужные скрипты, которые замедляют работу сайта.

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

В новой книге «Современный Web Performance Engineering. Улучшаем скорость и качество приложений с ИИ» Эдди Османи разбирает именно эти задачи. Автор объясняет, как оценивать производительность с точки зрения пользователя и оптимизировать веб-приложения в условиях, когда большая часть кода сгенерирована ИИ.

О чем книга?

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

Три ключевые темы книги.

1. Как измерять производительность, а не оценивать ее на глаз

Эдди разбирает Core Web Vitals — LCP, INP и CLS. Это показатели помогают понять, насколько быстро появляется основной контент, как быстро сайт реагирует на действия пользователя и насколько стабильно отображается страница. втор также показывает, как проводить лабораторные тесты и анализировать реальные показатели производительности с помощью Lighthouse, Chrome DevTools и WebPageTest.

2. Что происходит между запросом страницы и появлением ее на экране

Для оптимизации сайта необходимо понимать, как браузер загружает ресурсы, обрабатывает HTML, CSS и JavaScript, рассчитывает стили, строит макет и отображает страницу. Османи объясняет, на каких этапах возникают задержки, и показывает, как на производительность влияют выполнение JavaScript, разделение кода и гидратация.

3. Как контролировать производительность кода, созданного ИИ

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

Что можно применить на практике?

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

находить узкие места с помощью Lighthouse, Chrome DevTools и WebPageTest;
улучшать показатели LCP, INP и CLS;
сокращать объем JavaScript и оптимизировать его выполнение;
управлять загрузкой сторонних скриптов: аналитики, рекламы, виджетов и ИИ-чатов;
проверять и дорабатывать код, который предлагает ИИ;
внедрять контроль производительности на всех этапах разработки и выстраивать процессы в команде.

На что стоит обратить внимание?

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

Кому будет полезна книга?

Фронтенд-разработчикам, performance-инженерам и техническим лидерам, которые хотят лучше разбираться в производительности современных веб-приложений и учитывать особенности ИИ-сгенерированного кода.

«К концу этой книги вы будете не только знать, что делать для оптимизации производительности сайта, но и поймете, почему эти методы работают и как уверенно применять их в условиях, где ИИ пишет большую часть кода и управляет инструментами.
Используя систематический подход, основанный на метриках, вы будете готовы оценить и повысить производительность любого веб-проекта: созданного человеком, сгенерированного ИИ или (что чаще всего и бывает) — смешанного — и гарантировать пользователям быстрый, бесперебойный и надежный опыт, которого они заслуживают.»
— Эдди Османи

Об авторе

Эдди Османи работает в технической команде Anthropic. Бывший руководитель инженерного направления Google Cloud AI, помогающий разработчикам создавать эффективные приложения с помощью Gemini, Vertex AI и других ИИ-платформ. До этого почти 14 лет он занимался производительностью, разработкой и пользовательским опытом в команде Chrome, работая над подходами и метриками, которые помогали сделать браузер быстрее и надежнее для миллиардов пользователей.

Ознакомиться с оглавлением