Mobile-first в 2026 году: почему 65% трафика не означает 65% продаж

Mobile-first — это не «сделать сайт ещё и для телефона». Это перевернуть порядок: проектировать сразу под маленький экран, а потом расширять под десктоп. Почему это важно именно сейчас? По разным оценкам, большинство трафика приходит с телефонов, а Яндекс и Google ранжируют сайт по его мобильной версии. Проще говоря: для поисковика и для половины ваших клиентов мобильная версия — это и есть «ваш сайт». Десктоп — приятное дополнение.

Представьте: у вас красивый сайт. На большом мониторе — загляденье. А теперь откройте его на своём телефоне в очереди в кофейне. Текст мелкий, кнопка «Оставить заявку» прячется за краем экрана, форму заполнить невозможно одной рукой, а телефон в шапке нельзя нажать, чтобы позвонить. Знакомо?

Если да — вы теряете клиентов прямо сейчас, и даже не видите этого. Потому что человек не пишет вам «у вас неудобный сайт». Он просто молча уходит к конкуренту, у которого всё нажимается с первого раза.

Давайте разберёмся, что такое mobile-first по-человечески, почему в 2026-м это не модное слово, а базовая гигиена, и как за вечер проверить — не теряете ли вы заявки на ровном месте.

Что такое mobile-first простыми словами

Есть два способа делать сайт.

Desktop-first (по старинке). Сначала рисуют красивую большую версию для монитора. Потом, в самом конце, её «ужимают» под телефон: колонки складывают в столбик, шрифты уменьшают, что-то прячут. Мобильная версия получается как костюм с чужого плеча — вроде надели, но висит мешком.

Mobile-first (современный подход). Сначала проектируют версию под телефон — самый тесный и требовательный экран. На нём приходится оставить только главное: одно понятное действие, читаемый текст, крупные кнопки. А уже потом эту версию расширяют под планшет и десктоп, добавляя простор.

Разница не в технологиях, а в порядке мышления. Когда вы начинаете с телефона, вы вынуждены ответить на вопрос «что здесь самое важное?» — и сайт автоматически становится чище и понятнее на всех экранах.

Хорошая метафора: сайт — как одежда, которую примеряют. Только примеряют её не на манекен из вашего воображения, а на самый ходовой размер — телефон. Если на нём сидит хорошо, то и в более просторном «размере» (десктоп) будет хорошо. А вот наоборот не работает: то, что красиво сидит на манекене-мониторе, на живом телефоне часто трещит по швам.

Desktop-first против mobile-first: в чём разница на практике

Чтобы было нагляднее — вот два подхода бок о бок.

Главный вывод из таблицы: desktop-first оптимизирует то, что видит дизайнер на большом мониторе. Mobile-first оптимизирует то, что видит клиент — а он чаще всего с телефоном.

Почему это критично именно сейчас

Три причины, по которым тянуть с этим больше нельзя.

• Большинство трафика — с телефонов. По разным оценкам, мобильные устройства дают основную долю заходов на сайты, и в большинстве ниш малого бизнеса (услуги, локальный сервис, общепит, красота) она ещё выше. Люди ищут вас в дороге, в обеденный перерыв, вечером с дивана.
• Поисковики смотрят на мобильную версию первой. И Google, и Яндекс используют mobile-first индексацию: для оценки и ранжирования они ориентируются на мобильную версию страницы. Если она медленная или неудобная — проседают позиции и в мобильном, и в десктопном поиске.
• Терпение на телефоне короче. С телефона человек чаще спешит и легче отвлекается. Любая заминка — мелкий шрифт, тормозящая загрузка, неудобная форма — это повод закрыть вкладку. На десктопе он бы потерпел, на телефоне — нет.

Источник: документация Google и Яндекса по mobile-first индексации; данные Statcounter по доле мобильного трафика (формулируем осторожно — точная цифра зависит от ниши и страны).

Сквозной пример: как «Уют» терял заявки и не понимал почему

Реальная по духу история. Клининговая компания «Уют» из Казани вложилась в сайт: дизайнер сделал солидную многоэкранную версию, на мониторе — премиум. Реклама шла, заходы были, а заявок — кот наплакал.

Открыли сайт на телефоне (с которого приходило около 7 из 10 посетителей) — и всё стало ясно:

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

Ни одной «поломки» в привычном смысле — сайт работал. Просто он был спроектирован для монитора, а жил на телефоне. После переделки в логике mobile-first (одно действие на экран, кликабельный телефон, нормальная форма, никаких полноэкранных баннеров) заявки с мобильных выросли заметно — при том же рекламном бюджете. Деньги на трафик не менялись; менялось то, что происходило после клика.

