Как оптимизировать сайт под Mobile-first index

В 2016 году Google ввёл алгоритм ранжирования Mobile-first index. Прежде всего, возникновение этого алгоритма связано с тем, что более 52% всех запросов в поисковой системе Google выполняются с мобильных устройств. Это влияет на индексацию сайтов, так как пользователю нужно не просто увидеть в поисковой выдаче ответ на свой вопрос, а увидеть этот ответ в качественном представлении. Без мобильной версии сайта или адаптивного дизайна этого сделать не получится.

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

В рамках этого поста я расскажу о базе, которая должна быть внедрена на каждом сайте для соответствия Mobile-first index.

1. Оптимизация отображения всех элементов на сайте

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

Продумайте все элементы навигации по сайту, а также отображение картинок, шрифтов, интерактивных элементов. Проверьте отображение контента на сайте, чтобы он не был шире экрана устройств пользователей. Все ошибки, связанные с отображением изображений и шрифтов, можно посмотреть с помощью Google Search Console во вкладке «Удобство для мобильных».

При нажатии на любую вкладку, например, «Контент шире экрана», будет отображен список URL, у которых есть проблемы.

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

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

Кстати, вы можете проверить корректное отражение мобильной версии сайта с помощью инструмента «Mobile Friendly Test» в Netpeak Spider. После окончания сканирования кликните по интересующей странице правой кнопкой мыши и выберите в контекстном меню «Открыть в сервисе» → «Mobile Friendly Test».

2. Минификация кода и изображений

Минификация кода на сайте позволяет увеличить общую скорость загрузки сайта. Это является важным показателем, ведь, исходя из исследований Kissmetrics, пользователь ждёт не более 3-5 секунд и просто закрывает вкладку, из-за чего может быть большая потеря в трафике.

Обязательно следует сжимать изображения на сайте, так как большие файлы сильно увеличивают вес страницы и сайта в целом. Можно использовать компрессор изображений TinyPNG — он позволяет сжимать изображения без потери качества. Также из рекомендаций Google PageSpeed Insight следует, что лучше всего использовать новые форматы изображений, такие как:

• WebP.
• JPEG 2000.
• JPEG XR.

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

Стоит уточнить, что нужно быть крайне осторожными, если вы захотите минифицировать JavaScript файлы — может нарушиться работа и отображение контента на сайте.

3. Правильное использование шрифтов

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

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

Более подробно можно почитать в гайде «Основы отзывчивости веб-дизайна» от Google PageSpeed Insights.

4. Подходящий дизайн

• Начинайте разработку сайта под Mobile Friendly с создания макета сайта, чтобы понимать, к чему вы стремитесь, и как сайт будет выглядеть на разных типах устройств. Например, отличные программы для создания макета → Sketch и Adobe Photoshop.
• Используйте только адаптивные шаблоны на своих сайтах, особенно, если вы работаете с WordPress. На данный момент существует большое количество бесплатных и премиум-шаблонов, которые помогут сделать сайт красивым и легковесным.
• Адаптивный и отзывчивый дизайны базируются на создании сайтов, в первую очередь, для мобильных устройств, а не для десктопа. Таким образом получится избежать неправильного отображения элементов на страницах сайта.
• Уберите весь ненужный функционал, который нагружает сайт. К примеру, множество вебмастеров оставляют функционал WooCommerce в шаблонах WordPress, даже если знают, что никогда не будут делать интернет-магазин на своём ресурсе.
• Старайтесь использовать только SVG (векторные) иконки и изображения, как минимум, в ключевых местах сайта, так как они не теряют качество при масштабировании и будут отлично смотреться на любой диагонали экрана.
• Настройте метатег Viewport таким образом, чтобы на экранах 640px и меньше значение масштабирования составляло 0.5, в других случаях — 1. Это позволит избежать ошибок «Контент шире экрана» на смартфонах с маленьким разрешением.

5. Внедрение AMP

Accelerated Mobile Pages — технология ускоренных мобильных страниц с открытым исходным кодом. Она позволяет выполнить оперативную загрузку веб-страниц при низкой скорости сети.

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

Плагин для создания AMP не решает все проблемы разом — это всего 20-30% от общего дела. Здесь нужно уделить большое внимание дизайну страниц и отображению интерактивных элементов.

6. Техническая оптимизация сайта

Сайт для мобильных устройств должен быть:

• без элементов, которые требуют работы Flash Player;
• без выпадающих элементов меню или с полностью оптимизированным меню под смартфоны и планшеты.

Далеко не все устройства на данный момент поддерживают flash-элементы, которые могут загружаться на сайте. Например, при использовании смартфона с браузеров Google Chrome большинство flash-элементов попросту не будут отображаться, так как нет поддержки flash-плеера. Здесь на помощь приходит HTML5, позволяющий заменить всё необходимое для подачи информации пользователю, будь то интерактивные элементы или аудио и видео-проигрыватели.

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

Лучше всего использовать одноступенчатое меню или проставлять якори (#) в нужных элементах меню. Это позволит не только удержать пользователя, но и качественно скажется на пользовательском опыте и поведенческих факторах.

7. Оптимизация мобильной версии сайта с точки зрения SEO

Если вебмастер решает создать отдельную версию сайта, оптимизированную специально для мобильных устройств, ему обязательно нужно выполнить следующие действия:

• Разместить тег с атрибутом rel="alternate" на каждой странице версии сайта для компьютеров, которая ведёт на соответствующую страницу мобильной версии сайта.
• Pазместить тег с атрибутом rel="canonical" на каждой странице мобильной версии сайта, которая ведёт на соответствующую страницу основного сайта.

Пример реализации для site.ru:

Всю необходимую информацию можно найти в официальной справке Google.

Подводим итоги

• Процесс оптимизации сайта под алгоритм Mobile-first index длительный и постоянный.
• Нужно всегда проверять сайт на наличие ошибок как с помощью Search Console, так и с помощью отслеживания пользовательского взаимодействия.
• В настоящих реалиях сайт не сможет занять первые позиции в поисковой выдаче Google, если отсутствует мобильная или адаптивная версия сайта, а также без проведения SEO-оптимизации мобильной версии.
• Внедрение технологии AMP позволит вашему сайту загружаться быстрее при низкой скорости сети.

Стоит ли тратить время и бюджет на эти изменения — однозначно да. Расскажите в комментариях о том, как вы оптимизировали свой сайт под Mobile-first index ;)