Фронтендеры и SEO-шники больше не нужны? Я проверил — оптимизировал сайт с Claude Code сам
В прошлой статье я собрал свой сайт с Claude Code и в самом конце вывел три вещи, без которых из ИИ выходит серая каша: контекст, бенчмарки и понятная обратная связь. Про контекст — стиль, данные, тексты, CLAUDE.md — рассказал там же. Собрать сайт — это, как выяснилось, полдела.
Эта статья — про оставшиеся два пункта. Про то, как я полез сайт оптимизировать: гонял его через бенчмарки, читал отчёты и объяснял Claude, что именно не так. И вот тут началось самое интересное.
Везде сейчас кричат одно и то же: «фронтендеры не нужны, SEO-специалисты не нужны, всё делает ИИ». Я по натуре человек недоверчивый — заголовкам не верю, верю экспериментам (привет, аналитика). Поэтому проверил на себе: смогу ли я, аналитик с подзабытым со времён Практикума фронтендом, довести сайт до зелёных цифр в PageSpeed силами одного Claude?
Спойлер: результат меня впечатлил. Но вывод «никто не нужен» — это, мягко говоря, преувеличение. Сейчас покажу, где собака зарыта — и почему пять раз я был в шаге от того, чтобы с гордым видом задеплоить поломку.
Тот самый сайт. Выглядит спокойно — но чтобы он так выглядел и быстро грузился, пришлось повозиться.
Что Claude вынес на себе
Я скинул ему отчёт PageSpeed Insights и попросил починить всё по приоритету. Дальше он сам: нашёл блокирующий рендер CSS, тяжёлые JS-бандлы, неоптимальные картинки, отсутствующие заголовки безопасности — и всё это поправил, пока я попивал кофе.
Вот метрики до и после:
| Метрика | Было | Стало |
|---|---|---|
| Производительность (ПК) | 96 | 100 |
| Производительность (моб.) | 65 | заметно выше |
| Специальные возможности | 89 | 95 |
| Рекомендации | 96 | 96 |
| SEO | 100 | 100 |
| JS-бандл (полифилы) | 120,6 КиБ | 31,6 КиБ |
Десктоп: 100 / 95 / 96 / 100. Зелёным любоваться приятно — но мобильный дался куда тяжелее.
Посмотри на последнюю строчку. Бандл усох со 120 до 32 КиБ — это один правильно настроенный файл .browserslistrc, который выкидывает полифилы для динозавров вроде IE11. Я бы на поиск этого решения убил полдня, копаясь в документации и тихо проклиная webpack. Claude сделал за минуту.
Как это вообще выглядело
Процесс был такой: я кидаю отчёт → Claude предлагает план по приоритету → я киваю → он правит код → проверяет результат в браузере → коммитит → деплоит на сервер. Я в основном сидел и принимал решения, что важнее. Аналитик в чистом виде: руками ничего не делаешь, только думаешь, что просить и как это потом проверить.
Пара примеров реальных правок, чтобы было предметно.
Аналитика перестала тормозить загрузку. Яндекс.Метрика грузилась слишком рано и душила первый рендер. Лечится одной строкой — отдаём её загружаться последней, когда странице уже не до неё:
// было: strategy="afterInteractive"
<Script id="ym-init" strategy="lazyOnload">
Полифилы для древних браузеров — за борт. Тот самый .browserslistrc:
> 0.5%
last 2 versions
not dead
not ie <= 11
Заголовки безопасности — в next.config.js:
{ key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
{ key: 'X-Frame-Options', value: 'DENY' },
{ key: 'Cross-Origin-Opener-Policy', value: 'same-origin-allow-popups' },
На мобильных разница вышла самой драматичной — там медленная сеть и слабое железо обнажают всё, что на десктопе незаметно:
Мобильный «до». На слабом телефоне и тонком интернете вылезает всё, что на десктопе пряталось.
Он же «после». Вот ради этой разницы и стоило лезть в отчёт.
А теперь грабли. Те самые, ради которых статья
Вот мы и добрались до главного. Если бы я тупо принимал всё, что предлагает ИИ, сайт бы поехал. Рассказываю, на что я наступил — это и есть ответ на вопрос из заголовка.
Грабля №1. Невалидная разметка, которую Google послал
Claude добавил в микроразметку Person блок aggregateRating — рейтинг 5.0, куча отзывов. Логика железная: я хороший, отзывы есть, пусть Google рисует звёздочки в выдаче. Вот только Google такое отклоняет: aggregateRating для типа Person невалиден — звёзды положены товарам, рецептам, организациям, но не живому человеку. Rich Results Test ругнулся красным:
Rich Results Test красным: «aggregateRating недопустим для Person». Спасибо, что поймал это до прода, а не Google в выдаче.
ИИ уверенно сгенерировал правдоподобную, но неправильную разметку. И вот тут честный момент, ради которого стоит притормозить. Сначала я хотел написать: «поймать это можно, только если знаешь правила Google, — вот она, незаменимая работа SEO-специалиста». А потом поймал себя на том, что вру сам себе. Если бы я с самого начала попросил Claude «прогони микроразметку по правилам Google и Rich Results» — он бы, скорее всего, эту ошибку нашёл сам. Он сгенерировал её не от незнания правил, а потому что я не попросил их проверить. Знания у ИИ есть, и побольше моих. Не хватило не SEO-эрудиции — не хватило команды «а теперь проверь себя» и валидатора как объективной истины.
Грабля №2. Фирменные цвета, которые не видно
Claude взял мои красивые голубые цвета для текста в навигации. Глаз радуется. А потом я прогнал контраст: ~2,9:1 при норме WCAG AA в 4,5:1. То есть для человека со слабым зрением этот текст — призрак. Пришлось вручную подбирать затемнённые оттенки так, чтобы и в бренд попасть, и норму вытянуть. ИИ просто не в курсе, что для меня доступность — не пустой звук.
Грабля №3. Деплой, который падал дважды
А вот это мой личный косяк, не Claude. В какой-то момент я попросил залить правки на сервер по-быстрому, и файлы поехали напрямую, в обход git. Итог: следующий автодеплой грохнулся с local changes would be overwritten. Дважды. Классика жанра.
Пришлось чистить рабочее дерево на сервере и закреплять железное правило: все изменения — только через git, и после каждого пуша проверяем, что деплой реально прошёл. Запушить ≠ задеплоить. Кто хоть раз ронял прод в пятницу — тот поймёт.
Грабля №4. Полифилы-зайцы
Те самые 43 КиБ мёртвого кода для IE11, о которых я писал выше. Claude не предложил их выпилить сам, пока я не ткнул носом в конкретный пункт отчёта. Среднее по индустрии — «пусть будут, мало ли». Мне же был нужен лёгкий сайт, а не совместимость с браузером из 2011-го.
Грабля №5. Меню, которое не поместилось в телефон
А эту я хочу выделить отдельно. На десктопе навигация выглядела ровно. А открыл сайт на телефоне — и в шапку влезло целиком десктопное меню: «Главная», «Отзывы», «Блог», «Курс по Claude» (в три строки!), кнопка «LMS / Войти» и переключатель языка — всё друг на друге. Лечится одной идеей: ниже 640px прятать полное меню и показывать бургер.
Та самая грабля №5. «Курс по Claude» — в три строки, «LMS / Войти» поверх соседей. ИИ честно написал «адаптивную» вёрстку — она просто не пережила реальный экран.
И вот что тут важно. Первые четыре грабли требовали знаний — правил Google, WCAG, git. А эту видно просто глазами. Никакого SEO не нужно: открыл сайт на телефоне — и всё понятно. Но кто-то должен этот телефон взять в руки, а не отрапортовать «готово, мобильная версия адаптивна». Вот тебе и весь бенчмарк: твои собственные глаза на реальном устройстве.
Закономерность одна и та же: Claude шикарно делает «как принято в среднем по индустрии», но не знает контекста конкретно твоего проекта и тонкостей правил платформ. Вот эти зазоры и закрывает человек.
Так нужны фронтендеры с SEO или нет?
«Совсем не нужны» — перегиб. Но и «всё по-старому» — самообман. Давай честно, без поблажек профессии.
Что произошло на самом деле: один человек с Claude Code закрыл объём, на который раньше звали небольшую команду. Вёрстка, оптимизация, безопасность, микроразметка — за вечер вместо пары недель.
И вот неудобная часть. Почти всё, на чём я выше ловил Claude, — это не тайное знание, недоступное ИИ. Правила микроразметки, нормы WCAG, лишние полифилы — попроси его сделать ревью, и он найдёт это сам. Знания у него есть, и побольше, чем у меня. Так что аргумент «нужен спец ради знаний» я, если честно, выдумал, чтобы себя успокоить.
Что же осталось человеку? Куда меньше, чем хотелось бы верстальщику или SEO-шнику. По сути, две вещи. Первая — знать, что ревью вообще нужно, и понимать, на что его наводить: «проверь микроразметку», «прогони контраст», «открой на телефоне». Вторая — объективная проверка: не верить ни генерации, ни себе, ни даже самопроверке ИИ, а сверяться с истиной — валидатором, PageSpeed, реальным экраном. Грабля №5 тут показательна: Claude не откроет твой телефон и не увидит съехавшее меню. А ты — увидишь.
Это и есть те самые бенчмарки и обратная связь из первой статьи. Контекст помогает ИИ не выдать кашу на старте. Бенчмарки и умение прочитать результат — не дать этой каше доехать до прода. Профессия не то чтобы «меняется» — она сжимается до оркестровки и проверки. Claude — рычаг, который делает почти всё. Но кто-то всё ещё должен знать, за какой рычаг дёрнуть и чем потом измерить результат. Только людей на эту роль нужно заметно меньше, чем раньше на команду.
На прощание
Чтобы Claude поменьше городил такие ошибки, я веду для него файл-инструкцию — CLAUDE.md. Там прописаны правила проекта: деплоить только через git, проверять микроразметку перед релизом, держать контраст по WCAG, чек-лист безопасности. С ним ИИ косячит заметно реже.
Базовый шаблон такого файла я отдаю бесплатно — напиши в Telegram, пришлю.
А если хочешь научиться по-нормальному встраивать Claude в работу — я собираю об этом курс. Записаться в лист ожидания →
И расскажи в комментариях: ловил подобные грабли с ИИ? Мне правда интересно, на чём спотыкаются другие — особенно если тоже недавно что-то собирал или оптимизировал с нейросетью.
Частые вопросы
Можно ли оптимизировать сайт под PageSpeed силами ИИ, без фронтендера?
Основную рутину Claude закрыл сам: нашёл блокирующий CSS, тяжёлые бандлы, неоптимальные картинки, добавил заголовки безопасности. Но финальные проценты и, главное, проверка результата — на человеке. Без понимания, что значат метрики, легко задеплоить правдоподобную поломку.
Почему aggregateRating у типа Person — ошибка?
Google разрешает разметку aggregateRating (звёзды-рейтинг в выдаче) только для определённых типов — товаров, рецептов, организаций и подобного. Для типа Person она невалидна, и Rich Results Test её отклоняет. ИИ сгенерировал правдоподобный, но неправильный код — поймать это можно только валидатором.
Заменит ли ИИ SEO-специалиста и фронтендера?
Роль не столько меняется, сколько сжимается. Само знание правил — микроразметки, WCAG, производительности — у Claude уже есть: попроси сделать ревью, и большинство ошибок он найдёт сам. Человеку остаётся более узкое: понимать, что ревью нужно и на что его наводить, и проверять результат объективными инструментами и на реальном устройстве. Это работа на одного человека там, где раньше была команда — людей на неё нужно заметно меньше.
Как ловить ошибки, которые ИИ генерирует уверенно, но неправильно?
Гонять результат через объективные бенчмарки: PageSpeed Insights для скорости, Rich Results Test для микроразметки, контраст-чекер для доступности. И обязательно открывать сайт на реальном телефоне — часть багов (например, не свёрнутое меню) видно просто глазами, без всяких знаний.
Алексей Гаврилов — Team Lead Data Analyst, работаю с LLM в Яндекс Поиске. Веду сообщество @onlyanalystgroup для тех, кто разбирается в данных и инструментах.