Мобильная оптимизация сайта: почему это важно, как сделать

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

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

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

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

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

Источник: shutterstock.com

Что такое адаптивная верстка? Это дизайн сайта, который одинаково хорошо смотрится и на большом экране, и на мобильном устройстве. С помощью заданного алгоритма система настраивает внешний вид так, чтобы интерфейс был удобен в использовании. Когда нет ошибок в коде, то на телефоне все смотрится хорошо и на компьютере отображается корректно.

Основан метод оптимизации сайта для мобильных устройств именно на создании версии, которая адаптируется под выбранный формат. Когда система его определяет, то подгоняет элементы дизайна под параметры экрана. При этом скорость загрузки страниц остается высокой.

Как работает адаптивная версия:

• Горизонтальная верстка меняется на вертикальную.

• Пропорционально уменьшаются элементы дизайна в интерфейсе.

• Картинки, фото и видео «теряют» вес, но качество не должно становиться плохим.

• Часть контента может быть скрыта с помощью выпадающего меню.

Как создается адаптивный дизайн? Можно использовать языки гипертекстовой разметки: HTML5 и CSS3. Нередко за основу берутся фреймворки CSS. К ним относят Bootstrap и Foundation. Кроме этих инструментов зачастую применяют препроцессоры CSS (Sass и Less).

Многие начинающие специалисты перед написанием кода создают отдельные прототипы. Сделать это можно в Figma. С помощью тестовой версии можно увидеть баги в дизайне страниц и поработать над версткой адаптивного варианта интернет-ресурса.

Почему важна мобильная оптимизация сайта

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

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

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

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

Почему важно адаптировать сайт под мобильные устройства:

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

2. Мобильная версия сайта увеличивает число пользователей. Сегодня многие люди заходят в интернет не с компьютера, а с телефона. Там они ищут товары и услуги. Однако, если вы не адаптировали свой сайт, эта категория потенциальных клиентов для вас потеряна.

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

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

5. Поисковики поднимают сайты с мобильной версией выше в рейтинге, чем другие ресурсы без этой возможности. И Google, и «Яндекс» сегодня пользуются алгоритмами Mobile-first Index. Они включают оценку сайтов с точки зрения удобства их использования в мобильной версии. Теперь результаты выдачи во многом зависят от наличия этой функции. Неважно, ищет ли человек информацию с компьютера или зашел со смартфона. Если адаптированной версии нет, то сайт упадет в рейтинге.

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

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

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

Способы мобильной оптимизации сайта

Это создание отдельного варианта для смартфонов, адаптивный дизайн или использование динамической верстки RESS.

Полноценная мобильная версия

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

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

Плюсы:

• Можно добавлять обновления специально для смартфонов.

• Пользователь может нажать на кнопку «Показать полную версию» и пользоваться ей с мобильного устройства.

Минусы:

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

• Каждый вариант придется отслеживать, исправлять баги, добавлять информацию. Это расходует силы, ресурсы и средства.

Источник: shutterstock.com

Как сделать мобильную версию?

Шаг 1. Для начала создайте второй домен, который будет показываться на хостинге. Это m.site.com. Зайдите в панель управления хостинга, выберите «Создание поддомена» и нажмите на «Создать». Процесс похож на классическую модель, может отличаться в зависимости от провайдера. В отдельном поддомене будет размещена мобильная версия, обычно настройка ведется через DNS‑сервера.

Шаг 2. Скопируйте все файлы с основной версии на новую. Зайдите в файловый менеджер вашего хостинга. В папке с основным сайтом скопируйте все в папку, начинающуюся с латинской буквы m. Это версия для мобильного устройства.

Шаг 3. Теперь настройте автоматическую переадресацию клиентов на мобильную версию. Существует несколько вариантов действий:

• С помощью JavaScript.

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

Пример:

if (screen.width < 768) {

window.location = "http://ella.com/mobile&quot;;

}

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

Вместо ella.com нужно указать свой домен.

• С задействованием скрипта сервера.

