Wordpress оптимизация под мобильный телефон
Фактически, Google давно уже внедрил новую политику, которая будет активно сдерживать такие сайты в рейтингах поисковых систем, у которых нет мобильной версии их контента. Вы можете избежать этого на своем сайте и оптимизировать сайт WordPress для мобильных пользователей, следуя этим семи советам.
Советы по оптимизации сайта WordPress для мобильных пользователей
Совет 1: используйте отзывчивую тему WordPress
Ваш веб-сайт может отлично смотреться на настольном компьютере, но если вы не используете адаптивную тему, способную адаптировать контент к разным размерам экрана, то вам не хватает большого количества мобильных пользователей и, следовательно, бизнеса. Благодаря адаптивной теме нет необходимости запускать собственный мобильный сайт вместе с традиционным сайтом для настольных компьютеров, поскольку адаптивная тема позволяет отображать контент в привлекательной форме независимо от размера экрана.
Если вы используете пользовательскую тему, от которой не хотите отказываться, подумайте о найме дизайнера, который поможет превратить ваш шаблон статического дизайна в тему с адаптивным дизайном. Ваш сайт действительно отзывчив? Вы должны проверить свой веб-сайт с помощью этого бесплатного инструмента под названием Responsive Website Design Testing Tool.
Совет 2: включить ускоренные мобильные страницы Google (AMP) в WordPress
Поскольку скорость страницы является фактором ранжирования поиска, AMP ускоряет работу веб-страниц для мобильных устройств. Следовательно, правильнее сказать, что AMP помогает вашему сайту получить рейтинг в поисковой выдаче.
Совет 3: используйте плагины для контента, оптимизированного для мобильных устройств
Если настройка адаптивной темы WordPress вам не подходит, в репозитории плагинов WordPress есть несколько плагинов, которые могут помочь вам создать мобильную версию вашего сайта WordPress. Недостатком использования этих плагинов для создания собственного мобильного сайта является то, что эти плагины имеют очень ванильный дизайн, который нельзя адаптировать так же, как тему с адаптивным дизайном.
Плагины, разработанные для улучшения вашей мобильной версии WordPress, включают в себя:
- WP Touch
- Jetpack
- WP Mobile Edition
- WordPress Mobile Pack
- Any Mobile Theme Switcher
* Все эти плагины сможете найти в репозитории WordPress
Другой неблагоприятный побочный эффект использования плагина WordPress для мобильной версии вашего веб-сайта заключается в том, что плагин может перестать работать в любой момент во время будущего обновления WordPress, если разработчик плагина не обновит плагин для обеспечения его совместимости с новыми файлами ядра WordPress.
Совет 4: используйте оптимизированные изображения и загружайте их правильно
Если загрузка вашего веб-сайта занимает слишком много времени из-за того, что вы используете на своем сайте несколько изображений большого размера, это может расстроить пользователей мобильных устройств.
Фактически, исследование Google DoubleClick показывает, что более 53% пользователей отказов от таких веб-сайтов, которые загружаются в течение более трех (3 секунд) секунд. Очевидно, что половина вашей аудитории никогда не будет просматривать ваш сайт, если ваш сайт загружается более чем за 3 секунды.
Таким образом, это короткий период около трех секунд, который может создать или сломать первое впечатление о вашем сайте для новых пользователей. Также, оптимизация изображения становится важным шагом, который вы можете предпринять, чтобы убедиться, что ваш сайт работает быстро для активных пользователей.
WordPress сам заботится об этом начиная с версии 4.4, так как он обслуживает наименьшую возможную версию изображения, доступную на вашем сервере. Для сайтов, работающих под управлением WordPress 4.3 или ниже, это может быть огромным стимулом для обновления и значительного увеличения скорости без установки каких-либо новых плагинов. Поэтому вы достаточно озабочены тем, чтобы поддерживать свой сайт (включая WordPress, плагины, темы и т. д.) обновленным, поскольку новые обновления, скорее всего, исправляют известные ошибки и уязвимости.
Если вы уже используете последнюю версию WordPress и хотите убедиться, что изображения хорошо оптимизированы, плагин Smush Image Compression and Optimization может быть чем-то, что стоит добавить в вашу установку WordPress. Если вы предпочитаете не добавлять ничего нового, рассмотрите возможность использования сервиса, такой как TinyPNG или ILoveImg, чтобы уменьшить размеры изображений, прежде чем загружать их на свой сервер.
Вот подробное руководство о том, какие шаги вы должны предпринять для оптимизации изображений в WordPress:
Совет 5: избегайте использования всплывающих окон во весь экран
Если вам нужно использовать эти всплывающие окна для содержимого на компьютере, рассмотрите возможность добавления некоторого кода CSS или JavaScript, который будет идентифицировать тип браузера пользователя и избегать показа этих всплывающих окон тем, кто просматривает ваш сайт на мобильном устройстве.
Сокрытие этих всплывающих окон на мобильных устройствах может снизить разочарование пользователей и, тем не менее, дает вам возможность получать эти подписки по электронной почте, предлагая скидки и другие выгодные преимущества для ваших клиентов.
Совет 6: используйте тестовый инструмент Google для проверки на адаптивность
Инструмент тестирования мобильных устройств Google очень удобен, если вы хотите, чтобы ваш веб-сайт WordPress был мобильным. Или какие области требуют вашего внимания, чтобы сделать ваш сайт на WordPress мобильным.
Популярные поисковые системы расправляются с сайтами, которые не оптимизированы для мобильных устройств. Таким образом, получение его прямо из уст поисковика может помочь вам оценить области вашего сайта, которые нуждаются в улучшении.
Удобный для мобильных устройств инструмент Google выделит разделы вашего сайта, загрузка которых заняла слишком много времени. Таким образом, вы можете быстро определить проблемные области в работе вашего сайта.
Совет 7: убедитесь, что ваш веб-хостинг надежен
Все мобильные оптимизации, которые вы можете сделать для своего сайта, в конечном итоге ничего не значат, если вы выбрали ненадежный веб-хостинг. Вам следует избегать планов совместного хостинга, если вы пользуетесь выделенным веб-сайтом, поскольку кто-то другой, испытывающий колоссальный всплеск трафика, также может вывести ваш сайт из строя.
Выделенные серверы дороже, но дают вам больше контроля над скоростью и производительностью вашего сайта. Поскольку вы не делите серверное оборудование ни с кем другим в паре, вам не нужно беспокоиться о том, что чья-то сделка с Groupon станет вирусной и рухнет вместе с ней и ваш сайт. Если вам интересно узнать о различиях между общим хостингом и выделенным хостингом, узнайте у своего хостинг-провайдера, который вы используете, чтобы узнать, насколько легко будет переключиться. Также вы можете прочитать обзоры веб-хостинга, чтобы подобрать надежный веб-хостинг.
Ваш хост должен также поддерживать кеширование контента, поэтому даже если ваш сайт не работает, информация должна быть по-прежнему доступна. Кэширование страниц может значительно снизить скорость загрузки для возвращающихся мобильных пользователей, что в первую очередь помогает вам заинтересовать людей вашим сайтом.
Последние мысли
Эти семь советов и рекомендаций по оптимизации веб-сайта WordPress для пользователей мобильных устройств должны помочь вам в выборе пути. Но вы не должны останавливаться только на обновлении вашей темы или установке плагина мобилизатора. Всегда следите за эффективностью своего сайта как на мобильном, так и на настольном компьютере, чтобы точно знать, какой опыт получают посетители. И, соответственно, вы можете продолжать настраивать свой сайт для лучшего пользовательского опыта и производительности.
Знаете ли вы, что более половины интернет-трафика в США идет с мобильных телефонов? Согласно этой статистике, более половины людей, которые посещают ваш блог, делают это со своего смартфона.
Один из основных способов продвижения блога – социальные сети. Когда вы в последний раз открывали Facebook со своего рабочего стола? Ладно, может ты сделал это сегодня на работе.
Если вы хотите создать свой бизнес и зарабатывать на своем сайте, вам придется воспользоваться возможностями мобильных устройств.
Хорошо, получилось глупо. Давай продолжим. Итак, вы выбрали WordPress в качестве платформы для ведения блогов. Отлично. У вас есть потрясающая бесплатная тема WordPress, которая адаптивна, готова к работе с мобильными устройствами и даже имеет поддержку дисплея Retina.
Вот в чем загвоздка. Многие из этих так называемых «потрясающих» адаптивных тем не всегда так хороши, как рекламируются. Могут возникнуть проблемы с выравниванием и несоответствия в мобильной версии вашего сайта (которые, кстати, невозможно решить без помощи разработчика). А некоторые темы не ориентированы на мобильные устройства и просто загружаются очень медленно. Помните, что посетитель с большей вероятностью покинет ваш сайт, если он не загрузится в течение 3 секунд. В мобильной версии этот таймфрейм в 3 секунды неуклонно сокращается. На самом деле, я думаю, вы согласитесь, когда я скажу, что два ресурса, которые истощаются с каждым днем, – это время и внимание.
Итак, в духе счастливого чтения с мобильных устройств, я составил список замечательных плагинов мобильной оптимизации для WordPress. Другими словами, эти плагины позволят вам создать действительно отличную мобильную версию вашего сайта WordPress.
Прежде чем мы начнем, небольшое напоминание о том, что вам не нужно использовать все плагины из этого списка. У нас похожие плагины, и, хотя они могут предлагать немного разные функции, выберите наиболее подходящий для вас. Установка плагинов с дублирующимися функциями может вызвать проблемы с вашим сайтом, поэтому постарайтесь ограничить то, что вы устанавливаете. Это в сторону, давайте начнем!
Отказ от ответственности: TechBlogSD является партнером одного или нескольких продуктов, перечисленных ниже. Если вы перейдете по ссылке и совершите покупку, мы сможем получить комиссию.
Мобильный пакет WordPress
Этот плагин содержит в себе серьезные возможности для создания мобильного веб-сайта. Обычно плагин отображает мобильную версию существующего веб-сайта. Этот плагин делает все возможное и создает целое веб-приложение с использованием новейших технологий HTML5.
Если вам непонятно, что такое мобильный сайт и веб-приложение, это может помочь. Если вы использовали Facebook Lite в стандартном браузере Android, это мобильный сайт. Если вы используете последнюю версию Chrome на своем телефоне, вам будет доступно веб-приложение Facebook.
Веб-приложения гораздо более гибкие с точки зрения пользовательского интерфейса и пользовательского интерфейса, они имеют автономную синхронизацию, возможности сохранения и работают на всех платформах, включая iOS, Windows Phone, BlackBerry OS и Android.
Мобильный плагин WPtouch
WPtouch, получивший название «оригинальный» мобильный плагин WordPress, преобразует вашу существующую тему WordPress в красивый, гибкий мобильный шаблон, соответствующий рекомендациям Google по дизайну мобильных сайтов. Премиум-версия плагина – WPtouch Pro предлагает множество расширенных тем для блогов, предприятий и специальные темы WooCommerce.
Вы также можете купить дополнительные расширения, которые добавляют богатые возможности рекламы, режим веб-приложения (аналогично WordPress Mobile Pack), контент «только для мобильных устройств», расширенную типографику для мобильных устройств, кэширование мобильных сайтов и многое другое. Эти расширения варьируются от 10 до 20 долларов и позволяют гибко покупать их индивидуально в зависимости от ваших потребностей, что дает вам лучший контроль над своим бюджетом.
В качестве альтернативы, вместо адаптации мобильной темы вы можете вместо этого убедиться, что ваш контент совместим с проектом Google Accelerated Mobile Pages. AMP рекламируется как предлагающий мобильные устройства, увеличивающие скорость функции, такие как асинхронная загрузка ресурсов, система статической компоновки, отложенная загрузка, приоритезация ресурсов, предварительный рендеринг и многое другое.
AMP для WP
Хотя AMP для WP не является «официальным» плагином, он предлагает массу отличных функций в дополнение к основной интеграции AMP. Например, добавлены настройки для областей мобильной рекламы, пользовательские языковые переводы AMP, push-уведомления, 3 готовых макета страниц AMP, параметры структурированных данных, разрывы страниц, призывы к действию, начальные рейтинги и т.д. Плюс AMP для WP совместим с популярными такие плагины, как Yoast SEO, AddThis Social sharing, Elementor page Builder, Gutenberg, Contact Form 7, Gravity Forms и многие другие.
Адаптивное меню
Адаптивные меню – это быстрый способ добавить на ваш сайт flash-меню для мобильных устройств. Имея более 150+ опций для настройки, есть практически безграничные возможности для создания собственного меню. Используйте параметры цвета, шрифтов, фоновых изображений, анимации меню, встроенного поиска, RTL и многого другого. Как следует из названия, все меню адаптивны и отлично смотрятся на большинстве устройств.
Мобильное меню WP
В качестве альтернативы последнему упомянутому плагину вы можете рассмотреть WP Mobile Menu. Этот плагин также предлагает множество функций для создания собственных адаптивных меню сайта. Несмотря на то, что доступно меньше опций, это также может упростить вам создание и добавление мобильного меню на ваш сайт.
Оптимизатор изображения EWWW
WordPress автоматически создает оптимизированные версии ваших изображений разных размеров. Вы можете оптимизировать свои новые и существующие изображения на своем сайте WordPress с помощью популярного плагина EWWW Image Optimizer WordPress. Он поддерживает пакетное сжатие изображений с потерями или без потерь в форматах JPG или PNG.
Smush
Smush – еще один плагин для оптимизации изображений, разработанный командой WPMU, который обещает в 2 раза лучшее сжатие в своей премиальной версии. Однако бесплатная версия ограничивает максимальный размер входного изображения до 5 МБ. Кроме того, плагин предлагает дополнительные функции для отложенной загрузки, изменения размера изображений, автоматической оптимизации, массового удаления (до 50 изображений за раз) и многого другого.
a3 Lazy Load
Ленивый загрузчик
Изображения, аудиофайлы, видео и окна iframe не загружаются до тех пор, пока не станет активным окно просмотра при использовании Lazy Loader. Если в браузере отключен JavaScript, он постепенно деградирует, т.е. перестает работать, не нарушая работу сайта. Изображения будут загружены обычным способом. Другими словами, изображения загружаются только тогда, когда вы прокручиваете вниз, чтобы увидеть их, то есть вы находитесь в области просмотра изображения.
Протестируйте свой мобильный сайт
У Google есть собственный тестер сайтов, удобный для мобильных устройств, который дает вам персональные рекомендации на основе того, что отсутствует на вашем сайте.
После того, как вы оптимизировали свой сайт для просмотра на мобильных устройствах, пора протестировать его. Если результат хороший, все готово! Похлопайте себя по спине. Однако, если результаты отрицательные, просто поработайте над предлагаемыми изменениями, и все будет в порядке.
Заключение
Создать мобильный сайт очень просто. Создание конверсионного мобильного сайта – нет.
Наша цель в этой статье – показать вам, как можно оптимизировать свой мобильный веб-сайт WordPress. Все исследования, проведенные в области мобильных тенденций, единодушно пришли к выводу, что они будут только расти – экспоненциально. Google уже начал использовать удобство использования мобильных устройств в качестве важного фактора ранжирования.
Мы просмотрели список плагинов. А теперь давайте убедимся, что мы на стороне победителей!
Итак, вам надо превратить свой обычный сайт на движке WordPress в сайт с адаптивной мобильной версткой. Вот плагины, которые, будучи совершенно бесплатными, помогут вам и сделают сайт доступным для мобильных пользователей и при этом сохранят его дизайн и структуру.
1. JetPack
Начнем с самого простого и, пожалуй, самого эффективного способа сделать сайт на WordPress дружественным для мобильных устройств. Набор инструментов JetPack позволяет решить эту задачу нажатием всего 1 кнопки. Более того: он наверняка уже у вас установлен в числе других базовых плагинов. Если да – то просто кликните по ссылке "JetPack" в меню администратора сайта и перейдите на страницу модулей. Там надо активировать "Mobile Theme" — и всё готово.
2. WPtouch
Следующий по своей эффективности в списке бесплатных инструментов — плагин WPtouch. Его скачали уже более 4,3 млн раз. Он позволяет сделать красивый и быстрый мобильный сайт буквально за пару минут, при этом не написав ни строчки кода. Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.
3. WP Mobile Detector
У этого плагина есть автоматическое распознавание обычных мобильников и смартфонов. В зависимости от этого сайт загружается в совместимой версии для каждого конкретного мобильного телефона или другого гаджета (с учетом разрешения экрана, диагонали и других параметров). Всего есть 7 предустановленных вариантов мобильной темы оформления. Также этот плагин автоматически меняет размер и разрешение картинок в зависимости от пользовательского дисплея. Кроме того, здесь есть свои виджеты и сбор статистики.
- Автоматическое определение устройства на основе базы из более чем 5 тыс различных мобильников и смартфонов.
- Умение отличать стандартные "звонилки" и продвинутые мобильные гаджеты.
- Сбор статистики по мобильным пользователям, включая число уникальных посещений, поисковый трафик и т.д.
4. WordPress Mobile Pack
Данный плагин поддерживает маппинг доменов и поисковые агенты для определения различных популярных мобильных устройств и показа контента в том разрешении и качестве, которое необходимо конкретному мобильнику. Кроме того, есть настраиваемые цветовые схемы для единой темы оформления.
Также плагин включает :
- переключатель между мобильной и классической настольной темой;
- набор поддерживаемых и распознаваемых устройств, включая темы для Nokia и браузеров на WebKit;
- настройку цветовой палитры по темам с поддержкой твиков в CSS;
- автоматическую адаптацию картинок и разбиение постов и страниц;
- мобильную панель администратора;
- виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
- мобильную аналитику;
- виджет для добавления бар-кодов на сайт, чтобы быстро добавлять сайт в закладки на мобильном устройстве при просмотре сайта на большом экране настольного ПК.
5. WP Mobile Edition
6. Wapple Architect Mobile Plugin
Написан этот плагин на языке разметки WAPL, который был специально разработан для настройки, рендеринга и доставки веб-контента на различных устройствах и платформах. Использует этот плагин собственный API для каждого конкретного пользовательского устройства, что лучше, чем метод сниффинга. Не затрагивает структуру адресов настольного сайта. Довольно простое решение, которое так же просто работает.
7. MobilePress
Довольно популярный и простой плагин, который поставляется с 2 темами и помогает дальнейшей разработке тем мобильными разработчиками.
8. Duda Mobile Website Builder
Плагин-конструктор Duda Mobile помог создать мобильные версии сайтов в том числе для таких проектов и изданий как Forbes, Huffington Post, NY Times. Он очень простой и быстро превращает ваш обычный сайт в мобильный. Работает со всеми темами оформления для движка WordPress и автоматически синхронизируется с вашим основным сайтом.
Автор Александр Свищ Дата 24.09.2019 (Обновлено: 02.10.2021)
В этой статье мы разберемся, как автоматически создать мобильную версию WordPress сайта с помощью двух плагинов. С каждым днем все больше людей используют смартфоны и планшеты для поиска информации в интернете. По оценкам экспертов, в ближайшее время мобильные устройства будут пользоваться большей популярностью, чем настольные компьютеры. Соответственно, чтобы охватить более широкий рынок потребителей, мы должны провести оптимизацию сайта ВордПресс для мобильных устройств. Хотите создать собственный сайт, рекомендую воспользоваться услугами хостинга TimeWeb:
Как сделать мобильную версию сайта WordPress
Зачем вообще делать мобильную версию сайта? Почти каждый житель планеты носит с собой мобильное устройство определенной марки. Даже дети играют в игры и смотрят YouTubee на планшетах и смартфонах. Поскольку у большинства людей есть мобильный телефон, с большой долей вероятности они читают на нем чей-то блог или сайт. Скорее всего ваш сайт также просматривают со смартфонов, и если не проведена мобильная оптимизация, пользователь видит некорректно работающий ресурс.
Вы должны использовать каждый источник трафика, чтобы привлечь как можно больше пользователей на сайт. В этом плане важно быть в курсе мировых тенденций развития интернета. Учитывая то, что многие люди используют мобильные устройства, владельцам сайтов важно не упустить новые возможности для привлечения дополнительного трафика. Провести мобильную оптимизацию WordPress сайта – лучший способ подстроиться под новые тенденции сети. Если сайт не оптимизирован для просмотра на мобильном устройстве, пользователям будет сложно прочитать контент, и просмотреть изображения и видео ролики. Сайт должен быть должным образом оптимизирован специально для использования на экранах такого размера, как на мобильных устройствах. Размер экрана и разрешение должны быть правильными. Если нет, ваши пользователи уйдут на другой сайт. Со временем это может стоить вам потенциальных клиентов, что приведет к падению посещаемости.
Главное, чтобы сайт был посещаемым. Но также важно, чтобы посетители как можно дольше оставались на сайте, это напрямую влияет на позиции поисковой выдачи. Наличие мобильной версии сайта увеличит вовлеченность посетителей и увеличит ваши превратить их в постоянных клиентов.
Создать мобильную версию WordPress сайта – технически не сложная задача. Ознакомьтесь с приведенными ниже советами, чтобы ваш сайт корректно отображался на мобильных устройствах.
Оптимизация сайта ВордПресс для мобильных устройств
Оптимальный вариант – установка темы, в которую встроена поддержка мобильных устройств. Таким образом, вам не нужно оптимизировать сайт самостоятельно или нанимать кого-то, кто сделает это за вас. Например, Twenty Fourteen – тема, установленная в WordPress по умолчанию, идеально подходит для многих сайтов. Тема имеет адаптивный дизайн, поэтому страницы сайта будут автоматически подстраиваться под устройства, с которых они просматриваются.
Соответственно, если вы создаете собственный сайт, изначально подбирайте тему, которая адаптирована для мобильных устройств. Если у вас установлена тема, не адаптированная под мобильный устройства, следуйте дальнейшим рекомендациям.
Мобильные плагины для WordPress
Плагин WPSmart Mobile (мобильная тема)
Обновление 21.05.2020. До марта 2020 года я использовал многофункциональный плагин JetPack. Однако данный плагин прекратил поддержку мобильной темы. Но я быстро нашел более качественную замену в виде плагина WPSmart Mobile. Не обращайте внимания на то, что плагин не обновлялся долгий промежуток времени. На данный момент это лучший плагин адаптации сайта к мобильным устройствам. Лично мною было протестировано около 10 плагинов, только WPSmart Mobile смог создать качественную мобильную версию моего сайта.
Чтобы создать мобильную версию сайта, нужно просто установить и активировать плагин «WPSmart Mobile». После активации плагина автоматически создаться мобильная версия сайта, которая будет показываться на всех мобильных устройствах. На компьютерах и ноутбуках будет показываться полная версия сайта. На смартфонах, планшетах и мобильных устройствах будет отображаться мобильная версия, адаптированная для экранов с маленькими размерами.
После активации рекомендую в настройках включить отображение меню. Для этого перейдите в «WPSmart» в админке WordPress, выберите «Menu», поставьте галочку напротив надписи «Enable drop-down pages/links menu.», добавьте нужные вам статьи и нажмите на кнопку «Save All Changes». После проделанных манипуляций в мобильных устройствах буде отображаться аккуратная иконка с меню.
Адаптивные таблицы WordPress
Нужно решать эту проблему, ведь в случае бездействия начнется падение мобильного трафика. К тому же, Google уже давно обновил алгоритмы ранжирования сайтов, в которых важная роль отведена именно категории «Удобство для мобильных». То есть, если у сайта нет мобильной версии, он будет терять позиции в поисковой выдаче.
Google Webmaster обнаружил три ошибки: контент шире экрана, интерактивные элементы расположены слишком близко и слишком мелкий шрифт. Давайте разбираться, как устранить эти проблемы.
Ошибка: Контент шире экрана. Баннеры в шапке сайта, видео ролики с Ютуба и блоки контекстной рекламы выходят за рамки экрана: Ошибка: Интерактивные элементы расположены слишком близко. В подвале сайта блок контекстной рекламы расположен сверху навигационных ссылок, тем самым закрывая их: Ошибка: Слишком мелкий шрифт. Эта ошибка – следствие двух предыдущих. Поскольку контент шире экрана, пользователь должен увеличить масштаб, из-за чего шрифт текста становится слишком мелким. Устранение первых двух ошибок автоматически скроет данную ошибку.
Добавить комментарий Отменить ответ
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Читайте также: