14 секретов мобильной оптимизации, которые вывезут ваш сайт на вершину

14 лучших практик мобильной оптимизации, которые вам нужно знать

Google SEO

Оптимизация мобильного сайта: 14 лучших практик, которые нельзя игнорировать

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

Прошло уже несколько лет с тех пор, как Google запустил свой мобильный первый индекс. Тогда специалисты SEO начали активно работать над тем, чтобы их сайты отвечали основным веб-показателям Google (Core Web Vitals) и рекомендациям по разработке мобильных сайтов.

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

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

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

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

96% американцев в возрасте от 18 до 29 лет владеют смартфоном.
По состоянию на 2020 год в мире насчитывалось более 3,6 млрд пользователей смартфонов. К 2023 году их количество вырастет до 4,3 миллиарда.
В 2020 году мобильные пользователи производили 90% своего времени в приложениях, а не в мобильных браузерах.
В 2021 году доля рынка мобильного поиска Google в США составила 93,22%.
Первый результат мобильного поиска в Google обычно имеет показатель CTR (коэффициент кликов) 26,9%.

В Украине:

85% украинцев в возрасте от 18 до 30 лет владеют смартфоном.
По состоянию на 2021 год в Украине пользуется мобильным интернетом 25,7 миллионов человек.
70% украинцев пользуются интернетом ежедневно, из них 60% – с помощью мобильных устройств.
91% украинских владельцев сенсорных смартфонов пользуются мобильными приложениями.
Мобильные пользователи в Украине производят в среднем 3,5 часа в день, пользуясь своими устройствами.

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

Хотя недавно Google запустила обновления относительно впечатлений от страниц на рабочем столе, эта тема выходит за рамки этой статьи, хотя она и влияет на общее впечатление от страницы.

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

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

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

1. Обязательная идентичность контента для мобильных и десктопных версий

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

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

Одним из лучших способов добиться этого является использование адаптивного дизайна.

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

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

2. Первый экран остается важным

Несмотря на то, что в мобильной версии страница прокручивается непрерывно, верхняя часть экрана (first screen или above the fold) все же сохраняет свой вес.

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

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

3. Разработка "сверху вниз"

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

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

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

Вот пример:

Вы создаете веб-сайт для рабочего стола. Приблизительно на три четверти пути работы вы решаете создать дополнительно мобильный сайт. Вы создаете макет. Но после кодирования макета и перехода между разными состояниями вы обнаруживаете ошибки (баги) в разных местах.

Это происходит потому, что подход снизу вверх не работает и приводит к расширению объема работ (scope creep).

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

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

4. Пользователи – в центре внимания, независимо от устройства

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

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

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

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

5. Используйте методики адаптивного дизайна

Время отдельных веб-сайтов m-dot (m.example.com) истекло.

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

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

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

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

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

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

Кроме того, ваша мобильная версия будет работать на основе новейших технологий.

6. Оптимизация скорости: код вместо изображений

Задумайтесь, нужен ли повторяющийся двухцветный фон шириной 2 пикселя и высотой 1200 пикселей?

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

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

В следующий раз, проводя аудит сайта или создавая новый, спросите себя: "Действительно ли нужно здесь это изображение, могу ли я просто реализовать это с помощью кода?"

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

7. Мобильная оптимизация WordPress

Для WordPress существует множество плагинов.

Некоторые из них могут улучшить совместимость вашего сайта с мобильными устройствами.

Наиболее полезными плагинами для этой цели являются Duda Mobile, W3 Total Cache, а также плагины для минификации HTML и CSS-кода.

8. Откажитесь от навязчивых рекламных вставок

Да, мы знаем. Ваш продукт – самый лучший и самый крутой на этой планете. Поэтому мы, вероятно, посещаем ваш сайт и исследуем его перед покупкой.

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

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

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

9. Проверка сайта на разных операционных системах и устройствах

Любой SEO-специалист должен уметь обнаруживать слабые места в реализации веб-сайта, в частности, находить проблемы на различных дисплеях и устройствах.

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

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

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

Расширение Google Web Developer Chrome

Если у вас ограничен бюджет, расширение Google Web Developer Chrome поможет вам проверить, как выглядит ваш сайт на разных размерах и разрешениях экранов. Оно также позволяет увидеть, как выглядит ваш сайт при разных ориентациях устройства, как взаимодействуют соприкосновения с экраном (из-за симуляции) и многое другое. Кроме того, с помощью инструмента отладки можно проверить код сайта на наличие проблем..

