Оптимизировать сайт под мобильные устройства: Мобильное SEO. Подробное руководство по оптимизации сайта под мобильные устройства самому

Оптимизация сайта для мобильных устройств — SEO на vc.ru

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

Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.

1. Мобильные сайты

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

• Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel=»canonical», указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel=»alternate», который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel=»alternate» можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

• Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

2. Адаптивная версия

URL и HTML-код стр

Оптимизация шаблона сайта под планшет и телефон (мобильные устройства)

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

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

CSS-стили под разное разрешение экрана и устройство

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

Перед тем, как приступить к написанию стилей, убедитесь, что между тегами <head/>, вашего шаблона, прописана meta-строчка:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

Пример:

.content{background-color: #FBFBFB; position: relative;margin: 0;padding: 0;border: 0;float: left;overflow: hidden; max-width: 768px; width: 100%;}
.sidebar1{background-color: #FBFBFB; position: relative;margin-right: 0;padding: 0;border: 0;float: left;overflow: hidden; width: 100%; max-width: 268px;}
blockquote{margin:10px 10px 10px 35px;}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}
  

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

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

Посмотреть, как выглядит ваш сайт на разных устройствах, можно в браузере Chrome, или Яндекс Браузере, с помощью расширения «Window Resizer». А также можно использовать стандартную «фишку» —

Пример в Яндекс Браузере (при нажатии на F12):

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

Читайте также как пройти проверку если Google пишет «Страница не оптимизирована для мобильных устройств».

Вот те видеоролики, о которых я упомянул вначале заметки:

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится

Мобильная оптимизация сайта: зачем нужна

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

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

Что нужно знать об алгоритме Mobile Friendly

У него есть свои характерные особенности, а именно:

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

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

Алгоритм Mobile Friendly

Как происходит оценка сайтов

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

• Ширина страниц. Неадаптированные страницы просто не помещаются на одном экране мобильного устройства, что усложняет навигацию, так как пользователю приходится перемещать видимую область влево или вправо.
• Размер графических элементов и шрифта. Если страница для персонального компьютера будет просто масштабироваться под экран смартфона, то пользователь фактически ничего не сможет разглядеть, так как шрифты будут нечитаемыми. Мобильная оптимизация сайта предполагает вывод основной информации крупным планом, при этом по возможности нужно избавиться от всего лишнего.
• Размер функциональных элементов. На дружественном к мобильным пользователям сайте не нужно растягивать или сжимать страницу, чтобы воспользоваться функциональными или навигационными кнопками.
• Плагины и технологии. На адаптированных страницах не должно быть плагинов, которые не работают на базе Android или iOS.

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

Как проверить свой веб-ресурс

В процессе мобильной оптимизации сайтов сложно ориентироваться на собственные представления об удобном интерфейсе. Для этого были разработаны инструменты, которые помогут понять, как ресурс выглядит в мобильном браузере и как его оценивает алгоритм Mobile Friendly. В панели веб-мастера Google доступен сервис Mobile Friendly Test — это наиболее надежный инструмент для проверки сайта, так как он разработан самой поисковой системой. В ходе проверки сервис продемонстрирует, как алгоритм «видит» страницы сайта, а также сформирует свою оценку и даст рекомендации по оптимизации.

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

Как адаптировать сайт под требования Google Mobile Friendly

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

Разделение URL-адресов

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

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

Динамическая адаптация

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

Функционирует технология по следующему принципу:

• при обращении к сайту браузер отправляет запрос на сервер User-agent, что позволяет получить данные о типе устройства;
• в ответ сервер предоставляет соответствующий формат страницы, который будет правильно отображаться в браузере.

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

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

Адаптивный дизайн

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

Внедрение технологии реализуется следующим образом:

• в метаданные сайта включается тег «meta name=«viewport»», который «объясняет» браузеру, что выполнен переход на ресурс с гибкой архитектурой;
• для адаптации контента обычно используются стандартные инструменты популярных CMS;
• в процессе оптимизации нужно ориентироваться на официальную техническую документацию системы управления контентом.

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

SEO для мобильной версии сайта

Мобильная версия и SEO-оптимизация

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

Сначала необходимо предоставить поисковому алгоритму полный объем информации:

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

Проверка переадресации

В случае если перелинковка между основным ресурсом и его мобильной версией выполнена неправильно, то пользователи с большой долей вероятности часто будут видеть не контент, а сообщение «Ошибка 404». Такие сценарии приводят к значительному понижению позиций как в мобильной, так и обычной поисковой выдаче. Некоторые ошибки перелинковки являются причиной того, что пользователь направляется не на ту страницу, на которую он бы хотел попасть. Подобный сценарий резко увеличивает количество отказов потенциальных клиентов, что тоже снижает позиции сайта в поисковом рейтинге. Обнаружить и ликвидировать ошибки переадресации можно с помощью инструмента Search Console, который доступен в панели веб-мастера в системе Google.

Внимание к мультимедийному контенту

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

Отказ от всплывающих окон

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

Увеличение скорости загрузки

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

Теги

7 способов оптимизации сайта под мобильные браузеры.

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

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

1. Тэг meta viewport — ширина страницы в мобильном браузере

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

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

1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

<meta name=»viewport» content=»width=device-width; initial-scale=1.0; maximum-scale=1.0;»>

Вы также можете добавить его внутрь ваших каскадных таблиц стилей:

1
2
3

 @-viewport { 
 width: device-width; 
 }

@-viewport { width: device-width; }

Тэг meta viewport – это незаменимый тэг (вместе с Media Queries), если вы собираетесь разработать адаптивный веб-сайт. Однако технически вы можете использовать тэг и в неадаптивных дизайнах.

2. Media Queries

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

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

Вы можете встроить Media Queries либо напрямую в код страницы при помощи ссылки:

1

<link href="style.css" rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" />

<link href=»style.css» rel=»stylesheet» media=»screen and (orientation: portrait) and (min-width: 960px), projection» />

Либо использовать нужный код прямо в каскадных таблицах стилей (этот метод наиболее часто используется разработчиками).

1
2
3

 @media screen and (max-width: 960px) { 
 /** Style Rules here **/ 
 }

@media screen and (max-width: 960px) { /** Style Rules here **/ }

3. Modernizr

Modernizr – это javascript-инструмент для определения способностей браузера/устройства. Браузеры отличаются друг от друга, и предлагает не идентичную поддержку свойств. При разработке веб-сайта для мобильных устройства, вы, возможно, захотите воспользоваться современными и удобными свойствами CSS3 и HTML5, которые, к сожалению, поддерживаются далеко не всеми браузерами (сегодня еще не все используют последние версии браузеров).

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

4. Сенсорное управление на сайте.

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

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

5. iOS иконки

Первое, что вы видите при разблокировке вашего iPhone (или iPad), – это иконки приложений. Кроме иконок приложений, в iOS также можно видеть иконки вебсайтов, которые были добавлены на экран “Домой”.

Чтобы создать такую иконку и для вашего веб-сайта, просто добавьте следующую ссылку в раздел head в коде вашего сайта:

1
2
3

 
<link href="touch-icon-iphone.png" rel="apple-touch-icon" /> 
 
<link href="touch-icon-ipad.png" rel="apple-touch-icon" /> 
 
<link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" />

<link href=»touch-icon-iphone.png» rel=»apple-touch-icon» /> <link href=»touch-icon-ipad.png» rel=»apple-touch-icon» /> <link href=»touch-icon-iphone-retina.png» rel=»apple-touch-icon» />

С другой стороны, вы можете просто удалить эти ссылки, только при этом убедитесь, что иконки сохранены в корневом каталоге и имеют приставку apple-touch-icon-* в названии.

6. Экран заставки

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

Чтобы добавить такую заставку на ваш сайт, просто вставьте следующие строки в head.

1

 
<link href="splash-screen.png" rel="apple-touch-startup-image" />

<link href=»splash-screen.png» rel=»apple-touch-startup-image» />

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

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

7. Windows 8 иконки

Windows 8 и RT также предлагают возможность добавлять иконки в виде блоков на экране «Домой». В Windows 8 эти блоки называются Pin Icon.

В отличие от iOS, где используется элемента link, Windows 8 использует мета-тэг. Давайте посмотрим на пример.

1

<meta name="msapplication-TileColor" content="#000" /><meta name="msapplication-TileImage" content="icon.png" />

<meta name=»msapplication-TileColor» content=»#000″ /><meta name=»msapplication-TileImage» content=»icon.png» />

Первый мета-тэг определяет цвет ячейки, второй отвечает за изображение иконки. Существует сайт под названием Build My Pinned Site, который позволяет вам без труда генерировать подобные мета-тэги.

В завершение

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

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

Привет, друзья!

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

Итак, поехали!

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

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

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

Советы по оптимизации сайта WordPress для мобильных пользователей

Совет 1: используйте отзывчивую тему WordPress

Используйте отзывчивую тему WordPress

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

Большинство современных тем WordPress, доступных в каталоге тем на официальном сайте WordPress, поддерживают адаптивный дизайн. Вы также можете подумать о покупке платной темы для своего сайта, есть несколько платных тем WordPress, которые я обычно рекомендую — Elegant Themes, Themify Themes и потрясающие темы от MyThemeShop.

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

Совет 2: включить ускоренные мобильные страницы Google (AMP) в WordPress

Скорость страниц (веб-страниц) уже давно стала фактором поискового алгоритма Google. Кроме того, Google всегда выступает за безупречный пользовательский опыт, будь то для пользователей компьютеров или мобильных устройств. И по той же причине они представили «Ускоренные мобильные страницы (AMP)», которые направлены на более быструю загрузку веб-страниц на мобильных устройствах.

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

Вы можете легко настроить AMP на своем сайте WordPress с помощью ПРАВИЛЬНОГО плагина(ов) WordPress. Для получения более подробной информации о AMP, вы должны прочитать следующее руководство …

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

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

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

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

• WP Touch
• Jetpack
• WP Mobile Edition
• WordPress Mobile Pack
• Any Mobile Theme Switcher

* Все эти плагины сможете найти в репозитории WordPress

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

WPTouch — безусловно, самый активный и популярный плагин для этой цели, и он был обновлен всего пару недель назад. Однако Any Mobile Theme Switcher и WP Mobile Edition не получали обновлений более двух лет. Это касается случаев, когда вы пытаетесь оставаться в курсе самых последних тенденций дизайна.

Совет 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 для пользователей мобильных устройств должны помочь вам в выборе пути. Но вы не должны останавливаться только на обновлении вашей темы или установке плагина мобилизатора. Всегда следите за эффективностью своего сайта как на мобильном, так и на настольном компьютере, чтобы точно знать, какой опыт получают посетители. И, соответственно, вы можете продолжать настраивать свой сайт для лучшего пользовательского опыта и производительности.

На этом все и до скорых встреч!

Навигация по записям

Юрич:

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

Не забудьте подписаться на обновления:

Похожие записи

Оставить свой комментарий

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

1. Большие кнопки;
2. Уменьшенные и сжатые изображения;
3. Удобные поля в формах автозаполнения;
4. Автоматическое определение настроек местоположения;
5. Несколько экранов вместо прокрутки.

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

• Структура сайта, оптимизированого под мобильные устройства, порой в корне отличается от его десктопной версии и часто имеет отдельный URL-адрес. Яркий пример — всем известный сайт «Вконтакте». Адрес сайта при работе с компьютера выглядит как «vk.com», а если зайти с мобильного телефона, URL- адрес меняется на короткий «m.vk.com».
• Изображения оптимизируются: уменьшаются и сжимаются, это позволяет увеличить скорость загрузки страницы;
• Кнопки имеют большой размер — для удобного тапанья пальцем, а прокрутка минимизирована.

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

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

Адаптивный (отзывчивый) дизайн — оптимизация сайта для его просмотра на мобильных устройствах

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

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

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

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

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

Актуальность мобильной оптимизации сайта и стоящие задачи

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

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

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

Кстати, 17 процентов посетителей, заходящих на KtoNaNovenkogo.ru с мобильных устройств, подтверждают и данные Яндекс Метрики, и там видно, что показатель отказов у таких пользователей значительно выше, чем у тех, кто заходил на сайт с компьютера или ноутбука (т.е. проблема на лицо):

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

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

А вот чтобы узнать детали я советую использовать другой сервис от того же Гугла под названием PageSpeed Insights. Тут все будет более-менее детализировано и хотя бы понятно «в какую сторону копать»:

У них еще появился один похожий сервис Test my Site, но он только дается оценку, а вот рекомендаций по улучшению, к сожалению, нет. Зато можно подписаться на изменения:

В нашем случае обращать внимание стоит на оценку «Удобство для пользователей» на вкладке «Для мобильных». Понятно, что скорость загрузки тоже важна, но лично у меня все уперлось в настройки сервера, которые я сам поменять не в силах (ибо нуб в администрации серверов), а договориться с техподдержкой Инфобокса все никак руки не доходят (опять же, очевидно, нужен пинок под зад, чтобы начать шевелиться). Но это уже, наверное, тема для отдельной статьи.

Стоящая же передо мной задача к вечеру вчерашнего дня была решена и KtoNaNovenkogo.ru получил 95 и 100 возможных баллов за удобство для мобильных пользователей. Соответственно, и тот сервис Гугла, ссылка на который была приведена в письме, говорит, что теперича все в порядке (спасибо зарядке):

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

1. Очевидно, что при уменьшении ширины экрана, с которого просматривается сайт, становится актуальным на определенном рубеже переходить от двухколоночной верстке к одноколоночной. В моем случае это эквивалентно перемещению правого блока с меню (сайдбара) вниз (под основную часть страницы).
2. При еще меньшей ширине экрана становится очевидным, что и ширина области с основным контентом должна будет уменьшаться для того, чтобы текст и картинки можно было просматривать без использования чудовищно неудобной горизонтальной прокрутки.
3. В области контента у меня также размещаются объявления от Гугл Адсенса, а значит нужно будет менять код их вставки, ибо при использовании адаптивного дизайна (а именно его мы и пытаемся реализовать) есть только один допустимый вариант рекламных блоков — адаптивный (он появился некоторое время назад, но у меня изначально возникли проблемы с его использованием, которые пришлось решать, но об этом чуть ниже).

   

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

Выбор метода создания адаптивного дизайна

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

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

1. Можно создать копии основного файла стилей (у меня WordPress, поэтому этот файл называется style.css и живет он в папке с используемой темой оформления — «/wp-content/themes/папка») и дать им другие имена. Если у вас тоже WordPress и вы хотите понять, как работают в нем темы, то советую ознакомиться с приведенной статьей. Именно этот способ я опробовал первым и создал копии с названием small-device.css и small-device-min.css.

   Что именно я в них менял по отношению к основному файлу style.css мы еще поговорим, а вот для их подключения, в области между тегами Head (в WordPress эта область обычно формируется файлом-шаблоном header.php) пришлось добавить три строчки кода после подключения основного файла CSS стилей :

   <link rel="stylesheet" href="/wp-content/themes/Organic/style.css" type="text/css" media="screen" />
   <link rel="stylesheet" type="text/css" media="only screen and (max-width: 1025px), only screen and (max-device-width: 1025px)" href="/wp-content/themes/Organic/small-device.css" />
   <link rel="stylesheet" type="text/css" media="only screen and (max-width: 760px), only screen and (max-device-width: 760px)" href="/wp-content/themes/Organic/small-device-min.css" />
   <meta name="viewport" content="width=device-width" />

   Цифрами в пикселах обозначены точки слома. Если вы это окно (с открытым в нем сайтом https://ktonanovenkogo.ru) начнете уменьшать по ширине (в верхнем правом углу браузера есть кнопочка с двумя наложенными друг на друга квадратами — сказал «капитан очевидность»), то именно при прохождении ширины 1025px и 760px будут происходить изменения в дизайне.

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

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

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

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

   @media screen and (max-width: 1025px) {
   
   CSS свойства, которые поменяют дизайн при ширине экрана меньше 1025px
   
   }
   
   @media screen and (max-width: 760px) {
   
   CSS свойства, которые поменяют дизайн при ширине экрана меньше 760px
   
   }
   

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

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

   <link rel="stylesheet" href="/wp-content/themes/Organic/style.css" type="text/css" media="screen" />
   <link rel="stylesheet" type="text/css" media="only screen and (max-width: 1025px), only screen and (max-device-width: 1025px)" href="/wp-content/themes/Organic/style.css" />
   <link rel="stylesheet" type="text/css" media="only screen and (max-width: 760px), only screen and (max-device-width: 760px)" href="/wp-content/themes/Organic/style.css" />
   <meta name=viewport content="width=device-width, height=device-height, initial-scale=1"> 

   Именно в таком виде все это и работает на данном блоге в данный момент времени.

В общем выбрал я второй вариант, но не сразу, поэтому пришлось с помощью плагина Compare в Notepad++ сравнивать содержимое файлов small-device-min.css и small-device.css с оригинальным style.css, чтобы выявить те строки, куда я вносил изменения. Потом уже эти стоки я вставил внутри фигурных скобок показанных выше директив @media (в конце основного файла стилей style.css). Но это уже не суть важно.

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

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

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

Что увидят пользователи с экранами по ширине меньшими первой точки слома

Смотрите. Для реализации многоколоночного дизайна в современной верстке используются плавающие блоки, которые задаются CSS правилом Float. Например, сайдбар у меня плавает правее основной области благодаря:

#sidebar{float:right;}

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

Соответственно, для начала нужно было отучить шаблон верстаться в две колонки, что потребовало прописать внутри директивы @media (с первой и второй точкой слома):

#sidebar{float:none;}

Если не сработает, то повысьте приоритет этого CSS свойства с помощью добавления !important:

#sidebar{float:none !important;}

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

@media screen and (max-width: 1025px) {

#page{min-width:750px;background:#e5eff4 url(images/containerbg.png) repeat-x;background-position:0 145px;}
#header-in{width:750px;margin:0 auto;}
#content-wrap{width:760px;margin:0 auto;padding-bottom:20px;min-height:500px;height:100%;overflow:hidden;}
#content{float:none;width:740px;overflow:hidden;}
#sidebar{float:none;width:370px;background-color:#ffffff;;padding:0;overflow:hidden;height:100%;margin: 30px 0 0 200px;}
#footer-in{width:740px;margin:0 auto;height:100%;}
.h_left{float:left;width:330px;}
.h_right{float:left;margin:21px 0 10px 70px;}
.p_left{float:left; margin:12px 0 0 -30px;}#navi-in{width:740px;margin:0 auto;}
#navi-in{width:740px;margin:0 auto;}
#nav .page_item a{color:#fff;display:block;text-decoration:none;padding:7px 5px 6px 5px;font:bold 13px "Trebuchet MS", Verdana, Arial;text-transform:uppercase;border-right: 1px solid #01638D;}
}

Кроме «опускания» сайдбара я ограничил ширину шаблона новым значением с помощью min-width:750px; и width:750px. CSS свойство Width задает ширину того элемента, для которого оно прописывается. Также я подкорректировал размер и расположение элементов в шапке сайта, чтобы они более-менее сносно смотрелись после прохождения первой точки слома в 760px.

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

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

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

Эта задача с успехом решается заменой в нужных местах CSS свойства width:***px; на width:auto. Некоторые области из шапки и сайдбара я вообще спрятал с помощью display:none, ибо пока не было быстрого решения для их адаптации. Код при этом выглядит ужасно (копировал уже существующие строки и вносил изменения без удаления из них лишнего, т.е. того, что не требует изменения), т.е. просто он еще на оптимизирован — лишь бы работало, а потом лишнее удалю:

@media screen and (max-width: 760px) {

.rasporverh {margin:0 0 0 95px;display:none;}
#page{width:auto;min-width:150px;}
#header{overflow:hidden;height:146px;margin-bottom:10px;background:url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -61px;clear:both ;}
#header-in{width:auto;margin:0 auto ;}
#content-wrap{width:auto;margin:0 auto;padding-bottom:20px;min-height:500px;height:100%;overflow:hidden;}
#content{float:none;width:auto;overflow:hidden;}
#sidebar{float:none;width:347;background-color:#ffffff;;padding:0;overflow:hidden;height:100%;margin: 30px auto;width: auto;}
#sidebar_l{float:none;width:auto;padding-left:10px;margin-top:10px;}
#sidebar_r{float:none;width:auto;padding-right:10px;margin-top:10px;}
#footer-in{width:auto;margin:0 auto;height:100%;}
.h_left{float:none;max-width:330px;width:auto;}
.h_right{float:left;margin:21px 0 10px 70px;display:none;}
.p_left{float:left; margin:12px 0 0 -30px;display:none;}
#navi-in{width:auto;margin:0 auto;}
#nav{padding:0px;height:31px;list-style:none;margin-left:2px;float:none;}
#nav .page_item a{color:#fff;display:block;text-decoration:none;padding:7px 5px 6px 5px;font:bold 13px "Trebuchet MS", Verdana, Arial;text-transform:uppercase;border-right: 1px solid #01638D;}
.sidebar_top{background:url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat left top;background-position:-10px -84px;height:120px;padding:10px 10px;margin-bottom:0px;display:none;}
.sidebar_bottom{background:url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat left top;height:11px;clear:both;background-position:-10px -351px;display:none;}
.tabermain{width: auto;margin:0 auto;}
#sidebar ul li ul li a{color:#00648E;text-decoration:none;border-bottom:none;font: 17px "Courier new", "Helvetica", sans-serif;}
.reklama123{width:auto;margin:15px 0 10px 5px;}
.reklama1234{width:auto;margin-top:15px;}

img {display: block;max-width: 100%;height: auto;}
iframe {max-width: 100%;height: auto ;}

@media \0screen {
 img {
 	width: auto; /* для ie 8 */
 }
}
}

Обратите внимание на последние строчки:

img {display: block;max-width: 100%;height: auto;}
iframe {max-width: 100%;height: auto ;}

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

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

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

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

Вот, будем считать, что вы на локальном сервере поколдуете, поэксперементируете и получите в результате удобоваримый вариант адаптации вашего сайта под мобильные устройства посетителей. Останется только это дело перенести на работающий сайт. Естетственно, что копировать все файлы (а уж тем более базу данных) вы не будете, ибо достаточно будет добавить (скопировать) несколько строчек в файл header.php и чуть больше строчек перенести в основной файл стилей (те, что внутри директив @media).

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

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

Использование на сайте кода адаптивных блоков от Google AdSense при адаптивном (отзывчивом) дизайне

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

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

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

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

Затем жмете на кнопку «Сохранить и получить код». Можно будет попробовать его напрямую вставить на место старого когда и посмотреть на результат.

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

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

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

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

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

P.S. Тут небольшой отчет по тому, что доделал уже после написания статьи.

1. Убрал в версии сайта для экранов уже 760 px пару последних пунктов из верхнего меню, чтобы оно в три строчки не громоздилось. Для этого в файле header.php я добавил в эти пункты (они у меня не функцией выводятся, а обычным Html списком оформленным вручную) класс skrit и прописал для него в блоке с @media screen and (max-width: 760px) правило:

   .skrit{display:none;}

2. Форма для добавления комментария не отзывалась на изменение ширины области просмотра, поэтому заменил для него width заданное в пикселях на значение заданное в процентах (90% поставил).
3. Изначально в версии для мобильных телефонов я убрал строку поиска вообще с помощью display:none, но подумав все же решил ее отображать под логотипом и описанием. Пришлось в блоке с @media screen and (max-width: 760px) убрать display:none для контейнера, в котором живет строка поиска и дописать несколько строк кода для его позиционирования и адаптации по ширине (width:auto;max-width:340px;).
4. Выровнял таки в мобильной версии (после последней точки слома) пиктограммы для счетчиков посещения (расположены в самом низу). Для этого добавил в @media screen and (max-width: 760px):

   .wdf img {display:inline-block !important;}

5. Изначально, чтобы не возиться, я скрыл верхнюю часть сайдбара (с формой подписки и кнопками социальных сетей) для экранов меньше 760px с помощью display:none. Сейчас решил все это дело адаптировать. Пришлось для этого добавить несколько строчек кода в @media screen and (max-width: 760px) убрать display:none:

   .sidebar_top{background:none;width: auto;}
   .subscribetextbg {width: auto !important; }
   .subscribe_textieldpost {display: block;width: auto !important;max-width:330px;margin: 20px auto;padding:5px 25px 5px 25px;font: 15px "Trebuchet MS", "Verdana", "Arial"; }
   .naity {display: block;width: auto !important;max-width:330px;margin: 15px auto;padding:5px 20px 5px 20px; font: 15px "Trebuchet MS", "Verdana", "Arial";}
   img.ghdjk {float:none;margin: 10px auto;}
   #soci {display: block;width: auto !important;max-width:330px;margin: 15px auto;}

   Получилось примерно так:

   » src=»https://ktonanovenkogo.ru/image/podpiska-adaptivnaia.png» />

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

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

Об этом руководстве

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему вам стоит пользоваться мобильным телефоном прямо сейчас

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

Увеличение посещаемости вашего сайта

Около 60% поискового трафика приходится на мобильные устройства

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

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

35% Взаимодействие в социальных сетях

35% Таргетинг и персонализация

30% Контент-маркетинг

30% Оптимизация содержания

90% ВЕБ-САЙТОВ НЕ ГОТОВЫ К ОПТИМИЗАЦИИ!

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

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

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

Лучший пользовательский опыт

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

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

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

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

40% потребителей перейдут на сайт конкурента из-за плохого мобильного опыта

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

Повышение конверсии

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

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

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

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

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

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

Следует помнить о нескольких вещах: во-первых, оптимизировать визуальный контент (уменьшить размер файлов, не влияя на качество изображения) и сохранить общий размер вашего сайта менее 1 МБ

Сниженный показатель отказов

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

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

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

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

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

90% мобильного поиска приводят к действию, более 50% приводят к покупке

Повышение лояльности клиентов

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

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

Выбор подхода к созданию мобильного сайта

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

Создать сайт для мобильных устройств

ТОП 5 СМАРТФОНОВ 2019

Samsung 21.4%

Яблоко 18,7%

Huawei 8.1%

Lenovo 5,1%

Xiaomi 4.6%

Все остальные поставщики телефонов покрывают 42,1% рынка мобильных телефонов

Создание отдельного мобильного веб-сайта означает размещение мобильной версии вашего веб-сайта на отдельных URL-адресах, которые могут быть мобильным субдоменом (m.example.com), вложенной папкой на вашем веб-сайте (example.com/mobile) или полностью отдельным мобильный домен (пример.моби).

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

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

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

4-дюймовые телефоны являются самыми популярными в большинстве стран, включая Великобританию, Францию, Германию, Италию, Австралию, Японию и США.Это вызвано огромной популярностью iPhone 5 и 5S

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

С точки зрения разрешения экрана наиболее популярными являются 640 × 1136, 750 × 1334, 1080 × 1920 и 720 × 1280

20,2% жителей Северной Америки регулярно пользуются мобильными платежами — этот процент составляет 55 миллионов человек, число, по прогнозам компании, вырастет на 39.2% в течение следующего года.

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

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

Адаптивный дизайн сайта

На мобильные устройства приходится 50% всех расходов на цифровую рекламу в 2019 году

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

3 млрд. $ 2010

$ 6 2011

$ 10 2012

$ 14 2013

$ 19 2014

$ 25 2015

$ 31 2016

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

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

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

Как вы сделаете свой сайт мобильным, зависит от того, используете ли вы одну из множества систем управления контентом (CMS) для управления цифровым контентом или используете конструктор сайтов.

CMS

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

Самыми популярными платформами CMS являются WordPress, Joomla и Drupal, и это лишь некоторые из них. Они предлагают ряд мобильных плагинов, тем и шаблонов, которые помогут вам превратить ваш сайт в адаптивный, который будет адаптироваться к любому возможному мобильному устройству.

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

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

WordPress

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

• Проверьте свою панель администрирования, где вы можете увидеть номер версии в верхней части панели инструментов или в нижнем колонтитуле для последней и более старой версии установленных WordPress, соответственно.
• Кроме того, вы можете перейти на веб-сайт с установленным WordPress и использовать функцию «просмотра исходного кода» своего веб-браузера для поиска на странице метатега генератора, который предоставит вам номер версии. Номер версии установки WordPress также находится в файле /wp-includes/version.php.

Joomla

Если вы используете Joomla в качестве CMS, вы можете проверить, какую версию установки вы используете, проверив свой интерфейс администрирования, проверив страницу информации о системе в интерфейсе администрирования или проверив файл / версию.php, который содержит номер версии и обычно находится в / library / joomla / files.

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

Drupal

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

Тестирование темы

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

Однако вы также можете воспользоваться инструментом PageSpeed ​​Insights, который покажет вам, будет ли выбранная вами тема работать на мобильных устройствах. Google Chrome предлагает еще одну альтернативу для проверки поведения вашей темы. Для этого используется инструмент «эмуляция мобильного устройства» в Инструментах разработчика Chrome. Вы можете найти инструмент в меню Chrome: Вид> Разработчик> Инструменты разработчика.

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

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

Конструктор сайтов

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

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

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

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

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

Wix

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

Weebly

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

Squarespace

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

Заключение

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

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

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

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

1. Определите страницы с чрезмерным RTR.

Минимизация RTR начинается с осознания. На многих страницах будет более 100 RTR на страницу, тогда как на самом деле вам следует стремиться к меньшему, чем 50. Часто разработчики или специалисты по SEO, просматривающие все запросы на странице, обнаруживают, что некоторые из запрошенных элементов отсутствуют (404) и никто не заметил. Несмотря на то, что они отсутствуют, браузеру все равно требуется время, чтобы запросить и вернуться с пустыми руками, поэтому эти страницы следует немедленно удалить или исправить.

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

2. По возможности объединяйте файлы.

Следующим шагом будет объединение файлов там, где это возможно. Например, если на странице используется 10 таблиц стилей (файлов CSS), которые все можно объединить в 1, вам следует это сделать. Точно так же, если вы используете несколько файлов JavaScript, которые можно объединить в один, сделайте это тоже. Старайтесь думать о вещах как о сайтах, так и о конкретных шаблонах. У вас должен быть один файл JavaScript для всего сайта для JavaScript, который находится на каждой странице сайта, и один файл JavaScript для конкретного шаблона для каждого шаблона страницы на сайте.То же самое можно сделать с помощью CSS. Обеспечение того, чтобы на эти файлы всегда ссылались с одним и тем же именем и расположением, также поможет, если они правильно кэшированы.

3. Оптимизировать порядок рендеринга.

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

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

4. Создайте стратегию загрузки страницы.

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

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

Лучший инструмент для поиска возможностей отложенной загрузки изображений — это Google PageSpeed ​​Insights. Вы также можете использовать тег изображения Google Lazy-load, но пока это будет соблюдаться только в мобильных и настольных браузерах Chrome (хотя в будущем он может расшириться).В любом случае вам следует использовать инструмент проверки URL в консоли поиска Google, чтобы убедиться, что элементы, которые загружаются отложенным образом, видны при визуализации страницы инструментом и в обработанном HTML.

5. Сжимайте все, что можете.

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

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

6.Кэшируйте нужные страницы в нужное время.

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

Важно понимать, что кеширование основано на именах файлов и их расположении на сервере. Поэтому, если вы используете один файл на многих страницах, например логотип, всегда указывайте на него одно и то же имя файла и URL, даже если он существует в нескольких местах на вашем сервере.Это можно использовать в ваших интересах, потому что это означает, что вам просто нужно обновить имя файла элемента и ссылку на него в HTML, чтобы получить новую версию кэшированного элемента. Так, например, если вы измените свой логотип, просто изменив имя файла с «logo» на «logov2», новая версия будет кэширована, а старая версия будет забыта. Таким образом, когда вы разрешаете что-то кэшировать на год, вы не говорите, что не измените элемент за год, но что если вы это сделаете, вы будете ссылаться на обновленный или новый элемент с новым именем файла.

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

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

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

7. Создавайте ускоренные мобильные страницы (AMP).

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

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

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

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

5 способов оптимизировать ваш сайт WordPress для мобильных устройств

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

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

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

Зачем вам нужен мобильный телефон? По данным Google, 61% пользователей вряд ли вернутся на мобильный сайт, с которым у них возникли проблемы, а 40% перейдут на сайт конкурентов. Даже если люди не покупают ваш продукт или услугу на мобильных устройствах, вы держите пари, что они проводят конкурентные исследования.Если вы упустите возможность пообщаться с ними на их устройстве, вы потеряете их навсегда.

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

1. Ускорьте свой мобильный сайт

Самое важное, что вы можете сделать, — это ускорить свой сайт, так что начните с этого.

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

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

Уменьшить изображения

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

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

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

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

Оптимизация подключаемых модулей и тем

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

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

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

Еще вы можете минимизировать и объединить файлы CSS и JS плагинов. В этом может помочь такой плагин, как WP Rocket; просто убедитесь, что вы связываетесь со своим веб-хостингом, если используете плагин кеширования. Некоторое кеширование может быть избыточным в среде хостинга, такой как Pagely, которая уже сильно оптимизирована.

Используйте отличный веб-хостинг

Вы читаете это на Pagely, так что есть вероятность, что у вас уже есть отличный хост.

Если вы находитесь на дешевом сервере виртуального хостинга в другом месте, простое обновление вашей учетной записи хостинга может многое сделать. Управляемые хосты WordPress, такие как Pagely, имеют серверную инфраструктуру и кэширование, что значительно ускорит ваш сайт. Они также позволяют использовать современные технологии, такие как PHP 7, который в 4 раза быстрее, чем PHP 5.4. Pagely также включает CDN, который может ускорить изображения вашего сайта и другие ресурсы, и он очень прост в использовании.

Дополнительные советы по оптимизации скорости, включая бесплатное руководство в формате PDF, можно найти в этой статье «Ускорение WordPress для мобильных устройств».

2. Не останавливайтесь на адаптивном

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

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

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

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

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

3. Рассмотрим мобильное приложение

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

Приложения занимают 89% времени мобильных медиа, а остальные 11% тратятся на веб-сайты. — Smart Insights

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

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

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

4. Избегайте распространенных ошибок SEO.

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

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

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

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

Понравилось это содержание? Познакомьтесь с Пейджем.

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

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

Дополнительные рекомендации Google в полном руководстве можно найти здесь.

5. Отслеживайте свой прогресс

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

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

Чтобы включить мобильный сегмент, войдите в свою учетную запись Google Analytics и перейдите в Аудиторию.Нажмите там, где написано «Обзор» (если его еще нет), затем нажмите «Добавить сегмент» вверху страницы. Это покажет вам все доступные сегменты, и вы сможете выбрать «Мобильный трафик».

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

Теперь вы можете видеть процентную долю мобильного трафика на ваш сайт, и вы можете щелкнуть другие элементы навигации, чтобы просмотреть другие данные.Например, если я перейду к «Поведение => Контент сайта => Все страницы», я увижу, что моя страница с ценами является посещаемой страницей №1 на мобильном устройстве. Я предполагаю, что люди изучают и хотят узнать, сколько стоит мой продукт.

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

Заключение

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

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

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

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

Отрисовка страницы

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

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

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

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

Может быть проще и точнее получить доступ к обработанному HTML в Инструмент проверки URL в Google Search Console, или, если вам нужно проверять много страниц одновременно, просканируйте сайт с помощью Screaming Frog.Убедитесь, что для пользовательского агента установлено значение «GoogleSmartPhoneBot», для рендеринга — «JavaScript», а в расширенных параметрах — «Сохранить обработанный HTML».

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