Содержание

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

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

12 295 просмотров

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

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

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

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

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

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

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

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

Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google

3. Динамический показ

По одному URL отдается разный HTML и CSS. Чтобы отправить корректный вариант кода страницы, сервер обращается к агенту пользователя через HTTP-запрос Vary. Если у пользователя мобильный агент, то сервер отдаст соответствующий код.

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

Сравнение трех основных вариантов адаптации сайта

Для наглядности занесем все, что можно сравнить, в таблицу:

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

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

Динамический показ

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

Разные URL

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

Каким бы беспристрастным ни пытался казаться Google, официальная позиция по мобильным сайтам, как о способе оптимизации, четкая:

4. AMP

Accelerated Mobile Pages — технология Google для создания ускоренных мобильных страниц сайта. Рекомендуется внедрение AMP в первую очередь для информационных и новостных ресурсов, блогов. Обычная AMP открывается меньше чем за секунду, поэтому UX ускоренных страниц успешнее, чем на обычных. Это достигается за счет полного отказа от пользовательского JS. Не поддерживаются некоторые HTML-теги, страницы реализуются по одному шаблону, отсутствуют формы, виджеты. Чтобы автоматизировать настройку AMP, можно использовать специальные плагины для популярных CMS.

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

«Яндекс» не поддерживает AMP и не уважает атрибут rel=»canonical», поэтому иногда ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt — с помощью метатега robots или с помощью HTTP-заголовка X-Robots Tag.

5. Яндекс.Турбо

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

Сделать страницы похожими на основной сайт можно с помощью юзерского CSS. Создать Турбо можно в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.

В «Яндекс.Турбо» можно реализовать внутренний поиск (с переходом на десктопную версию), минимальную перелинковку для интернет-магазина, покупку в один клик и с корзиной.

Главное отличие «Яндекс.Турбо» от AMP заключается в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.

Стоит внедрить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Однако не думайте, что Турбо и AMP заменят адаптивные и динамические сайты. По крайней мере, пока ограничено внедрение пользовательского функционала.

PWA

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

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

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

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

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

Клевые уроки по PWA и Service Worker: https://classroom.udacity.com/courses/ud811

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

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

1. PageSpeed Insights

PageSpeed Insights — инструмент Google для проверки скорости загрузки страницы. Если мы говорим про оптимизацию, ускорение загрузки сайта и его версий — первая стратегическая задача. Из PageSpeed можно вытащить информацию об изображениях, которые нужно оптимизировать, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.

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

2. Google Mobile Friendly Test

Это инструмент, который заточен на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: «Страница оптимизирована для мобильных устройств», не торопитесь радостно закрывать вкладку. Обратите внимание на подсказку: «Проблемы при загрузке страницы».

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

3. Яндекс.Вебмастер. Проверка мобильных страниц

Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.

Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.

1. Google Search Console. Удобство для мобильных

Отчет в Google Search Console по удобству использования мобильных сайтов показывает ошибки и количество страниц в поиске без ошибок.

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

Небольшой чек-лист по проверке мобильной версии

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

  1. Высокая скорость загрузки на 2G, 3G.
  2. Настроен протокол HTTP/2. Проверка: http2.pro.
  3. Открыты для сканирования CSS и JS. Проверить можно в Google Mobile Friendly Test.
  4. Интуитивно понятная навигация.
  5. Шрифт не менее 12 px.
  6. Кликабельные элементы не перекрывают друг друга. Проверить можно в Google Lighthouse.
  7. Расстояние между интерактивными элементами не менее 48px. Проверить можно в Google Lighthouse.
  8. Все ссылки кликабельны.
  9. Для интернет-магазинов есть возможность покупки в один клик.
  10. Номера телефонов кликабельные.
  11. Есть иконки мессенджеров с переходом в этот мессенджер.
  12. Pop-up и всплывающие окна не занимают весь экран смартфона или планшета, их удобно закрывать.
  13. Текст занимает меньше одного экрана прокрутки.
  14. В полях форм используется автозаполнение input type. Кстати, иногда достаточно только номера телефона, остальное узнает у клиента и заполнит ваш менеджер. Если недостаточно, то ввод телефона — первое поле в форме.
  15. Уменьшен вес видео, аудио, изображений. Не тратим байты пользователя.
  16. Внедрены фавиконки для разных браузеров и устройств.

