Мобильная оптимизация, SEO — это практика оптимизации сайта для мобильных устройств (смартфонов и планшетов), технические приемы для улучшения скорости загрузки и отображения контента и дизайна.
Что такое мобильная оптимизация сайта?
Количество поисковых запросов для мобильных устройств растет с каждым днем. Фактически, 58% всех поисковых запросов в Google теперь выполняются с мобильных устройств.
Особенности мобильных устройств
Между мобильными устройствами и настольными компьютерами есть несколько ключевых отличий:
- небольшое разрешение экрана;
- узкий размер кеша;
- более медленнон соединение;
- множество всевозможных устройств и форм-факторов;
- широкая поддержка HTML5;
- невысокая мощность процессоров.
Что такое индексация Google Mobile-First?
Google Mobile-First — это индексация Google для мобильных устройств, которая влияет на позиции в результатах поиска. До этого обновления Google подключал два индекса, которые работали друг с другом: мобильный и настольных ПК. Если кто-то выполнял поиск, например, с iPhone, Google демонстрировал им результаты из мобильного индекса. Сегодня, независимо от того, какое устройство вы используете, Google показывает результаты из индекса мобильных устройств.
Настройка оптимизации сайта под мобильные устройства
- Используйте gzip для сжатия текстовых данных.
- Расположите CSS в заголовке документа HTML и JavaScript снизу страницы.
- Объединить файлы JavaScript и CSS, которые используются по всему сайту. Это уменьшит сумму HTTP-запросов, что крайне существенно для мобильных сайтов;
- Применять минификацию и обфускацию кода CSS и JavaScript.
- JS и CSS, которые применяются только один раз на сайте, а также незначительные JS и CSS (до 5 кБ) лучше включать прямо на страницу, т. не переносить в отдельные файлы.
- Многие мобильные браузеры (например, Android или Opera Mobile) имеют общий лимит подключений не более 4-6.
- При этом интернет-браузер Android поддерживает конвейерную обработку HTTP, что позволяет отправлять на сервер сразу 3 запроса в одном соединении. Не забудьте убедиться, что сервер также поддерживает конвейерную обработку HTTP.
- очень важно правильно сжимать графические файлы (без видимой потери качества);
- избегать или хотя бы кэшировать перенаправления.
- для iOS используйте Quicktime Reference Movies, это позволяет вам «обслуживать» посетителя различными по объему видеофайлами, в зависимости от возможностей его подключения к Интернету.
Используйте адаптивный дизайн
Благодаря адаптивному дизайну макет веб-страницы и контент адаптируются к каждому отдельному пользователю.
Достоинство мобильной оптимизации: Адаптивный дизайн исключает возможность создания отдельных URL-адресов или разных кодов HTML / CSS для каждого устройства.
Проверка оптимизации сайта для мобильных
С точки зрения SEO-оптимизации этот дизайн превосходит другие варианты, потому что:
- Весь ваш контент находится в одном URL, что удобно для обмена и получения входящих ссылок.
- Минимальные головные боли для SEO в виде отсутствия атрибутов, проблем с дублированием.
- Удобство для пользователя.
- Поведенческие факторы SEO, благодаря алгоритму Google RankBrain.
- Нет перенаправлений, которые вызывают технические проблемы для SEO и могут замедлить работу сайта.
Оптимизация мобильной верстки
Ваш сайт отлично смотрится на экране любого размера, будь то телевизор с разрешением 4K или iPhone 5 с шириной экрана 320 пикселей. Но работа по оптимизации на этом не заканчивается. Как указывалось ранее, еще одна важная задача — хорошо работать с Core Web Vitals.
Core Web Vitals — это набор из трех показателей, предназначенных для измерения пользовательского опыта работы с веб-сайтом. Именно они формируют вывод — насколько быстро будет загружаться сайт.
Как проверить Google Core Web Vitals
В разделе «Обзор» вы увидите оценку сайта по набору показателей SEO и распределение показателей Google Core Web Vitals по шкале от критически плохого (красный) до нуждающегося в улучшении (желтый) и хорошего (зеленый). Выберите значок мобильного устройства, чтобы просмотреть состояние страницы с точки зрения мобильных пользователей.
Настройка оптимизации сайта под мобильные устройства
Включите опцию автоматического регулярного аудита сайта, чтобы не упускать из виду возможные проблемы с ухудшением этих показателей.
Важно понимать, что показатели Google Core Web Vitals в первую очередь нацелены на обеспечение положительного восприятия веб-сайта. Если пользователь доволен, он будет более восприимчив к сообщению вашей страницы. А поведенческие факторы тесно связаны с факторами ранжирования.
Как улучшить показатели юзабилити вашей страницы?
В идеале вы должны следовать всем рекомендациям. Ниже приводится краткое изложение наиболее эффективных и простых способов улучшить вашу производительность.
Скорость загрузки и работы скриптов сайта
Ключевые веб-метрики коренным образом изменили подход к оценке скорости загрузки веб-сайта — в конце концов, теперь важно, чтобы первый рендер экрана, а не всей страницы, стал доступен как можно быстрее. Но многие принципы, которые важны для оптимизации скорости в целом, также помогут с Core Web Vitals.
Если у вас медленный сервер, дальнейшие улучшения не помогут. Позаботьтесь об этом в первую очередь.
Тестирование мобильной версии сайта
Кеширование и минификация
Кэширование необходимо, чтобы сервер не выполнял много вычислений или запросов к базе данных каждый раз при загрузке страницы и создавал предварительно сохраненный документ HTML, что намного быстрее.
Минификация удаляет пробелы, символы новой строки, табуляции и т. Каждый из этих символов занимает 1-2 байта, поэтому в сумме они могут значительно замедлить загрузку страницы. Существует множество инструментов для минимизации CSS и JS.
Размер изображения
Для экрана шириной 400px разрешение FullHD использовать не нужно — разницы вы не увидите, а вес значительно возрастет. Если у вас популярная CMS (например, WordPress), существует множество готовых решений, позволяющих автоматически подстраивать изображения на странице под нужный размер экрана.
Как адаптировать сайт под мобильные устройства?
Ленивая загрузка
Это технология, которая позволяет изображениям на странице не загружаться сразу. Они начинают загружаться, когда вы прокручиваете страницу. Как следствие, загрузка первого экрана значительно ускоряется, что важно при вычислении LCP (самого большого фрагмента контента на странице).
Контрастность элементов
Цвет текста должен существенно отличаться от фона, чтобы его можно было читать без напряжения. Вы можете измерить уровень контрастности в браузере, наведя курсор на цвет текста в консоли Chrome Dev Tools.
Важность оптимизации скорости мобильных сайтов становится все более важной сейчас, когда пользователи все чаще используют смартфоны для повседневных задач в Интернете.
Интересно, что большинство людей более нетерпимо относятся к медленным веб-сайтам при использовании смартфонов. Часто это связано с конкретными задачами, которые нужно решить в течение нескольких секунд (например, уточнить адрес или телефон).
Важно помнить, что наша задача — минимизировать скорость загрузки сайта с наименьшими потерями в функциональности и удобстве использования.