🚀 Як створити надшвидкий інтернет-магазин: архітектурна оптимізація та PageSpeed 99-100
BooStore.pro — надшвидка e-commerce-платформа, в якій швидкість закладена на рівні архітектури: повне кешування, асинхронні процеси, відкладене завантаження JavaScript, мінімізація CSS/JS, відмова від важковагових бібліотек та точкове оновлення даних. Розбираємо ключові рішення, що забезпечують PageSpeed 99-100 навіть для великих каталогів.
📋 Зміст
- Архітектурна оптимізація PageSpeed
- Повністю відкладене завантаження JavaScript
- Розділення скриптів на модулі
- Інтелектуальне мобільне меню
- Кешування і оптимізація зображень
- Максимум HTML і CSS, мінімум JS
- Повне кешування без memcache
- Відмова від важковагових бібліотек
- Об'єднання і мінімізація JS/CSS
- Миттєва фільтрація
- Кешування рекламних і експортних файлів
- Асинхронний імпорт
- Серверне середовище
📈 1. Архітектурна оптимізація PageSpeed, а не формальні правки
В сучасному e-commerce швидкість — це не «оптимізація» і не набір косметичних виправлень, а фундаментальна властивість архітектури. Для великих інтернет-магазинів із сотнями тисяч товарів, складними фільтрами, динамічними блоками та активною взаємодією з користувачем будь-яке помилкове рішення на старті неминуче призводить до деградації швидкості, SEO та загальної стабільності проекту.
В BooStore.pro показники Google PageSpeed — це наслідок правильної архітектури, а не просто набір порад. Типова «оптимізація PageSpeed» обмежується порадами Lighthouse, формальним зменшенням ресурсів та компромісами у функціоналі.
Саме тому в BooStore.pro швидкість була закладена не на рівні формальних рекомендацій Google, а на рівні архітектурного мислення. В результаті платформа демонструє миттєве завантаження сторінок, блискавичну роботу пошуку та фільтрів і стабільність навіть під високим навантаженням.
Наш реальний показник оптимізації – 99%, 100%, 100%, 100%, що є практично фантастичним результатом.
❓ Як нам це вдалося? Ключові рішення
⚡ 2. Повністю відкладене завантаження JavaScript
Базовий принцип платформи: жоден JavaScript не завантажується, доки він не потрібен користувачеві.
🚀 На старті сторінки
Завантажується лише мінімальний базовий службовий скрипт. Він містить перелік можливих взаємодій та правила підвантаження модулів. Відсутні важкі бібліотеки та UI-логіка.
🧩 Інші скрипти
Підвантажуються виключно при взаємодії користувача (клік, відкриття, подія). Після завантаження подія автоматично активується повторно — дія не втрачається.
🔄 Як це працює на практиці
- користувач натискає кнопку або елемент інтерфейсу
- базовий скрипт перевіряє, чи завантажено потрібний модуль
- якщо ні — модуль підвантажується у фоні
- дія не повторюється після завершення завантаження — після підвантаження модуля всі наступні взаємодії автоматично обробляються правильною логікою нового скрипта
Цей підхід використовується для: модальних вікон, UI-елементів, навігації, фільтрів, допоміжних компонентів.
Приклад реалізації — https://boostore.pro/ua/scripts_guide.html
📦 3. Всі функціональні скрипти розділені на модулі
Кожна функція — окремий невеликий скрипт:
📋 Перелік модулів
- додавання в кошик
- порівняння товарів
- випадні списки меню
- слайди з товарами
- модальні вікна
- кнопка «Показати ще»
🔧 Принцип роботи
Кожен скрипт підвантажується тільки при взаємодії, кешується окремо, не навантажує сторінку заздалегідь. Забезпечує миттєву реакцію інтерфейсу та економію ресурсів.
📌 Додаткове розділення бібліотек
Навіть якщо завантажена бібліотека для слайдера, вона може бути розділена на службові файли:
- Базовий скрипт — ініціалізація списку товарів та його завантаження
- Додаткові модулі підключаються окремо: скролінг мишею на десктопі, горизонтальна прокрутка на мобільних, автопрокрутка слайдів
- Кожен файл підвантажується тільки коли він активний в налаштуваннях
📱 4. Інтелектуальне мобільне меню без зайвого навантаження
Мобільне меню — один із найважчих компонентів будь-якого сайту. В BooStore.pro воно:
- Не завантажується, якщо ширина екрана більша за задану — або якщо це не мобільний пристрій
- Не ініціалізується, доки користувач не взаємодіє з меню
- Підвантажується тільки при фактичній необхідності
🔀 Розділення логіки, структури та контенту
🧠 Логіка
Зберігається в окремому кешованому JavaScript-блоці
📄 Структура
Пункти та вкладені елементи не включені в базовий скрипт — не завантажуються заздалегідь
📦 Контент
Підвантажується динамічно при відкритті, кожен елемент кешується з власною датою оновлення
📱 Адаптивність
Скрипт ініціалізується тільки коли реально потрібен мобільний інтерфейс
Приклади:
🖼️ 5. Кешування та оптимізація зображень
В BooStore.pro зображення оптимізуються на рівні архітектури відображення:
- в списках товарів не завантажуються оригінали (2000×2000 px)
- для кожного товару автоматично генеруються зменшені прев'ю під потрібний розмір
- кожне прев'ю кешується окремо і не перестворюється без необхідності
- при зміні зображення оновлюється тільки відповідна версія
🔄 WebP
Автоматична конвертація в сучасний формат WebP. Стиснення без помітної втрати якості.
⚡ Результат
Списки товарів завантажуються миттєво навіть при великій кількості позицій, без зайвого трафіку та з максимальним PageSpeed.
💻 6. Максимальне використання HTML і CSS
Інтерактивні елементи реалізовані переважно через стандартні HTML і CSS, без зайвих скриптів:
📑 Вкладки (tabs)
Через <label> + <input type="radio"> — миттєве перемикання без JS
🔽 Акордеони
Через <details> та <summary> — нативними засобами браузера
🔍 Фільтри та меню
CSS-селектори (:checked, :target) для відображення/приховування без JS
📐 Верстка
Flex та Grid замість HTML-таблиць — гнучко, адаптивно, швидко
Приклади — демонстрація HTML-віджетів →
⚡ 7. Повне кешування без memcache
Один із ключових принципів BooStore.pro — повна відмова від memcache.
🔴 Проблеми Memcache
- жорстко обмежений RAM
- нестабільний при великих обсягах даних
- погано масштабується для великих e-commerce
🟢 Рішення BooStore.pro
- кешується абсолютно все: HTML, JS, CSS, меню, UI, контент
- кеш не залежить від оперативної пам'яті
- оновлюється тільки при фактичних змінах
🗓️ Розумне очищення кешу через дати змін
В BooStore.pro використовується точкова логіка оновлення:
- кожен тип даних має власну дату оновлення
- кожен кеш-блок містить дату створення
- при зверненні дати порівнюються — якщо змін немає, використовується готова версія
Це дозволяє уникнути зайвих перерахунків і підтримувати миттєву швидкість навіть при сотнях тисяч товарів.
📦 8. Відмова від важковагових бібліотек
Принциповий момент архітектури BooStore.pro — відмова від важковагових бібліотек на зразок jQuery UI.
🔴 Чому це погано
- великий розмір
- надлишковий функціонал
- погіршують PageSpeed
- завантажуються навіть коли не потрібні
🟢 Підхід BooStore.pro
- власні самописні бібліотеки
- мінімальні зовнішні рішення під задачі
- кешуються та підвантажуються при взаємодії
🛠️ 9. Об'єднання та мінімізація JS і CSS
⚡ JavaScript
Більшість бібліотек об'єднані в один базовий службовий файл. Файл кешується, має часову мітку, змінюється рідко. Навіть десятки бібліотек фізично зібрані в один файл — браузер завантажує його один раз.
🎨 CSS
CSS-файли мінімізуються: видаляються перенесення рядків та зайві пробіли. Кешуються з довгим TTL. Оновлюються тільки при реальних змінах.
🧩 Кешування користувацьких JS і CSS
BooStore.pro дозволяє підключати власні скрипти та стилі через службові блоки:
- кожен користувацький файл має часову мітку
- мітка змінюється тільки при редагуванні
- браузер завантажує тільки актуальну версію
- кеш не очищається без необхідності
🔍 10. Миттєва фільтрація при сотнях тисяч товарів
Фільтрація — найскладніший сценарій для e-commerce. В BooStore.pro:
- перший запит може бути трохи важчим
- результат одразу кешується
- наступні запити виконуються за долі секунди
Навіть при великих каталогах, складних логічних умовах та високому навантаженні.
Приклад миттєвого завантаження 5000 товарів через пошуковий фільтр — 🔗 Дивитись приклад →
📁 11. Кешування рекламних та експортних файлів
В BooStore.pro кешуються всі рекламні та експортні дані: Google Merchant, Rozetka, Prom, Hotline, Epicentrk, Sitemap та інші зовнішні канали.
- Для кожного каналу створюється окремий кешований файл
- Файли оновлюються тільки при реальних змінах контенту на сайті (товари, ціни, наявність)
- Це дозволяє уникнути перевантаження сервера при генерації великих фід-файлів, забезпечувати актуальні дані для всіх рекламних платформ і підтримувати високу швидкість роботи сайту навіть при великій кількості експортів
📥 12. Асинхронний імпорт без блокування сайту
Імпорт — одна з найнебезпечніших операцій для стабільності магазину. Як це реалізовано в BooStore.pro:
- імпорт запускається як серверний асинхронний процес
- сайт залишається доступним для відвідувачів та власника
- в браузері власника відображається детальний статус
- повторний імпорт неможливий, доки не завершено попередній
🖥️ 13. Серверне середовище як основа швидкості
Для максимального результату BooStore.pro рекомендує:
- LiteSpeed — один із найшвидших сучасних веб-серверів
- грамотне серверне кешування
- оптимальні HTTP-налаштування (HTTP/2 тощо)
⏱️ Контроль актуальності через часові мітки
Іноді сервер може віддавати стару версію файлу через кешування. В BooStore.pro це вирішується:
- до запиту на файл додається мітка останньої зміни
- сервер повертає актуальну версію, навіть якщо стара залишилась в кеші
- браузер завжди отримує останні оновлені скрипти, стилі та контент
🌎 BooStore.pro — одна з найшвидших e-commerce-платформ у світі. Створена для великих каталогів, високого навантаження, SEO та масштабування. Багато механізмів — унікальні, продумані та реалізовані командою професіоналів з глибоким розумінням e-commerce та високонавантажених систем. Швидше — просто не буває.