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

Адаптивный сайт перестраивает блоки под ширину экрана и одинаково удобен на телефоне, планшете и компьютере. Проверяют его в два шага: автоматически в 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