Надшвидка архітектурна для e-commerce, або як зробити надшвидкий магазин на прикладі BooStore.pro

🚀 Як зробити надшвидкий магазин - на прикладі платформи BooStore.pro

BooStore.pro — це надшвидка e-commerce-платформа для створення інтернет-магазинів із великим функціоналом, у якій швидкість закладена на рівні архітектури. Платформа використовує повне кешування, асинхронні процеси, відкладене завантаження JavaScript, мінімізацію та об’єднання CSS і JS, відмову від важковагових бібліотек і точкове оновлення даних за часовими мітками. Такий підхід забезпечує миттєве завантаження сторінок, стабільну роботу під високим навантаженням, відмінні показники Google PageSpeed і максимальну ефективність SEO навіть для великих e-commerce-проєктів.

У сучасному e-commerce швидкість — це не «оптимізація» і не набір косметичних правок, а фундаментальна властивість архітектури. Для великих інтернет-магазинів із сотнями тисяч товарів, складними фільтрами, динамічними блоками та активною взаємодією з користувачем будь-яке помилкове рішення на старті неминуче призводить до деградації швидкості, SEO та загальної стабільності проєкту.

Саме тому у BooStore.pro швидкість була закладена не на рівні формальних рекомендацій Google, а на рівні архітектурного мислення. У результаті платформа демонструє миттєве завантаження сторінок, блискавичну роботу пошуку та фільтрів і стабільність навіть під високими навантаженнями. Розглянемо деякі рішення.

📈 Архітектурна оптимізація Google PageSpeed, а не формальні правки

У BooStore.pro показники Google PageSpeed — це наслідок правильної архітектури, а не просто набір порад.
Типова «оптимізація PageSpeed» обмежується:

• порадами Lighthouse

• формальним зменшенням ресурсів

• компромісами у функціональності

Наш реальний показник оптимізації – 99%, 100%, 100%, 100%, що є практично фантастичним результатом.

❓ Як нам це вдалося? Ключові рішення

⚡ Повністю відкладене завантаження JavaScript

Базовий принцип платформи: ніякий JavaScript не завантажується, поки він не потрібен користувачу.

На старті сторінки:

• завантажується лише мінімальний базовий службовий скрипт

• він містить перелік можливих взаємодій та правила підвантаження модулів

• відсутні важкі бібліотеки та UI-логіка

Усі інші скрипти:

• підвантажуються виключно при взаємодії: при першій дії користувача (клік, відкриття, ініціація події) відправляється запит на завантаження відповідного скрипта; після завершення завантаження подія автоматично активується повторно і виконується потрібна логіка без втрати дії

• кешуються: кешування відбувається на рівні файлів; скрипт оновлюється лише у випадку, якщо дата його зміни новіша за дату останнього кешованого файлу

• повторно не завантажуються без потреби: використовується система глобальних змінних та прапорів стану, які фіксують факт завантаження скрипта; якщо модуль уже присутній у пам’яті, повторне завантаження і ініціалізація не виконуються — одразу запускається потрібна фінальна дія скрипта

Як це працює на практиці

• користувач натискає кнопку або елемент інтерфейсу

• базовий скрипт перевіряє, чи завантажений потрібний модуль

• якщо ні — модуль підвантажується у фоні

• дія не повторюється після завершення завантаження — після підвантаження модуля всі подальші взаємодії автоматично обробляються правильною логікою нового скрипта

Цей підхід використовується для:

• модальних вікон

• UI-елементів

• навігації

• фільтрів

• допоміжних інтерфейсних компонентів

У результаті:

• мінімальний First Contentful Paint

• швидкий Time to Interactive

• відмінні показники Google PageSpeed без обмеження функціоналу

Приклад використання відкладених завантажень скриптів - https://boostore.pro/ua/scripts_guide.html

📦 Усі функціональні скрипти розділені на окремі невеликі модулі

• додавання товару в корзину

