Мобильная адаптация сайта, требования Яндекса и Google

Мобильная адаптация сайта давно перестала быть приятным дополнением к десктопной версии. Сегодня страница должна нормально открываться на смартфоне, быстро загружаться, не расползаться за границы экрана и не заставлять посетителя увеличивать текст двумя пальцами, чтобы найти кнопку «Купить».

Поисковые системы тоже смотрят на сайт глазами мобильного пользователя. Google использует мобильную версию контента для индексирования и ранжирования, а Яндекс проверяет, насколько страницы приспособлены для просмотра на мобильных устройствах.

Но хорошая мобильная версия — это не сайт, который просто «влез в телефон». Важны скорость, удобство, стабильность интерфейса, доступность контента и отсутствие сюрпризов вроде кнопки, которая уехала вправо и теперь живёт своей жизнью.

Разберёмся, что действительно важно для мобильной адаптации и что сегодня рекомендуют Яндекс и Google.

Что такое мобильная адаптация сайта

Мобильная адаптация — это способность сайта удобно работать на экранах разных размеров: от большого монитора до смартфона.

Пользователь при этом не должен бороться с интерфейсом. Ему не нужно увеличивать текст, прокручивать страницу по горизонтали, пытаться попасть пальцем в крошечную ссылку или ждать, пока огромная картинка наконец соизволит загрузиться.

Для создания мобильного сайта используются разные подходы: адаптивный дизайн, динамическая верстка или отдельная мобильная версия. Яндекс перечисляет все эти варианты, но адаптивный дизайн обычно оказывается самым удобным решением: один URL и один контент, а расположение элементов меняется в зависимости от ширины экрана.

Именно поэтому современный сайт чаще всего не имеет отдельной «версии для телефона». Это тот же сайт, который умеет прилично вести себя в разных условиях.

Что требует Google: mobile-first indexing

У Google действует принцип mobile-first indexing.

Это означает, что для индексирования и ранжирования Google использует прежде всего мобильную версию контента страницы, которую видит его смартфонный робот.

Здесь есть важный нюанс. Mobile-first indexing не означает, что существует отдельный «мобильный индекс» и десктопные сайты внезапно отправляются на пенсию.

Смысл проще: Google хочет понимать страницу примерно в том виде, в котором её получает пользователь смартфона.

Поэтому плохая идея — сделать великолепную десктопную страницу с полным текстом, изображениями и ссылками, а на мобильной версии оставить три абзаца и кнопку «Позвоните нам».

Основной контент и важные элементы страницы должны оставаться доступными и на мобильных устройствах.

Что особенно важно для Google

Мобильная версия должна содержать основной контент страницы, важные заголовки, изображения и ссылки. Googlebot должен иметь доступ к ресурсам, необходимым для отображения страницы.

Иными словами, поисковому роботу тоже не нравится, когда половина сайта спрятана за занавеской.

Что проверяет Яндекс

У Яндекса есть собственная проверка мобильной пригодности.

В рекомендациях Яндекс прямо указывает, что содержимое страницы не должно выходить за границы экрана, горизонтальная прокрутка не должна быть необходима, а текст должен удобно читаться на мобильном устройстве. Страницы рекомендуется корректно отображать на экранах шириной от 320 пикселей.

Для адаптивного сайта Яндекс также рекомендует использовать метатег viewport:

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

Он сообщает браузеру, что ширину страницы нужно подстраивать под ширину экрана устройства.

Проверить отдельную страницу можно непосредственно в Яндекс Вебмастере через инструмент проверки мобильных страниц. Если Яндекс обнаруживает проблемы с мобильной оптимизацией, соответствующая рекомендация появляется и в диагностике сайта.

Core Web Vitals: скорость — только часть истории

У Google есть ещё одна компания, которая регулярно портит вебмастерам настроение: Core Web Vitals.

На самом деле ничего страшного в ней нет. Это три показателя, которые помогают оценить реальный пользовательский опыт: скорость загрузки основного содержимого, реакцию страницы на действия посетителя и визуальную стабильность.

В актуальном наборе Core Web Vitals используются три метрики.

LCP (Largest Contentful Paint) показывает, насколько быстро появляется основной крупный элемент страницы. Хорошим считается значение до 2,5 секунды.

INP (Interaction to Next Paint) оценивает скорость реакции страницы на действия пользователя — например, на нажатие кнопки. Хороший ориентир — менее 200 мс.

