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

Статья для начинающих SEO-специалистов, маркетологов и владельцев бизнеса от Брайна Харниша и компании «Пиксель Тулс». Если вы учтёте эти рекомендации, то улучшите пользовательский опыт и рейтинг сайта в поисковых системах.

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

Прошло некоторое время с тех пор, как Google начал внедрять свой индекс Mobile First. Когда об этом только было объявлено, все SEO-специалисты бросились проверять, что их сайт соответствует Core Web Vitals Google и соответствует стандартам разработки мобильных сайтов.

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

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

● По состоянию на 2020 год в мире насчитывалось более 3,6 миллиарда пользователей, использующих смартфоны. К 2023 году их будет 4,3 миллиарда.

● В 2020 году пользователи мобильных устройств проводили 90% своего времени в приложениях по сравнению с мобильными браузерами.

● На долю Google приходится 93,22% доли рынка мобильного поиска в США в 2021 году.

● Первичный результат мобильного поиска в Google, как правило, достигает 26,9% органического CTR.

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

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

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

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

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

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

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

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

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

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

Например:

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

● Вы создаете макет. Но после верстки макета и прохода по всем переходам вы находите ошибку здесь. И вы находите ошибку там. Затем вы находите ошибку в еще одном месте. Это происходит потому, что подход «Снизу-Вверх» не работает и приводит к множеству доработок.

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

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

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

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

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

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

Времена отдельных сайтов прошли. В эпоху Mobile First нет ни одной причины для использования такой реализации.

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

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

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

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

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

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

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

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

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

Например, для популярной CMS WordPress есть такие полезные плагины как Duda Mobile, W3 Total Cache, а также плагины для минификации HTML и CSS.

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

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

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

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

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

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

Все сводится к нескольким приложениям. Можно проверить эти типы проблем с помощью более чем одного приложения. Например, расширение Google Web Developer Chrome Extension.

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

Также можно использовать инструмент отладки для изучения кода сайта на предмет наличия проблем.

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

Кроссбраузерное тестирование на CrossBrowserTesting.com — это альтернатива BrowserStack, которую вы можете использовать для тестирования браузеров и устройств.

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

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

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

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

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

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

● Использование пользовательских элементов управления с корневым элементом div, а также медиа элемента video и дочернего элемента div, предназначенного для элементов управления видео.

● Использование кнопки воспроизведения/паузы видео.

● Возможность перематывать видео вперед и назад.

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

«Если основной причиной посещения сайта пользователем является просмотр видео, пользовательский опыт должен стать захватывающим и повторно вовлекающим».

Помимо очевидного, другие SEO-советы для мобильного видео включают:

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

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

● Используйте легко идентифицируемый HTML-тег. Некоторые из допустимых тегов включают video, iframe, object или embed. Google легче идентифицировать видео, если оно встроено в общие теги.

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

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

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

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

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

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

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

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

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

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

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

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

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

Они рекомендуют следующее:

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

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

● Для устройств с высоким DPI используйте атрибут srcset для изображений. Это поможет вам добавить более одного файла изображения для разных устройств.

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

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

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

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

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

Не используйте ненужные пользовательские шрифты.

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

По возможности используйте системные шрифты и вы сможете свести это влияние к минимуму.

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

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

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

Сократите количество ресурсов, необходимых для DOM и рендеринга.

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

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

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

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

Минифицируйте страницы.

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

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

Mobile First уже здесь! Потребность в реализации мобильных версий достигла критической массы.

С появлением индекса Google Mobile First внедрение кросс-платформенного, кросс-устройственного, кросс-совместимого веб-сайта достигло массового приоритета.

Это значит, что чем больше вы медлите, тем больше вам будет стоить мобильная реализация.

С оригиналом статьи вы можете ознакомиться по ссылке.

Подписывайтесь на наш канал YouTube, чат Telegram и группу ВКонтакте, чтобы стать частью дружной SEO-тусовки.