От 88 до 100 PSI: Claude Code для оптимизации фронтенда

Разработчик использовал Claude Code в качестве партнёра по отладке и внедрению, чтобы поднять мобильный показатель PageSpeed Insights своего сайта с 88 до 100 (шаблон статьи — с 74 до 100). Пост на r/ClaudeAI описывает практический рабочий процесс — не одноразовое исправление, а серию точечных вмешательств.

Достигнутые ключевые оптимизации

• Адаптивные изображения + srcset: Claude определил, что мобильное герой-изображение было больше нужного, затем сгенерировал адаптивные варианты и добавил атрибуты srcset.
• Предзагрузка LCP: Добавил адаптивную предзагрузку для LCP-изображения с помощью <link rel="preload" as="image" imagesrcset="...">.
• Исправление принудительного перекомпоновки (forced reflow): Заменил слушатель прокрутки в шапке (который вызывал принудительную перекомпоновку при скролле) на IntersectionObserver.
• Аудит шрифтов: Определил, какие начертания шрифтов действительно используются, и удалил неиспользуемые.
• Размеры изображений на этапе сборки: Добавил атрибуты width и height для изображений в Markdown на этапе сборки, чтобы устранить смещение макета.
• Удалены предзагрузки шрифтов на страницах статей: Контринтуитивно, но эффективно — предзагруженные шрифты конкурировали с герой-изображением за пропускную способность на ограниченном мобильном подключении. Поскольку шрифты использовали font-display: swap, удаление предзагрузок позволило LCP-изображению загружаться быстрее.

Эффективный шаблон промптов

Разработчик обнаружил, что Claude Code работает лучше всего с конкретными диагностическими потоками. Вместо расплывчатых промптов вводите данные PSI и просите минимальное безопасное исправление. Пример шаблона: вводите данные PageSpeed Insights, просите Claude проверить соответствующий компонент, затем запросите минимальное исправление, а не масштабный рефакторинг.

Человеческое суждение всё ещё необходимо

Некоторые оптимизации казались визуально слишком агрессивными — автор вернул качество логотипа, оставаясь на 100. Изображения под сгибом и компромиссы в стилях требовали человеческих решений. Claude Code ускорил итерации, но разработчику всё равно пришлось балансировать производительность, доступность и качество дизайна.

Полная статья

Автор опубликовал более подробную техническую версию с конкретными изменениями Core Web Vitals и числами «до/после» на goodrich.digital.