Автор: Граевская Лилия, SEO Group Head,

Агентство RACURS

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

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

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

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

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

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


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

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

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

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

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

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

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

Robots.txt

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

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

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

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

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

Тег viewport

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

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

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

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

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

Тег alternate

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

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

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

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

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

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

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

Шрифт

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

Кнопки

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

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

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

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

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

Удаление Flash

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

В заключение

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

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

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

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

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

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

Если ваш сайт адаптирован под мобильные устройства, но вы не уверены правильно ли выполнена оптимизация, воспользуйтесь специальной проверкой от Google. Просто введите URL вашего сайта на сайте бесплатного сервиса Mobile-Friendly Test и нажмите кнопку “Проверить страницу”. Сервис оценить ваш сайт, а также предоставит полезные советы по его улучшению.

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

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

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

Быстрый адаптивный дизайн сайта

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

  1. Знакомство с инструкциями Bootstrap — популярного фреймворка для разработки адаптивных сайтов. Собственно в них и расписаны все последующие шаги.
  2. Подключение CSS, а если этого требуют компоненты JS и jQuery.
  3. Проверка страниц на соответствие последним стандартами дизайна и разработки, например, используется ли HTML5 и метатег viewport, который отвечает за правильное отображение видимой части страницы на экранах разного размера.

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

Преимущества адаптивного дизайна:

  • Не нужно создавать два отдельных макета. При адаптивном дизайне достаточно одного макета, который автоматически будет приспосабливаться к любым размерам экранов.
  • Отсутствие лишней нагрузки на SEO-специалистов: не нужно создавать отдельные ссылки на страницы, так как мобильная версия всегда имеет приставку . m или .mobile; добавлять мета-теги rel=«alternative» и rel=«canonical», объясняющие поисковой системе, что контент в мобильной версии не был украден и продублирован; волноваться о правильно настроенных редиректах между версиями.
  • Управление одним сайтом, а не двумя. Если нужно внести изменения, то они автоматически станут видны для пользователей, которые посещают ваш ресурс как с десктопа, так и с мобильных устройств.
  • Google любит адаптивные сайты. И вот почему: адаптивные сайты быстрее сканируются роботом Googlebot, а страницы индексируются точнее. Единый URL также удобнее для пользователей. Таким сайтам не нужна переадресация, а это сокращает время загрузки. На адаптивных сайтах не возникает типичных ошибок, как на мобильных сайтах.

Шаблоны и плагины

Сравнительно быстро адаптировать сайт можно с помощью готовых тем (шаблонов) или плагинов. Такая опция не требует технических навыков. Однако доступна она не всем — только владельцам сайтов на отдельных CMS.

Первый вариант — установить специальный плагин для существующей десктопной темы, который преобразует ее под мобильные устройства. Например, на сайтах Joomla с этой задачей справятся плагины Responsivizer и Mobile Joomla, на Drupal сайтах — ThemeKey и MobileTheme. Для WordPress подойдёт WPtouch. А еще не так давно, точнее до марта, 2020 года часто использовался плагин для мобильной оптимизации JetPack. Однако разработчики плагина удалили функцию mobile theme, которая собственно и отвечала за адаптацию сайта под мобильные устройства, объясняя это тем, что “большинство тем теперь по умолчанию включают мобильный дизайн, поэтому в этой функции больше нет необходимости”. Кроме того, они рекомендуют использовать адаптивные темы и не усложнять себе задачу.

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

