По последним данным, около 60-70% мирового веб-трафика приходится на мобильные устройства. В эпоху Mobile-First Indexing от Google уже трудно представить сайт, который не имеет адаптивного дизайна. Тем не менее, большинство веб-ресурсов содержат ошибки и недочеты, которые снижают удобство использования (UX) и конверсию. В этой статье мы рассмотрим наиболее распространённые проблемы мобильной оптимизации, которые могут присутствовать и на вашем сайте.
Но для начала важно понимать, что цели мобильной оптимизации лежат в двух плоскостях. В первую очередь, ваш сайт должен быть максимально удобен и понятен для конечных пользователей, поскольку их комфорт напрямую влияет на конверсию и прибыль. Во вторую очередь, если вы рассчитываете на трафик из Google, необходимо строго соблюдать его требования к адаптивности, которые напрямую связаны с удобством использования, чтобы обеспечить высокий рейтинг в поисковой выдаче.
Для полной ясности отметим: в этой статье мы не будем подробно разбирать общие проблемы производительности, характерные для обеих версий сайта (например, избыточное подключение файлов стилей и скриптов). Такие глобальные технические проблемы на мобильных устройствах, конечно, усугубляются из-за ограничений в скорости и мощности.
Горизонтальная прокрутка
Горизонтальная прокрутка может иметь два проявления:
Горизонтальная прокрутка всей страницы
Это недопустимая и серьезная проблема. Она возникает либо в результате ошибки верстки либо если ширина какого-то контента страницы (например, таблицы) шире, чем ширина экрана.
Эта проблема не только удобства для людей. Google не просто 'может счесть' такой сайт неадаптивным, он гарантированно понизит его в выдаче, так как это прямое нарушение базовых принципов Mobile-First Indexing.
Горизонтальная прокрутка контента.
Горизонтальная прокрутка контента - это не обязательно проблема, а иногда — единственное разумное решение для отображения контента, перегруженного данными. Наиболее часто мы встречаем горизонтальную прокрутку контента в слайдерах изображений (где это является частью навигации) или на страницах сравнения товаров (где необходимо показать много столбцов)
Но бывают и проблемные примеры, где прокрутка используется как 'костыль'. Например, таблица списка товаров на странице оформления заказа часто имеет ненужную горизонтальную прокрутку. Вместо этого, для мобильных устройств такие таблицы должны быть перестроены.
Также это касается и других интерфейсов, которые подаются в виде таблиц, равно как и таблицы вставленные в контенте.
Если у вас на сайте есть горизонтальная прокрутка, убедитесь, что это вызвано необходимостью и нет хорошей возможности подать этот контент в измененном виде под мобильные устройства.
Некорректное отображение элементов страницы
Порой элементы сайта на некоторых разрешениях экрана отображаются неправильно, некрасиво и не удобно. Чаще всего мы видим это в шапке сайта, где плотность элементов (логотип, навигация, кнопки, контакты) максимальна. Например, пункты меню могут отображаться в несколько строк, или элементы начинают наезжать друг на друга, делая страницу непригодной для использования
Наиболее распространенная причина этого - слабая проработка адаптивности. Часто, для экономии, верстка ограничивается всего парой ключевых разрешений (например, 1920px для десктопа и 360px для мобильного), полностью игнорируя промежуточные точки. В результате, если пользователь открывает сайт на 'нестандартном' разрешении (например, на небольшом ноутбуке или если открыть браузер не на всю ширину экрана или же открыть в браузере боковую колонку закладок), макет ломается. Адаптивный дизайн должен быть плавным, и выглядеть корректно на всех разрешениях экрана.
Второй причиной некорректного вида может быть изменение контента на непредусмотренный версткой контент. Если разработчик предусмотрел корректное отображение меню из пяти коротких пунктов, но впоследствии администратор добавил еще три пункта с длинными названиями, навигация гарантированно “поплывет”. Это подчеркивает необходимость регулярного тестирования адаптивности после каждого обновления контента.
Проблемой может быть не только нехватка места. Часто сайту не задают максимальную ширину. В результате, если открыть сайт на широкоформатном мониторе его контент начинает расползаться и также выглядеть некорректно.
Оптимизация изображений
Изображения — это, как правило, самые “тяжелые” файлы сайта, которые могут радикально замедлить его загрузку, особенно в условиях нестабильного или медленного мобильного интернета. Когда на смартфон грузятся те же файлы, что и на десктоп, мы тратим ресурсы пользователя на загрузку лишних пикселей, которые все равно не будут видны на маленьком экране. Но в случае с изображениями, у нас есть возможность загружать на смартфон другие файлы.
Для этого мы можем использовать свойство css background и тег html <picture>. К сожалению, в обоих случаях возникает необходимость работать с кодом, поскольку ни текстовые редакторы ни функционал cms все еще не предоставляет возможность работать с этим.
Тем не менее, игнорировать это не нужно. Особенно в случае с крупными баннерами и фоновыми изображениями. Загрузка специально адаптированного (или полностью альтернативного) изображения на смартфон позволяет не только ускорить загрузку LCP (Largest Contentful Paint), но и подать контент в удобном и читабельном виде. Например, на мобильном можно использовать баннер с вертикальной ориентацией и более крупным текстом.
Реализация адаптивности с помощью JavaScript
Реализация адаптивности с помощью JavaScript имеет ряд недостатков. Тем не менее, такая реализация не является редкостью.
Не настоящая адаптивность.
Адаптивности с помощью JavaScript ориентируется не на ширину окна браузера, а на подпись (имя) мобильного браузера. Из-за этого, она не сработает, если сайт открыть на десктопном устройстве и уменьшить размер окна браузера.
Ухудшение SEO.
Хотя Googlebot умеет выполнять JavaScript, это происходит позднее и более ресурсозатратно, чем обработка чистого HTML/CSS. Если JS-файл слишком большой или выполняется долго, Google может проиндексировать страницу не полностью или некорректно оценить её адаптивность.
Если важный контент или структура страницы генерируются исключительно JS (что часто бывает в случае JS-адаптации), есть риск, что Googlebot его пропустит, что приведет к потере трафика.
Дополнительная нагрузка.
JavaScript - это язык программирования, который обрабатывается браузером. Если на устройстве пользователя недостаточно свободных вычислительных ресурсов, то помимо загрузки файлов сайта, пользователь может еще ждать выполнения скриптов.
Проблемы навигации сайта
Реализация удобной и понятной навигации большого сайта может быть сложной задачей даже для десктопной версии. Удобная навигация для мобильной версии - это вызов, с которым не всегда справляется даже опытная команда.
Меню
Среди наиболее распространенных проблем мобильного меню мы отметим следующие:
- Не полная структура мобильного меню
- Непонятное отображение дерева каталога
- Слишком мелкий шрифт и слишком близкое расположение пунктов, вызывающих ошибки нажатия
Хлебные крошки
Хлебные крошки могут вообще отсутствовать или же быть слишком длинными, в результате чего они могут не помещаться в одну строку и располагать кликабельные элементы слишком близко при расположении в несколько строк.
Поиск
Базовый функционал поиска от CMS часто бывает недостаточным и требует доработки. Как минимум, следует предусмотреть “Живой поиск” с предложениями искать по названию товара или названию категории.
В идеале же, над поиском можно работать очень долго и глубоко. Можно собирать историю поиска и на ее основе делать подсказк, учить поиск работать с синонимами, понимать ошибки ввода, работать со скоростью поиска и сортировкой результатов. Или же можно подключать к сайту сторонний поиск, с таким функционалом.
Расположение навигационных элементов
Нелогичное расположение навигационных элементов и часто необходимых разделов меню может сильно усложнить использование сайта.
Фильтр
Логика работы фильтра на десктопных и мобильных устройствах должна отличаться.
На десктопных устройствах правильно будет запускать фильтрацию сразу при выборе опции. На мобильных устройствах из-за того, что процесс фильтрации может проходить дольше и вызывать обновление страницы с закрытием окна фильтров, более правильным будет выбирать все необходимые опции, а процесс фильтрации запускать при подтверждении.
Core Web Vitals
И конечно нужно учитывать метрики Core Web Vitals, которые являются факторами ранжирования Google.
Largest Contentful Paint (LCP) - время отрисовки крупнейшего контента.
LCP измеряет время, необходимое для отображения самого крупного элемента (изображение, видео или большой текстовый блок) на первом экране. Это главный показатель скорости загрузки, поскольку он определяет, когда пользователь видит, что страница действительно начала работать.
Для того, чтобы снизить LCP, наиболее важно сделать следующее:
- Оптимизировать Время ответа сервера (TTFB)
Пока сервер не ответит отправит браузеру HTML-документ, загрузка элементов страницы и рендеринг не начнется.
Подробнее об этом тут - Оптимизировать крупнейший контент первого экрана.
Обычно это изображение или видео. Про оптимизацию изображений мы уже писали выше. Если же у вас на странице загружается видео, то лучше не загружать его вместе со страницей. Вы можете загрузить изображение-заглушку, а при клике на нее уже загрузится видео. - Настроить предзагрузку
Можно настроить предварительную загрузку медиа-контента или шрифтов или других файлов.
Interaction to Next Paint (INP) - задержка до следующей отрисовки после взаимодействия.
INP измеряет время от начала взаимодействия пользователя (клик, нажатие) до момента, когда браузер визуально обновил страницу, отразив результат этого действия. INP оценивает общую отзывчивость страницы в течение всего сеанса работы пользователя.
Другими словами, INP это время, в течении которого после вашего клика ничего не происходит.
Встречается такое не часто и является результатом использования слишком сложных и долго обрабатываемых скриптов. Хотя, на сайтах с обильным использованием JS-фреймворков, INP может быть существенным.
Cumulative Layout Shift (CLS) - совокупное смещение макета
CLS измеряет сумму всех неожиданных сдвигов (прыжков) видимых элементов страницы во время загрузки. Это показатель визуальной стабильности страницы
Такие смещения наблюдаются когда размеры блоков задаются контентом, например изображениями, а размер самих изображений не указан. В результате, браузер не может зарезервировать место под изображение, а когда изображение уже загрузится, все что ниже него, смещается вниз.
Еще это часто наблюдается при размещении на сайте баннерной рекламы, если баннеры загружаются уже после загрузки страницы, а место под них макетом не зарезервировано.
Решением этой проблемы будет указание размеров для медиа-контента и для блоков, размеры которых при загрузке могут отличаться от финальных.
Мобильная оптимизация — это не затраты, а инвестиции. Устранив эти недостатки, вы не просто улучшаете показатели Core Web Vitals, но и обеспечиваете пользователям комфорт, который конвертируется в рост продаж и лояльность.
Обращайтесь к нам за комплексной доработкой и оптимизацией Доработка сайтов