Оптимизация сайта под мобильные устройства: Как оптимизировать сайт для мобильных устройств с помощью PageSpeed Insights / Хабр

Кроме того, Core Web Vitals — это не просто теоретическое упражнение. Они напрямую влияют на поисковую оптимизацию (SEO) и ранжирование страниц. Google позволяет протестировать Core Web Vitals с помощью бесплатного инструмента PageSpeed ​​Insights. Как только вы введете URL-адрес, PageSpeed ​​Insights вернет обзор своих основных веб-показателей:

Так же, как и в случае с инструментом Mobile-Friendly Test, Google предоставляет конкретные предложения по улучшению, которые вы можете внести для оптимизации веб-сайта. Поскольку Core Web Vitals уделяет больше внимания производительности, большинство предложений, которые вы здесь увидите, связаны с оптимизацией скорости:

Имейте в виду, что PageSpeed ​​Insights возвращает отдельные результаты для мобильной и десктопной «версий» вашего сайта. . Это означает, что вы можете получить разные наборы предложений для каждой версии. Сосредоточение внимания на предложениях по оптимизации для мобильных устройств значительно улучшит оба набора показателей.

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

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

• Реализовать кэширование . При использовании кэширования некоторые файлы вашего веб-сайта будут сохраняться в более удобном месте (например, на локальном устройстве каждого посетителя), поэтому их не нужно загружать каждый раз при доступе к новой странице. Доступно множество бесплатных плагинов для кэширования, хотя некоторые планы хостинга, такие как DreamPress, включают эту функцию по умолчанию.
• Использовать сеть доставки контента (CDN) . Вместо того чтобы доставлять файлы с одного центрального сервера, CDN позволяет хранить их копии на нескольких географически разбросанных серверах. Это делает время загрузки более сбалансированным независимо от местоположения данного пользователя, а также снижает использование полосы пропускания.
• Сжатие изображений . Большие файлы изображений часто являются причиной медленной загрузки. Сжимая их, вы можете уменьшить их размер, не влияя на их качество. Существует ряд бесплатных и премиальных решений, которые помогут вам в этом, включая плагин ShortPixel и инструмент TinyPNG.
• Сократите свой код . Оптимизируя код CSS, HTML и JavaScript своего сайта, вы можете сделать его более эффективным и сократить время загрузки на драгоценные секунды.
• Поддерживайте все аспекты вашего сайта в актуальном состоянии . Использование устаревшего программного обеспечения для работы вашего веб-сайта не только делает вас уязвимым для проблем с безопасностью, но и не позволяет ему работать с максимальной эффективностью. Постоянно обновляя свои плагины, темы и CMS, вы можете избежать этих проблем.

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

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

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

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

• Всплывающие окна должны быть как можно менее мешающими: На мобильных устройствах всплывающие окна должны занимать лишь небольшую часть экрана.
• Их должно быть легко закрыть: Должно быть ясно, как мобильные пользователи могут закрыть всплывающее окно, обычно с помощью хорошо заметной кнопки приличного размера.
• Исключение составляют всплывающие окна, содержащие необходимую информацию: Приведенные выше рекомендации не применяются к диалоговым окнам входа в систему, формам проверки возраста, уведомлениям о файлах cookie, уведомлениям о согласии GDPR и т. д.

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

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

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

В большинстве случаев лучшим вариантом является использование плана хостинга Virtual Private Server (VPS), так как они, как правило, доступны по цене, но при этом предлагают потрясающую производительность. В DreamHost мы предлагаем широкий спектр тарифных планов VPS для всех типов проектов WordPress: 

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

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

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

Хотя можно создать мобильное приложение с нуля (или нанять для этого разработчика), гораздо проще использовать инструмент, который поможет вам превратить ваш сайт в приложение. Одним из решений, оптимизированных для пользователей WordPress, является AppPresser:

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

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

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

Если вы используете WordPress, оптимизация вашего сайта для мобильных устройств становится намного проще. Использование правильных плагинов и тем поможет вам пройти долгий путь, как и предварительный просмотр того, как ваши проекты выглядят на мобильных устройствах. Объедините это с такими инструментами, как Google Mobile-Friendly Test, и относительно просто создать сайт, который фантастически выглядит на небольших экранах.

Вы готовы перейти на мобильные устройства? Наши планы DreamPress включают управляемые сервисы WordPress и настраиваемый конструктор веб-сайтов WP. Оба позволяют легко создавать страницы, которые фантастически выглядят на мобильных устройствах!