Чтобы быстро найти и установить шаблон

  • В WordPress предварительно найдите и загрузите тему на свой компьютер, перейдите в админпанель, Внешний вид & Темы & Добавить новую.
    Примечание: большой список платных и бесплатных тем можно найти на сайте WordPress.org. Перед скачиванием внимательно прочитайте описание и отзывы, обратите внимание на количество скачиваний.
  • В Joomla, панель администратора & Расширения & Менеджер расширений & Загрузить файл пакета.
  • В Drupal, предварительно скачайте тему из сайта drupal.org, панель администратора & Оформление & Установить новую тему.

А как быть с магазином на OpenCart?

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

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

Отдельная версия сайта на поддомене

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

Обратите внимание! Для того чтобы показать Google, что это не дублированный контент, а мобильная версия сайта нужно использовать специальные метатеги rel=«alternative» и rel=«canonical».

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

Как быстро создать мобильную версию сайта?

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

Преимущества мобильной версии сайта:
  • Высокая скорость загрузки сайта. Так как лишний функционал и элементы с десктопной версии на мобильную не переносятся, это уменьшает нагрузку и повышается скорость загрузки. А последнее позитивно влияет на позиции SEO.
  • Юзабилити и SEO. Так как в мобильной версии сайта нет ничего лишнего, что могло бы помешать или отвлечь пользователя (неудобные формы, второстепенные тексты и блоки, кнопки, запутанная навигация) улучшаются поведенческие факторы. Пользовательский опыт влияет на поведенческие метрики, а те, в свою очередь, на ранжирование сайта, то есть “высоту” его позиции в выдаче.
  • Гибкость. Отдельная версия означает отдельный код. Вы можете быстро и легко вносить изменения в мобильный сайт, не рискуя что-то сломать в десктопе и наоборот.
  • Выбор версии. При наличии мобильной версии сайта пользователь, в случае необходимости, всегда может перейти на полную версию.

ТОП-5 рекомендаций, как улучшить работу мобильного сайта

1. Не игнорируйте скорость загрузки

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

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

Обратите внимание! В идеале скорость ответа сервера не должна превышать 0.2 с. Проверить этот показатель можно в Google Analytics: Поведение & Скорость загрузки сайта & Обзор.

Также проверить скорость загрузки сайта можно в специальном бесплатном сервисе Google PageSpeed Insights или  Pingdom Tools.

2. Проверяйте отображение элементов

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

Для этого не забудьте проверить страницу с помощью Mobile-Friendly Test. Не стоит игнорировать советы по оптимизации страницы от поискового гиганта Google, особенно учитывая, что они бесплатны!

3. Придерживайтесь принципов Mobile First

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

4. Используйте технологию AMP

Если загрузка сайта длится более 3 сек, половина пользователей покидают его, согласно статистике Google, наведенной Девидом Кикпатриком в статье на портале MarketingDive.

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

Однако такой метод ускорения страниц подойдет не всем. Дело в том, что пользователь, попадающий на сайт с AMP, автоматически переадресовывается на упрощенную версию, где, скорее всего, не будет ни виджетов, ни раздела комментариев, ни дополнительных блоков, например, “Рекомендованное”, утяжеляющих страницу. Собственно именно так и достигается молниеносная загрузка при AMP.

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

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

Итоги

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

Итак, еще раз перечислим опции адаптации сайта под мобильные устройства:

  • Адаптивный дизайн. Если у вас есть навыки веб-разработки или разработчик в штате, вы можете адаптировать десктопную версию таким образом, что она будет автоматически подстраиваться под экраны разного расширения посредством CSS. “Заставить” сайт адаптироваться под мобильные можно с помощью специальных плагинов или адаптивной темы. Для этого не нужны технические навыки. Опция доступна владельцам сайтов на CMS WordPress, Joomla и Drupal.
  • Мобильная версия сайта. Если речь идет о большом проекте, портале, крупном интернет-магазине, стоит задуматься о разработке самостоятельной отдельной мобильной версии. Здесь не обойтись без помощи команды разработчиков.  Если вы владелец небольшого или среднего e-commerce сайта, блога, сайта-визитки и т. д., можно попробовать преобразовать ваш сайт с помощью специальных конструкторов мобильных сайтов. Навыки программирования не понадобятся.

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

