Перевірка мобільної версії сайту після закриття Google Mobile-Friendly Test

Перевірка мобільної версії сайту після закриття Google Mobile-Friendly Test робиться чотирма способами, і найкраще — разом: Lighthouse (у Chrome DevTools або через PageSpeed Insights) дає детальний аудит в емуляції телефона, режим пристрою в DevTools показує сторінку на ширині 360–430 px, справжній телефон ловить те, чого не бачить емуляція, а наш Mobile-Friendly Test за кілька секунд розбирає код сторінки без реєстрації: meta viewport, медіазапити, фіксовану ширину, дрібний шрифт, дрібні кнопки — і показує знімок екрана iPhone.

Далі — що саме закрив Google, чим його замінити, покроковий чек-лист на 15 хвилин і готові виправлення для найчастіших проблем.

Що сталося з Google Mobile-Friendly Test

У грудні 2023 року Google вимкнув одразу три речі: сам Mobile-Friendly Test, його API і звіт «Зручність для мобільних» у Search Console. Стара адреса search.google.com/test/mobile-friendly тепер перенаправляє на сторінку про Lighthouse — це і є офіційна заміна.

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

Чим перевіряти тепер: порівняння способів

Режим пристрою вмикається в DevTools кнопкою з телефоном і планшетом або поєднанням Ctrl+Shift+M (на Mac — Cmd+Shift+M). Деталі — у документації Chrome.

Покрокова перевірка мобільної версії

1. Почніть із коду. Проженіть сторінку через Mobile-Friendly Test: відсутній viewport, ширина 960–1200 px у CSS чи заборона масштабування видно одразу, ще до відкриття браузера.
2. Подивіться очима в DevTools. Увімкніть режим пристрою, оберіть ширину 360 px (найвужчі поширені Android) і 390–430 px (сучасні iPhone). Прокрутіть сторінку повністю: чи є смуга горизонтальної прокрутки, обрізаний текст, блоки, що налазять один на одного.
3. Запустіть Lighthouse у мобільному режимі. Вкладка Lighthouse → Device: Mobile → Analyze page load. Дивіться не лише на бали, а й на конкретні зауваження з посиланнями на елементи.
4. Перевірте швидкість у PageSpeed Insights. Якщо над звітом є блок із реальними даними користувачів — це те, що бачить Google. Якщо його немає, у сайту замало трафіку з Chrome, і орієнтуйтеся на лабораторні цифри.
5. Відкрийте сторінку на справжньому телефоні. Заповніть форму, відкрийте меню, закрийте спливне вікно, поверніть екран. Емуляція не покаже, що палець не влучає в хрестик або що клавіатура закриває поле введення.
6. Перевірте різні типи сторінок. Головна майже завжди зроблена акуратно, а проблеми ховаються в картках товарів, старих статтях із широкими таблицями та шаблонах блогу.
7. Порівняйте контент мобільної й десктопної версій. Тексти, заголовки, посилання, структуровані дані й атрибути alt мають бути в обох.

Типові проблеми та як їх виправити

Немає meta viewport

Без цього тегу телефон малює сторінку завширшки близько 980 px і зменшує її — весь текст стає дрібним. Додайте в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Не додавайте user-scalable=no і maximum-scale=1: заборона масштабування заважає людям зі слабким зором, і наш інструмент знімає за неї бали.

Фіксована ширина блоків

Класика старих шаблонів — width: 960px в обгортки. На телефоні це гарантована горизонтальна прокрутка. Замініть на обмеження зверху:

.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

Широкі таблиці

Таблиця на шість колонок у 360 px не вміститься ніяк. Найпростіше — дати їй прокручуватися всередині власного блоку, не ламаючи всю сторінку:

<div class="table-wrap"><table>…</table></div>

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

Якщо колонок багато й дані важливі, на вузьких екранах краще перебудувати рядки на картки через медіазапит.

Дрібний текст і дрібні кнопки

Основний текст робіть близько 16 px, розміри задавайте в rem. Для елементів натискання критерій WCAG 2.2 (2.5.8) вимагає щонайменше 24×24 CSS px, а рекомендації Material Design — близько 48×48 із відступами між сусідніми посиланнями:

html { font-size: 100%; }          /* 16px за замовчуванням */
body { font-size: 1rem; line-height: 1.5; }
.nav a, button { min-height: 48px; padding: 12px 16px; display: inline-flex; align-items: center; }

Медіазапити для вузьких екранів

Розкладку в кілька колонок на телефоні треба скласти в одну:

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}

Спливні вікна на весь екран

За рекомендаціями Google, не варто закривати всю сторінку інтерстишлом, якщо цього не вимагає закон (згода на cookie, перевірка віку). Підписку на розсилку чи встановлення застосунку краще показувати невеликою смугою, яка не заважає читати.

Застарілі технології

Flash, Java-аплети й фрейми на телефонах не працюють. Замініть їх на HTML5-відео, звичайну верстку й окремі сторінки.

Чому це важливо: mobile-first індексація

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

Core Web Vitals на мобільних

Зручність — це ще й швидкість. Google рекомендує тримати LCP (завантаження основного контенту) в межах 2,5 секунди, INP (відгук на дії) — менше 200 мілісекунд, CLS (зсуви верстки) — менше 0,1. На телефонах ці показники майже завжди гірші, ніж на комп’ютері: слабший процесор, повільніша мережа. Дивіться мобільну вкладку PageSpeed Insights і звіт Core Web Vitals у Search Console, де мобільні й десктопні адреси розділено. Що означає кожна метрика — у статті Core Web Vitals, а з чого почати прискорення — у матеріалі про швидкість завантаження сторінки.

Як перевірити сторінку в нашому Mobile-Friendly Test

Введіть адресу в Mobile-Friendly Test. Інструмент завантажує HTML з User-Agent телефона на Android, читає до шести таблиць стилів вашого домену й перевіряє вісім пунктів. Кожен пункт має фіксовану кількість балів, ваги показано просто на сторінці:

Поруч зі списком проблем — знімок екрана в емуляції iPhone: якщо на ньому видно обрізаний текст чи смугу прокрутки, довіряйте знімку більше, ніж балам. Ознаки спливних вікон і вага сторінки показуються як підказки й в оцінку не входять. Без акаунта доступно 15 перевірок на добу, з безкоштовним акаунтом — 45, з Pro ліміту немає.

Що ще допоможе

• Скриншот сайту — знімок у мобільному й десктопному режимах, щоб показати проблему розробнику або порівняти «до і після». Як читати такі знімки — у статті про скриншот сайту онлайн.
• Аналіз швидкості — вага HTML, картинок, CSS і JS та час завантаження: важкі картинки — часта причина повільної мобільної версії.
• Search Console — звіт Core Web Vitals із розподілом на мобільні й десктопні сторінки.