Как оптимизировать ваш сайт для мобильных пользователей?

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

Знаете ли вы, что Google ввела новую политику Mobile-First?

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

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

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

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

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

#1: Проектирование с учетом мобильных устройств

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

Помимо адаптивного дизайна, основанного на здравом смысле, какие еще элементы дизайна вы должны внедрить в свой веб-дизайн, ориентированный на мобильные устройства?

• Приоритизация. Мобильные экраны ограничены доступным пространством дисплея. Кроме того, мобильные экраны отображают контент вертикально, в отличие от гораздо более широкой горизонтальной структуры для настольных компьютеров. Это означает, что вы должны проектировать, используя расстановку приоритетов. Какие элементы крайне важны для просмотра пользователями? Если есть кнопки CTA, насколько легко их увидеть для мобильного пользователя?
• Сначала содержимое. Цвет второй. Вы можете делать некоторые интересные вещи с мобильным дизайном, но уж точно не в рамках настольного дизайна. Итак, сначала уступите место контенту. Сделайте свою копию и другие части контента легко читаемыми и доступными. Мобильный экран гораздо менее снисходителен к отвлекающим визуальным элементам.
• Удобная навигация. На мобильном устройстве нельзя просто щелкнуть в любом месте и вернуться на домашнюю страницу. Если, конечно, вы заранее не запланируете этот вид навигации. И вы должны. Поэкспериментируйте с виджетами Scroll-to-Top, а также с бесшовными липкими заголовками, когда это возможно.

Лучший способ проверить, правильно ли вы это делаете, — воспользоваться телефоном ( Я делаю это постоянно! ) и посетить ваш сайт. Проведите тщательное исследование того, как вещи ощущаются и текут вместе.

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

#2: Оптимизация ресурсов; изображения, значки и т. д.

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

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

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

Итак, как вы можете убрать несколько дополнительных КБ или даже МБ из вашего визуального контента?

• Изменение размера изображений. Звучит просто, правда? Ну, я не могу сосчитать, сколько раз я просматривал мобильный сайт только для того, чтобы в фоновом режиме загружались изображения 1980 x 1200 . Вместо этого в качестве альтернативных ссылок при необходимости следует предоставлять полноразмерные фотографии. Изменение размера может уменьшить до 80% общего размера изображения, в зависимости от требуемых размеров. Тем не менее, для мобильных устройств нет причин превышать максимальное значение в 600-700 пикселей.
• Уменьшить размер файла с помощью сжатия. Сжатие/оптимизация изображения — это процесс использования стороннего программного обеспечения для уменьшения количества цветов, присутствующих в изображении. Это может быть сделано до такой степени, что ваши фотографии не потеряют своего врожденного качества, но могут значительно уменьшить размер файла. Если вам нужна помощь в сжатии изображений, обратите внимание на наш исчерпывающий обзор инструментов для сжатия изображений.
• Исследуйте альтернативные форматы файлов. Все слышали о форматах файлов PNG и JPEG. В конце концов, они де-факто являются стандартами изображений в Интернете. Но не надолго. Новейшие и лучшие технологии доставки цифровых изображений основаны на форматах файлов WebP и SVG. SVG, например, может автоматически масштабироваться до размера экрана, уменьшая количество ресурсов, необходимых для загрузки определенных визуальных компонентов.

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

Insightful: В соответствии с концепцией интуитивно понятного мобильного дизайна вам не нужно повторно использовать одни и те же визуальные компоненты в своем мобильном дизайне. Удаление нескольких фоновых изображений и замена их цветным фоном — на мобильных устройствах — не повредит пользовательскому опыту. Всегда ищите способы сэкономить даже самую маленькую полосу пропускания.

#3: Предварительная загрузка и отложенная загрузка

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

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

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

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

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

Какие типы загрузчиков наиболее распространены?

• Предварительная выборка.  Этот тип предполагает, что конкретный URL, скорее всего, будет следующим выбором навигации. И если браузер удовлетворяет запрос, то он автоматически кэширует важные ресурсы страницы, что, в свою очередь, значительно ускоряет загрузку следующей страницы.
• Пререндеринг. В то время как приведенный выше тип извлекает только определенные ресурсы, пререндеринг кэширует всю страницу. Весь отображаемый контент хранится в памяти устройства пользователя.
• Предварительная выборка DNS. Предварительная выборка DNS разрешает указанный DNS и ничего больше. В результате, если пользователь делает определенный «поворот» на вашем сайте, вы, по сути, сокращаете время, необходимое для навигации.
• Предварительное соединение. То же, что и выше, но также устанавливает соединения и рукопожатия с соединениями TCP и TLS.

