Как создаётся сайт: что скрыто под дизайном

Сайт почти всегда сдают по картинке. Заказчик открывает макет на большом экране, видит ровные блоки, красивый шрифт, свою фотографию на первом экране — и говорит «отлично, запускаем». А через полгода приходит с другим вопросом: почему по нему никто не звонит. Между этими двумя разговорами лежит всё, что на картинке не видно, и именно там решается судьба сайта. Страница может выглядеть дорого, но грузиться восемь секунд, криво открываться с телефона, не попадать в поиск и терять половину посетителей ещё до того, как дорисуется до конца.

Дальше — разработка сайтов в объяснении без кода: что грамотная команда строит под обложкой и как создаётся сайт, который реально работает. Программировать вам не нужно. Нужно понимать, что заказывать и о чём спрашивать на этапе сметы: разница между сайтом-инструментом и сайтом-визиткой почти целиком техническая, и увидеть её можно только тогда, когда чего-то не хватает, — а переделывать тогда уже дорого.

Скорость — это не роскошь, а входной билет

Откройте свой сайт с телефона и посчитайте секунды до момента, когда заголовок можно прочитать, а на кнопку — нажать, не промахнувшись по прыгающей вёрстке. Эта пауза точнее всего предсказывает, останется новый посетитель или закроет вкладку. И Google измеряет её за вас, спрашивали вы об этом или нет.

Линейка для замера — три показателя, которые Google объединил под названием Core Web Vitals. LCP (Largest Contentful Paint) считает, через сколько появляется основной контент: хорошо — меньше 2,5 секунды. INP (Interaction to Next Paint) меряет, как быстро страница отзывается на нажатие: хорошо — меньше 200 миллисекунд. CLS (Cumulative Layout Shift) оценивает, насколько сильно скачет вёрстка при загрузке: хорошо — меньше 0,1. Важная деталь: оценивается опыт ваших реальных посетителей, причём по медленному краю выборки — по 75-му перцентилю. Так что страница, которая летает на офисном проводе, но еле ползёт на телефоне с одной палочкой сети, честно считается медленной.

Это не цифры для красивого отчёта: они напрямую влияют на позиции в выдаче, и в 2026 году этот вес Google усилил своими core-обновлениями. Планка выше, чем думает большинство владельцев: на середину 2026 года лишь чуть больше половины всех сайтов в данных Chrome проходят все три показателя сразу, а отзывчивость (INP, с марта 2024 года официально сменивший старую метрику FID) — та, на которой спотыкаются чаще всего. Быстрая загрузка сайта и вся Core Web Vitals оптимизация — это незаметная инженерия: картинки сжаты и отданы в нужном размере, лишние скрипты убраны, шрифты не держат текст в заложниках, сервер отвечает быстро. На макете этого не видно — зато всё чувствуется на пальцах.

Чистая структура — это скелет, который читает Google

Страница собирается из HTML, и у HTML есть два способа сказать одно и то же. Можно завернуть всё подряд в безликие коробки, а можно использовать элементы, которые честно называют каждый кусок: вот это главный заголовок, это навигация, это статья, это кнопка. Второй подход называют семантической вёрсткой, и сделать её хорошо не стоит ничего сверху.

Это важно, потому что у страницы есть две аудитории, которые дизайн вообще не видят. Поисковые роботы читают голую структуру, чтобы понять, о чём страница: один внятный заголовок первого уровня, под ним логичные подзаголовки, настоящие ссылки вместо кликабельных картинок. Программы для незрячих делают ровно то же самое для людей, которые экран не видят. Соберите скелет правильно — и обе аудитории понимают вас мгновенно. Соберите криво, стеной безымянных блоков с заголовком из просто крупного жирного текста, — и вы подсунули машине абзац без знаков препинания.

