Чуть более адаптивный сайт на 1C-Bitrix, аналог классов видимости от bootstrap

Как всем нам известно, с 21 апреля 2015 года Google будет пессимизирует сайты, непригодные к просмотру на мобильных устройствах при ранжировании. Со многими бедами помогают бороться CSS фреймворки типа Bootstrap, настройки CMS, в частности, 1С-БУС последних версий. Но все они не решают другой, очень важной проблемы: мало просто скрывать ненужный контент на определенных устройствах, нужно предотвращать его загрузку.

В данной статье я расскажу о расширении написанном мной для 1C-Bitrix управление сайтом, которое решает объявленную выше проблему.

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

Итак, мы имеем сайт на 1C-Bitrix, интегрированную верстку на Bootstrap3 и желание помочь своим мобильным пользователям.

Ранее для достижения более менее приличного вида адаптивной версии сайта верстальщики и контент менеджеры пользовались замечательными классами видимости ".hidden-lg, .hidden-md, .hidden-sm и .hidden-xs". Этого достаточно чтобы скрывать ненужные блоки на тех или иных разрешениях экранов пользователей.

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

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

Начал с поиска решений, которые бы позволили определить мобильного пользователя «еще на подлете», а не во время рендера страницы. Таким решением оказалась PHP библиотека «Mobile Detect» (ссылка в подвале). Данная PHP библиотека позволяет определять пользователя смартфона/планшета/десктопа, а также выдает еще уйму справочной информации по устройству юзера, зашедшего на сайт. Из всего разнообразия библиотеки я выбрал всего один метод, он отвечал на вопрос — «мобильный это юзер или нет». Можно, конечно, было вычленить еще и планшеты, но я сгреб их в кучу со смартфонами.

Начало положено, мы можем отделять мобильных пользователей от декстопных, далее нужно сделать сам инструмент.
Здесь на помощь приходит API 1C-Bitrix, а конкретно — событие OnEndBufferContent (ссылка в подвале). Метод вызывается при выводе буферизированного контента и позволяет им манипулировать.

Дело за малым, перехватываем событие OnEndBufferContent, подключаем библиотеку «Mobile Detect» и узнаем мобильный ли перед нами пользователь. Далее в зависимости от ответа выкидываем из контента ненужные блоки, а остальное передаем на вывод пользователю.

Для контент менеджеров я сделал наипростейший вариант разметки страницы. Контент, обернутый в <lg></lg>, будет отображен только на десктопах, а <xs></xs> — только на мобильных устройствах. Понятно, просто и эффективно. Естественно, при отлове неугодных блоков из кода вырезаются и теги разметки <lg></lg><xs></xs>, что позволяет не вредить семантике верстки.

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

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

Пара скриншотов того, что получилось:





Материалы, используемые при создании решения


AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 5

    +1
    Несколько лет назад я очень сильно попал, выдавая разный контент для пользователей с разным разрешением экрана (про мобильность-адаптивность тогда еще не слышали, но разрешение монитора могло быть меньше, чем у современных смартфонов).
    В итоге сайт был забанен Гуглом с диагнозом "клоакинг". Хотя намерения были самые благие.
    Фиг знает как обстоят дела с этим в эпоху мобильности, но учитывайте этот фактор.
      0
      Я тоже этого опасаюсь, поэтому решение используется без ярого энтузиазма, а только в тех местах где без него действительно туго. Обычный текст и легковесные блоки отлично скрываются классами видимости и не сильно влияют на скорость загрузки страниц.
      0
      А ссылка на решение в маркетплейс?
      0
      Занимать мегабайты на странице сайта могут только картинки (в 99,9% случаях).
      Для них правильнее использовать что-то вроде лейзилоадинга.
      Например в меню используются картинки, а на мобильнике просто текст — ну и пожалуйста, вешаем скрипт и картинки грузятся только когда показываются.

      Only users with full accounts can post comments. Log in, please.