Что значит хорошая мобильная версия

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

Если по большинству пунктов у вас «да» — мобильная версия в порядке. Если половина «нет» — вы почти наверняка теряете часть заявок.

Частые мобильные ошибки

Самое обидное, что почти все мобильные провалы — типовые и повторяются от сайта к сайту.

• Горизонтальный скролл. Какой-то блок шире экрана — и страница «едет» вбок. Чаще всего виноваты широкие картинки или таблицы без обёртки. Чистый признак, что версию не проверяли на узком экране.
• Мелкие кнопки впритык. Две ссылки рядом, обе крошечные — палец попадает не туда. Раздражает мгновенно.
• Текст «для муравьёв». Шрифт меньше 16px заставляет браузер зумировать страницу, и вёрстка плывёт.
• Некликабельный телефон. Номер вставлен картинкой или просто текстом без ссылки tel: — клиент не может позвонить в один тап.
• Неправильная клавиатура в форме. Поле «телефон» открывает буквы вместо цифр, поле «почта» — без значка @. Мелочь, а заполнять мучительно.
• Полноэкранный поп-ап на входе. Не успел человек открыть сайт — ему уже закрыли весь экран баннером. Поисковики это не любят, люди — тем более.

Скорость и Core Web Vitals на мобайле

На телефоне скорость важнее, чем на десктопе: процессор слабее, интернет нестабильнее, а человек нетерпеливее. Поэтому отдельно стоит смотреть на Core Web Vitals — это набор метрик, которыми Google измеряет «ощущение скорости» глазами реального пользователя.

Не углубляясь в технику, важны три вещи:

1. Как быстро появляется основное содержимое (метрика LCP) — чтобы человек не смотрел в пустой экран.
2. Как быстро сайт реагирует на нажатие (метрика INP) — чтобы кнопка отвечала сразу, а не «думала».
3. Не прыгает ли вёрстка во время загрузки (метрика CLS) — чтобы кнопка не «убегала» из-под пальца в момент тапа.

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

Как проверить свою мобильную версию за вечер

Три бесплатных способа, от простого к точному.

1. Реальный телефон. Самый честный тест. Откройте сайт со своего смартфона и пройдите путь клиента до конца: найдите цену, заполните форму, попробуйте позвонить. Каждое место, где вы запнулись или чертыхнулись, — это место, где запнётся и клиент.
2. PageSpeed Insights. Вбейте адрес сайта на странице PageSpeed, выберите вкладку «Мобильные». Балл ниже 60 — есть системные проблемы; ниже 40 — чинить срочно. Заодно увидите конкретный список «что тормозит».
3. DevTools браузера. На компьютере нажмите F12, включите режим телефона (иконка с устройствами) и прокрутите страницу. Так за минуту ловится горизонтальный скролл и видно, как складывается вёрстка на узком экране.

Совет: не «кажется, медленно», а конкретика. «Главное содержимое появляется за 4 секунды, виноваты тяжёлые картинки» — с такой формулировкой проблему уже можно чинить.

Связь с SEO и конверсией

Mobile-first бьёт сразу по двум точкам, которые волнуют любого владельца бизнеса.

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

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

PWA: когда сайт ведёт себя как приложение

Логичное продолжение mobile-first — PWA (Progressive Web App). Это ваш обычный сайт, который умеет вести себя как приложение: его можно «установить» иконкой на экран телефона, он быстрее открывается при повторных заходах, частично работает без интернета, а при необходимости — присылает пуш-уведомления.

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

С чего начать

Если коротко — начните с честной проверки. Откройте свой сайт на телефоне прямо сейчас и пройдите путь клиента до заявки. Скорее всего, вы увидите 2–3 места, которые мешают людям до вас «дойти».

Если сайт делали больше 2–3 лет назад, вероятность, что он отстал от мобильных стандартов, очень высокая — устройства, браузеры и привычки людей с тех пор заметно изменились. Чаще всего не нужно «всё переделывать»: хватает точечных правок, которые дают основную часть результата.

Мы в Tendo делаем сайты под ключ сразу в логике mobile-first и можем посмотреть вашу мобильную версию свежим взглядом — показать, где именно теряются заявки, и предложить, что починить в первую очередь. Структуру и предварительный дизайн показываем бесплатно, до договора, так что вы заранее видите, каким будет сайт на телефоне. Написать нам можно в Telegram: @tendoprotech_bot.

Частые вопросы