Главная

/блог

/Создание web-сайтов

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

8 мин.

08 Декабрь 2020

Оптимизация сайта под мобильные устройства – обязательный этап SEO-продвижения. Согласно статистике, собранной «Яндекс.Радаром», с каждым годом объем мобильного трафика увеличивается на 50–60%. Из-за этого степень mobile friendly оптимизации стала важным фактором ранжирования в Яндекс и Google. Приоритет при индексации отдается именно версиям сайта, отображаемым на мобильных устройствах.

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

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

Создание адаптивной верстки

Главное преимущество адаптивной верстки – не надо оптимизировать 2 версии сайта: десктопную и мобильную. При заходе через смартфон или ПК запросы идут на один и тот же сервер, который отправляет пользователю одинаковый HTML-код — содержимое на сайте подстраивается под разрешение экрана при помощи свойств CSS.

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

Среди плюсов адаптивной верстки также выделяются:

  • Единый URL для всех версий сайта.
  • Отсутствие лишних элементов на странице.
  • Корректное отображение страниц на всех устройствах.

Из минусов подобного решения отмечаются:

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

Разработка сайта с mobile-friendly дизайном наиболее правильное решение.

Способы оптимизации адаптивной верстки

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

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

Для улучшения адаптивного дизайна можно сделать следующее:

  • Масштабировать видео и изображения через свойства CSS под размер экрана. В качестве изображения на сайте рекомендуем использовать картинки в формате SVG — векторная графика не теряет качество при изменении масштаба.
  • Упростить функциональность сайта — снизить количество используемых скриптов и объемных изображений, убрать калькуляторы и расчет доставки со страниц в корзину, и т. д. Дополнительную информацию можно перенести в отдельные элементы страницы: например, скрыть комментарии под отдельной кнопкой или добавить к товарам на сайте скрываемое описание.
  • Переработать меню — для многостраничных веб-сайтов есть смысл частично скрыть пункты меню или реализовать Hamburger-меню. Важно чтобы на гаджетах с небольшой диагональю экрана не появлялась горизонтальная полоса прокрутки — это затрудняет использование сайта.   

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

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

Узнать больше

Мобильная версия

Альтернативным вариантом оптимизации считается создание мобильной версии — например, запуск копии сайта на поддомене или разработка отдельного шаблона. Одна из сложностей реализации такого варианта – настройка правильной связи между аналогичными страницами обеих версий, чтобы десктопная и мобильная версии не конкурировали между собой. Для этого версии связываются в вебмастерах Google и Yandex, либо пропишите атрибуты rel=»alternate» и rel=”canonical”. Это не позволит роботам индексировать страницы обеих версий как дубли и как следствие — предотвратит снижение позиций в выдаче.

Вариант с отдельным поддоменом

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

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

Версия на отдельном шаблоне

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

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

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

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

  • Отсутствие тяжеловесных элементов — Silverlight-плагины, Flash-элементы или Java-апплеты серьезно замедляют загрузку страницы и могут некорректно отображаться на некоторых смартфонах. Кроме того, следует отключить неиспользуемые плагины CMS и скрипты. Критически важно, чтобы веб-страницы открывались на мобильных гаджетах менее 5 секунд.
  • Адаптация под небольшие экраны — шрифты и изображения должны подстраиваться под диагональ смартфонов, также обязательно наличие полосы прокрутки. В мобильной версии сайта ссылки должны оставаться кликабельными, а формы связи и заказа — функциональны.
  • Редактирование рекламных блоков — реклама не должна закрывать контент на странице. Для этого изменяется количество рекламных блоков, а также убираются все всплывающие окна, баннеры и Pop-Up.

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

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

