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

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

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

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

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

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

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

• порадами Lighthouse
• формальним зменшенням ресурсів
• компромісами у функціональності

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

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

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

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

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

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

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

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

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

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

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

• модальних вікон
• UI-елементів
• навігації
• фільтрів
• допоміжних інтерфейсних компонентів

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

• мінімальний First Contentful Paint
• швидкий Time to Interactive
• відмінні показники Google PageSpeed без обмеження функціоналу

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

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

• додавання товару в корзину
• порівняння товарів
• завантаження випадаючих списків меню
• показ слайдів із товарами
• модальні вікна
• кнопки зміни кількості додаваємих у кошик товарів
• кнопка «Показати ще» та інші інтерактивні елементи

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

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

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

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

• Базовий скрипт відповідає за ініціалізацію списку товарів і його завантаження **
• Додаткові модулі або бібліотеки підключаються окремо лише за потреби:
• скролінг товарів мишею на десктопі
• горизонтальна прокрутка на мобільному пристрої
• спеціальні ефекти або автоперемотка слайдів
• Кожен додатковий файл підвантажується тільки тоді, коли він активний у налаштуваннях для конкретного слайду
• не навантажує сторінку зайвими ресурсами
• кешується окремо та оновлюється лише при зміні

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

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

• перший набір товарів відображається як реальний HTML-контент на сторінці
• тільки після цього підвантажується JavaScript-бібліотека, яка забезпечує:
• кнопку «Показати ще»
• навігацію між слайдами товарів
• інші динамічні взаємодії

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Вкладки (tabs) — через <label> + <input type="radio">, що дозволяє миттєво перемикати вкладки без підвантаження JavaScript.
• Розкривні списки і акордеони — через <details> і <summary>, що забезпечує відкриття та закриття блоків нативними засобами браузера.
• Прості фільтри, меню та інші блоки — використовують CSS-селектори (:checked, :target) для відображення або приховання контенту без JS.

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

• Швидкий First Contentful Paint (FCP) і оптимізація LCP;
• Зменшення обсягу JavaScript, що підвантажується;
• Повна SEO-дружність — пошукові системи бачать весь контент без додаткових запитів;
• Стабільна робота навіть при високому навантаженні на сайт.

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

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

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

• Гнучко і адаптивно розташовувати елементи;
• Прискорити завантаження та рендеринг сторінок;
• Покращити SEO і відображення на мобільних пристроях;
• Мінімізувати зайві DOM-елементи та підвищити продуктивність.

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

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

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

Memcache:

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

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

• кешується абсолютно все: HTML-блоки, JavaScript, CSS, меню, UI-компоненти, контентні структури і тексти
• кеш не залежить від оперативної пам’яті
• зберігається у вигляді окремих логічних блоків
• оновлюється лише за фактом змін

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

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

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

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

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

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

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

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

Підхід Hotlist.biz:

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

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

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

JavaScript

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

• вони фізично зібрані в один файл
• браузер завантажує його один раз
• повторних запитів немає

CSS

• CSS-файли мінімізуються
• видаляються переноси рядків і зайві пробіли
• кешуються з довгим TTL
• оновлюються лише при реальних змінах

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

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

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

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

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

У Hotlist.biz:

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

Навіть при

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

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

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

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

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

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

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

Як це реалізовано в Hotlist.biz:

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

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

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

• LiteSpeed як один із найшвидших сучасних веб-серверів
• грамотне серверне кешування
• оптимальні HTTP-налаштування (HTTP/2 і т.д.)
• багато детальних рекомендацій щодо конфігурації серверів можна знайти у відкритих джерелах та методом тестів

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

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

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

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

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

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

• великих каталогів
• високих навантажень
• SEO
• масштабування
• стабільної роботи

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

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