Какие есть примеры кода для предзагрузчиков?

Поскольку в программах предварительной загрузки используются динамические HTML-теги, вы можете предварительно загружать контент, например Google Fonts, или создать собственный сценарий для предварительной загрузки ресурсов JavaScript в WordPress.

Кстати, если вы используете WordPress, WP Rocket может помочь вам в этом, чтобы ускорить работу вашего сайта.

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

Что такое отложенная загрузка?

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

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

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

Я рекомендую использовать библиотеку Layzr.js — простая и эффективная ленивая загрузка ваших изображений! Скрипт также активируется на главной странице проекта, так что вы можете наблюдать за его работой в режиме реального времени. Пользователи WordPress могут найти десятки плагинов с отложенной загрузкой в ​​общедоступном репозитории плагинов.

#4: Веб-кеширование

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

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

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

Вы также можете подписаться на CDN.

Что такое CDN (сеть доставки контента)?

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

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

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

#5: AMP (ускоренные мобильные страницы)

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

Хорошо, все эти модные словечки звучат здорово, но как работает AMP?

AMP — это простая HTML-страница с определенными ограничениями на отображаемый контент. Это приводит к гораздо более быстрому времени загрузки и общей производительности из-за ограничений на выполнение сценариев и тому подобного.

JavaScript, например, не работает с AMP. Если, конечно, вы не используете библиотеку AMP JS, доступную на GitHub. Использование библиотеки JS позволяет вам достичь определенных результатов, например, избежать блокировщиков рекламы, но если вам нужна настоящая производительность, вам подойдет необработанный AMP.

Интересные примеры использования AMP:

• Terra увеличивает количество просмотров на мобильных устройствах с помощью AMP
• Times of India сообщает о росте выручки в 1,5 раза
• Fastcommerce повышает конверсию для клиентов, создавая AMP-first

#6: Тестируйте перед фиксацией

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

Что такое промежуточная среда?

Что ж, самый быстрый способ объяснить это — посмотреть на ваш текущий веб-сайт.

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

Я всегда вспоминаю пост Эшли Харпп, Не теряйте время зря — тестируйте изменения перед фиксацией .

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

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

Заключительное заявление

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

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

Как оптимизировать ваш веб-сайт для мобильных пользователей

Каждый может признать важность удобного для мобильных устройств веб-сайта, особенно после обновления алгоритма Google Mobilegeddon.

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

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

Что такое мобильная оптимизация?

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

Изменение алгоритма Google для мобильных устройств в 2015 году (и еще несколько с тех пор) свидетельствует о том, что поисковая система осознает свою ответственность за создание веб-сайтов, которые безболезненно предоставляют пользователям то, что им нужно, в то время, когда им это нужно.

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

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

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

1. Составьте карту пути клиента.
2. Не упускайте моменты, полные намерений.
3. Пересмотрите свои показатели.
4. Окунитесь в близость мобильных устройств.
5. Помните об основах и думайте наперед.

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

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

1. Составьте карту пути клиента.

Представьте себе Салли, молодого маркетолога, который только что переехал в Чикаго. На прогулке Салли проходит мимо парикмахерской и понимает, что ей нужно подстричься. Она вытаскивает свой телефон и ищет парикмахеров в Чикаго, которые специализируются на кудрях и окрашивании. Ее поиск в Google выдает Joann’s Stylez .

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

Когда Салли поздно вечером загружает свой ноутбук, чтобы проверить электронную почту, она обнаруживает электронное письмо от Джоанн , которое подтверждает ее встречу и дает ей возможность добавить ее в свой календарь. На следующий день, за 30 минут до встречи, она получает push-уведомление на свой рабочий компьютер с напоминанием о встрече.

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

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

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

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

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

2. Используйте микромоменты, насыщенные намерениями.

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

Google рекомендует маркетологам определять «микромоменты» на пути клиента:

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