Проверять качество оптимизации мобильной версии можно через инструментарий Google и Yandex, либо сторонние сервисы. Определить скорость загрузки можно через GooglePageSpeed Insights, получить детализированную статистику — через вебмастеры.

Также оптимизаторы используют сервисы:

  • Ilove Adaptive.
  • Внутренний инструмент Google Search Console — Mobile Friendly
  • ThinkWithGoogle.

Определить качество оптимизации сайта с мобильного также можно через инструменты разработчика любого браузера. Для этого требуется открыть консоль (Ctrl+Shift+I) и выбрать отображение нужной версии сайта.

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

Итог. Какой вариант лучше?

Согласно исследованию Яндекс.Радара, с начала 2020 года количество мобильного трафика в РФ выросло на 57%, подобная тенденция также прослеживается и в статистике за прошлые годы. В 2020 каждый сайт обязан быть оптимизирован под смартфоны и планшеты — в противном случае есть риск потери более половины потенциальных клиентов.

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

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

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

Есть задача? Найдем решение!

Вас зовут *

Ваш телефон *

Ваша эл. почта

Расскажите о вашем проекте

Нажатием кнопки я принимаю условия Оферты и согласен с Политикой конфиденциальности

Как оптимизировать сайт под мобильные устройства — Веб-Центр, блог

У большого количества интернет-ресурсов нет адаптации под мобильные устройства, а зря. В марте 2022 года более 72% всего интернет-трафика — это смартфоны и планшеты. Если не заниматься мобильной оптимизацией, то ваш сайт будет терять посетителей, а компания – прибыль. Из-за неудобств в использовании неадаптированного сайта потенциальные клиенты могут сделать свой выбор в пользу конкурентов.

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

Содержание

Что такое адаптивный дизайн

Зачем нужна мобильная версия сайта

Чек-лист: как проверить оптимизацию мобильной версии сайта

Методы мобильной адаптации сайта

  1. Верстка адаптивного сайта
  2. Вторая версия сайта для мобильный устройств на поддомене

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

Вывод

Что такое адаптивный дизайн

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

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

Зачем нужна мобильная версия сайта

У поисковиков есть специальные системы оценивания мобильной оптимизации. Компании Google и Яндекс использует свои алгоритмы – «Mobile-friendly» и «Владивосток». Они анализируют адаптивность мобильной версии сайта и удобство использования.

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

Чек-лист: как проверить оптимизацию мобильной версии сайта

Существуют специальные сервисы для проверки веб-страниц. У Яндекса такой функционал реализован в Яндекс.Вебмастере: зайдите в «Инструменты» → «Проверка мобильных страниц». В строку вставьте URL страницы и нажмите «Проверить».

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

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

У Google тоже есть свой сервис – Mobile-Friendly Test. Вставьте вашу ссылку в строку и нажмите «Проверить страницу»:

Результат проверки сервисом Mobile-Friendly Test оптимизированной мобильной страницы

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

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

Как сайт web-c.ru отображается на экранах разных устройств

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

  1. Корректность отображения
    Откройте страницу на телефоне и проверьте, все ли элементы отображаются так, как задумано? Страницы должны быть без горизонтальной прокрутки, изображения – нужного размера и в нужном месте, а шрифт – читабельный.
  2. Скорость загрузки страниц
    Скорость мобильного интернета часто ниже, чем у стационарных устройств с кабельным подключением. В то же время чуть меньше 50% пользователей уходят со страницы, если она загружается дольше 3 секунд. Поэтому протестируйте, сколько времени открывается ваш сайт на телефоне. Для этого воспользуйтесь специальными сервисами, например Be1.ru или Google PageSpeed Insights.

    На скорость сайта влияет оптимизация кода страниц, вес контента и качество сервера, на котором размещается сайт.

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

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

  4. Заполнение форм и оформление заказа
    Для мобильных устройств лучше уменьшить количество шагов при заполнении форм: большое количество полей при оформлении заказа могут отпугнуть посетителя.
  5. Контакты на страницах
    Контакты должны быть кликабельны, чтобы пользователь легко мог связаться с вами: набрать номер или перейти в мессенджер.
  6. Тяжелый мультимедийный контент
    Для мобильных сайтов скорость загрузки контента критична, а тяжёлые картинки и видео увеличивают время, которое пользователю придется ждать, чтобы посмотреть страницу.

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

