Перейти к основному содержимому
Mobius
Базовый

Что такое фронтенд (Front-end)

Другие названия: Front-end, Frontend, фронт-энд, клиентская часть, фронтенд-разработка

Определение

Фронтенд (front-end) это часть сайта или приложения, которую видят и нажимают: тексты, кнопки, формы и картинки. Его пишут на HTML, CSS и JavaScript.

Почему это важно

Именно во фронтенде клиент решает, остаться, записаться или купить, поэтому медленная или запутанная страница теряет заявки, которых остальная система даже не увидит.

Частые ошибки

Менять дизайн, не перепроверив формы и теги отслеживания, из-за чего подсчет заявок и конверсий тихо останавливается.

Связанные термины

Практический примерУсловный пример

Одна кнопка записи, разобранная на части

Страница записи, части подписаны

  • Кнопка записи, поле телефонаHTML
  • Цвет, размер, раскладка справа налевоCSS
  • Проверка телефона, выбор времениJavaScript
  • Заявка засчитана в аналитикеТег отслеживания

Работает на

Телефоне или компьютере посетителя

Повторная проверка

На сервере, в бэкенде

Шаги

  1. HTML ставит на страницу кнопку и поле для телефона.

  2. CSS красит кнопку в зеленый, делает ее достаточно крупной для нажатия пальцем и выравнивает вправо для иврита.

  3. JavaScript проверяет номер телефона прямо во время ввода и открывает выбор времени.

  4. По нажатию страница отправляет данные в бэкенд, который проверяет их заново.

  5. Решение: То же нажатие запускает событие аналитики, по которому бизнес считает заявки.

Небрежно поменяли цвет, и кнопка все равно работает. Сломали событие аналитики, и бизнес перестал считать заявки, даже не заметив этого.

Условный пример

Как это работает

Пользователь, Фронтенд, Бэкенд, База данныхПользовательФронтендHTML, CSS, JavaScriptработает наустройствепосетителяЧто видит пользовательЗа кулисамиБэкендPHP, Node.js, Pythonработает насервереБаза данныхMySQL
Фронтенд: видимый верхний слой, всё, что пользователь видит и нажимает в браузере.

Проследите одно нажатие на «Оплатить»

  1. 1ТелефонПокупатель нажимает «Оплатить». Страница отправляет корзину и данные.
  2. 2ИнтернетЗапрос идет через интернет на сервер магазина.
  3. 3СерверБэкенд заново проверяет цены и не доверяет цене, которую прислал телефон.
  4. 4База данныхБаза данных возвращает настоящие цены и остатки.
  5. 5Платежный провайдерБэкенд просит платежного провайдера списать деньги с карты и ждет подтверждения.
  6. 6База данныхБаза данных сохраняет заказ и уменьшает остаток.
  7. 7СерверБэкенд отправляет ответ обратно на телефон.
  8. 8ТелефонСтраница показывает сообщение «Спасибо».

Две из восьми остановок проходят на телефоне покупателя: нажатие и страница «Спасибо». Это фронтенд.

Фронтенд: первая и последняя остановка. Он принимает нажатие на телефоне посетителя и показывает ответ. Все, что между ними, происходит в другом месте.

Определение

Фронтенд это код, который строит то, что посетитель видит и трогает. Он загружается на телефон или компьютер посетителя и работает там. У него три строительных блока: HTML задает структуру страницы (заголовки, текст, кнопки, поля формы), CSS отвечает за внешний вид (цвета, размеры, раскладку, направление справа налево для иврита), а JavaScript за поведение (проверить поле во время ввода, открыть меню, отправить форму). Раз фронтенд работает на устройстве посетителя, его скорость зависит от телефона и связи, а в вопросах цен и прав доступа ему нельзя доверять: бэкенд проверяет их заново. UX решает, как страница должна работать для пользователя, веб-дизайн решает, как она выглядит, а фронтенд-разработка превращает и то и другое в работающий код. Конструктор сайтов, например Wix или WordPress, дает готовый фронтенд поверх бэкенда, которым управляет платформа.

