Мобільна версія сайту: чому вона важливіша за десктоп і як зробити її правильно

Мобільна версія сайту важливіша за десктоп із двох причин. Перша: Google індексує і ранжує сайти за мобільною версією — того, чого немає на мобільному, для пошуку фактично не існує. Друга: у локальних послугах, соцмережах і рекламі більшість відвідувачів приходить зі смартфона, і саме там вони вирішують, дзвонити вам чи конкуренту. Навіть якщо у вашій аналітиці поки що переважає десктоп, позиції в Google визначає мобільна версія.

Чому мобільна версія — головна

Google дивиться на сайт очима смартфона

Google працює за принципом індексації з пріоритетом мобільного контенту (mobile-first indexing): сайт сканує мобільний Googlebot, і для індексації та ранжування використовується саме мобільна версія сторінок. З документації Google випливає кілька практичних правил:

• основний контент на мобільному і десктопі має бути однаковим — якщо ви «спростили» мобільну версію, прибравши тексти, позиції впадуть;
• заголовки сторінок, мета-описи і мікророзмітка мають збігатися;
• контент, який довантажується лише після кліку, свайпу чи введення тексту, Google не побачить — основний текст не можна «ховати» за взаємодією;
• згорнути текст в акордеон чи вкладки можна: це нормальний спосіб упорядкувати контент на малому екрані.

Швидкість оцінюють на телефоні

Core Web Vitals Google рахує окремо для мобільних і десктопів. PageSpeed Insights у мобільному режимі емулює смартфон середнього класу з повільним мобільним інтернетом. Тому сайт, який «літає» на офісному компʼютері, на мобільному часто отримує помітно нижчий бал.

Звідки насправді приходять ваші клієнти

Загальнонаціональні лічильники на кшталт StatCounter показують для України помітну частку десктопів — вони враховують усі перегляди сторінок, зокрема офісну роботу, B2B-сервіси і навчання. Для конкретного бізнесу важить не середнє по країні, а власна аудиторія, і тут картина зазвичай така:

Перевірте власні дані в GA4: Звіти → Технології → Огляд, параметр «Категорія пристрою». Дивіться не лише на частку сесій, а й на конверсію за пристроями. Якщо мобільних відвідувачів 70%, а заявок із мобільних лише 30%, — це і є ваші втрачені гроші.

Адаптив, окрема мобільна версія чи PWA

Для більшості бізнесів відповідь проста: адаптивний сайт, спроєктований від мобільного.

Принципи mobile-first дизайну

«Адаптив» і «mobile-first» — не одне й те саме. Адаптив — коли десктопний макет стискають до розміру телефона. Mobile-first — коли спершу проєктують сторінку для екрана 360–390 px, а потім розширюють її для великих екранів. Різниця відчутна: у другому випадку на мобільному немає «залишків» десктопу — дрібних іконок, таблиць на пів екрана, меню з дванадцяти пунктів.

Ширини, на яких варто тестувати

Поширені ширини екранів Android-смартфонів — 360–412 px, iPhone — 375–430 px. Мінімальна ширина для перевірки — 360 px. Якщо на ній щось не вміщується, зʼявляється горизонтальний скрол — одна з найдратівливіших помилок.

Зона великого пальця

Смартфон здебільшого тримають однією рукою, і найлегше дотягнутися до нижньої половини екрана. Тому:

• головна дія — у закріпленій панелі внизу: «Подзвонити», «Записатися», «Кошик»;
• важливі кнопки не ставлять у верхні кути;
• пункти меню великі й рознесені, щоб не промахнутися.

Розміри, які варто запамʼятати

Форми, які зручно заповнювати з телефона

• правильні типи полів: для телефону — цифрова клавіатура, для email — клавіатура із символом «@»;
• атрибути автозаповнення, щоб браузер підставив імʼя і телефон одним дотиком;
• маска +380 і жодних вимог вводити номер «без пробілів і дужок»;
• 2–3 поля замість 6–8;
• альтернатива формі — кнопки Telegram і Viber, які відкривають чат одразу в застосунку.

Контент без втрат

Таблиці на мобільному перетворюйте на картки або дозволяйте горизонтальне прокручування лише всередині самої таблиці. Довгі тексти розбивайте підзаголовками й акордеонами. Не покладайтеся на ефекти при наведенні курсора: на сенсорному екрані наведення просто немає.

Швидкість на смартфоні: що її вбиває

