Сверхбыстрая архитектура для e-commerce, или как создать сверхбыстрый сайт на примере Hotlist.biz

❓ Как нам это удалось? Ключевые решения

⚡ Полностью отложенная загрузка JavaScript

Базовый принцип платформы: никакой JavaScript не загружается, пока он не нужен пользователю.

На старте страницы:

1. загружается только минимальный базовый служебный скрипт
2. он содержит перечень возможных взаимодействий и правила подгрузки модулей
3. отсутствуют тяжелые библиотеки и UI-логика

Все остальные скрипты:

1. подгружаются исключительно при взаимодействии: при первом действии пользователя (клик, открытие, инициирование события) отправляется запрос на загрузку соответствующего скрипта; после завершения загрузки событие автоматически активируется повторно и выполняется нужная логика без потери действия
2. кешируются: кеширование происходит на уровне файлов; скрипт обновляется только если дата его изменения новее даты последнего кешированного файла
3. не загружаются повторно без необходимости: используется система глобальных переменных и флагов состояния, которые фиксируют факт загрузки скрипта; если модуль уже присутствует в памяти, повторная загрузка и инициализация не выполняются — сразу запускается нужное финальное действие скрипта

Как это работает на практике

1. пользователь нажимает кнопку или элемент интерфейса
2. базовый скрипт проверяет, загружен ли нужный модуль
3. если нет — модуль подгружается в фоне
4. действие не повторяется после завершения загрузки — после подгрузки модуля все последующие взаимодействия автоматически обрабатываются правильной логикой нового скрипта

Этот подход используется для:

1. модальных окон
2. UI-элементов
3. навигации
4. фильтров
5. вспомогательных интерфейсных компонентов

В результате:

1. минимальный First Contentful Paint
2. быстрый Time to Interactive
3. отличные показатели Google PageSpeed без ограничения функционала

Пример использования отложенной загрузки скриптов — https://hotlist.biz/ru/scripts_guide.html

📦 Все функциональные скрипты разделены на отдельные небольшие модули

1. добавление товара в корзину
2. сравнение товаров
3. загрузка выпадающих списков меню
4. показ слайдов с товарами
5. модальные окна
6. кнопки изменения количества добавляемых в корзину товаров
7. кнопка «Показать еще» и другие интерактивные элементы

Каждый из этих скриптов:

1. подгружается только при взаимодействии пользователя
2. кешируется отдельно
3. не нагружает страницу заранее
4. обеспечивает мгновенную реакцию интерфейса и экономию ресурсов

📌 Важно уточнить дополнительное разделение загружаемых библиотек

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

1. Базовый скрипт отвечает за инициализацию списка товаров и его загрузку
2. Дополнительные модули или библиотеки подключаются отдельно только при необходимости:
3. скроллинг товаров мышью на десктопе
4. горизонтальная прокрутка на мобильном устройстве
5. специальные эффекты или автопрокрутка слайдов
6. Каждый дополнительный файл подгружается только тогда, когда он активен в настройках для конкретного слайда
7. не нагружает страницу лишними ресурсами
8. кешируется отдельно и обновляется только при изменении

Этот подход позволяет сохранять максимально быструю загрузку сайта, даже если на странице используются сложные интерактивные элементы и многочисленные библиотеки.

SEO-аспект: загрузка всего каталога исключительно через скрипты является неверной, так как поисковые системы могут не видеть контент. В Hotlist.biz это учтено:

1. первый набор товаров отображается как реальный HTML-контент на странице
2. только после этого подгружается JavaScript-библиотека, которая обеспечивает:
3. кнопку «Показать еще»
4. навигацию между слайдами товаров
5. другие динамические взаимодействия

Такой подход позволяет сочетать SEO-дружелюбность сайта и быструю интерактивную работу пользовательского интерфейса.

📱 Интеллектуальное мобильное меню без лишней нагрузки

Мобильное меню — один из самых тяжёлых компонентов любого сайта. В Hotlist.biz оно:

1. не загружается, если ширина экрана больше заданной — или если это не мобильное устройство; скрипт инициализируется только тогда, когда реально нужен мобильный интерфейс, лишняя нагрузка исключена (параметр можно указать при создании мобильного меню в настройках)
2. не инициализируется, пока пользователь не взаимодействует с меню
3. подгружается только при фактической необходимости

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