Почему это важно

Google оценивает его по трем метрикам Core Web Vitals, на 75-м процентиле загрузок страницы. Largest Contentful Paint (как быстро появляется основной контент) считается хорошим, если не превышает 2,5 секунды. Interaction to Next Paint (как быстро страница отвечает на нажатие) считается хорошим, если не превышает 200 миллисекунд, и 12 марта 2024 года эта метрика заменила First Input Delay. Cumulative Layout Shift (насколько страница прыгает при загрузке) считается хорошим, если не превышает 0,1. Любую страницу можно бесплатно проверить в PageSpeed Insights. Во фронтенде живут и теги отслеживания, которые считают ваши заявки, поэтому небрежная правка может остановить измерения, хотя страница выглядит нормально.

Напрямую связано: Бэкенд (Back-end), Фулстек (Full-stack), Клиент (Client).

Советы по улучшению

  • Проверьте главные страницы в PageSpeed Insights и начните с худшей метрики Core Web Vitals, часто это слишком тяжелая картинка.
  • После каждой правки фронтенда проверяйте формы, кнопку оплаты и теги отслеживания, а не только внешний вид.
  • Проверяйте дизайн на маленьком старом телефоне через мобильный интернет: именно там видна большая часть тормозов.
  • Следуйте правилам доступности, чтобы посетители с клавиатурой или экранным диктором тоже могли записаться и купить.
  • Откройте в браузере «Просмотр кода страницы» (View page source), чтобы увидеть HTML, который ваш сайт на самом деле отдает посетителям.

Частые ошибки

  • Оценивать скорость на офисном компьютере, а не на среднем телефоне через мобильный интернет.
  • Проверять цены, скидки или права доступа только во фронтенде, где любой посетитель может их изменить.
  • Платить за разработку фронтенда с нуля, когда хватило бы готового фронтенда конструктора сайтов.
Фронтенд против бэкенда

Связанные термины

ТехнологииСредний

Бэкенд (Back-end)

Бэкенд (back-end) это невидимая пользователю часть сайта или приложения: он сохраняет заказ, проверяет склад, списывает деньги с карты и ведет аккаунты.

ТехнологииСредний

Фулстек (Full-stack)

Фулстек (full-stack) это разработчик или команда, которые делают и то, что видит пользователь (фронтенд), и сервер с базой данных за ним (бэкенд).

ТехнологииБазовый

Клиент (Client)

Клиент (client) в IT это программа, например браузер или приложение, которая отправляет запрос серверу и показывает ответ. Не путать с клиентом бизнеса.

ТехнологииСредний

API (интерфейс прикладного программирования)

API (интерфейс прикладного программирования) это принятый способ, которым одна программа просит у другой данные или действие и получает ответ.

ПродуктБазовый

UI (пользовательский интерфейс)

UI (пользовательский интерфейс) это то, что человек видит и нажимает на экране: кнопки, текст, меню и их расположение. Хороший UI подсказывает, куда смотреть.

Короткая проверка

Вы ставите задачу разработчику. Какая часть вашего сайта относится к фронтенду?

Выберите ответ

Часто задаваемые вопросы