Цільові показники Core Web Vitals: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Що вони означають і як їх виміряти — у статті Core Web Vitals, а покрокове прискорення — у статті швидкість сайту.

Як протестувати мобільну версію за 30 хвилин

1. Реальний телефон. Відкрийте сайт на недорогому Android і на iPhone через мобільний інтернет, а не офісний Wi-Fi. Пройдіть шлях клієнта: знайти послугу, дізнатися ціну, залишити заявку.
2. PageSpeed Insights у режимі для мобільних. Дивіться не лише на бал, а й на дані реальних користувачів, якщо сайт має достатньо трафіку.
3. Режим пристроїв у Chrome DevTools — ширини 360, 390 і 412 px плюс горизонтальна орієнтація.
4. Google Search Console, звіт «Основні веб-показники» для мобільних. Окремий звіт про зручність для мобільних та інструмент перевірки оптимізації для мобільних Google вимкнув ще наприкінці 2023 року, тож орієнтуйтеся на Lighthouse і Core Web Vitals.
5. Microsoft Clarity — безкоштовні записи сесій і теплові карти. Шукайте «гнівні натискання» (rage clicks): місця, де люди раз за разом тиснуть на неклікабельні елементи.
6. GA4 — порівняння конверсії мобільних і десктопних відвідувачів.

15 типових помилок мобільних версій

1. Горизонтальний скрол через широку таблицю чи картинку.
2. Номер телефону звичайним текстом, а не посиланням для дзвінка.
3. Поп-ап на весь екран, який важко закрити.
4. Кнопки й посилання так близько, що натискаєш не те.
5. Текст 12–14 px, який доводиться збільшувати пальцями.
6. Поля форм зі шрифтом менше 16 px — сторінка «стрибає» при введенні на iPhone.
7. Меню з трьома рівнями вкладеності.
8. Головна пропозиція «зʼїхала» за перший екран через величезний банер.
9. Контент, прибраний з мобільної версії «для простоти», — і втрачений для Google.
10. Фонове відео, що зʼїдає мобільний трафік і батарею.
11. Чат-віджет, який закриває кнопку «Замовити».
12. Вбудована карта, що перехоплює прокручування сторінки.
13. Елементи, які зʼявляються лише при наведенні мишкою.
14. Меню чи прайс у PDF, який треба завантажувати і масштабувати.
15. Вміст, що зсувається під час завантаження, — і палець влучає не туди.

Скільки коштує хороша мобільна версія

У нормальному процесі розробки окремої ціни за «мобільну версію» немає: адаптив проєктується одразу. У всіх наших пакетах адаптив під смартфони входить у базову вартість, а PageSpeed 90+ на мобільних ми гарантуємо — або доопрацьовуємо безкоштовно (умови — на сторінці гарантій). Лендінг — від 8 900 ₴ за 2–3 дні, сайт-візитка — від 11 900 ₴ за 3–4 дні.

Якщо ж у вас старий сайт без адаптиву, «дописати мобільну версію» до застарілої верстки часто коштує майже як новий сайт, а результат усе одно поступається сторінкам, спроєктованим від мобільного. Тоді вигідніше зробити редизайн сайту: він коштує 70% від ціни нового пакета, разом із перенесенням контенту і 301-редиректами, щоб не втратити позиції.

Чекліст мобільної версії

• немає горизонтального скролу на ширині 360 px;
• пропозицію і кнопку дії видно на першому екрані;
• телефон — клікабельне посилання, є кнопки месенджерів;
• внизу екрана закріплена панель із головною дією;
• основний текст від 16 px, поля форм від 16 px;
• кнопки від 44–48 px заввишки, з відступами;
• форма — 2–3 поля з правильними типами й автозаповненням;
• зображення стиснуті й адаптивні;
• PageSpeed для мобільних 90+, Core Web Vitals «зелені»;
• контент на мобільному і десктопі однаковий;
• немає поп-апів на весь екран і віджетів, що закривають кнопки;
• конверсія мобільних у GA4 не відстає від десктопа в рази.

Висновок

Мобільна версія — не «урізаний десктоп», а основна версія вашого сайту: за нею Google ранжує, на ній клієнт вирішує, звертатися чи ні. Проєктуйте від малого екрана, тестуйте на реальному телефоні й міряйте конверсію окремо для мобільних.

Хочете дізнатися, як ваш сайт виглядає і працює на смартфоні? Пройдіть безкоштовний аудит сайту: за хвилину він перевірить швидкість за Google PageSpeed, мобільну версію і базові технічні помилки.