CLS (Cumulative Layout Shift) измеряет визуальную стабильность. Хорошее значение — менее 0,1.

Последний показатель особенно хорошо знаком каждому, кто пытался нажать на ссылку, но в последний момент сверху загрузился рекламный блок — и палец торжественно отправился совершенно не туда.

Вот это и есть плохая визуальная стабильность во всей её красе.

Как проверить Core Web Vitals

Начать проще всего с Google PageSpeed Insights и отчёта Core Web Vitals в Google Search Console.

Здесь важно понимать разницу между лабораторными тестами и реальными данными пользователей.

Лабораторная проверка моделирует загрузку страницы в определённых условиях. Она прекрасно подходит для поиска технических проблем.

Полевые данные показывают, как страницу фактически воспринимали реальные пользователи на совместимых устройствах и в разных условиях.

Поэтому одна проверка PageSpeed — не приговор и не диплом отличника.

Если сегодня сервис нарисовал 97 баллов, это ещё не означает, что сайт достиг просветления. А 70 баллов не означают, что пора закрывать WordPress и уходить выращивать помидоры.

Смотрим прежде всего на реальные проблемы и пользовательский опыт.

Почему мобильный сайт может тормозить

Часто проблема вовсе не в самой адаптивной верстке.

Сайт может прекрасно перестраиваться под телефон и одновременно грузить изображение размером с рекламный щит на Красной площади.

Основные подозреваемые хорошо знакомы:

• слишком тяжёлые изображения;
• видео и внешние виджеты;
• большое количество JavaScript;
• тяжёлые шрифты;
• рекламные и аналитические скрипты;
• плагины, загружающие свои стили и сценарии на каждой странице;
• отсутствие нормального кеширования;
• медленный сервер.

Поэтому мобильную адаптацию нельзя рассматривать отдельно от производительности.

Красивый сайт, который открывается после того, как пользователь успел сварить кофе, — всё-таки не очень удобный сайт.

Изображения на мобильных устройствах

Изображения часто оказываются самым тяжёлым содержимым страницы.

Поэтому стоит использовать современные форматы, разумное сжатие и размеры, соответствующие реальному месту картинки на странице.

Нет особого смысла заставлять телефон загружать изображение шириной 4000 пикселей, если на экране оно показывается шириной 350.

Полезна и отложенная загрузка изображений, находящихся ниже первого экрана. Но с ней тоже не надо объявлять всеобщую мобилизацию: главный элемент первого экрана не стоит бездумно отправлять в lazy loading, если именно от него зависит LCP.

Оптимизация должна помогать загрузке, а не участвовать в соревновании «кто установит больше галочек в плагине».

Кнопки должны быть предназначены для пальцев

На компьютере у нас есть довольно точная мышь. На телефоне — палец.

И палец категорически отказывается превращаться в хирургический инструмент ради плохо спроектированного сайта.

Кнопки, ссылки, пункты меню и элементы форм должны быть достаточно крупными и находиться на разумном расстоянии друг от друга.

Особенно это важно для:

«Купить», «Отправить», «Позвонить», «Оформить заказ», элементов меню и кнопок закрытия всплывающих окон.

Если пользователь пытается закрыть баннер, а вместо крестика третий раз попадает в рекламу, проблема не в пользователе.

Не заставляйте посетителя читать через лупу

На мобильном экране длинная строка превращается в короткую, поэтому текст требует воздуха.

Огромные полотна без подзаголовков особенно тяжело воспринимаются со смартфона.

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

При этом мобильная адаптация сайта не означает, что текст надо безжалостно сокращать.

Если материал полезен, пользователь его прочитает. Задача дизайна — не мешать ему это делать.

Осторожнее со всплывающими окнами

На большом мониторе небольшой pop-up может быть вполне терпимым.

На телефоне тот же блок способен захватить весь экран и объявить себя новым владельцем сайта.

Особенно раздражают окна, которые появляются сразу после открытия страницы:

«Подпишитесь!»

Человек ещё даже не понял, куда попал.

Дайте ему хотя бы познакомиться с сайтом, прежде чем предлагать вечную дружбу.

Яндекс отдельно подчёркивает значение удобства сайта и указывает, что пользователю не должны мешать избыточные всплывающие окна и реклама.

Адаптивное меню: проще обычно лучше