Ряд брендов придумали, как предвидеть эти микромоменты и извлечь из них выгоду. Apple Passbook загружает вашу карту Starbucks, когда вы находитесь рядом с кафе. Hertz отправляет вам электронное письмо, когда ваш самолет приземляется, чтобы сообщить, что ваш автомобиль готов. Starwood позволяет вам зарегистрироваться и открыть свой номер в отеле с помощью смартфона.

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

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

• Поиск : Какие запросы, объявления и ключевые слова приводят пользователей на разных устройствах на ваш веб-сайт и целевые страницы? Как только они попадут на ваш сайт, какие поисковые запросы будут выполнять пользователи на разных устройствах ?
• Контент : Изучите контент, к которому пользователи обращаются, по этапам воронки и по устройствам. Есть ли тенденция в отношении того, что потенциальные клиенты загружают на свои телефоны? Делитесь?
• Поток : Изучите анализ потока, сегментированный по устройствам. Каков путь потенциальных клиентов, использующих мобильные устройства? По какому пути идут клиенты, использующие планшеты? С каких сайтов и источников приходят эти посетители?

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

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

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

Подтверждая эту интуицию, исследование смартфонов в США, проведенное исследовательским центром Pew Research Center, показало, что 99% владельцев смартфонов используют свои телефоны дома, 82% используют их в пути, а 69% используют свой телефон на работе каждую неделю. (Это исследование было проведено в 2015 году, но мы считаем, что оно все еще актуально, если не больше, сегодня.)

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

3. Рассмотрите (и пересмотрите) свои показатели.

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

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

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

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

4. Ощутите близость мобильного телефона.

Хорошо это или плохо, но я ложусь спать с телефоном (просматривая завтрашнее расписание и читая ночную медитацию) и просыпаюсь с телефоном (выключая будильник и проверяя погоду). Я общаюсь с моим партнером и моими лучшими друзьями каждый день — все через мой телефон. Когда мой однокурсник по программе MBA присылает GIF-ку, на которой Тайра Бэнкс ведет себя дерзко, я переключаю свой телефон на человека рядом со мной, и мы вместе смеемся.

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

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

5. Помните об основах и думайте наперед.

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

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

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

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

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

Вам пора: пора оптимизировать

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

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

Первоначально опубликовано 4 ноября 2020 г., 8:00:00, обновлено 04 ноября 2020 г.

Темы:

Mobile Optimization

Не забудьте поделиться этим постом!

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

Прошло много времени с тех пор, как Google начал внедрять свой индекс mobile-first.

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

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

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

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

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

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

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

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

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

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

Вот где ваш мобильный сайт будет успешным.

1. Убедитесь, что весь контент одинаков на ПК и мобильных устройствах

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

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

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

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

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

2. Верхняя часть сгиба не исчезла полностью

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

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

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

3. Используйте подход к разработке «сверху вниз»

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

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

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

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

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

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

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. Проверьте свой сайт на нескольких операционных системах и системах отображения

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

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

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

Все сводится к нескольким приложениям. Да! Можно проверить эти типы проблем с более чем одним приложением.

Расширение Google для веб-разработчиков Chrome

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

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

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

BrowserStack

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

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

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

Кросс-браузерное тестирование

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

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

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

10. Следуйте лучшим практикам мобильного видео

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

В этой статье Мэтта Саузерна из Search Engine Journal подробно описаны пять рекомендаций Google по оптимизации видео.

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

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

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

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

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

• Использование настраиваемых элементов управления с корневым элементом div, медиа-элементом видео и дочерним элементом div, предназначенным для элементов управления видео.
• Использование кнопки воспроизведения/паузы видео.
• Обеспечение возможности поиска пользователем вперед и назад.
• Их всеобъемлющая техническая реализация мобильного видео не имеет себе равных и шаг за шагом проведет вас через весь процесс.

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

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

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

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

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

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

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

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

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

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

12. Не блокируйте вспомогательные сценарии, такие как JavaScript, CSS или такие вещи, как изображения

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

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

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

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

13. Сжатие и оптимизация изображений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уменьшить количество ресурсов Общий DOM и критический путь рендеринга

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

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

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

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

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

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

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

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

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

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

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

Mobile-First здесь; Потребность во внедрении достигла критической массы

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

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

Не только рейтинги.

Если вы еще не перешли на мобильные устройства, почему бы и нет?

Дополнительные ресурсы:

• Как добиться успеха в области мобильных устройств
• Mobile-First против. Содержимое рабочего стола: должно ли оно быть одинаковым?
• Мобильное SEO: полное руководство [бесплатная электронная книга]

