Сьогодні понад половина користувачів заходить в інтернет з мобільних пристроїв — смартфонів і планшетів. Це змінює підхід до створення сайтів: щоб бути успішним, інтернет-магазин має працювати швидко і зручно саме на цих пристроях. Мобільна версія та адаптивний дизайн — не просто модний тренд, а ключовий фактор для підвищення конверсії, утримання клієнтів і зростання продажів.
Адаптивність сайту означає, що його вміст і структура автоматично підлаштовуються під розмір екрану користувача — текст і зображення масштабуються, меню стає зручним, а сторінки швидко завантажуються. На платформі BooStore.pro застосовано сучасний підхід до верстки — використовуються блочні елементи DIV, а не застарілі таблиці. Це полегшує створення гнучких макетів і пришвидшує завантаження сторінок.
Крім того, швидкість завантаження мобільної версії критично важлива — користувачі часто використовують мобільний інтернет з обмеженою пропускною здатністю. Щоб не втрачати клієнтів, сайт має швидко відображатися і мінімізувати зайві запити до сервера.
Блочна верстка та її переваги
Створюйте шаблони на основі блочної верстки. Це означає, що кожен елемент сторінки — окремий блок з певними стилями та поведінкою. Така структура дає наступні переваги:
- Гнучка адаптація під будь-які екрани та пристрої;
- Простота керування видимістю блоків (наприклад, приховування бічних меню на мобільних);
- Прискорення завантаження за рахунок динамічного підвантаження контенту;
- Зручність впровадження нових функцій та елементів без повної перебудови шаблону.
У структурі шаблону рекомендується використовувати основні семантичні блоки:
— основний контент сторінки,
— бічні панелі та додаткові елементи,
— нижній блок з контактами та посиланнями.
У системі BooStore.pro кожен блок можна вивести з потрібним типом HTML-тегу, що дозволяє гнучко керувати структурою сторінки та відповідати вимогам дизайну та семантики без ручного редагування коду.
Це дозволяє створювати якісний інтерфейс користувача з урахуванням потреб мобільних користувачів.
Оптимізація зображень
Щоб уникнути зміщення макета під час завантаження сторінок, рекомендується заздалегідь задавати розміри зображень. Використовуйте loading="lazy" — який відкладає підвантаження зображень до моменту, коли вони реально з'являються у зоні видимості користувача. На платформі BooStore.pro усе це можна налаштувати у параметрах сайту.
Для прискорення відображення списків товарів використовується механізм зменшених кешованих копій зображень. Якщо на картці товару є додаткові зображення, їх рекомендується підвантажувати лише при взаємодії користувача (наприклад, при наведенні курсору або появі картки товару у видимій частині сторінки), щоб не перевантажувати сторінку зайвими запитами.
Використовуйте сучасні формати зображень, наприклад WebP, які забезпечують високу якість при меншому розмірі файлу порівняно з JPEG або PNG. Налаштовуйте стиснення так, щоб зменшувати вагу зображень без помітної втрати якості — надто сильне стиснення може погіршити вигляд та порушити дизайн.
Для списків товарів і прев'ю рекомендується створювати зменшені версії зображень, оптимізовані під розміри блоку, а для великих банерів або фото на весь екран використовуйте розміри, що відповідають фактичному відображенню на сторінці.
Динамічне завантаження скриптів: тільки за потребою
Платформа BooStore.pro застосовує просунутий механізм завантаження JavaScript — всі скрипти підвантажуються і активуються лише тоді, коли користувач взаємодіє з відповідними елементами сайту або коли на сторінці є об’єкти, що потребують роботи скрипта. Це значно знижує навантаження на сайт і пришвидшує час його завантаження.
Наприклад, скрипти, що відповідають за спливаючі вікна, зміну кількості товарів у кошику, керування різновидами товару на сторінці перегляду, мобільне меню та майже всі інші інтерактивні функції, запускаються лише при кліку користувача або за наявності потрібних елементів на сторінці. Такий підхід забезпечує максимальну продуктивність і комфорт для відвідувачів, особливо на мобільних пристроях з обмеженими ресурсами.
Мобільне меню як застосунок: зручність і функціональність
Платформа BooStore.pro пропонує потужний інструмент — мобільне меню, яке працює як повноцінний застосунок. Його можна гнучко налаштовувати, щоб навігація була максимально простою і приємною для користувачів з будь-яких пристроїв.
Ви задаєте поріг ширини екрану, при якому меню автоматично переключається в мобільний режим (наприклад, для смартфонів і планшетів). Також можна обирати іконки для верхнього блоку (кошик, пошук, особистий кабінет, контакти тощо) і формувати структуру меню з категорій, виробників та будь-яких сторінок.
Особливість — оптимальне завантаження. Якщо меню містить багато пунктів і підменю, вони підвантажуються динамічно лише при розгортанні, а не одразу при завантаженні сторінки. Це знижує навантаження на сервер і пришвидшує роботу сайту.
Вбудований віджет мобільного меню на платформі BooStore.pro
На платформі BooStore.pro присутній віджет мобільного меню, який гнучкий у керуванні та дозволяє створювати пункти та підпункти з безліччю параметрів. Для кожного верхнього пункту можна встановлювати іконку, колір та фон підкладки. При натисканні на будь-який пункт меню з випадаючим списком підпунктів або головного меню можна налаштовувати власний колір, іконку, а також включати категорії, підкатегорії та списки виробників, які завантажуються автоматично без ручного оновлення при зміні даних на сайті. Кожному пункту можна призначити індивідуальні іконки.
Віджет містить параметри відображення мобільного блоку меню: зліва, справа, по центру або на весь екран. Також можна задати поріг ширини екрана, при якому активується мобільне меню, або увімкнути його за замовчуванням на всіх сторінках сайту.
Завантаження меню оптимізоване: спочатку завантажується лише кнопка та мінімальний функціонал, а повний скрипт меню з розкриттям списків підкатегорій та спливаючих вікон підвантажується лише при натисканні. Якщо екран менший за вказаний поріг ширини для відображення мобільного меню, скрипт не завантажується, що економить ресурси та збільшує швидкість завантаження. Вміст меню зберігається в окремому кешованому файлі та підвантажується лише при відкритті відповідного пункту, що додатково зменшує навантаження на сервер і прискорює роботу сайту.
Розширені можливості мобільного меню
У мобільному меню доступні спеціальні посилання з додатковими функціями:
close— кнопка закриття меню;- порожнє значення — роздільник;
filter— блок вибору типу товару для пошукового фільтра;#filter— виклик вікна пошукового фільтра на поточній сторінці;#form-XX— завантаження спливаючої форми за ID;#form-call-XX— спливаюча форма зворотного дзвінка;#ajax_page— завантаження HTML-контенту за відносним шляхом.
Наприклад, щоб додати іконку «Контакти», створіть сторінку contacts і вкажіть шлях /ua/contacts.htm#ajax_page (замініть «ua» на потрібну мову).
Пошуковий фільтр для мобільних користувачів
Ви можете створювати типи товарів і функціональні блоки меню з пошуковими фільтрами, вказуючи сторінки для їх відображення. В налаштуваннях мобільного меню вкажіть ID блоків з ім’ям smart_search_menu, і система автоматично додасть фільтр у мобільне меню.
Наприклад, пункт меню з посиланням /ua/pers_shop/sneakers/#filter при кліку відкриє вікно пошукового фільтра, що зробить пошук товарів зручним на мобільних пристроях.
Активація і відображення мобільного меню
Мобільне меню можна вмикати автоматично при досягненні заданої ширини екрану або завжди показувати для всіх пристроїв. Меню можна прив’язати до кнопки або вивести у вигляді верхньої горизонтальної панелі, що нагадує мобільний застосунок — обирайте варіант, який краще підходить вашому магазину.
Якщо мобільне меню не активовано, за замовчуванням на головному меню замість багатьох кнопок з’являється одна кнопка, що розгортає список — це зручний варіант адаптивності без повноцінного мобільного меню.
Додаткові налаштування і оптимізація
У мобільному меню можна приховувати окремі елементи шаблону — логотип, шапку, пошукове меню та інші — щоб зробити інтерфейс максимально чистим і зручним.
Оптимізація та прискорене завантаження скриптів
Скрипти мобільного меню і інших функцій (керування товарами в картках, кількість при додаванні в кошик, спливаючі вікна та інше) завантажуються лише за потребою, що мінімізує навантаження і пришвидшує роботу сайту.
PageSpeed Insights
Наш реальний показник оптимізації – 99%, 100%, 100%, 100%, що є практично фантастичним результатом.
Адаптивність, мобільна версія і висока швидкість завантаження — ключові фактори успіху інтернет-магазину. Платформа BooStore.pro пропонує сучасні рішення, засновані на блочній верстці та динамічному завантаженні, а мобільне меню дозволяє створити зручний і функціональний інтерфейс для мобільних користувачів.
Використовуйте інструменти BooStore.pro, щоб зробити ваш інтернет-магазин швидким, зручним і привабливим для клієнтів з будь-яких пристроїв.
Повний гайд по оптимізації швидкості для e-commerce