Сверхбыстрая архитектура для 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/ru/scripts_guide.html

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

• добавление товара в корзину
• сравнение товаров
• загрузка выпадающих списков меню
• показ слайдов с товарами
• модальные окна
• кнопки изменения количества добавляемых в корзину товаров
• кнопка «Показать еще» и другие интерактивные элементы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В 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/ru/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/ru/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/ru/blog/sitecreate_ru/