Методы мобильной адаптации сайта

1. Верстка адаптивного сайта

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

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

Особенности метода:

    ✅   Быстрая реализация на этапе разработки.

    ✅   Быстрая реализация на этапе разработки.

    ✅   Сайт доступен с любого устройства по одному адресу.

    ✅   Все вносимые изменения отображаются в любой версии.

    ✅   Вы защищены от ошибочного дублирования контента.

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

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

2. Вторая версия сайта для мобильный устройств на поддомене

Отдельная мобильная версия — более затратное, но гибкое решение. Ее можно изменять, не затрагивая ПК-версию сайта.

Особенности метода:

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

    ✅   Настройка интерфейса и функционала происходит прицельно под мобильные устройства.

    ✅   У пользователя остается возможность перейти на основной сайт в любой момент.

    ❌   Необходимо создавать и настраивать поддомен.

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

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

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

1. Нечитабельный шрифт

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

  • Нестандартные, необычные шрифты могут не отображаться или криво загружаться на устройстве пользователя. Лучше использовать стандартные и распространенные шрифты, например, Arial.
  • Слишком мелкий шрифт. Применяйте стандартный размер текста не меньше 14 px: маленькие буквы сложно читать.
  • Отсутствие отступов. Блоки текста воспринимаются лучше, чем одна сплошная «простыня».
  • Не используйте много разных шрифтов на странице. Это сбивает концентрацию при чтении и увеличивает время загрузки страницы.
  • Не стоит использовать в тексте большое количество разных цветов, поскольку это мешает сосредоточиться на восприятии информации.

2. Корректность отображения элементов

  • Для пользователей важно, чтобы на вашем сайте все элементы отображались корректно в экране мобильного устройства.
  • Горизонтальная прокрутка. Распространенная ошибка чаще всего возникает из-за того, что компонент не влезает в размер экрана. Чтобы этого избежать, необходимо настроить корректную оптимизацию элемента под все разрешения.
  • Неправильный размер изображений. Картинка шире экрана и выходит за рамки устройства. В таком случае нужно сделать подстройку изображений под разрешение экрана.
  • Размеры и расположение кнопок. Проблема кнопок разных размеров и их расположения довольно часто встречается на различных сайтах. Пользователь пытается нажать на нее, но не попадает, так как она слишком маленькая. Либо же наоборот, кнопка большая и закрывает необходимый контент. Сделайте кнопки удобного размера и разместите их в местах, где они не будут мешать чтению или выбору товара.

3. Формы заказов

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

4. Контакты на страницах

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

5. Неоптимизированный мультимедийный контент

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

6. Низкая скорость загрузки страницы

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

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

Вывод

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

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

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

+7 (495) 128 22 58

Часто ищут

Новости SEO

Опубликовано 08 дек 2020г.

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

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

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

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

Чтобы оптимизировать ресурс, можно использовать один из следующих способов:

Мобильная версия

Если пользователь заходит на сайт со смартфона, он перенаправляется на поддомен мобайл-версии. Как правило, имя поддомена в этом случае получает приставку m, mobile или pda перед основным именем. Перенаправление происходит автоматически: сервер «распознаёт» тип устройства пользователя и перенаправляет его на поддомен. Для различных устройств применяются разные типы кода и URL страниц.