BrowserStack.com

BrowserStack.com – отличный инструмент для тестирования на многих различных браузерах, операционных системах и разрешениях экранов. Они также предлагают расширение для Google Chrome, которое можно использовать для этой цели. Вы можете протестировать любой сайт на более чем 2000 реальных устройствах, браузерах и операционных системах. Оплаченная учетная запись предоставляет неограниченный доступ к их расширению для браузера для тестирования.

Cross Browser Testing

CrossBrowserTesting.com – альтернатива BrowserStack, которую можно использовать для тестирования браузеров и устройств. Они предлагают более 1500 браузеров и платформ для тестирования, что позволяет выполнять широкий спектр задач. Этот инструмент позволяет производить сравнение скриншотов, а также имитировать работу вашего веб-сайта на реальных устройствах.

10. Оптимизация мобильного видео для SEO

Да, существует такое понятие, как SEO-оптимизация мобильного видео!

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

Важны такие элементы, как текст на странице, ссылки, структурированные данные и файлы видео.

При создании видео также следует обратить внимание на некоторые моменты.

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

Для структурированных данных рекомендуется использовать тип данных VideoObject на Schema.org.

Google рекомендует следующие методики оптимизации мобильного видео для безупречной реализации:

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

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

Как говорит Google:

"Если основная причина, почему пользователь заходит на сайт – это видео, этот пользовательский опыт должен стать увлекательным и снова привлекательным."

Вот другие важные советы по SEO-оптимизации мобильного видео, кроме очевидных:

Максимально облегчить Google поиск ваших видео. Это значит:
- Использование карты сайта для видео : если вы не отправляете карту сайта для видео, Google может не найти их напрямую. Карта сайта для видео позволяет легче отправлять ее в Google Search Console, что облегчает Google индексацию и потенциальное индексирование ваших видео.
- Не используйте сложные действия пользователей или фрагменты URL : если они используются для загрузки видео, возможно, Google вообще не найдет их, поскольку эти элементы на вашей странице слишком сложны для понимания Google.
- Используйте легкоидентифицируемый HTML-тег : некоторые из действительных включают video, iframe, object или embed. Google легче находит видео, когда они встроены в теги.
Убедитесь, что видео можно индексировать. Иногда кто-то может внести изменения в файл robots.txt, который блокирует сканирование видеофайлов (без вашей вины, надеемся). Если ваши видео индексировались, а теперь вдруг перестали, следует просмотреть ваш файл robots.txt, чтобы убедиться, что они не заблокированы.
Используйте форматы миниатюр, которые поддерживаются Google : в приведенной выше документации для веб-разработчиков Google также есть рекомендации по миниатюрам.

Оптимизация мобильного видео для SEO не всегда так легка, как может показаться.

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

11.Используйте структурированные данные Schema.org

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

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

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

12. Не блокируйте вспомогательные скрипты

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

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

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

13. Оптимизация изображений для мобильного сайта

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

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

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

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

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

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

14. Оптимизация общего размера страницы

Для мобильного сайта скорость загрузки страницы критически важна. Чтобы этого достичь, необходимо оптимизировать общий размер DOM (Document Object Model – модель объектной документной структуры).

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

Откажитесь от лишних собственных шрифтов

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

Это приводит к увеличению времени загрузки и может ухудшить показатели Core Web Vitals (основных веб-показателей). По возможности используйте системные шрифты, чтобы свести влияние этого фактора к минимуму.

Оптимизируйте изображение

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

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

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

Чем больше ресурсов нужно вашей странице для отображения, тем дольше она будет загружаться. Для обработки веб-страницы никогда не должно понадобиться более 10 плагинов (максимум) и 3-4 файлов скриптов.

Автор встречал случаи, когда загружалось 160 плагинов, а размер файла страницы составлял 10 МБ. Это совершенно недопустимо.

Для достижения наилучшего результата, по мнению автора, страницы на сайте WordPress в среднем не должны превышать 150-250 КБ и не должны содержать более 5-7 ресурсов (CSS, внешний шрифт (при необходимости), файл рекламы, файл JavaScript и три плагина) .

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

Минимизируйте ваши страницы

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

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

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

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

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

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