1. логика меню хранится в отдельном кешированном JavaScript-блоке
2. пункты меню и вложенные структуры хранятся отдельно — сами элементы открытого мобильного меню не включены в базовый скрипт и не загружаются заранее
3. контент подгружается динамически при открытии
4. каждый элемент кешируется, имеет собственную дату обновления, не перегружает систему даже при сложной навигации

Пример постоянной работы мобильного меню — https://mirsemyan.com.ua/ru/

Пример загрузки мобильного меню только на экране меньше 900px и только на мобильных устройствах — https://btq.in.ua/ru/

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

В Hotlist.biz изображения оптимизируются на уровне архитектуры отображения:

1. в списках товаров не загружаются оригинальные большие изображения (например, 2000×2000 px)
2. для каждого товара автоматически генерируются маленькие оптимизированные превью («уменьшенные картинки») под нужный размер списка
3. каждое превью кешируется отдельно и повторно не генерируется без необходимости
4. при изменении изображения обновляется только соответствующая версия по временной метке

Дополнительно платформа поддерживает:

1. автоматическую конвертацию изображений в современный формат WebP
2. сжатие без заметной потери качества
3. минимальный размер файлов при сохранении высокой визуальной четкости

В результате списки товаров загружаются мгновенно даже при большом количестве позиций, без лишнего трафика и с максимальными показателями Google PageSpeed.

💻 Максимальное использование встроенных средств HTML и CSS

На платформе Hotlist.biz интерактивные элементы реализованы преимущественно через стандартные HTML и CSS, без лишних скриптов, что значительно ускоряет загрузку и рендеринг:

1. Вкладки (tabs) — через + , что позволяет мгновенно переключать вкладки без подгрузки JavaScript.
2. Раскрывающиеся списки и аккордеоны — через
   и 

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

Преимущества такого подхода:

1. Быстрый First Contentful Paint (FCP) и оптимизация LCP;
2. Снижение объёма JavaScript, который подгружается;
3. Полная SEO-дружелюбность — поисковые системы видят весь контент без дополнительных запросов;
4. Стабильная работа даже при высокой нагрузке на сайт.

Примеры — https://hotlist.biz/ru/page.php?p=submit_catalog_page&subpage&html_widget

🧩 Для максимальной скорости и производительности сайта

Рекомендуется не использовать HTML-таблицы для расположения контента. Вместо этого стоит применять CSS Flex и Grid, что позволяет:

1. Гибко и адаптивно располагать элементы;
2. Ускорить загрузку и рендеринг страниц;
3. Улучшить SEO и отображение на мобильных устройствах;
4. Минимизировать лишние DOM-элементы и повысить производительность.

Эта практика помогает создавать лёгкие и быстрые сайты без дополнительных скриптов для позиционирования контента.

⚡ Полное кеширование без memcache и ограничений оперативной памяти

Один из ключевых принципов Hotlist.biz — полный отказ от memcache.

Memcache:

1. жёстко ограничен RAM
2. нестабилен при больших объёмах данных
3. плохо масштабируется для крупных e-commerce-проектов

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

1. кешируется абсолютно всё: HTML-блоки, JavaScript, CSS, меню, UI-компоненты, контентные структуры и тексты
2. кеш не зависит от оперативной памяти
3. сохраняется в виде отдельных логических блоков
4. обновляется только при фактических изменениях

🗓️ Умная очистка кеша через даты изменений

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

1. каждый тип данных имеет собственную дату обновления
2. каждый кеш-блок содержит дату создания
3. при обращении эти даты сравниваются
4. Если дата изменений новее — кеш перестраивается. Если нет — используется готовая версия.

Это позволяет избежать лишних перерасчётов, сохранить стабильность и поддерживать мгновенную скорость даже при сотнях тысяч товаров.

📦 Отказ от тяжеловесных библиотек

Принципиальный момент архитектуры Hotlist.biz — отказ от тяжеловесных библиотек, таких как jQuery UI.

Почему это важно?

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

1. имеют большой размер
2. содержат избыточный функционал
3. ухудшают PageSpeed
4. загружаются даже тогда, когда не используются

Подход Hotlist.biz:

1. используются собственные самописные библиотеки
2. или минимальные внешние решения, подобранные под конкретные задачи
3. каждая библиотекакешируетсяподгружается только при взаимодействиине влияет на стартовую загрузку страницы
4. кешируется
5. подгружается только при взаимодействии
6. не влияет на стартовую загрузку страницы

🛠️ Объединение и минимизация JavaScript и CSS

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

JavaScript

1. большинство библиотек объединены в один базовый служебный файл
2. файл кешируется
3. имеет временную метку
4. изменяется редко

даже если платформа использует десятки библиотек:

1. они физически собраны в один файл
2. браузер загружает его один раз
3. повторных запросов нет

CSS

1. CSS-файлы минимизируются
2. удаляются переносы строк и лишние пробелы
3. кешируются с долгим TTL
4. обновляются только при реальных изменениях

🧩 Кеширование пользовательских JavaScript и CSS

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

1. каждый пользовательский файл имеет собственную временную метку
2. метка меняется только при редактировании
3. браузер загружает только актуальную версию
4. кеш не очищается без необходимости
5. Логика идентична кешированию товаров или контентных блоков.

⚡ Мгновенная фильтрация при сотнях тысяч товаров

Фильтрация — самый сложный сценарий для e-commerce.

В Hotlist.biz:

1. первый запрос может быть немного тяжелее
2. результат сразу кешируется
3. следующие запросы выполняются за доли секунды

Даже при

1. больших каталогах
2. сложных логических условиях
3. высокой нагрузке

Пример мгновенной загрузки 5000 товаров, найденных поисковым фильтром по характеристикам — https://mirsemyan.com.ua/ru/pers_shop/semena_main_ua/...

📁 Кеширование рекламных и экспортных файлов

В Hotlist.biz кешируются все рекламные и экспортные данные: Google Merchant, Rozetka, Prom, Hotline, Epicentrk, Sitemap и другие внешние каналы.

1. Для каждого канала создаётся отдельный кешированный файл
2. Файлы обновляются только при реальных изменениях контента на сайте (товары, цены, наличие)
3. Это позволяетизбежать перегрузки сервера при генерации больших фид-файловобеспечить актуальные данные для всех рекламных платформподдерживать высокую скорость работы сайта даже при большом количестве экспортов
4. избежать перегрузки сервера при генерации больших фид-файлов
5. обеспечить актуальные данные для всех рекламных платформ
6. поддерживать высокую скорость работы сайта даже при большом количестве экспортов

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

Импорт — одна из самых опасных операций для стабильности.

Как это реализовано в Hotlist.biz:

1. импорт запускается как серверный асинхронный процесс
2. сайт остаётся доступным для посетителей и владельца
3. в браузере владельца отображается детальный статус выполнения
4. Создаётся служебный кешированный файл процесса, в котором фиксируется:общее количество товаровколичество импортированных позицийлимиты выполнениястатус каждого шага
5. общее количество товаров
6. количество импортированных позиций
7. лимиты выполнения
8. статус каждого шага
9. Если файл перестаёт обновляться — система определяет завершение или ошибку.
10. Повторный импорт невозможен, пока не завершён предыдущий — это защищает сервер от колоссальной нагрузки

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

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

1. LiteSpeed как один из самых быстрых современных веб-серверов
2. грамотное серверное кеширование
3. оптимальные HTTP-настройки (HTTP/2 и т.д.)
4. много детальных рекомендаций по конфигурации серверов можно найти в открытых источниках и методом тестов

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

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

В Hotlist.biz эту проблему решают с помощью временной метки:

1. к запросу на файл добавляется метка последнего изменения
2. сервер возвращает актуальную версию файла, даже если старая осталась в кеше
3. это гарантирует, что браузер всегда получает последние обновлённые скрипты, стили и контент
4. Такой подход позволяет сохранять преимущества кеширования без потери актуальности данных.

🌎 Hotlist.biz — одна из самых быстрых e-commerce-платформ в мире

Создана для:

1. больших каталогов
2. высокой нагрузки
3. SEO
4. масштабирования
5. стабильной работы

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

Быстрее — просто не бывает. Другие рекомендации и статьи можно найти в блоге платформы https://hotlist.biz/ru/blog/sitecreate_ru/

Сверхбыстрая архитектура для e-commerce, или как создать сверхбыстрый сайт на примере Hotlist.biz