70% трафіку йде з телефонів - а ваш сайт цього не враховує

Перевіримо viewport, тач-таргети, шрифти, контраст. Google з 2019 року індексує мобільну версію першою, поганий мобільний UX автоматично знижує позиції.

Запустити безкоштовний аудит →Перейти до тарифів

Що ми перевіряємо

Viewport meta tag - `<meta name="viewport">` сповіщає браузер, що сайт адаптивний. Без нього мобільний показує desktop-версію з крихітним текстом.
Розмір тач-таргетів - кнопки і посилання мають бути мінімум 48×48 px за рекомендацією Google, інакше користувач промахується пальцем.
Розмір шрифту на мобільному - мінімум 16 px, інакше текст крихітний і доводиться зумити.
Адаптивна верстка - сайт коректно перебудовується під екран 360-768 px (типові мобільні розміри).
Mobile-friendly тест Google - формальна перевірка, чи Google вважає сайт мобільно-придатним.
Контраст тексту - за WCAG AA мінімум 4.5:1 для основного тексту. Інакше люди з поганим зором не прочитають.
UTF-8 кодування - без `<meta charset="UTF-8">` кирилиця може відобразитись як «крякозябри».
Font-display - стратегія завантаження шрифтів. Без `swap` користувач бачить порожній екран, поки вантажиться шрифт.

Чому це важливо

Google з 1 липня 2019 використовує mobile-first indexing - це значить, що Google спочатку дивиться на мобільну версію сайту, а тільки потім на desktop (developers.google.com/search/blog/2020/03/announcing-mobile-first-indexing-for). Сайт без viewport meta-тегу автоматично провалює Mobile-Friendly Test і отримує значне зниження позицій. За даними StatCounter, 70% українського трафіку у 2025 - мобільний, і кожна п'ята покупка робиться з телефону. Якщо кнопки крихітні (менше 48×48 px), користувач промахується і закриває сайт за 5-10 секунд. Низький контраст тексту порушує WCAG 2.1 AA - для держустанов, освіти, медицини це не тільки UX-проблема, а формальне порушення законодавства про доступність.

Приклад з життя

Сайт салону краси на Tilda, 80% клієнтів приходять з Instagram через мобільний. Власниця помітила, що з 4 тис. кліків з Stories конверсія тільки 0.4% - менше за 20 записів на тиждень. Безкоштовний аудит виявив: viewport meta-тег був, але mobile-styles використовували font-size 12 px, кнопки «Записатись» розміром 36×28 px, контраст білого тексту на світло-рожевому фоні - 2.1:1 (норма від 4.5:1). Купили тариф «Консультація» за 599 ₴ - отримали покрокову інструкцію по Tilda: змінили розміри блоків у Tilda Zero Block, збільшили шрифт, замінили кольори за нашими рекомендаціями. Робота заняла 2 години в адмінці. Через 3 тижні конверсія з Instagram-кліків піднялась до 1.1% - це +35 записів на тиждень, +50 тис. ₴ на місяць.

Як ми перевіряємо

Завантажуємо сторінку через Playwright з мобільним viewport (375×812 px, як iPhone). Парсимо HTML і шукаємо `<meta name="viewport">`, перевіряємо `width=device-width, initial-scale=1`. Через CSS Object Model вираховуємо реальні розміри інтерактивних елементів (кнопок, посилань, форм) - порівнюємо з 48×48 px. Аналізуємо контраст тексту і фону за алгоритмом WCAG 2.1 AA. Окремо викликаємо Google PageSpeed Insights API, який повертає Mobile-Friendly Test статус.

Що ви отримуєте по тарифах

Безкоштовно (0 ₴): preview до 12 знайдених UX-проблем без пояснень.
Аналіз (299 ₴): повний звіт по всіх перевірках мобільної версії з прикладами проблемних елементів.
Консультація (599 ₴): + покрокові інструкції по вашій платформі (Tilda, WordPress, Horoshop, Shopify) - що саме змінити в адмінці.
Скрипти (999 ₴): + готовий CSS - медіа-запити, шрифти з font-display: swap, виправлення контрасту, мобільні розміри кнопок.
Під ключ (1399 ₴): наша команда впроваджує мобільні фікси самі. Старт за 24 години у робочі дні.

Часті питання

У мене сайт на Tilda, там же «адаптивна верстка з коробки». Що ще оптимізувати?+

Tilda дає адаптивний каркас, але налаштування шрифтів, кольорів і розмірів кнопок - на вас. Часті проблеми: дизайнер прописав font-size 12 px для footer (на десктопі норм, на мобільному погано), або кольори обрав за брендбуком без перевірки контрасту. Ми вкажемо точні Zero Block, де треба поправити, і дамо нові значення.

Google PageSpeed показав «Mobile-Friendly: Yes». Цього достатньо?+

Mobile-Friendly Test - формальний тест: є viewport, текст не крихітний, кнопки не злипаються. Він не перевіряє контраст, доступність, реальний UX. Наш аудит йде глибше - перевіряє 48×48 px тач-таргети (Mobile-Friendly Test пропускає 32×32), контраст за WCAG, font-display.

Контраст для держустанов - це обов'язково за українським законом?+

Так. Закон України «Про доступ до публічної інформації» і Постанова КМУ № 1119 (2022) вимагають доступність сайтів держустанов за WCAG 2.1 AA. Це включає контраст 4.5:1. Для приватного бізнесу це не обов'язково, але якщо ви тендеритесь з держструктурами або працюєте з освітою/медициною - стає критичним.

Шрифти Google Fonts - їх теж треба оптимізувати?+

Так. За замовчуванням Google Fonts вантажаться без `font-display: swap` - користувач бачить порожній екран 1-2 секунди. У тарифі 999 ₴ ми даємо готову конфігурацію з `font-display: swap`, preload для основного шрифту, subsetting на cyrillic - це економить 60-70% розміру файлу шрифту.

Дивіться також

Подивіться на свій сайт очима мобільного користувача

Безкоштовний preview покаже до 12 проблем мобільного UX. CSS-фікси та інструкції по платформі - у тарифах 599 і 999 ₴.

Запустити безкоштовний аудит →