Рекомендуемое изображение: Драгана Гордич/Shutterstock

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

10 советов по созданию веб-сайта, удобного для мобильных устройств

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

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

Если вы хотите, чтобы ваш сайт занимал высокие позиции в Google (или любой другой поисковой системе), оптимизация для мобильных устройств должна быть для вас приоритетной задачей. Фактически, Google недавно объявил, что «перейдет на индексацию для мобильных устройств для всех веб-сайтов, начиная с сентября 2020 года». Это большое дело. Мобильная индексация означает, что роботы Google будут сканировать только мобильную версию вашего сайта. Если какие-либо страницы не оптимизированы для использования на мобильных устройствах, они не будут отображаться в результатах поиска.

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

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

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

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

Взгляните на этот дизайн тротуара на мгновение…

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

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

1. Используйте адаптивный дизайн

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

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

2. Учитывайте размеры телефонов и позиции удержания

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

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

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

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

3. Упростите меню навигации

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

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

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

4. Упрощение форм

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

5. Оптимизация размера и расположения CTA

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

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

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

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

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

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

6. Удаление всплывающих окон

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

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

7. Содержимое должно быть кратким и лаконичным

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

8. Оптимизация скорости страницы

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

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

Сколько времени потребовалось для загрузки вашего мобильного сайта?

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

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

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

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

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

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

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

10. Тестируйте, тестируйте, тестируйте

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

Просто введите URL-адрес своего веб-сайта в инструмент Google Mobile Friendly Test Tool и нажмите «Проверить URL-адрес». Если ваш сайт оптимизирован для мобильных устройств, вы должны получить такой результат:

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

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

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

Как оптимизировать мобильный веб-сайт для органического поиска

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

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

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

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

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

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

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

На долю Google приходится около 94% всего органического поискового трафика по всему миру, а это означает, что вы не можете позволить себе игнорировать его переход на оптимизацию для мобильных устройств. Поэтому инвестиции в оптимизацию веб-сайта должны включать мобильную оптимизацию. [Читать статью по теме: Google для бизнеса: руководство для малого бизнеса ]

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

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

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

«Хотя Google говорит, что более медленные сайты с отличным контентом могут по-прежнему высоко ранжироваться, это явный толчок для компаний и разработчиков, чтобы сделать упор на производительность и удобство работы пользователей на мобильных платформах», — сказал Шон Брэди, президент американского подразделения Emarsys. «Компании должны выбрать правильную технологию и использовать правильные стратегии для предоставления как релевантного персонализированного контента, так и мобильной производительности».

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

Мобильная оптимизация и пользовательский опыт

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

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

Как сделать ваш веб-сайт удобным для мобильных устройств

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

• Посетите руководство Google по сайтам, оптимизированным для мобильных устройств. На этой странице предлагается несколько способов сделать ваш сайт более удобным для мобильных устройств, например выбор адаптивного веб-дизайна, который автоматически настраивает отображение в соответствии с размерами экрана.
• Пройдите тест Google Mobile-Friendly Test, чтобы узнать, насколько ваш веб-сайт оптимизирован для просмотра на мобильных устройствах. Вы можете протестировать одну страницу на своем сайте или несколько веб-страниц и точно увидеть, как робот Googlebot просматривает страницы при определении результатов поиска.
• Используйте Инструменты для веб-мастеров, чтобы создать отчет об удобстве использования мобильных устройств, который помогает выявить любые проблемы с вашим веб-сайтом при просмотре на мобильном устройстве.

Чтобы получить наилучшие результаты с мобильных устройств, Palazzo советует малым предприятиям использовать кеширование браузера, минимизировать JavaScript и CSS, сжимать изображения для уменьшения размера файла, использовать страницы AMP Google и убедиться, что все расширения установлены.

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

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

Влияние мобильных устройств на более широкую стратегию цифрового маркетинга

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

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

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

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

«Сосредоточенность Google на мобильных устройствах напрямую влияет на многоканальные маркетинговые стратегии брендов, особенно с учетом того, что миллениалы в среднем используют 4,5 устройства при взаимодействии с брендом, что вынуждает разработчиков продолжать фокусироваться на мобильном опыте», — сказал Брейди. «В конкурентной индустрии электронной коммерции маркетологи должны продолжать предоставлять согласованный и персонализированный контент по каналам, чтобы их контент на этих каналах создавался для максимально быстрой и эффективной работы».

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

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

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