Мобильное меню должно быстро отвечать на три вопроса:

Где я? Куда могу перейти? Как вернуться?

Необязательно пытаться уместить в него всю структуру сайта вместе с семейным архивом за 1998 год.

Основные разделы должны находиться быстро, кнопка меню — быть заметной, а вложенные уровни — открываться предсказуемо.

И обязательно проверяйте меню пальцем на настоящем телефоне.

Эмулятор в браузере полезен, но настоящий смартфон обладает удивительным талантом находить проблемы, которых на компьютере вообще не существовало.

Мобильные формы: меньше мучений

Форма из пятнадцати обязательных полей уже на компьютере выглядит как заявление на ипотеку.

На телефоне она превращается в испытание характера.

Оставляйте только действительно необходимые поля. Используйте подходящие типы ввода для телефона, электронной почты и чисел. Делайте понятные сообщения об ошибках.

И главное — не уничтожайте введённые данные после одной неправильно заполненной строки.

Пользователь вам этого не простит.

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

Начать можно вообще без специальных инструментов.

Откройте сайт на собственном телефоне и попробуйте пройти обычный пользовательский путь: открыть меню, перейти в статью, нажать ссылку, посмотреть изображение, заполнить форму.

Потом уменьшите окно браузера на компьютере.

Посмотрите, не появляется ли горизонтальная прокрутка. Проверьте несколько страниц, а не только главную — главная обычно нарядная, а настоящий цирк иногда начинается где-нибудь в статье 2017 года.

После ручной проверки подключайте инструменты.

Для Google полезны Search Console, PageSpeed Insights и инструменты разработчика Chrome. Для Яндекса — Вебмастер и его проверка мобильных страниц. Яндекс позволяет проверять как отдельные URL, так и состояние сайта через диагностику.

Типичные ошибки мобильной версии

Чаще всего проблема оказывается не какой-нибудь загадочной технической катастрофой, а обычной мелочью.

Картинка шире экрана. Таблица не умеет сжиматься. Старый iframe живёт по законам 2012 года. Кнопка закрытия спряталась за краем. Заголовок занимает почти весь первый экран. Меню перекрывает содержимое.

Особенно внимательно стоит проверять старые статьи.

Сайт развивается, тема меняется, появляются новые плагины и блоки Gutenberg, а где-то глубоко внутри архива продолжает жить таблица шириной 900 пикселей, которая ничего не знает о существовании смартфонов.

Именно такие страницы часто становятся источником неожиданных проблем.

Чек-лист мобильной адаптации сайта

Перед публикацией или после серьёзного обновления страницы стоит проверить несколько вещей:

• нет горизонтальной прокрутки;
• текст читается без увеличения;
• изображения помещаются в экран;
• меню нормально открывается и закрывается;
• кнопки удобно нажимать пальцем;
• формы работают со смартфона;
• основной контент доступен на мобильной версии;
• всплывающие элементы не перекрывают страницу;
• изображения не загружаются в неоправданно огромном размере;
• страница не прыгает во время загрузки;
• LCP, INP и CLS не показывают серьёзных проблем;
• мобильная страница проверена в Яндекс Вебмастере;
• проблемы производительности проверены через инструменты Google;
• страница протестирована хотя бы на одном настоящем смартфоне.

Последний пункт кажется примитивным, но иногда он полезнее двадцати автоматических тестов.

Мобильная адаптация — это прежде всего удобство

Поисковые системы могут менять интерфейсы инструментов, названия отчётов и отдельные алгоритмы, но общий принцип остаётся удивительно стабильным: сайт должен быть удобен человеку.

Google использует мобильную версию контента при индексировании и рекомендует хорошие показатели Core Web Vitals. Яндекс проверяет мобильную пригодность страниц и прямо рекомендует избегать горизонтальной прокрутки, обеспечивать читаемость текста и корректное отображение на небольших экранах.

Поэтому мобильная адаптация сайта — это не попытка угодить поисковому роботу ещё одной зелёной лампочкой.

Это гораздо проще.

Человек достал телефон, открыл страницу — и смог спокойно сделать то, зачем пришёл.

Не увеличивал. Не охотился за кнопками. Не ждал вечность. Не ругался.

А если пользователь даже не заметил, сколько работы было сделано для его удобства, — значит, всё сделано правильно.

🌈 Волшебные хабы: