Як всім нам відомо, з 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 слайдери та інші вишукування десктопних версій сайту.
Пара скріншотів того, що вийшло:
Матеріали, які використовуються при створенні рішення
- PHP бібліотека Mobile Detect
- OnEndBufferContent API бітрикс
- Рішення у маркеті