К структуре относятся и адреса страниц. Ссылка вида /uslugi/santehnik-moskva сразу говорит и человеку, и поисковику, что внутри; адрес /?page_id=4837 не говорит ничего. Понятная иерархия разделов, осмысленные перелинковки и карта сайта со всем, что стоит индексировать, — вот что отличает сайт, который Google обходит за вечер, от сайта, в который он так и не заглянул целиком.

SEO закладывают в фундамент, а не прикручивают потом

Живуч миф, будто SEO — это услуга, которую докупают после того, как сайт готов. На деле самое дорогое в переделке — ровно то, что должно было войти в проект с первого дня, и доделать это задним числом часто значит заново перебирать оплаченные страницы.

В фундамент входит несколько вещей:

• Уникальные заголовки и описания для каждой страницы, чтобы в выдаче показывалось что-то конкретное, а не одна и та же дежурная строка, скопированная на весь сайт.
• Чистые читаемые адреса и логичная структура, продуманные до того, как зальют тексты, а не залатанные после.
• Микроразметка — невидимый слой тегов, который прямо проговаривает факты, которые поисковик иначе вынужден угадывать: что вы стоматология в конкретном городе, ваши часы работы, ваши оценки. Именно она питает расширенные сниппеты и звёздочки рейтинга в Google.
• Корректная работа с дублями и языковыми версиями, чтобы поисковик понимал, какая версия страницы основная. Для компании на несколько языков ошибка здесь распыляет сигналы ранжирования по конкурирующим копиям одной страницы.

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

Доступность сайта по WCAG — уже не благотворительность, а здравый расчёт

Раньше про доступность сайта для людей с ограничениями говорили как про приятное дополнение «если останется бюджет». Сегодня во многих странах это требование. В Евросоюзе с июня 2025 года действует Европейский акт о доступности, и техническим ориентиром в нём назван стандарт WCAG 2.2 уровня AA. Сам стандарт стал общепринятой точкой отсчёта ещё в октябре 2023 года, и именно уровень AA цитируют по всему миру.

Хорошая новость в том, что эта работа почти полностью совпадает с заботой о структуре. Достаточный контраст, чтобы текст читался на солнце. Текстовое описание у каждой картинки — для тех, кто пользуется экранным диктором. Поля форм с понятными подписями. Сайт, которым можно управлять с одной клавиатуры, без мыши. Ничего из этого не делает страницу уродливее; большинство этих мелочей делают её понятнее вообще всем — включая большую долю посетителей, у которых просто старый телефон, треснувший экран или тряская электричка по дороге на работу. Доступность и удобство — это один проект под двумя бирками.

Безопасность и HTTPS: замочек, который перестал быть опцией

Вы наверняка замечали значок замка рядом с адресом сайта. Он означает, что соединение зашифровано по HTTPS и данные между посетителем и сайтом по дороге нельзя ни прочитать, ни подменить. Долгие годы это настойчиво рекомендовали — теперь это фактически обязательно.

Chrome в течение 2026 года поэтапно переходит на то, чтобы открывать сайты по защищённому соединению по умолчанию и предупреждать пользователя перед заходом на незащищённую HTTP-страницу. Сайт без замка всё чаще будет встречать новых людей плашкой «Не защищено» — убийственное первое впечатление для бизнеса, который просит незнакомца оставить контакты в форме. Сам сертификат шифрования бесплатный и стандартный; любая вменяемая сборка его включает. Но безопасность шире одного замочка: вовремя обновлять движок сайта, закрывать формы от спама, регулярно делать резервные копии. Это тот слой обслуживания, который отличает сайт с хозяином от брошенного.

Мобильная версия сайта — это основа, а не приложение к десктопу

Рисовать сначала под большой экран, а потом ужимать на телефон — это наизнанку, и Google закрепил это официально. С 2024 года поисковик обходит и оценивает прежде всего мобильную версию сайта; десктопный вид теперь второстепенен. К июлю того же года Google перевёл на мобильный обход вообще все оставшиеся сайты. Простой вывод: если что-то существует или работает только в широкой раскладке, для поиска этого как будто нет.