Плюсы mobile version:

  • Скорость загрузки. Мобильная версия — это по сути отдельный сайт, на котором отключены многие элементы, необходимые для десктопных страниц. За счёт этого страницы прогружаются практически мгновенно.
  • Простая модернизация. Вносить изменения на мобайл-версии гораздо проще и быстрее, чем на полноформатном варианте. Если нужно что-то изменить в дизайне или функционале, переживать о том, как это отразится на десктопном варианте не придётся. А вот в случае, например, адаптивного дизайна, любое, даже малейшее изменение, потребует проверки на обоих форматах.
  • Оптимизация под мобильную выдачу. Так как mobile version — самостоятельный сайт, для него можно разработать функционал или контент, отличный от десктопного варианта. Это позволит учесть другие группы запросов, привлечь новых посетителей.
  • Можно быстро переключиться на полную версию сайта. Например, если пользователь заходит с планшета, но ему удобнее работать с десктопным вариантом, он может перейти на него. При адаптивном дизайне так сделать не получится.

Минусы mobile version:

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

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

При этом варианте код страниц и URL не меняются. Сервер никуда не перенаправляет пользователя, отдавая всем устройства единый HTML-код. Однако он адаптируется в зависимости от параметров экрана при помощи CSS. При этом важно учитывать, что определённые файлы CSS, JavaScript и изображения должны быть доступны для индексации.

Плюсы адаптивного дизайна:

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

Минусы адаптивного дизайна:

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

Как способ лучше

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

Как проверить оптимизацию сайта

Для проверки существует несколько инструментов:

Page Speed Insights используется для оценки скорости загрузки страниц, а также отображает проблемные места с рекомендациями по устранению ошибок.

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

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

Fetch and Render в Google Search Console показывает мобильную версию вашего ресурса «глазами» поисковых роботов.

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

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

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

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

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

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

Поисковое продвижение сайтов в Google

Роль заголовков h2-h6 в SEO

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

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

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

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

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

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

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

Неудивительно, что мобильный трафик резко вырос за последние годы. Он превзошел использование настольных компьютеров: более 54% всего трафика в Интернете приходится на мобильные устройства. Это по сравнению с примерно 43% от настольных компьютеров.

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

Что означает адаптивный веб-дизайн?

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

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

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

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

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

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

Получите содержимое, доставленное прямо в ваш почтовый ящик

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

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

Брайан Клейтон, генеральный директор GreenPal, потратил девять месяцев на создание сайта своей компании с нуля. «Прямо у ворот возникли серьезные проблемы», говорит он. «Мы предполагали, что большинство наших пользователей будут покупать услуги по уходу за газоном со своего настольного или портативного компьютера. Но очень быстро стало ясно, что больше людей заходят на сайт со своих мобильных телефонов и планшетов, чем с настольного компьютера или ноутбука — 4 к 1».

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

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

«До того, как наш веб-сайт был перестроен для работы с мобильными устройствами, конверсия в мобильном браузере составляла менее 4%», — говорит он. «Это означает, что люди, которые пытались зарегистрироваться, отказались от процесса в 96% случаев».

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

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

Оттачивайте свою аудиторию и запрашивайте отзывы клиентов

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

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

Зондра Уилсон, владелица салона красоты Blu Skincare в Лос-Анджелесе, обнаружила, что ее сайт не оптимизирован для мобильных устройств, только когда начала запрашивать отзывы у клиентов.

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

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

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

Think Small (с точки зрения размера экрана)

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

Виталий Виноградов, генеральный директор Modern Place Lighting, обнаружил, что переход на мобильный дизайн привел к увеличению конверсии на 30% по сравнению с десктопным. «Важно удалить лишние плагины, всплывающие окна и любые другие блокираторы экрана в мобильной версии сайта», — говорит он.

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

«Вам нужно проектировать для малого», — объясняет Мэтт Фелтен, дизайнер продуктов из Лос-Анджелеса. «Ты должен быть немного более сосредоточенным. Вы должны сократить количество информации и контента». После того, как ваш мобильный сайт будет готов, вы можете обнаружить, что вам больше не нужно добавлять что-либо в настольную версию сайта.

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

