Оптимизация мобильных страниц

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

Что такое мобильные устройства?

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

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

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

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

Под эти устройства мы можем подготовить контент двумя способами. Подготовьте специальную, значительно упрощенную версию сайта (в соответствии со старыми правилами был создан поддомен, например, http://m.secureglass.net или http://secureglass.net/mobile в зависимости от предпочтений). Преимуществом этой версии является очень упрощенный код, контент, как правило, без анимации, слайдеров и т. Д. Недостатком является потеря значительной части функциональности сайта.

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

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

Если у сайта есть собственная версия на мобильном телефоне, и Google правильно распознает ее, вы можете проверить здесь: https://www.google.com/webmasters/tools/mobile-friendly ,

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

Мы позаботимся об оптимизации этой версии.

Я рекомендую начать работу с хорошего анализа нашего сайта. Вы можете сделать это с GTMetrix ( https://gtmetrix.com/ )

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

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

Следующие значения должны быть контрольной точкой (для страницы с отключенными надстройками)

Следующие значения должны быть контрольной точкой (для страницы с отключенными надстройками)

Неоптимизированная версия генерирует до 88 ссылок на сервер (загружает 88 небольших файлов компонентов). Вес страницы составляет 1,68 МБ при времени загрузки 10,1 секунды. Это дало нам результат D и так плохо. Подробный отчет можно скачать из стада: GTmetrix-отчетно-secureglass.net-20150810T142714-C3AWBZTx

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

После правильной настройки плагина у нас 71 ссылка, а время загрузки уменьшилось вдвое. Очень хорошо ... мы продолжаем. Подробный отчет можно скачать из стада: GTmetrix-отчетно-secureglass.net-20150810T134832-nJHIN0yj

Очень популярное дополнение, которое повышает скорость вашего сайта W3 Total Cache (для WordPress) и JCH Optimize (для Joomla). Конечно, этих дополнений гораздо больше, но я их знаю, пользуюсь, я счастлив и могу их порекомендовать.

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

Настройки сервера и надстройки, используемые на сайте, отличаются

Версия с включенным и сконфигурированным W3 Total Cache дополнительно загружается на 8 секунд быстрее, весит вдвое меньше и, что самое главное ... генерирует еще 58 апелляций меньше. Время загрузки будет меняться в зависимости от нагрузки на сервер, потому что быстрее передать один большой файл, чем дюжину или около того меньшего размера. Подробный отчет можно скачать из стада: https://gtmetrix.com/reports/secureglass.net/SXiqZOK3

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

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

Google Page Insight Insight приходит с помощью ( https://developers.google.com/speed/pagespeed/insights ). Этот инструмент предлагает то, что должно быть изменено, чтобы сделать это быстрее. Мы говорим о сжатии файлов здесь оптимизация изображения и т.д. Наиболее интересной особенностью, однако, является возможность загрузки пакета с оптимизированными файлами . Таким образом, у нас есть почти вся работа из наших голов. Инструмент также показывает, какие элементы страницы слишком малы или расположены слишком близко друг к другу, что затрудняет их просмотр.

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

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

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

Оптимизация мобильных сайтов 4.79 / 5 (33 голоса)

Что такое мобильные устройства?