• порівняння товарів

• завантаження випадаючих списків меню

• показ слайдів із товарами

• модальні вікна

• кнопки зміни кількості додаваємих у кошик товарів

• кнопка «Показати ще» та інші інтерактивні елементи

Кожен із цих скриптів:

• підвантажується лише при взаємодії користувача

• кешується окремо

• не навантажує сторінку заздалегідь

• забезпечує миттєву реакцію інтерфейсу та економію ресурсів

📌 Важливо уточнити і додаткове розділення завантажуваних бібліотек

Навіть якщо завантажено певну бібліотеку, наприклад для показу списку з товарами у вигляді віджету зі слайдами, вона може бути розділена на кілька додаткових служебних файлів:

• Базовий скрипт відповідає за ініціалізацію списку товарів і його завантаження **

• Додаткові модулі або бібліотеки підключаються окремо лише за потреби:

  • скролінг товарів мишею на десктопі

  • горизонтальна прокрутка на мобільному пристрої

  • спеціальні ефекти або автоперемотка слайдів

• Кожен додатковий файл підвантажується тільки тоді, коли він активний у налаштуваннях для конкретного слайду

• не навантажує сторінку зайвими ресурсами

• кешується окремо та оновлюється лише при зміні

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

** Доречі, з точки зору SEO, завантаження всього каталогу виключно через скрипти є неправильним, адже пошукові системи можуть не бачити контент. У BooStore.pro це враховано:

• перший набір товарів відображається як реальний HTML-контент на сторінці

• тільки після цього підвантажується JavaScript-бібліотека, яка забезпечує:

  • кнопку «Показати ще»

  • навігацію між слайдами товарів

  • інші динамічні взаємодії

Такий підхід дозволяє поєднувати SEO-дружність сайту та швидку, інтерактивну роботу користувацького інтерфейсу.

📱 Інтелектуальне мобільне меню без зайвого навантаження

Мобільне меню — один із найважчих компонентів будь-якого сайту. У BooStore.pro воно:

• не завантажується, якщо ширина екрану більша за задану — або якщо це не мобільний пристрій; тобто скрипт ініціалізується тільки тоді, коли дійсно потрібен мобільний інтерфейс, а зайве навантаження виключене (параметр можна вказати при створенні мобільного меню у налаштуваннях)

• не ініціалізується, доки користувач не взаємодіє з меню

• підвантажується лише за фактом реальної потреби

Розділення логіки, структури та контенту:

• логіка меню зберігається в окремому кешованому JavaScript-блоці

• пункти меню та вкладені структури зберігаються окремо — самі елементи відкритого мобільного меню не включені у базовий скрипт і не завантажуються заздалегідь

• контент підвантажується динамічно при відкритті

• кожен елемент кешується, має власну дату оновлення, не перевантажує систему навіть при складній навігації

Приклад постійної роботи мобильного меню - https://mirsemyan.com.ua/ua/

Приклад завантаження мобільного меню лише на екрані менше 900px та лише на мобільних пристоях - https://btq.in.ua/ua/

🖼️ Кешування та оптимізація зображень у списках товарів

У BooStore.pro зображення оптимізуються на рівні архітектури відображення:

• у списках товарів не завантажуються оригінальні великі зображення (наприклад, 2000×2000 px)

• для кожного товару автоматично генеруються малі оптимізовані прев’ю («зменшені-картинки») саме під потрібний розмір списку

• кожне прев’ю кешується окремо і повторно не генерується без необхідності

• при зміні зображення оновлюється лише відповідна версія за часовою міткою

Додатково платформа підтримує:

• автоматичну конвертацію зображень у сучасний формат WebP

• стиснення без помітної втрати якості

• мінімальний розмір файлів при збереженні високої візуальної чіткості

У результаті списки товарів завантажуються миттєво навіть при великій кількості позицій, без зайвого трафіку та з максимальними показниками Google PageSpeed.

