Новые технологии создания сайтов — это не 3D-сцены и голосовое управление из статей про тренды, а скромные на вид возможности браузеров, которые за 2023–2025 годы появились во всех основных браузерах сразу. Благодаря им сайт может быть быстрее, легче и дешевле в разработке. Ниже — какие технологии реально стали доступны и когда, проверка вашего браузера прямо на этой странице, отбор «польза или модный лишний вес» для того, что вам предлагают студии, и случай сайта производителя кухонь, который похудел с 14 до 1,1 мегабайта.
Я делаю сайты на технологиях, которые работают у всех посетителей, а не только у разработчика. Создание сайтов под ключ: лендинг — от 15 000 ₽ за 3–7 дней, сайт-визитка — от 25 000 ₽ за 7–14 дней, корпоративный сайт — от 40 000 ₽ за 2–4 недели, интернет-магазин — от 60 000 ₽ за 3–6 недель. Договор, чек самозанятого, гарантия 12 месяцев.
Тридцать страниц поиска: языки и инструкции, но не то, что нового
Я разобрал тридцать страниц, которые поиск показывает по запросу «технологии создания сайтов». Тринадцать — обзоры веб-разработки: фронтенд, бэкенд, языки программирования, фреймворки. Девять — инструкции, как сделать сайт самому в конструкторе или CMS. Две — про этапы разработки, две — научные статьи из КиберЛенинки, три — размышления разработчиков о выборе технологий. И одна — «тренды 2026»: искусственный интеллект, 3D, голосовые команды.
Обзоры полезны тем, кто учится программировать: HTML, CSS, JavaScript, PHP, фреймворки. Про языки у меня есть отдельный разбор — «Язык создания сайта: четыре языка и сайт на нескольких языках», а про то, как устроены основы сайта и веб-приложения, — «Создание сайтов и приложений: где граница и что выбрать». Но владельцу сайта эти списки мало что говорят: языки не поменялись за двадцать лет. Поменялось другое — что умеют браузеры. И ни одна из тридцати страниц об этом не рассказывает.
Короткий ответ: что такое современные технологии создания сайтов
Основные современные технологии создания сайтов — те же три слоя, что и раньше: HTML отвечает за структуру, CSS — за внешний вид, JavaScript — за поведение, плюс серверная часть, если сайт хранит данные. Новое в другом: за последние три года браузеры научились делать сами многое из того, для чего раньше нужны были библиотеки, скрипты и часы работы программиста.
- Меньше кода — быстрее сайт. Всплывающее окно, плавный переход, вёрстка карточек под любой экран теперь делаются средствами браузера, без тяжёлых библиотек.
- Меньше кода — дешевле разработка и поддержка. То, что раньше занимало день, занимает час, и через год ничего не сломается при обновлении библиотеки.
- Лёгкие изображения. Формат AVIF при том же качестве весит заметно меньше JPEG, а поддерживают его все основные браузеры.
- Скорость стала метрикой. С 12 марта 2024 года в Core Web Vitals Google вместо задержки первого ввода (FID) учитывается INP — насколько быстро страница откликается на любое действие посетителя.
Главный критерий, по которому технологию можно считать «готовой», — поддержка во всех основных браузерах. У разработчиков для этого есть понятие Baseline: возможность есть в актуальных версиях Chrome, Edge, Firefox и Safari. Через тридцать месяцев после этого она считается широко доступной — её можно использовать, не думая о старых телефонах.
Новые технологии в создании сайтов: что и когда появилось во всех браузерах
Вот что реально изменилось за последние три года. Именно это я называю новыми технологиями для создания сайтов, а не очередной язык программирования. Даты — когда возможность появилась во всех основных браузерах, по данным web.dev.
Что это значит на практике, без терминов:
- Контейнерные запросы — карточка товара сама подстраивается под ширину колонки, в которую её поставили, а не только под ширину экрана. Один блок работает и в каталоге, и в боковой колонке, и на телефоне.
- :has() — стиль меняется в зависимости от содержимого: например, карточка с отметкой «нет в наличии» становится серой без единой строки JavaScript.
- Вложенность в CSS — стили пишутся компактнее, без отдельных программ-препроцессоров. Для владельца это меньше инструментов, которые нужно обновлять.
- AVIF — формат изображений, который при том же качестве заметно легче JPEG. С января 2024 года, когда его добавил Edge 121, он работает во всех основных браузерах.
- Popover API — всплывающие подсказки, меню и окна средствами самого браузера, с правильной работой клавиатуры и кнопки «назад» на телефоне.
- View Transitions — плавная анимация при смене содержимого страницы, без тяжёлых библиотек.
Проверка: какие из новых технологий умеет ваш браузер
Эта проверка запускается прямо в вашем браузере и показывает, какие из новых возможностей он поддерживает. Откройте страницу на телефоне и на компьютере — результаты могут отличаться, особенно если телефон давно не обновлялся.
Новые технологии в вашем браузере
Проверка смотрит, поддерживает ли браузер возможность, а не то, используется ли она на каком-то сайте. Ничего никуда не отправляется.
В актуальных Chrome, Яндекс Браузере, Edge, Firefox и Safari проверка покажет все одиннадцать пунктов. Если у вас меньше — скорее всего, браузер или операционная система давно не обновлялись. Это важный урок и для заказчика сайта: часть ваших посетителей сидит на старых телефонах. Поэтому новые возможности я использую так, чтобы без них сайт оставался рабочим — просто чуть проще. Разработчики называют этот подход прогрессивным наращиванием: сначала сайт, который работает везде, потом приятные дополнения сверху. Современные техники создания сайтов начинаются именно с этого подхода, и о нём молчат все обзоры.
Инновационные технологии в создании сайтов: польза или модный лишний вес
Студии любят продавать «инновационные технологии»: 3D-сцены, видео на фоне, чат с искусственным интеллектом, голосовое управление. Часть из них действительно приносит заявки, часть только утяжеляет сайт. Отметьте, что вам предлагают или что вы сами хотите, — отбор покажет, что окупается, что зависит от ситуации, а что — лишний вес.
Польза или лишний вес: отбор технологий для сайта
Оценки — по моему опыту для сайтов малого и среднего бизнеса, часы — ориентир при ставке 1 000–1 500 ₽ в час. Для интернет-магазина с тысячами товаров или портала выводы могут отличаться.
По умолчанию отмечен типичный набор из коммерческого предложения «современного сайта»: адаптивная вёрстка, AVIF, ленивая загрузка, ИИ-чат, видео на фоне, 3D-модели и голосовое управление. Получается около 62 часов, из которых 49 — на технологии из группы «лишний вес», то есть 49 000 – 74 000 ₽. И скорость на телефоне такой набор серьёзно ухудшит. Снимите три последних пункта и добавьте калькулятор цены — работы станет меньше, а заявок, по моему опыту, больше.
❌ «Современный сайт» по версии презентации
- Видео на фоне и 3D-модель на главной.
- Анимация на каждом блоке при прокрутке.
- Тяжёлый фреймворк для сайта из пяти страниц.
- Картинки в JPEG по 2–3 мегабайта.
- Красиво на мощном компьютере дизайнера.
✅ Современный сайт по версии браузера
- Первый экран — текст, кнопка и лёгкое изображение в AVIF.
- Анимации — только там, где помогают понять.
- Всплывающие окна и переходы — средствами браузера.
- Ленивая загрузка всего, что ниже первого экрана.
- Быстро на трёхлетнем телефоне в метро.
Совет вебмастера: когда вам предлагают «инновационные технологии», задайте два вопроса. Первый: сколько весит главная страница и за сколько секунд она открывается на телефоне с мобильным интернетом? Второй: какую задачу посетителя решает эта технология? Если на первый вопрос нет цифры, а на второй ответ «это сейчас модно», — технология нужна студии для презентации, а не вам.
Технологии для создания веб сайта под разные задачи
Технологии создания современных сайтов не означают «всё самое новое везде». Набор зависит от того, что сайт должен делать. Вот как я подбираю технологии для создания сайтов разного типа.
- Лендинг или сайт-визитка. Статические страницы или лёгкая CMS, изображения в AVIF, ленивая загрузка, форма заявки. Никаких фреймворков: на пяти страницах они только добавляют вес.
- Корпоративный сайт с услугами и статьями. CMS, чтобы владелец сам добавлял материалы, контейнерные запросы для карточек услуг, микроразметка, калькулятор, если цена зависит от параметров.
- Интернет-магазин. Платформа или CMS с каталогом, обмен с учётной системой, фильтры, AVIF для фото товаров. Здесь скорость каталога на телефоне напрямую превращается в деньги.
- Сервис с личным кабинетом. Фреймворк на сервере, база данных, всплывающие окна и переходы средствами браузера. Здесь JavaScript-фреймворк на клиенте бывает оправдан — в отличие от визитки.
Современные технологии для создания сайта выбираются от задачи к инструменту, а не наоборот. Если вам предлагают один и тот же набор для визитки и для сервиса — это набор, удобный исполнителю, а не вам.
Что из старого пора убрать с сайта
Современные технологии в создании сайта — это не только то, что добавить, но и то, от чего отказаться. На сайтах, которые приходят ко мне на доработку, чаще всего встречается одно и то же.
- Большая библиотека ради одного эффекта. Целая библиотека подключена ради слайдера или всплывающего окна, которое браузер теперь умеет сам.
- Слайдер на первом экране. Пять сменяющихся баннеров, из которых посетитель видит первый. Один ясный экран работает сильнее.
- Иконки шрифтом. Шрифт на сотни иконок ради десяти значков. Встроенные SVG легче и чётче.
- Фотографии «как с камеры». Снимки по 3–5 мегабайт, уменьшенные только на экране. Перевод в AVIF и правильный размер — часто минус 80% веса страницы.
- Чужие виджеты. Ленты соцсетей, несколько чатов, лишние счётчики — каждый тянет свои скрипты и замедляет отклик.
Уборка обычно занимает от четырёх до двенадцати часов и даёт больше, чем любая «инновационная технология»: сайт становится быстрее для всех посетителей сразу.
Как проверить технологии на своём сайте за десять минут
Не обязательно разбираться в коде, чтобы понять, на каких технологиях сделан сайт и не тянут ли они его вниз.
- PageSpeed Insights. Введите адрес сайта на pagespeed.web.dev и посмотрите мобильную версию. Важны три показателя Core Web Vitals: скорость появления главного содержимого (LCP), отклик на действия (INP) и смещение блоков при загрузке (CLS).
- Вес страницы. В браузере на компьютере нажмите F12, откройте вкладку «Сеть», обновите страницу. Внизу — сколько данных загрузилось. Для страницы сайта малого бизнеса ориентир — один-два мегабайта, а не десять.
- Формат картинок. На той же вкладке отфильтруйте изображения: если всё в JPEG и PNG по мегабайту, здесь самый быстрый выигрыш.
- Проверка на телефоне. Откройте сайт на недорогом телефоне через мобильный интернет, а не через офисный Wi-Fi. Так его видит заметная часть ваших клиентов.
- Что подключено. Сервисы вроде определителей технологий в браузере покажут CMS, фреймворки и библиотеки. Пять библиотек анимации на сайте-визитке — повод задать вопросы.
Хотите понять, не утяжеляют ли сайт «современные технологии»? Пришлите адрес в Telegram — посмотрю вес страниц, скорость на телефоне и подключённые библиотеки, скажу, что можно убрать без потерь. Как я работаю — на странице «Процесс работы».
Случай: сайт производителя кухонь, который похудел в 13 раз
В 2025 году ко мне обратился производитель кухонь на заказ из Подмосковья. Сайт ему сделала студия за год до этого — «на современных технологиях»: одностраничное приложение на JavaScript-фреймворке, видео на фоне главной, 3D-модель кухни, которую можно вращать, анимация на каждом блоке. На компьютере в офисе всё выглядело эффектно. Но больше половины посетителей приходили с телефонов, и заявок с них было мало.
Что показала проверка:
- Главная страница весила около 14 мегабайт: видео, 3D-модель, библиотеки анимации, фотографии в JPEG по 2–3 мегабайта.
- На мобильном интернете главное содержимое появлялось через 8–9 секунд, отклик на нажатия — с заметной задержкой.
- Страницы моделей кухонь поисковик видел частично: текст подгружался скриптом после загрузки.
Мы пересобрали сайт на CMS с обычными страницами. Видео на фоне заменили фотографией в AVIF, 3D-модель оставили только на странице конструктора кухни и загружаем её по нажатию кнопки. Вместо анимаций — плавные переходы средствами браузера. Добавили калькулятор примерной стоимости кухни по размерам. Работа заняла около 60 часов.
Главная страница стала весить около 1,1 мегабайта, главное содержимое на телефоне появляется примерно за две секунды. По данным Метрики, за три месяца после запуска заявок с мобильных стало примерно на 40% больше, а калькулятор стоимости стал вторым по популярности источником обращений после телефона. 3D-конструктор по-прежнему есть — им пользуются те, кто уже выбирает, а не те, кто только зашёл.
«Самая современная технология, которую я могу предложить клиенту, — сайт, который открывается за две секунды на старом телефоне. Всё остальное — украшения, и у каждого украшения есть цена в секундах. Я спрашиваю не "что сейчас модно", а "что увидит человек в метро"».
— Александр Рожков
Как это ищут: короткие ответы
«Технологию создания сайтов», «технологи создания сайтов», «it технологии создание сайтов», «технология по созданию web сайта». Основа одна: HTML, CSS, JavaScript и серверная часть с базой данных, если сайт хранит данные. Выбор — конструктор, CMS или разработка на фреймворке — зависит от задачи сайта.
«Различные технологии создания сайтов», «все технологии по созданию сайтов», «технологии использующиеся в создании сайтов». Если коротко: конструкторы, системы управления контентом, статические сайты, фреймворки для веб-приложений. Внутри каждого способа — те же HTML, CSS и JavaScript.
«Создание сайтов новейшие технологий», «новые технологии к созданию сайтов», «новые технологии по созданию сайтов», «новые технологии для создания сайта». Самое заметное новое за 2023–2025 годы — контейнерные запросы, :has(), формат AVIF, Popover API и View Transitions. Хронология — в схеме выше.
«Современные интернет технологии создания сайтов», «современные технологии создания веб сайтов», «современные технологии по созданию сайтов». Адаптивная вёрстка, лёгкие изображения, ленивая загрузка, внимание к скорости по Core Web Vitals и прогрессивное наращивание возможностей: новое используется так, чтобы сайт работал и у тех, у кого браузер старый.
«Активные технологии создание сайтов». Так иногда называют серверные технологии, которые собирают страницу в момент запроса, — например, ASP от Microsoft или PHP. Сейчас почти все сайты с админкой работают именно так.
«Вики технология создания сайтов». Вики — сайт, который правят сами читатели, как Википедия. Делается на готовых движках, например MediaWiki. Подходит для баз знаний и справочников, но не для сайта компании.
«Пользовательские технологии создания сайтов». Обычно имеют в виду инструменты без программирования: конструкторы и визуальные редакторы. Подходят для простых сайтов, если понимать их ограничения.
«Вывод технологии создания сайтов». Если нужен вывод для реферата — он в разделе «Итог» ниже.
Итог
Технологии создания сайтов в основе не меняются: HTML, CSS, JavaScript и серверная часть. Меняется то, что умеют браузеры, — и за 2023–2025 годы они научились многому: контейнерные запросы, :has(), вложенность CSS, AVIF, Popover API, View Transitions. Для владельца сайта это значит меньше кода, быстрее страницы и дешевле поддержка. «Инновационные технологии» из презентаций — 3D на главной, видео на фоне, голосовое управление — чаще утяжеляют сайт, чем приносят заявки. Современный сайт — не тот, где больше эффектов, а тот, что быстро открывается на старом телефоне и использует новые возможности так, чтобы без них ничего не ломалось. Проверьте свой браузер и отберите технологии в блоках выше — или пришлите мне адрес сайта.
Опрос
Что для вас главное в современном сайте?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Какие технологии используются для создания сайтов?
Основа — HTML для структуры, CSS для оформления и JavaScript для поведения страницы. Если сайт хранит данные, добавляется серверная часть: PHP, Python или JavaScript на сервере и база данных. Собирают сайт в конструкторе, на CMS, статическими файлами или на фреймворке — в зависимости от задачи.
Какие новые технологии появились в создании сайтов?
За 2023–2025 годы во всех основных браузерах появились контейнерные запросы, селектор :has(), вложенность в CSS, подсетка subgrid, формат изображений AVIF, Popover API для всплывающих окон и View Transitions для плавных переходов. Они позволяют делать сайты легче и быстрее с меньшим количеством кода.
Нужны ли сайту 3D, видео на фоне и ИИ-чат?
Чаще нет. Видео на фоне и 3D на главной добавляют мегабайты и секунды загрузки на телефоне. ИИ-чат требует подписки, ошибается и собирает данные посетителей. Такие технологии оправданы точечно: 3D — на странице товара, где важен объём, чат — где много типовых вопросов.
Как проверить, на каких технологиях сделан сайт?
Введите адрес в PageSpeed Insights и посмотрите мобильную версию и Core Web Vitals. В браузере на вкладке «Сеть» в инструментах разработчика видно, сколько весит страница и в каком формате картинки. Расширения-определители технологий покажут CMS и подключённые библиотеки.
Что такое INP и почему это важно?
INP — показатель того, насколько быстро страница откликается на действия посетителя: нажатия, ввод, открытие меню. С 12 марта 2024 года он входит в Core Web Vitals вместо FID. Тяжёлые скрипты и анимации ухудшают INP, особенно на недорогих телефонах.
Стоит ли переделывать старый сайт ради новых технологий?
Только если старый сайт медленный, плохо выглядит на телефоне или его трудно поддерживать. Многие новые возможности можно добавить постепенно: перевести картинки в AVIF, включить ленивую загрузку, убрать лишние библиотеки. Полная переделка нужна, когда сайт не справляется со своей задачей.
Что такое Baseline в веб-разработке?
Это отметка о том, что возможность поддерживается в актуальных версиях всех основных браузеров: Chrome, Edge, Firefox и Safari. Через 30 месяцев после этого возможность считается широко доступной, и её можно использовать, не беспокоясь о большинстве старых устройств.