Когда вы обращаетесь к сайту, то используйте алгоритм мейнфрейма, который проверяет User Agent браузера. Если он показывает, что человек зашел с телефона, то он автоматически перенесет его на адаптированную версию.

Пример:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera

Mini/i.test(navigator.userAgent)) { window.location = "http://ella.com/mobile&quot;; }

• С использованием метатега viewport.

Когда настраиваете этот ключ, то укажите параметр user‑scalable=no. Он не даст возможности увеличить страницу на мобильном телефоне. Можно задать другой параметр: width=device‑width. Он позволяет браузеру корректно отобразить страничку на смартфоне.

<meta name="viewport" content="width=device‑width, user‑scalable=no">

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

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

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

Настройте тег <link> с элементом rel="canonical", который в мобильной версии указывает на страницу для персонального компьютера. Это покажет, что данный ресурс в адаптированной версии скопирован с основной и покажет его URL. Тег нужен, чтобы через него поисковики считали, что страница одна и та же, просто в вариантах для разных устройств.

Что касается версии для компьютера, то там следует настроить тег <link> с элементом rel="alternate", он переводит на мобильную страницу.

Также задействуйте такой вариант с атрибуцией в файле Sitemap. Задайте там тег rel="alternate". Вместе с ним укажите URL мобильной страницы. Поисковики рассматривают эти теги в файле sitemap.xml. Это может выглядеть таким образом:

<url>

<loc>https://www.logo.ru/page.html&amp;lt;/loc&amp;gt;

<xhtml:link

rel="alternate"

media="only screen and (max‑width: 640px)"

hreflang="x‑default"

href="https://m.logo.ru/page.html&quot;

/>

</url>

Здесь <loc> указывает на URL десктопной версии страницы, а <xhtml:link> с атрибутами rel="alternate" и hreflang="x‑default" – на URL адаптированного варианта на поддомене m.logo.ru.

При использовании атрибута media можно прописать возможность для перенаправления на мобильную версию. К примеру, only screen and (max‑width: 640px) значит, что переход будет осуществляться на устройствах с шириной экрана не более 640 пикселей.

Шаг 5. Проведите проверку оптимизации сайта для мобильных устройств на разных типах браузеров. Можно взять реальные телефоны или воспользоваться сервисами BrowserStack, CrossBrowserTesting, Sauce Labs. Проследите, чтобы на смартфонах действительно работала мобильная версия, а не открывалась уменьшенная для десктопа.

Адаптивная верстка

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

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

Адаптивный сайт как вариант мобильной оптимизации сайта тоже индексируется поисковой системой. Вам не нужно будет создавать отдельные названия для мобильной версии. Это делает индексацию проще.

Источник: shutterstock.com

Плюсы:

• Сайт достойно смотрится на любом типе устройства.

• Можно добавить изменения только в версию для персонального компьютера.

• Не придется продвигать сразу два варианта.

• Адаптивная версия обойдется дешевле, создать ее проще.

Минусы:

• Некоторые многослойные элементы сложно адаптировать под другой формат.

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

• Сложно понять, будет ли страница корректно выглядеть на том или ином устройстве. Универсальной настройки не существует.

Как сделать адаптивную верстку?

Шаг 1. Для начала продумайте структуру сайта: выберите элементы, которые останутся в неизменном виде, что нужно убрать, что добавить. Это будет его прототип.

Как сохранять структуру сайта:

• Выберите цели и задачи.

• Определите целевую аудиторию.

• Придумайте карту сайта, где прописаны все страницы и порядок.

• Для каждого блока контента пропишите все элементы. Это надо сделать на каждой из страниц.

• Поработайте над прототипом, чтобы оценить внешний вид и рабочие процессы на сайте.

• Удостоверьтесь, что в итоге все сошлось с вашими ожиданиями, удовлетворяет потребностям потенциальных клиентов.

Шаг 2. Теперь нужно организовать основной макет через HTML‑код. В каждом контентном блоке нужно прописать стили CSS; установить высоту, ширину, выбрать цвет фона, границы, отступы. Короче, задать все свойства по вашему макету.

Шаг 3. При выборе адаптивной верстки используйте CSS‑правила. Они подстроят все блоки на сайте под разные устройства. Можно задействовать медиазапросы. Они дают возможность выбирать разные стили под различные размеры экранов.

Рассмотрим медиазапрос для устройств с максимальной шириной 680 px:

@media (max‑width: 680px) {

/* стили для экранов меньше 680px */

}

CSS

Шаг 4. Не забывайте установить тег Viewport в раздел head HTML‑кода:

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

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

Шаг 5. Когда вы завершили разработку и настроили адаптивную верстку, проверьте, как выглядит сайт на разных экранах. Можно запустить эмуляторы через браузер: «Инструменты разработчиков» («Меню» → «Инструменты» → «Инструменты для разработчиков») или воспользоваться комбинацией клавиш:

• для Windows OS – Ctrl + Shift + I;

• для Mac OS – Alt + Command + I.

Активировать эмулятор можно, если нажать в левом верхнем углу на Toggle device toolbar.

Еще один вариант протестировать версию – зайти через расширение в браузере Chrome «Мобильный симулятор».

RESS

Это аббревиатура от английского REsponsive web design + Server Side components. То есть «адаптивный дизайн + серверные компоненты». Это новая гибридная технология. Она с помощью сервера дает возможность адаптировать сайт под разные типы устройств. То есть мейнфрейм сам определяет, зашел ли пользователь со смартфона или с планшета и открывает ему нужную версию страницы ресурса.

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

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

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

Источник: shutterstock.com

Плюсы:

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

• Экономит трафик и позволяет оптимизировать расходы на мобильном интернете.

• Идеален для больших и сложных сайтов.

Минусы:

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

• Зачастую для создания такого варианта нужно отдельно приобретать программное обеспечение.

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

Как сделать RESS?

Шаг 1. Проверьте, с каких смартфонов люди чаще всего посещают сайт. Разбейте устройства по группам, в зависимости от параметров: скорость интернета, размер экрана, тип устройства.

Изучите пользовательский опыт, для этого посетите «Яндекс Метрику» в разделе «Отчёты» → «Аудитория».

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

Шаг 3. Создайте макет страницы, который будет основным для всех устройств.

Шаг 4. Задействуйте медиазапросы CSS. Они покажут размеры экраны и скорость интернета. Медиазапросы дают возможность увидеть, какие стили будут назначены элементам страницы на различных устройствах.

Шаг 5. Задействуйте разные сервисные технологии. К примеру, PHP или Node.js. Они определяют параметры устройства и особенности его соединения. Они генерируют готовый к показу HTML‑код страницы. Это позволяет понять, какие ресурсы должны быть загружены.

Шаг 6. Подключите технологию WebP. Она позволяет подогнать картинки под формат, а технология minification оптимизирует код. Это ускорит открытие страницы.

Шаг 7. Посмотрите, корректно ли выглядит сайт на разных устройствах с разными скоростями интернета.

Источник: shutterstock.com

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

Какой из трех вариантов мобильной оптимизации сайта оптимален:

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

• Если вам принципиально важно облегчить код для смартфонов, то попробуйте вариант с использованием технологии RESS.

• Если вы не хотите загружать разный контент на обе версии, то выбирайте адаптивную вёрстку.

Основные принципы мобильной оптимизации сайта

При задействовании адаптивной верстки важно придерживаться следующих принципов.

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

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

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

Дизайн не видоизменяется

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

ТОП-7 кейсов
из разных ниш с ростом
от 89% до 1732%

Узнать подробнее

Сохраняется структура элементов

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

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

Высота и ширина кликабельных элементов не менее 44 пикселей

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

Все функции с десктопного сайта сохранены

В мобильной версии важно повторить все элементы, которые есть в полноэкранной версии. Если клиент не видит какой-то товар с экрана своего устройства, он не станет повторно посещать сайт. Человек выберет решение конкурентов, где все элементы и функции доступны в мобильной версии.

Источник: shutterstock.com

Компактность

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

Уменьшено число колонок

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

Инструменты мобильной оптимизации сайта

Способы проверки

Чтобы оценить, хорошо ли получилось, следует провести мобильную оптимизация сайта. Используйте такие сервисы поисковых систем: «Проверка мобильных страниц» в «Яндекс Вебмастере» и Google Mobile-friendly Test (отключена с декабря 2023 года).

Вместо последней для проверки оптимизации можно использовать PageSpeed Insights. Такая возможность есть и в инструменте той же фирмы Google Search Console. Оцените, как выглядит главная страница, все элементы ли совпадают, есть ли на сайте контакты, корректно ли отображается меню. Бывает, что результаты в разных версиях сильно различаются.

Существует также сайты, к примеру: iloveadaptive.com, adaptivator.ru, mobilemoxie.com.

Проверка скорости загрузки

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

Источник: shutterstock.com

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

Элементы и шрифты

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

Viewport

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

Прокрутка по вертикали и горизонтали

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

Исходный код

Важно, чтобы он в обеих версиях был один и тот же: текст, мета-теги, заголовки.

Индексация CSS и JS

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

Функционал и верстка

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

Что касается анимации, ее нужно сделать при помощи HTML5. Не рекомендуется пользоваться программой Flash, задействовать Silverlight-плагины, Java-апплеты.

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

Редирект

Сделайте перенаправление. Это получается, если при открытии сайта на смартфоне определяется User-Agent устройства. Редирект можно сделать разными методами: через php или js-код, в htaccess.

Источник: shutterstock.com

Кликабельные контакты

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

Разместите кликабельные номера для связи в мессенджерах. Также не забывайте о внедрении геоссылок для реальных адресов. К примеру, клиент нажимает на нее, после чего появляется карта со способом, как добраться до места. Для этого подключите API «Яндекс Карт» и оформите текст с адресом в HTML-элементе с CSS-классом ymaps-geolink.

Голосовой поиск

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

Какие факторы учесть для эффективной мобильной оптимизации сайта

Есть несколько важных моментов.

Скорость загрузки

Для начала используйте специальный сервис сжатия кода – Minify. Благодаря ему не придется уменьшать элементы вручную. Инструмент позволяет убрать лишние символы, пробелы и новые строки. Так он уменьшает размер кода до 95 %.

Кстати, программа не просто его сжимает, но и снижает время ответа сервера, сокращает HTTP-запросы, использует кеширование RFPL и дополнительно – CDN и кеширование. Все это позволяет быстрее открывать сайт в адаптированной версии.

Ускоренные мобильные страницы (AMP)

Официально они стали использоваться поисковыми алгоритмами «Яндекса» и Google в 2016 году. Теперь страницы мобильных версий появляются вверху поисковой выдачи. Когда пользователь кликает по ссылке, ему мгновенно выдаются нужные данные.

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

Из чего состоит этот формат:

• AMP JS. Здесь используется собственная библиотека, она позволяет синхронизировать загрузку всех элементов страницы.

• Google AMP Cache. Когда поисковик индексирует такие страницы, он делает кеш их данных и воспроизводит со своих сервисов.

• Из AMP HTML. Задействован язык гипертекстовой разметки, но в нем обычные теги частично меняются на метки этого формата.

Турбостраницы

К ним относят облегченные версии для мобильных устройств. Они быстро открываются, даже если скорость интернета невысока. Чтобы создать турбостраницы, нужно использовать «Яндекс» и оформить контент по предложенному системой шаблону: лого сайта, картинка, текст, реклама и дополнительная информация. Все это будет мгновенно показываться пользователю даже при нестабильной связи. Такие страницы при выдаче отмечены картинкой в виде ракеты.

Адаптивный дизайн

Этот способ хорошо тем, что сайт откроется корректно с любого гаджета. Кодируется HTML, и контент подстраивается под разные размеры экранов. Поэтому на всех устройствах страницы выглядят одинаково, независимо от того, смотрят ли сайт с «Айфона» или планшета. Такой контент в мобильной версии корректно смотрится и с монитора компьютера.

Уменьшение картинок без ущерба для качества

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

Всплывающие окна

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

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

• когда они не занимают много места. Например, это баннеры разных приложений браузеров;

• нужные диалоги входа на сайт, когда контент не является доступным для всех;

• межстраничные объявления.

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

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Часто задаваемые вопросы о мобильной оптимизации сайта

Каким образом можно проверить, на каком месте находится интернет-ресурс в выдаче для смартфонов?

Отдельно можно посмотреть позиции на различных сервисах, правда, они платные. К примеру, такой информацией делятся «Топвизор», Serpstat, SEOlib, Rush Analytics. Все они используют одинаковый метод: после регистрации владелец создает проект, указывает поисковики, выбирает мобильный поиск и добавляет свой список ключей.

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

• Скорость загрузки сайта.

• Простоту использования.

• Просмотр с разных устройств.

• Тип подключения к интернету.

Лучше самостоятельно проанализировать ситуацию, оценив, как ресурс смотрится с экрана монитора и с разных устройств через систему «Топвизор». Если разница велика, то сначала проверьте, все ли условия поисковиков вы выполнили, когда занимались оптимизацией мобильной версии сайта. Иногда можно что-то не учесть. Можно посмотреть пользовательский опыт через «Вебвизор» в «Яндекс Метрике». Для этого зайдите в настройке и нажмите «Тип устройства». Посмотрите те посещения, где были плохие показатели, возможно в этих данных вы найдете указание на ошибку.

Как функционирует мобильная оптимизация адаптивной версии сайта для «Яндекса»?

Появился этот способ в 2016 году. Тогда система запустила алгоритм «Владивосток». Теперь лучше продвигаются сайты, которые:

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

• С динамической версткой. Такой сайт будет открываться по основной ссылке, пользователи, открывающие его на разных устройствах, могут получить разные варианты кода HTML и CSS.

• Отдельный поддомен для мобильной версии. Если он начинается с m. или mob. Все остальные буквы в названии сайта должны совпадать с основным доменом.

• Адреса основного сайта и поддомена должны быть открыты для автоматической индексации. Разрешения необходимо прописать в служебном файле robots.txt.

Какие баги мешают добиться эффективной мобильной оптимизации сайта?

Рассмотрим основные проблемы, которые возникают при попытке адаптировать ресурс под такой формат:

• Кнопки слишком мелкие и находятся близко друг к другу. Выбирайте элементы больше 48×48 пикселей. Иначе Google примет этот недочет за нарушение UX.

• Некорректная прокрутка. Контент должен быть виден на экране, особенно это касается таблиц и изображений. Горизонтальная прокрутка раздражает пользователя.

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

• Всплывающие окна. Подписки, рекламы и перекрывающие основной фон баннеры сегодня не являются корректным способом отображения информации. Сайты с таким контентом хуже ранжируют поисковые системы.

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

Какие существуют тренды и перспективные направления мобильной оптимизации сайта в ближайшее время?

Конечно, поисковые алгоритмы совершенствуются. Появились новые требования:

• Интеграция контента, созданного с помощью нейросетей. Сегодня такое содержание должно соответствовать требованиям качества: опыт, экспертность, авторитет, доверие. Google сразу замечает некачественные тексты и картинки, созданные с помощью искусственного интеллекта.

• Оптимизация под голосовые запросы. Уже порядка 27 % пользователей используют этот формат. Поэтому нужно переходить на естественный язык запросов и делать акцент на FAQ-разметку.

• Web Vitals0. Сегодня важно создавать плавную анимацию и заботиться о сохранении заряда мобильных устройств. Google уже начал тестировать систему.

• PWA как альтернатива AMP. Первый вариант работает намного лучше устаревшей версии, технология постепенно завоевывает рынок.

Конечно, данные тренды повлияют на мобильную оптимизацию в будущем. Компании, которые учтут изменения, будут иметь конкурентное преимущество.

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

Источник изображения на шапке: shutterstock.com

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону