Адаптивність сайту: як перевірити мобільну версію

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

Що таке адаптивність сайту?

Адаптивна верстка підлаштовує розташування елементів під доступний простір екрана. Та сама адреса й той самий HTML показують різне компонування: на комп'ютері — колонки, на телефоні — блоки один під одним. Окрема мобільна версія на піддомені на кшталт m.site.ua сьогодні трапляється рідко, її складніше підтримувати.

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

Чому адаптивність важлива для SEO і заявок?

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

Як перевірити адаптивність сайту онлайн?

Google закрив Mobile-Friendly Test і його API у грудні 2023 року. Для автоматичної діагностики використовуйте Lighthouse, для аналізу продуктивності — PageSpeed Insights. Автоматичний звіт доповнюйте ручною перевіркою доступності та сценаріїв.

• PageSpeed Insights — вставте адресу сторінки й відкрийте вкладку «Мобільні пристрої». Сервіс розділяє лабораторні вимірювання й дані реальних відвідувань, коли вони доступні.
• Lighthouse — вбудований у Chrome (DevTools → Lighthouse). Показує помилки розмірів шрифту, зон натискання, viewport.
• Chrome DevTools, режим пристрою (Ctrl+Shift+M) — швидко прогорнути сторінку на ширині 360, 390, 414 і 768 пікселів.
• Search Console — звіт «Основні веб-показники» за реальними даними Chrome для всього сайту.

Core Web Vitals оцінюють завантаження, чутливість до взаємодії та візуальну стабільність. З березня 2024 року метрику відгуку FID замінив INP. Ці показники доповнюють перевірку адаптивної верстки.

Що перевірити вручну?

• Текст читається за збільшеного масштабу, елементи не перекривають один одного.
• Меню, кнопки й поля доступні на вузькому екрані, кнопки не дрібніші за палець.
• Довгі слова, таблиці та зображення вміщуються в передбаченій області, сторінка не прокручується вбік.
• Клавіатура телефона не закриває важливі поля й підтвердження.
• Форма працює з помилками введення, а навігація доступна з клавіатури.
• Спливні вікна й плашка cookie не перекривають меню та кнопку заявки.

Перевіряйте кілька розмірів вікна та реальні пристрої: хоча б один Android і один iPhone. Емуляція в браузері корисна для пошуку проблем, проте поведінку екранної клавіатури й дотиків варто перевірити окремо.

Як оформити виправлення?

Для кожної помилки збережіть сторінку, ширину екрана, пристрій і кроки відтворення. Скриншот заощаджує час розробника. Після виправлення повторіть сценарій на мобільному та широкому екрані. Завершуйте приймання успішним надсиланням заявки або замовлення.

Що робити, якщо сайт не адаптивний?

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

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

Як перевірити сайт на адаптивність безкоштовно?

Відкрийте PageSpeed Insights або Lighthouse у Chrome, потім увімкніть режим пристрою в DevTools і прогорніть сторінку на ширині 360–414 пікселів. Завершіть перевірку на своєму телефоні.

Чим адаптивний сайт відрізняється від мобільної версії?

Адаптивний сайт працює на одній адресі й перебудовує блоки під екран. Мобільна версія — окремий сайт або піддомен, який треба підтримувати паралельно.

Чи впливає адаптивність на позиції в Google?

Так, опосередковано. Google індексує мобільну версію, а зручність сторінки й Core Web Vitals входять в оцінку якості. Незручний на телефоні сайт втрачає і позиції, і заявки.

Чому Mobile-Friendly Test більше не працює?

Google вимкнув інструмент і його API у грудні 2023 року. Для перевірки використовуйте Lighthouse, PageSpeed Insights і звіти Search Console.

Скільки часу займає адаптація старого сайту?

Залежить від кількості шаблонів. Якщо верстка фіксована, зазвичай вигідніший редизайн. Термін називаємо після аудиту сторінок.

Джерела

• MDN: responsive web design
• Google Search Central: page experience and the Mobile-Friendly Test retirement
• Google Search Central: mobile-first indexing best practices
• Chrome for Developers: Lighthouse
• Google: PageSpeed Insights
• web.dev: Core Web Vitals