💻 Максимальне використання вбудованих засобів HTML і CSS

На платформі BooStore.pro інтерактивні елементи реалізовані переважно через стандартні HTML і CSS, без зайвих скриптів, що значно прискорює завантаження та рендеринг:

• Вкладки (tabs) — через <label> + <input type="radio">, що дозволяє миттєво перемикати вкладки без підвантаження JavaScript.

• Розкривні списки і акордеони — через <details> і <summary>, що забезпечує відкриття та закриття блоків нативними засобами браузера.

• Прості фільтри, меню та інші блоки — використовують CSS-селектори (:checked, :target) для відображення або приховання контенту без JS.

Переваги такого підходу:

• Швидкий First Contentful Paint (FCP) і оптимізація LCP;

• Зменшення обсягу JavaScript, що підвантажується;

• Повна SEO-дружність — пошукові системи бачать весь контент без додаткових запитів;

• Стабільна робота навіть при високому навантаженні на сайт.

Приклади - https://boostore.pro/ua/page.php?p=submit_catalog_page&subpage&html_widget

🧩 Для максимальної швидкості та продуктивності сайту

Рекомендується не використовувати HTML-таблиці для розташування контенту. Замість цього варто застосовувати CSS Flex та Grid, що дозволяє:

• Гнучко і адаптивно розташовувати елементи;

• Прискорити завантаження та рендеринг сторінок;

• Покращити SEO і відображення на мобільних пристроях;

• Мінімізувати зайві DOM-елементи та підвищити продуктивність.

Ця практика допомагає створювати легкі та швидкі сайти без додаткових скриптів для позиціонування контенту.

⚡ Повне кешування без memcache та обмежень оперативної пам’яті

Один із ключових принципів BooStore.pro — повна відмова від memcache.

Memcache:

• жорстко обмежений RAM

• нестабільний при великих об’ємах даних

• погано масштабується для великих e-commerce-проєктів

Альтернативна модель кешування BooStore.pro:

• кешується абсолютно все: HTML-блоки, JavaScript, CSS, меню, UI-компоненти, контентні структури і тексти

• кеш не залежить від оперативної пам’яті

• зберігається у вигляді окремих логічних блоків

• оновлюється лише за фактом змін

🗓️ Розумна очистка кешу через дати змін

Глобальна очистка кешу — одна з найбільших помилок у великих магазинах. У BooStore.pro використовується точкова логіка оновлення:

• кожен тип даних має власну дату оновлення

• кожен кеш-блок містить дату створення

• при зверненні ці дати порівнюються

• Якщо дата змін новіша — кеш перебудовується. Якщо ні — використовується готова версія.

Це дозволяє уникнути зайвих перерахунків, зберегти стабільність та підтримувати миттєву швидкість навіть при сотнях тисяч товарів.

📦 Відмова від великовагових бібліотек

Принциповий момент архітектури BooStore.pro — відмова від важковагових бібліотек, таких як jQuery UI.

Чому це важливо?

Такі бібліотеки:

• мають великий розмір

• містять надлишковий функціонал

• погіршують PageSpeed

• завантажуються навіть тоді, коли не використовуються

Підхід BooStore.pro:

• використовуються власні самописні бібліотеки

• або мінімальні зовнішні рішення, підібрані під конкретні задачі

• кожна бібліотека

  • кешується

  • підвантажується лише при взаємодії

  • не впливає на стартове завантаження сторінки

🛠️ Об’єднання та мінімізація JavaScript і CSS

Для додаткового прискорення BooStore.pro використовує агресивну оптимізацію ресурсів.

JavaScript

• більшість бібліотек об’єднані в один базовий службовий файл

• файл кешується

• має часову мітку

• змінюється рідко

навіть якщо платформа використовує десятки бібліотек:

• вони фізично зібрані в один файл

• браузер завантажує його один раз

• повторних запитів немає

CSS

• CSS-файли мінімізуються