Причина — арифметика. В зависимости от методики подсчёта на телефоны в 2026 году приходится примерно от половины до двух третей всех заходов в интернет, а у многих локальных компаний доля мобильных и того выше: человек стоит на углу улицы и решает, где поесть или какого сантехника набрать. Мобильная версия сайта строится от маленького экрана: кнопки крупные под большой палец, текст читается без растягивания пальцами, формы не требуют клавиатуры размером со стол. И уже потом всё разворачивается до ноутбука — тот же контент, та же скорость под любое устройство. Телефон здесь настоящий продукт, а не уменьшенная копия.

Аналитика с согласием: знать, что работает, и не нарушать закон

Сайт, который нельзя измерить, — это сайт, про который вы гадаете. Простая аналитика показывает, какие страницы люди действительно читают, откуда они приходят и на каком шаге сдаются. Эта обратная связь превращает статичную брошюру в то, что улучшается из месяца в месяц; без неё любая правка — подбрасывание монетки.

Загвоздка — в законах о приватности. По GDPR и смежным правилам вы, как правило, не имеете права ставить отслеживающие куки посетителю из ЕС до того, как он согласится. Поэтому и существуют настоящие баннеры согласия — не те тёмные шаблоны, где кнопку «отклонить» прячут с глаз, а честный выбор, после которого трекинг включается только при «да». Сделано как надо, аналитика и приватность уживаются: вы понимаете, что работает, посетитель сохраняет контроль над данными, регулятор не имеет к вам вопросов. Сделано на отвяжись — вы либо летите вслепую, либо тихо нарушаете закон. Лёгкий способ с уважением к приватности существует, и ему место в исходном плане.

Своя разработка против конструкторов и шаблонов

Вот решение, которое на самом деле волнует большинство заказчиков. Маршрутов три, и любой может и выстрелить, и провалиться в зависимости от задачи.

Конструкторы с перетаскиванием блоков (всё-в-одном платформы) выводят вас в онлайн быстро и недорого, а ещё берут на себя хостинг, сертификаты безопасности и обновления. Расплата — потолок. Вы внутри чужой системы, и когда понадобится особая вёрстка, более быстрая страница, точная интеграция или тонкая настройка SEO, вы упрётесь в стены, которые не сдвинуть. Для простого присутствия в сети этот потолок может быть так высоко, что вы его и не заметите.

Шаблоны — готовый дизайн, который вы дорабатываете под себя, — стоят посередине. Вы получаете настоящую основу и экономите на отрисовке с нуля, но наследуете всё качество, с которым шаблон собрали, включая невидимые части. Дешёвый шаблон легко приезжает с раздутым кодом, который тихо проваливает Core Web Vitals с первого дня, а узнаете вы об этом только тогда, когда об этом сообщат позиции в выдаче.

Своя разработка дороже на старте и дольше по срокам. Что вы за это покупаете — контроль над каждым слоем из этой статьи: производительность под прохождение Core Web Vitals, структуру и SEO с первой строки, осознанно решённые доступность и безопасность, сайт, который гнётся под ваш бизнес, а не наоборот. Это окупается, когда сайт становится настоящим источником клиентов, а не цифровой визиткой.

Правильный выбор — не самый дешёвый и не самый навороченный. Это тот, что отвечает задаче, которую сайт реально должен отрабатывать.

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

То, чего не видно, и есть та часть, что приносит деньги

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

Понимать всё это нужно ради острых вопросов. Когда вам называют цену, спросите, как сайт пройдёт Core Web Vitals, заложены ли SEO и микроразметка в сборку или это «отдельно», доступен ли он из коробки и как поведёт себя на трёхлетнем телефоне со слабым сигналом. Ответы за полминуты покажут, покупаете вы работающий сайт или его фотографию. А конкретные тарифы и форматы — на главной странице.