Оптимизация под мобильные устройства: Как оптимизировать сайт для мобильных устройств – Блог Netpeak Software

Содержание

Оптимизации мобильного сайта: руководство с примерами


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

Виды мобильных сайтов


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

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


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

Читайте также:

Комплексный аудит сайта, что входит, как сделать

#SEO аудит
#SEO продвижение

С чего начать оптимизацию мобильного сайта?


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

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


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


Robots.txt


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


Скорость загрузки страниц


В рамках адаптации сайта под мобильные устройства стоит провести проверку скорости загрузки страниц. Медленная загрузка может оттолкнуть посетителей, ведь они покидают сайт, если страница не отобразилась через 3-5 секунд после выполнения перехода. Для решения этой задачи можно использовать инструмент PageSpeed Insights от Google. После выполнения проверки вы можете увидеть следующие оценки:

  • 90-100 баллов – отличный результат;
  • 50-90 баллов – средний результат;
  • менее 50 баллов – негативный результат, свидетельствующий о том, что страницы загружаются достаточно медленно.


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


Тег viewport


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


HTTP-заголовок Vary


Эта рекомендация ориентирована на динамический контент, на наличие которого стоит указать поисковым роботам. Сделать это можно с помощью HTTP-заголовка Vary. Поисковые роботы Google будут производить сканирование контента для мобильных устройств, к сожалению, у системы «Яндекс» таких роботов пока нет. Просмотр HTTP-заголовки выполняется с помощью функции «Проверка ответа сервера», которую можно найти в «Яндекс.Вебмастер».


Настройка переадресации


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


Тег alternate


Тег подается в форме <link rel=»alternate»/>, он необходим для того, чтобы поисковые роботы могли определить не только мобильную версию, но и языковые варианты. После этого пользователю предлагается оптимальный вид страницы, что зависит от условий перехода. При настройке необходимо помнить о том, что URL страниц должны быть указаны полностью и вместе с протоколами (http, https).


Например, есть сайт http://m.vesna.com, в этом случае тег будет выглядеть так:


<link rel=»alternate» media=»only screen and (max-width: 640px)» href=» http://m.vesna.com«>;


Использование Apple touch icon


Apple-touch-icon. Png – изображение, которое будет использоваться в качестве закладки на домашнем экране мобильных устройств на операционной системе iOS (на macOS не распространяется).


Адаптация контента под ширину экрана


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


Шрифт


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


Кнопки


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


Ссылки и расстояние между ними


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


Миниатюрные картинки


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


Удаление Flash


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


Устранение лишнего контента


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


Больше пользы, меньше рекламы


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


Отказ от pop-up окон


Компания Google не слишком жалует всплывающие окна, которые мешают просматривать контент и обеспечивают нецелевые переходы на сайт рекламодателя. В это же время огромные баннеры, разворачивающиеся на весь экран, способны вывести из себя самого уравновешенного человека. Такой формат можно оставить в десктопной версии, но не в мобильной (предварительно изучите список разрешенных pop-up). Для проверки оптимизации сайта под мобильные устройства целесообразно использовать сервис search.google.com, который поможет собрать информацию и о технических, и о визуальных аспектах.

Читайте также:

60 лучших бесплатных SEO инструментов

#SEO продвижение
#SEO аудит
#Инструменты
#Аналитика

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


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

  • простая и удобная навигация. Все пункты меню должны хорошо просматриваться, а также быть доступными в мобильной версии сайта (в том числе и «хлебные крошки»). Удобная навигация поможет юзеру хорошо ориентироваться на сайте и быстро находить то, что его интересует;
  • быстрый набор. Необходимо добавить ссылки с номеров телефонов, благодаря которым клиент сможет осуществить набор без ошибок, делая несколько кликов. Такая мелочь может оказать положительное влияние на рост количества обращений, особенно если речь идет о коммерческом ресурсе;
  • местоположение. Многие пользователи не выключают на смартфонах и планшетах функцию, позволяющую определить местоположение. Наличие учета местоположения облегчит процесс оформления заказа, поиска ближайшего склада или магазина, выбора способа доставки. Конечно, предварительно пользователь дает разрешение на то, чтобы ресурс получил доступ к данным о его локации;
  • возможность перейти на десктопную версию, что актуально для сайтов на поддомене. Возможно, юзер захочет работать не с мобильной, а с десктопной версией – это его право, которое нельзя отбирать. Обязательно добавьте ссылку, с помощью которой пользователь сможет осуществлять переходы между мобильным и десктопным форматами.

Можно ли вместо мобильной версии использовать приложение?


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


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


В заключение


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

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

HabrAndrey

Блог компании Google Developers Разработка мобильных приложений *

Перевод

Автор оригинала:

Мэттью Стил (Matthew Steele) и Доантам Фан (Doantam Phan), команда PageSpeed Insights

Уровень подготовки веб-мастера: для всех


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


Недостаточная оптимизация может свести на нет все преимущества быстрой загрузки сайта. В среднем загрузка одной страницы на мобильных устройствах длится более 7 секунд, но правильное использование инструмента PageSpeed Insights позволяет значительно сократить это время. Предположим, вам удалось добиться загрузки сайта не за семь секунд, а всего за две. Но какой в этом смысл, если пользователю все равно придется потратить ещё 5 секунд на то, чтобы увеличить размер шрифта и прокрутить страницу до нужного места? Новые рекомендации PageSpeed Insights помогут выявить и устранить подобные проблемы.


Вот список новых рекомендаций:

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

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


  • этого сервиса.

Теги:

  • мобильный интернет
  • скорость загрузки
  • любой

Хабы:

  • Блог компании Google Developers
  • Разработка мобильных приложений

Всего голосов 33: ↑24 и ↓9 +15

Просмотры

83K

Комментарии
40

Facebook

Twitter

Medium

Андрей Липатцев
@HabrAndrey

Пользователь

Twitter

Комментарии
Комментарии 40

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.

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

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

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

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

Если вы когда-либо общались с кем-то, кто занимается веб-дизайном, вы знаете, что создание веб-сайта — кропотливая работа. И это не ограничивается дизайном — вы также должны убедиться, что кнопки нажимают на нужные ссылки, это выглядит красиво, а также убедитесь, что он работает безупречно с вашего рабочего стола, Apple или ПК, Android и даже вашего 8 iPod touch годовалого кузена. Эта гибкость на всех устройствах — вот где в игру вступает термин «мобильная оптимизация».

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

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

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

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

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

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

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

5. Все используют мобильные устройства. 1,2 миллиарда человек пользуются Интернетом со своих мобильных устройств. Кроме того, 80% всех пользователей Интернета используют смартфоны. Это большой объем мобильного трафика, который можно конвертировать в потенциальных клиентов для бизнеса.

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

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

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

1.

This entry was posted in Популярное