--- name: "cp-web" description: "Отвечает за техническую сторону сайта или лендинга: на чём собирать, где хостить, как не нарваться на требования по персональным данным, как ускорить и как принять работу у подрядчика. Даёт честную развилку «конструктор против кода» с признаками, по которым конструктор перестаёт справляться, обязательный технический минимум сайта в России, чек-лист безопасности и приёмки с технической и правовой частью, разбор того, что реально влияет на скорость — изображения, шрифты, сторонние скрипты. Текст страницы, структуру блоков и конверсию пишет cp-landing, семантику и позиции ведёт cp-seo, здесь только инженерная часть и приёмка. Use when the user needs to build a website, choose a stack or hosting, speed up a page, or accept work from a web contractor. Триггеры — «сделать сайт», «на чём собрать сайт», «конструктор или код», «где хостить», «сайт тормозит», «Core Web Vitals», «INP», «принять сайт у подрядчика», «техзадание на сайт», «кому принадлежит домен»." --- Перед применением прочитай [правила интеграции «Блог с нуля»](../../context/10-blog-runtime.md). Они задают единый запуск, текущий проект и производственные ограничения; не начинай второй независимый бриф. # cp-web · Сайт технически Скилл отвечает на четыре вопроса: на чём собрать, где разместить, как не нарушить, как принять работу. Про то, что написано на странице, — не сюда. Самая дорогая ошибка в вебе для контентного проекта — не выбор фреймворка, а потерянные доступы и сайт, оформленный на подрядчика. Поэтому приёмка здесь — полноценный блок, а не приписка в конце. ## Когда не этот скилл - Нужен **текст и структура посадочной страницы**, первый экран, отработка возражений, форма → `cp-landing`. Здесь — как это разместить и не сломать. - Нужны **позиции, семантика, robots.txt под поисковых роботов, Clean-param** → `cp-seo`. Здесь — как исправить то, что техаудит нашёл. - Нужны **строки robots.txt для ИИ-краулеров** → `cp-geo`. - Нужен **правовой вердикт по конкретной ситуации** — уведомление РКН, состав согласий, штрафы → `cp-compliance`. Нужны интеграции и передача данных между сервисами → `cp-automation`. ## Контекст Читай из `context/`: `09-tech-ru.md` §4 (технические требования и пороги), §5 (хостинг, локализация, связь с индексом скорости), §2 (Метрика и Вебмастер); `03-legal-ru.md` §7 (персональные данные) и §9 (шрифты и лицензии); `06-design.md` (шрифты с нормальной кириллицей, контраст); `07-evidence.md`. Профиль бренда — `brands//`: `assets.md` (домен, хостинг, счётчики, палитра, шрифты), `offer.md` (что продаётся — от этого зависит, нужны ли оплата и личный кабинет), `rules.md` (кто согласовывает). Не нашлось — скажи одной строкой и работай по врезке ниже, факты спрашивай, не выдумывай. --- ## Врезка констант **Обязательный минимум любого сайта в РФ, собирающего контакты.** Хостинг на территории РФ; HTTPS; мобильная версия; приемлемая скорость; robots.txt с `Clean-param` для Яндекса и `sitemap.xml`; счётчик Метрики с настроенными целями; политика обработки персональных данных со ссылкой **рядом с каждой формой**; раздельные согласия на обработку и на рассылку **без преднажатых галочек**. **Хостинг в РФ — требование регуляторное, не SEO.** По ч. 5 ст. 18 152-ФЗ оператор обязан вести запись, систематизацию, накопление, хранение, уточнение и извлечение персональных данных граждан РФ в базах на территории РФ. Побочный эффект приятный: российский хостинг и CDN улучшают индекс скорости Яндекса, который меряется по переходам российских пользователей. Размещение данных на российском хостинге, доступном мировой аудитории, трансграничной передачей само по себе не считается. **Core Web Vitals официально используются системами ранжирования Google** (уровень A). Оговорка из документации: поиск стремится показать наиболее релевантный контент, даже если опыт страницы неидеален. **INP заменил FID.** Пороги: хорошо — **≤200 мс**, требует улучшения — 200–500 мс, плохо — **>500 мс**. INP меряет все взаимодействия за визит, FID мерил только первое. **Индекс скорости Яндекса** считается по обезличенным данным переходов из выдачи в браузере Яндекса, пятибалльная шкала, пороги не раскрыты. Расхождение с внешними измерителями — норма: они меряют разное на разной аудитории. **Шрифты.** Ставить локально, не подключать с внешнего CDN. Кириллица: Golos Text, IBM Plex Sans и другие с полноценным кириллическим начертанием. **Inter не использовать.** Лицензию проверять по типу — desktop / web / app: web-лицензия нужна отдельно, и это самая частая незамеченная утечка прав. --- ## Вход Одним блоком. 1. Что за сайт: одна посадочная, многостраничник, блог, магазин, сервис с личным кабинетом. 2. Что он должен уметь: собирать заявки, принимать оплату, выдавать материалы, вести запись, интегрироваться с CRM. 3. Собираются ли персональные данные — имя, телефон, почта, файлы. Это переключатель половины требований. 4. Кто будет вести сайт после запуска: сам владелец, штатный человек, подрядчик, никто. 5. Бюджет и срок — порядок величин, без точных цифр. 6. Что уже есть: домен, хостинг, дизайн, тексты, счётчики. На кого оформлены домен и хостинг. 7. Ожидаемая нагрузка: десятки визитов в день или всплески от рекламы и посевов. ## Процесс 1. **Выясни, собираются ли персональные данные.** Это первый вопрос, а не последний: от него зависят хостинг, согласия и половина требований. Есть формы — правовой блок обязателен. 2. **Пройди развилку «конструктор против кода»** по признакам задачи, а не по вкусу. Отдельно ответь, кто ведёт сайт после запуска. 3. **Выбери инфраструктуру:** хостинг (РФ или нет и почему), домен, почта, DNS. Домен и хостинг оформляются на заказчика — проверь это до начала работ, а не при передаче. 4. **Собери или поставь задачу подрядчику** — состав требований берётся из блока «Обязательный минимум», текст страницы приходит из `cp-landing`, технические требования поиска — из `cp-seo`. 5. **Пройди чек-лист запуска** целиком, каждый пункт проверкой, а не декларацией. 6. **Измерь производительность** и зафиксируй значения с датой — иначе через месяц не с чем сравнивать. 7. **Пройди чек-лист безопасности** и заполни реестр доступов. 8. **Закрой правовой контур** и передай спорное в `cp-compliance`. 9. **Прими работу по списку приёмки**, если делал подрядчик. Значения скорости, тестовая заявка и восстановленная резервная копия — до подписания, не после. ## Развилка · конструктор против кода Честный ответ: для большинства контентных и услуговых проектов конструктора достаточно, и убеждать в обратном — вредительство. Проблема начинается там, где задача выходит за его границы. | Признак задачи | Конструктор | Код или CMS | |---|---|---| | Посадочная, сайт-визитка, блог, портфолио | да | избыточно | | Формы заявок, интеграция с почтой и мессенджером | да | — | | Приём оплаты через встроенную интеграцию платёжного сервиса | обычно да, проверять список интеграций | — | | **Личные кабинеты, роли, доступ к контенту по подписке** | **нет** | да | | **Нестандартная логика оплаты**: рассрочка, подписки, частичная оплата, свой расчёт | **нет** | да | | **Интеграции с чем угодно за пределами готового списка** | **нет** | да | | **Хранение персональных данных под собственным контролем** | зависит от того, где физически лежит база — **выяснять до старта** | да | | **Высокая или всплесковая нагрузка**, тяжёлые страницы | ограничения тарифа — проверять | да | | Тонкая работа со скоростью и разметкой | ограничена шаблоном | да | | Экспорт и переезд без потерь | обычно затруднён — **проверять до старта** | да | **Правило выбора.** Считай не «что мощнее», а **кто будет это поддерживать через год**. Сайт на коде без человека, который его ведёт, устаревает и падает быстрее, чем конструктор. **Три вопроса, которые задаются конструктору до начала работы, а не после:** 1. Где физически хранятся данные форм — на территории РФ или нет. 2. Можно ли выгрузить сайт и базу целиком, если решишь уйти. 3. Оплата сервиса проходит российской картой сейчас и без посредников. **Промежуточный путь:** CMS на своём хостинге. Дороже конструктора в поддержке, дешевле разработки с нуля, данные под контролем. Требует обновлений — заброшенная CMS с дырами хуже конструктора. --- ## Обязательный минимум · чек-лист запуска | Пункт | Как проверить | |---|---| | **Хостинг в РФ**, если собираются персональные данные | договор и физическое расположение серверов, а не «мы российская компания» | | **HTTPS** на всех страницах, http редиректит на https | открыть сайт по http, посмотреть на редирект и на предупреждения браузера | | **Один канонический хост**: www или без www, слэш на конце — одна версия | четыре варианта URL руками, все ведут в одну версию | | **Мобильная версия** | реальный телефон, не эмулятор: формы, меню, кнопки, размер шрифта | | **Скорость и CWV** | блок ниже | | **robots.txt** с `Clean-param` для Яндекса и указанием sitemap | анализатор robots.txt в Вебмастере на конкретных URL. Подготовка файла → `cp-seo`, ИИ-краулеры → `cp-geo` | | **sitemap.xml** отдаётся, в нём только канонические 200-е URL | открыть файл, ткнуть в случайные адреса | | **Метрика с целями** | цель на отправку формы, а не только на визит. Проверять отправкой тестовой заявки | | **Политика обработки персональных данных** | опубликована по постоянной ссылке, ссылка **рядом с каждой формой** | | **Раздельные согласия** | две галочки: обработка и рассылка. Ни одной преднажатой | | **Формы реально доходят** | тестовая заявка с чужого устройства: пришла ли, куда, кому, попала ли в базу | | **Страница 404** | существующая, с навигацией, отдаёт код 404, а не 200 | | Резервные копии настроены | восстановить копию на тестовой площадке, а не поверить в наличие | --- ## Производительность Мерить: CWV по **полевым** данным (реальные пользователи) для Google и индекс скорости в Вебмастере для Яндекса. Лабораторный прогон показывает, что чинить, но нормой не является. **Что реально влияет — в порядке частоты.** **1. Изображения.** Обычно первая причина медленной страницы. Отдавать в современных форматах, в нескольких размерах под разные экраны, с явными width и height (иначе вёрстка прыгает), с ленивой загрузкой всего, что ниже первого экрана. Картинка первого экрана — наоборот, грузится приоритетно. **2. Шрифты.** **Локально, не с внешнего CDN.** Три причины: скорость (нет лишнего соединения к чужому домену), надёжность (недоступный CDN = страница без шрифта), правовая (лицензия web проверяется отдельно). Формат woff2, поднабор под кириллицу и латиницу, `font-display: swap`, не больше двух семейств и минимум начертаний. Подключение шрифта с внешнего CDN — типовая находка при приёмке. **3. Сторонние скрипты.** Виджеты чатов, пиксели, счётчики, всплывающие окна, карты. Главный источник плохого INP: каждый вешает свои обработчики в основной поток. Правило: каждый скрипт на странице должен иметь названного владельца и причину. Нет причины — снять. Что осталось — грузить отложенно и не в первом экране. **4. Всё остальное:** лишний CSS и JS из шаблона, отсутствие сжатия и кеширования, тяжёлые анимации, встроенные видео вместо превью-заглушки. **INP лечится не «оптимизацией картинок», а работой с тем, что выполняется в ответ на клик.** Если тяжёлый обработчик висит на кнопке отправки формы — картинки не помогут. --- ## Безопасность · проверяемый чек-лист | Пункт | Как это выглядит правильно | |---|---| | **Секреты не в открытом коде** | ключи API, токены, пароли базы — в переменных окружения или хранилище секретов. Не в репозитории, не в теме оформления, не в публичном JS. Утёкший ключ считается скомпрометированным — меняется, а не «прячется» | | **Права по минимуму** | у каждого — только нужный доступ. Один общий пароль администратора на всех участников недопустим | | **Отдельные учётные записи** | у подрядчика своя, у копирайтера своя. Ушёл человек — отозвали доступ, а не сменили общий пароль | | **Резервные копии** | автоматические, хранятся отдельно от боевого сервера, **проверены восстановлением**. Непроверенная копия — не копия | | **Защита форм от спама** | капча или скрытое поле-ловушка плюс ограничение частоты отправок с одного адреса. Без этого база забивается мусором за неделю после первой рекламы | | **Обновления** | CMS, плагины, шаблоны обновляются. Заброшенный плагин с уязвимостью — типовая точка взлома | | **Домен оформлен на заказчика** | владелец домена в реестре — заказчик, не студия и не «Вася, который делал». Продление — на календаре с напоминанием | | **Хостинг оформлен на заказчика** | договор и оплата от заказчика. Аккаунт подрядчика — потеря сайта при конфликте | | **Реестр доступов** | один документ: где домен, где DNS, где хостинг, где репозиторий, где счётчики, где почта, у кого какие права | --- ## Приёмка сайта у подрядчика Универсальный инструмент. Принимается не «красиво или нет», а по списку. Всё, что не проверено при приёмке, чинится потом за свои деньги. **Техническая часть.** 1. Сайт открывается по https, http редиректит, один канонический хост. 2. Мобильная версия проверена на реальном телефоне: формы, меню, кнопки. 3. Формы отправляются и **доходят** — тестовая заявка с чужого устройства, известно, куда она попала. 4. Метрика стоит, цели настроены и срабатывают на тестовой заявке. 5. robots.txt и sitemap.xml на месте и не режут нужное. 6. Скорость измерена, значения зафиксированы **в акте** — иначе через месяц не докажешь, что стало хуже. 7. Страница 404 отдаёт код 404. 8. Изображения оптимизированы, шрифты локальные, лишних сторонних скриптов нет. 9. Резервная копия сделана и **восстановлена на тестовой площадке** при тебе. 10. Исходники и доступы переданы: репозиторий или архив, база, панель хостинга, DNS. **Правовая часть.** 11. Домен зарегистрирован **на заказчика**. 12. Хостинг оформлен **на заказчика**, оплата с его стороны. 13. Хостинг на территории РФ, если есть формы сбора контактов. 14. Политика обработки персональных данных опубликована, ссылка рядом с каждой формой. 15. Согласия раздельные, преднажатых галочек нет. 16. Права на дизайн, тексты и изображения переданы или лицензированы — письменно, с указанием объёма. 17. **Шрифты лицензированы под web-использование.** Проверяется отдельно, это самая частая незамеченная утечка прав. 18. Использованные изображения и иконки имеют законное основание: стоковая лицензия, CC с соблюдением условий, собственная съёмка. 19. Уведомление в РКН подано **до** начала сбора данных (обязанность заказчика, не подрядчика, — но проверить надо до запуска). **Организационная часть.** 20. Написано, кто ведёт сайт дальше и что входит в поддержку. 21. Известно, что делать при падении и к кому идти. 22. Реестр доступов заполнен и лежит у заказчика. --- ## Правовое Информация на 04.08.2026, не юридическая консультация; применимость определяет юрист. Спорные и меняющиеся места — через `cp-compliance`. **Сайт с формой — это обработка персональных данных.** Не «просто заявки»: имя, телефон, почта становятся персональными данными в момент, когда попадают в базу. | Обязанность | Что это значит для сайта | |---|---| | **Уведомление в РКН до начала обработки** (ст. 22 152-ФЗ) | подаётся **до** запуска формы. Исключения по пп. 1–6 ч. 2 ст. 22 утратили силу с 01.09.2022 — практически обязано почти любое лицо, собирающее контакты | | **Политика обработки** (ч. 2 ст. 18.1) | опубликована, прямая ссылка **с каждой страницы сбора** | | **Согласие** (ст. 9) | конкретное, информированное, сознательное: раздельные галочки на обработку и на рекламные рассылки, ничего не предвыбрано | | **Локализация базы в РФ** (ч. 5 ст. 18) | зарубежный CRM, рассыльщик или форма без первичной российской базы — нарушение | | **Трансграничная передача** (ст. 12) | отдельное уведомление до начала передачи | | **Утечка** (ч. 3.1 ст. 21) | два уведомления в РКН: **24 часа** с момента выявления и **72 часа** — результаты расследования. Продления нет, выходные срок не приостанавливают. **Отвечает оператор, даже если инцидент у подрядчика** | Практическое следствие: зарубежная аналитика и зарубежные рассыльщики, собирающие данные напрямую с формы, не закладываются. Первичная база — российская, дальше по необходимости и с оформленными основаниями. Размеры штрафов из памяти не называются: они менялись в 2024–2025 и во вторичных источниках расходятся. Нужна сумма — сверять с действующим текстом КоАП на дату. --- ## Выход ``` ПРОЕКТ: <домен> · тип <посадочная / многостраничник / блог / магазин / сервис> СОБИРАЕТ ПДн: <да / нет> ← переключатель половины требований РЕШЕНИЕ ПО СТЕКУ <конструктор / CMS / код> — потому что <признак из развилки> границы: что этот путь не сможет — <перечень> кто ведёт после запуска: <кто> ИНФРАСТРУКТУРА хостинг: <где, РФ или нет, почему> домен и хостинг оформлены на: <кто> почта, DNS, репозиторий: <где> МИНИМУМ ЗАПУСКА <чек-лист с отметками: готово / нет / не применимо> ПРОИЗВОДИТЕЛЬНОСТЬ измерено: что чинить: <по приоритету — изображения / шрифты / сторонние скрипты> БЕЗОПАСНОСТЬ <чек-лист с отметками> ПРАВОВОЕ <что есть, чего нет, что нельзя сделать задним числом> → cp-compliance ПРИЁМКА (если работу делает подрядчик) <22 пункта с отметками, значения скорости зафиксированы> ``` ## Чек-лист перед выдачей - Ответ на «собираются ли персональные данные» получен — от него зависят хостинг и половина требований. - Развилка «конструктор против кода» разобрана по признакам задачи, а не по вкусу. - Названо, кто ведёт сайт после запуска. - Хостинг в РФ обоснован как **правовое** требование, а не как SEO-приём. - Пороги INP приведены с пометкой уровня A, расхождение измерителей объяснено. - Шрифты локальные, кириллица нормальная, Inter не предложен, лицензия упомянута. - Про формы сказано, что их проверяют отправкой тестовой заявки с чужого устройства. - Домен и хостинг оформлены на заказчика — пункт есть в явном виде. - Резервные копии проверены восстановлением, а не «настроены». - Правовой блок подан как информация с датой и со ссылкой на `cp-compliance`. ## Красные линии 1. **Не размещать базу с персональными данными граждан РФ за пределами РФ** и не советовать этого ради удобства. 2. **Не давать инструкций по обходу блокировок** и по обходу требований закона. 3. **Не запускать сбор контактов** без уведомления РКН, опубликованной политики и раздельных согласий. 4. **Не оформлять домен и хостинг на подрядчика.** Никогда, ни при каких договорённостях. 5. **Не хранить секреты в коде и репозитории.** Утёкший ключ меняется, а не прячется. 6. **Не обещать конкретных значений скорости и позиций** после доработок. 7. **Не называть сумм штрафов и цен сервисов из памяти** — только после сверки на дату. 8. **Не принимать работу без тестовой заявки, проверенного восстановления копии и переданных доступов.** 9. **Не ставить шрифты с внешнего CDN** и не использовать шрифты без проверенной web-лицензии.