Нужно ли разбираться во фронтенде до открытия бизнеса?
Ровно настолько, чтобы ставить задачи и нанимать. Фронтенд это код за всем, что клиенты видят и нажимают, поэтому от подрядчика можно требовать скорость на телефоне и работающие формы, а не только красивый дизайн.
Когда фронтенд становится важен для нового бизнеса?
В тот день, когда вы делаете сайт, лендинг или приложение. Конструктор сайтов дает готовый фронтенд, и тогда вопрос в том, достаточно ли быстры и гибки его шаблоны для ваших задач.
Заказать фронтенд с нуля или взять конструктор сайтов?
Для нового бизнеса конструктор обычно быстрее и дешевле на старте, потому что бэкенд за вас ведет платформа. Разработка с нуля окупается, когда нужно то, чего конструктор не умеет, или когда его скорость вас тормозит.
Как решения по фронтенду влияют на бюджет?
Индивидуальный дизайн и разработка дороже на старте, и каждую следующую правку делает разработчик. Шаблоны удешевляют старт, но ограничивают, что можно поменять. Заложите в бюджет и проверку на телефонах, и поддержку после запуска.
Почему фронтенд важен для уже работающего бизнеса?
Именно там посетители решают, остаться или уйти. Улучшение медленной или запутанной страницы может поднять конверсию, и проверяется это замерами до и после, а не тем, как выглядит новая страница.
Что происходит, когда бизнес забрасывает фронтенд?
Страницы медленно грузятся на телефонах, верстка ломается после обновлений браузеров, по кнопкам трудно попасть. Посетители уходят молча, и в аналитике это видно только по падению конверсии.
Как улучшать фронтенд, не останавливая текущую работу?
Начните со страниц, которые приносят заявки: главной, лендинга или оформления заказа. Меняйте по одной вещи на тестовой копии (staging), проверяйте, публикуйте и сравнивайте цифры до и после.
Как понять, что фронтенд тормозит продажи?
Прогоните главные страницы через PageSpeed Insights, посмотрите отчет Core Web Vitals в Search Console и найдите в аналитике страницы, с которых мобильные посетители уходят заметно быстрее, чем с компьютера. Записи сессий показывают, где люди застревают.
Что такое фронтенд простыми словами?
Все, что вы видите и нажимаете, когда открываете сайт или приложение: тексты, кнопки, формы, картинки и меню. Фронтенд-разработчики пишут код, который рисует это на экране.
Опасно ли менять фронтенд?
Менее опасно, чем базу данных, но и не безобидно. Правка фронтенда может сломать форму, кнопку оплаты или тег отслеживания, и тогда подсчет заявок и конверсий тихо останавливается. Проверка на тестовой копии снижает риск, но не убирает его.
Нужен ли разработчик, чтобы менять фронтенд сайта?
Для текстов, картинок и цветов в конструкторе или системе управления контентом не нужен. Фронтенд-разработчик нужен для новых макетов, интерактивных элементов и работы над скоростью, а также для всего, что касается форм и отслеживания.
Фронтенд это то же самое, что веб-дизайн или UX?
Нет, это три разные работы. UX решает, как страница должна работать для пользователя, веб-дизайн решает, как она выглядит, а фронтенд-разработка превращает и то и другое в код, который работает в браузере. Иногда один человек совмещает несколько из них.

Источники: web.dev, Web Vitals (web.dev/articles/vitals), read 23 September 2026, web.dev, Interaction to Next Paint becomes a Core Web Vital on March 12 (web.dev/blog/inp-cwv-march-12), 2024, MDN Web Docs, Glossary (developer.mozilla.org/en-US/docs/Glossary), general reference

Последняя проверка: 2026-09-23

Работал с

Что говорят клиенты

Из разных сфер и на разных этапах бизнеса

Дэн Манто

Eclipse Capital

Инвестиции и финансы в недвижимости, США

Арти МакЛабин

GameReady

Обучение и аутсорсинг в разработке игр, международная компания

Анна, Косметолог

Анна

Косметолог

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

Марк, Массажист, Ган-Явне

Марк

Массажист, Ган-Явне

Когда я закончил курс массажа, я представлял себе всё совсем иначе. Оказалось, что это тяжёлая сфера и найти финансовую стабильность непросто. Когда я пришёл в Mobius, что-то изменилось. Мы начали планомерную работу и составили бизнес-план. Без Mobius? Наверное, я бы сдался. Сегодня я верю в себя и в свой путь.

Технологические решения не по силам вашей команде?

Алекс помогает бизнесам в Израиле выбирать технологии под бизнес, а не под моду. Первый звонок бесплатный.

+972 055-248-6151. Лучше в WhatsApp: большую часть дня я на встречах и отвечаю, как только освобождаюсь.