• видаляються переноси рядків і зайві пробіли

• кешуються з довгим TTL

• оновлюються лише при реальних змінах

🧩 Кешування користувацьких JavaScript і CSS

BooStore.pro дозволяє підключати власні JavaScript і CSS через службові блоки платформи.

• кожен користувацький файл має власну часову мітку

• мітка змінюється тільки при редагуванні

• браузер завантажує лише актуальну версію

• кеш не очищується без потреби

• Логіка ідентична кешуванню товарів або контентних блоків.

⚡ Миттєва фільтрація при сотнях тисяч товарів

Фільтрація — найскладніший сценарій для e-commerce.

У BooStore.pro:

• перший запит може бути трохи важчим

• результат одразу кешується

• наступні запити виконуються за долі секунди

Навіть при

• великих каталогах

• складних логічних умовах

• високому навантаженні

Приклад миттєвого завантаження 5000 товарів знайдених пошуковим фільтром за характеристиками - https://mirsemyan.com.ua/ua/pers_shop/semena_main_ua/...

📁 Кешування рекламних та експортних файлів

У BooStore.pro кешуються всі рекламні та експортні дані: Google Merchant, Rozetka, Prom, Hotline, Epicentrk, Sitemap та інші зовнішні канали.

• Для кожного каналу створюється окремий кешований файл

• Файли оновлюються лише при реальних змінах контенту на сайті (товари, ціни, наявність)

• Це дозволяє

  • уникнути перевантаження сервера при генерації великих фід-файлів

  • забезпечити актуальні дані для всіх рекламних платформ

  • підтримувати високу швидкість роботи сайту навіть при великій кількості експортів

⚡ Асинхронний імпорт без блокування сайту

Імпорт — одна з найбільш небезпечних операцій для стабільності.

Як це реалізовано в BooStore.pro:

• імпорт запускається як серверний асинхронний процес

• сайт залишається доступним для відвідувачів та власнику сайту

• у браузері власника відображається детальний статус виконання

• Створюється службовий кешований файл процесу, у якому фіксується:

  • загальна кількість товарів

  • кількість імпортованих позицій

  • ліміти виконання

  • статус кожного кроку

• Якщо файл перестає оновлюватися — система визначає завершення або помилку.

• Повторний імпорт неможливий, поки не завершено попередній — це захищає сервер від колосального навантаження

🖥️ Серверне оточення як основа швидкості

Для максимального результату BooStore.pro рекомендує:

• LiteSpeed як один із найшвидших сучасних веб-серверів

• грамотне серверне кешування

• оптимальні HTTP-налаштування (HTTP/2 і т.д.)

• багато детальних рекомендацій щодо конфігурації серверів можна знайти у відкритих джерелах та методом тестів

⏱️ Контроль актуальності кешованих файлів через часові мітки

Єдиний нюанс такого підходу: іноді сервер може віддавати попередню версію файлу, який вже був змінений, через кешування на рівні веб-сервера.

У BooStore.pro цю проблему вирішено за допомогою часової мітки:

• до запиту на файл додається мітка останньої зміни

• сервер повертає актуальну версію файлу, навіть якщо стара залишилася в кеші

• це гарантує, що браузер завжди отримує останні оновлені скрипти, стилі та контент

• Такий підхід дозволяє зберігати переваги кешування без втрати актуальності даних.

🌎 BooStore.pro — одна з найшвидших e-commerce-платформа у світі

Створена для:

• великих каталогів

• високих навантажень

• SEO

• масштабування

• стабільної роботи

Багато механізмів платформи — унікальні, продумані та реалізовані командою професіоналів з глибоким розумінням e-commerce та високонавантажених систем.

Швидше — просто не буває. Деякі інші рекомендації та статті ви можете знайти у блозі платформи https://boostore.pro/ua/blog/sitecreate_ua/

Огляд можливостей BooStore, а також демонстрація редактора