Приложение на вайбкоде тормозит — и люди уходят — Transcript & Summary

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

Key Takeaways

Производительность важна с первого дня, так как медленные приложения теряют пользователей
Оптимизация охватывает фронтенд, бэкенд, базу данных, сеть и инфраструктуру одновременно
Без измерений (мониторинг, трассировка, тесты на слабых устройствах) невозможно понять, что реально тормозит

What the video covers

Главная мысль: медленное приложение теряет пользователей, поэтому производительность нужно закладывать с самого начала
Оптимизация фронтенда: серые заглушки при загрузке, форматы WebP и AVIF, ленивая подгрузка картинок при прокрутке, разделение JavaScript по страницам и виртуализация длинных списков
Сетевые запросы: без дублирующих запросов к API, отложенная отправка поиска и автодополнения после паузы в наборе, постраничная выдача результатов, параллельные независимые запросы
Бэкенд и база данных: исправление запросов N+1, индексы под частые запросы, выборка только нужных колонок, пул подключений, серверы рядом с базой
Кэширование и доставка: Redis для часто запрашиваемых данных, CDN для статики, сжатие Brotli или Gzip, кэширование статики в браузере
Работа с ИИ-ответами: вывод потоком токен за токеном и обновление интерфейса без ожидания полного ответа сервера
Рендеринг и сторонние скрипты: серверный рендеринг или рендеринг при сборке, подключение сторонних скриптов после загрузки страницы, устранение лишних перерисовок
Инфраструктура: фоновые очереди для медленных задач, таймауты на внешние API, распределение нагрузки между копиями приложения
Шрифты и зависимости: хранение шрифтов на своем сервере, ограничение числа начертаний, удаление неиспользуемых зависимостей
Измерение: трассировка медленных запросов через OpenTelemetry, мониторинг скорости у реальных пользователей, тестирование на слабых телефонах и медленном интернете

Какие методы предлагаются для ускорения загрузки интерфейса?

Показывать серые заглушки при загрузке, отдавать картинки в форматах WebP и AVIF, подгружать изображения за пределами экрана только при прокрутке и разделять JavaScript по страницам. Также рекомендуется подключать сторонние скрипты после загрузки страницы.

Как уменьшить нагрузку на сервер и базу данных?

Нужно исправить запросы N+1, добавить индексы под частые запросы, выбирать только нужные колонки и использовать пул подключений. Часто запрашиваемые данные рекомендуется кэшировать в Redis, а медленные задачи выносить в фоновую очередь.

Как автор предлагает отслеживать скорость приложения?

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