Усовершенствуйте свой дизайн Эстетика

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

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

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

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

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

1. Протестируйте свой сайт с помощью Google Mobile-Friendly Tool

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

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

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

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

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

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

2. Используйте пользовательский CSS, чтобы сделать ваш веб-сайт адаптивным

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

Чтобы дать вам пример, вы можете использовать CSS для реализации того, что мы называем диапазонами «медиа-запросов». С помощью медиа-запросов (или реагирующих точек останова) вы можете указать браузерам, когда загружать разные макеты для страницы, в зависимости от размера экрана, который они используют. Медиа-запросы являются важным компонентом библиотек HTML, CSS и JS, таких как Bootstrap:

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

  • Создание макета сетки CSS. Сетчатые макеты CSS, такие как тот, который предоставляет Bootstrap, предлагают простой способ помочь вам настроить дизайн для различных размеров экрана. Наличие макета с четко определенными элементами может позволить вам настроить, как они отображаются и сколько места они занимают при каждом размере экрана.
  • Использование процентов размера для элементов макета. Как вы, возможно, знаете, CSS позволяет задавать высоту и ширину элементов, используя пиксели и другие единицы измерения. Чтобы сделать ваш сайт более отзывчивым, мы рекомендуем вам использовать проценты. Таким образом, такие элементы, как кнопки, должны плавно адаптироваться по мере уменьшения размера экрана.
  • Настройка размера шрифта с помощью медиа-запросов. Изображения и другие визуальные элементы на странице не должны быть единственными вещами, которые масштабируются для небольших экранов. Текст также должен быть отзывчивым, иначе вы можете получить мобильный сайт, на котором пользователи могут видеть только одно или два слова на своем экране, прежде чем им нужно будет прокрутить вниз.
  • Контроль расстояния между элементами. CSS позволяет определить расстояние между элементами, чтобы оставалось достаточно пробелов даже при уменьшении масштаба страницы.
Если вам удобно использовать HTML и CSS, разработка полностью адаптивного веб-сайта может оказаться проще, чем вы думаете. Однако, если вы используете систему управления контентом (CMS), такую ​​как WordPress, весь процесс становится намного проще, поскольку вам редко приходится иметь дело с кодом, даже при работе над адаптивным дизайном.

3. Выберите адаптивные темы и плагины

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

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

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

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

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

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

4. Проверьте основные показатели веб-сайта

Основные показатели веб-сайтов являются частью недавнего обновления поисковых алгоритмов Google. Эти «жизненные показатели» представляют собой набор показателей, которые дают представление об общем пользовательском опыте. Есть три Core Web Vitals, а именно:

  • Краска с наибольшим содержанием (LCP). Этот показатель измеряет, сколько времени требуется для загрузки самого большого элемента на странице. Низкий показатель LCP означает, что страница в целом загружается быстро.
  • Задержка первого входа (FID). Целью этой метрики является измерение интерактивности. Оценка FID показывает, сколько времени требуется, прежде чем пользователь сможет взаимодействовать со страницей во время ее загрузки.
  • Суммарное смещение макета (CLS). Это говорит вам, насколько макет страницы «сдвигается» или перемещается при загрузке. Вы хотите стремиться к тому, чтобы оценка CLS была близкой к нулю, чтобы свести к минимуму это движение.
Оценить пользовательский опыт веб-сайта непросто. Таким образом, Core Web Vitals не дает полной картины общего пользовательского опыта сайта. Тем не менее, они позволяют вам измерить ключевые технические аспекты любой страницы, которые напрямую влияют на то, насколько они приятны для пользователей.

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

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

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

5. Сократите время загрузки вашего сайта

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

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

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

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

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

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

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

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

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

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

7. Выберите надежный веб-хостинг

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

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

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

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

8. Создание мобильного приложения

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

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

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

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

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

Мобильная оптимизация не может ждать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Средний размер веб-страницы в 2018 году. Список по отраслям и странам.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 


 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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