🚀 Jak stworzyć superszybki sklep — na przykładzie platformy Hotlist.biz
Hotlist.biz to superszybka platforma e-commerce do tworzenia sklepów internetowych z dużą funkcjonalnością, w której prędkość została uwzględniona na poziomie architektury. Platforma wykorzystuje pełne cache’owanie, procesy asynchroniczne, opóźnione ładowanie JavaScript, minimalizację i łączenie CSS i JS, brak ciężkich bibliotek i aktualizację danych według znaczników czasowych. Takie podejście zapewnia natychmiastowe ładowanie stron, stabilną pracę przy dużym obciążeniu, doskonałe wyniki Google PageSpeed i maksymalną efektywność SEO nawet dla dużych projektów e-commerce.
We współczesnym e-commerce prędkość to nie „optymalizacja” i nie zestaw kosmetycznych poprawek, ale fundamentalna cecha architektury. Dla dużych sklepów internetowych z setkami tysięcy produktów, skomplikowanymi filtrami, dynamicznymi blokami i aktywną interakcją użytkownika każde błędne rozwiązanie na starcie nieuchronnie prowadzi do spadku prędkości, SEO i ogólnej stabilności projektu.
Dlatego w Hotlist.biz prędkość została uwzględniona nie na poziomie formalnych rekomendacji Google, lecz na poziomie architektonicznego myślenia. W rezultacie platforma pokazuje natychmiastowe ładowanie stron, błyskawiczną pracę wyszukiwania i filtrów oraz stabilność nawet przy dużym obciążeniu. Przyjrzyjmy się niektórym rozwiązaniom.
📈 Architektoniczna optymalizacja Google PageSpeed, a nie formalne poprawki
W Hotlist.biz wyniki Google PageSpeed to efekt prawidłowej architektury, a nie tylko zestaw wskazówek.
Typowa „optymalizacja PageSpeed” ogranicza się do:
- wskazówek Lighthouse
- formalnego zmniejszania rozmiarów zasobów
- kompromisów w funkcjonalności
Nasze realne wyniki – 99%, 100%, 100%, 100%, co jest niemal fantastycznym rezultatem.
❓ Jak to osiągnęliśmy? Kluczowe rozwiązania
⚡ Pełne opóźnione ładowanie JavaScript
Podstawowa zasada platformy: żaden JavaScript nie ładuje się, dopóki nie jest potrzebny użytkownikowi.
Na początku strony:
- ładowany jest tylko minimalny podstawowy skrypt usługowy
- zawiera on listę możliwych interakcji i zasady ładowania modułów
- brak ciężkich bibliotek i logiki UI
Wszystkie pozostałe skrypty:
- ładowane są wyłącznie podczas interakcji użytkownika: przy pierwszym działaniu użytkownika (klik, otwarcie, inicjacja zdarzenia) wysyłane jest żądanie ładowania odpowiedniego skryptu; po zakończeniu ładowania zdarzenie uruchamia się automatycznie i wykonuje logikę
- cache’owane: cache jest na poziomie plików; skrypt aktualizowany tylko jeśli data jego modyfikacji jest nowsza niż data ostatniego pliku w cache
- nie ładowane ponownie bez potrzeby: system zmiennych globalnych i flag stanu rejestruje załadowanie modułu; jeśli moduł już istnieje w pamięci, ponowne ładowanie i inicjalizacja nie są wykonywane — akcja działa natychmiast
Jak to działa w praktyce
- użytkownik klika przycisk lub element interfejsu
- podstawowy skrypt sprawdza, czy moduł jest załadowany
- jeśli nie — moduł ładowany jest w tle
- akcja po ładowaniu wykonuje się automatycznie dla kolejnych interakcji
To podejście stosowane jest dla:
- okien modalnych
- elementów UI
- nawigacji
- filtrów
- pomocniczych komponentów interfejsu
W efekcie:
- minimalny First Contentful Paint
- szybki Time to Interactive
- świetne wyniki Google PageSpeed bez ograniczeń funkcjonalności
Przykład użycia opóźnionego ładowania skryptów — https://hotlist.biz/pl/scripts_guide.html#autohref1
📦 Wszystkie funkcjonalne skrypty podzielone na małe moduły
- dodawanie produktu do koszyka
- porównywanie produktów
- ładowanie rozwijanych list menu
- pokaz slajdów produktów
- okna modalne
- przyciski zmiany ilości dodawanej do koszyka
- przycisk „Pokaż więcej” i inne interaktywne elementy
Każdy z tych skryptów:
- ładowany tylko podczas interakcji użytkownika
- cache’owany osobno
- nie obciąża strony z góry
- zapewnia natychmiastową reakcję interfejsu i oszczędność zasobów
📌 Dodatkowe podział bibliotek
Nawet jeśli używana jest biblioteka do pokazów slajdów produktów, może być podzielona na pliki:
- Podstawowy skrypt — inicjalizacja listy produktów
- Dodatkowe moduły podłączane tylko w razie potrzeby:
- scrolling produktów myszką na desktopie
- poziome przewijanie na mobilnych
- efekty lub autoscroll slajdów
- Każdy plik ładowany tylko gdy jest aktywny i cache’owany osobno
Takie podejście zapewnia szybkie ładowanie nawet z wieloma interaktywnymi elementami.
SEO: katalogi nie są ładowane wyłącznie przez JS. Hotlist.biz zapewnia:
- pierwsze produkty renderowane w HTML
- JS ładowany później dla:
- przycisku „Pokaż więcej”
- nawigacji slajdów produktów
- innych dynamicznych interakcji
Zapewnia to SEO i interaktywność.
📱 Inteligentne menu mobilne bez obciążenia
Menu mobilne:
- nie ładuje się, jeśli szerokość ekranu jest większa niż ustawiona — ładowany tylko dla rzeczywistego mobilnego UI
- inicjalizowane tylko po interakcji użytkownika
- ładowane tylko przy faktycznej potrzebie
Logika i zawartość:
- logika w osobnym skrypcie cache’owanym
- pozycje i struktury menu przechowywane osobno — elementy menu nie wchodzą w podstawowy skrypt
- zawartość ładowana dynamicznie przy otwarciu
- każdy element cache’owany i aktualizowany według daty
Przykład: https://mirsemyan.com.ua/ua/
Ładowanie menu mobilnego <900px: https://btq.in.ua/ua/
🖼️ Cache’owanie i optymalizacja obrazów
- listy produktów używają zoptymalizowanych miniatur
- cache’owanie osobno dla każdej miniatury
- aktualizowane tylko przy zmianie obrazu
- konwersja do WebP, kompresja bez utraty jakości
Listy produktów ładują się błyskawicznie nawet przy wielu pozycjach.
💻 Maksymalne użycie HTML i CSS
- Zakładki — <label> + <input type="radio">
- Accordion — <details> + <summary>
- Filtry i bloki dynamiczne — CSS :checked, :target
Zalety:
- szybki FCP i LCP
- mniejsza ilość JS
- pełna widoczność dla SEO
- stabilność przy dużym ruchu
🧩 Rekomendacje dla maksymalnej prędkości
Nie używaj tabel HTML — używaj CSS Flex i Grid:
- elastyczne układy
- szybszy render
- lepsze SEO i mobilność
- mniej DOM i większa wydajność
⚡ Pełne cache’owanie bez memcache
- cache absolutnie wszystkiego: HTML, JS, CSS, menu, UI, treści
- nie zależy od RAM
- aktualizowany tylko przy zmianach
🗓️ Inteligentne czyszczenie cache przez daty zmian
- każdy typ danych ma własną datę
- cache porównuje daty
- jeśli nowa — przebudowa, jeśli nie — używa cache
📦 Brak ciężkich bibliotek
- bez jQuery UI
- własne lekkie biblioteki
- ładowane tylko gdy potrzebne
🛠️ Minifikacja JS i CSS
- łączenie i minifikacja
- cache i aktualizacja tylko przy zmianach
🧩 Cache użytkownika
- czas zmiany pliku tylko przy edycji
- aktualizacja tylko nowego pliku
- logika jak przy cache produktów
⚡ Filtry natychmiastowe przy setkach tysięcy produktów
- pierwsze zapytanie cięższe
- wyniki cache’owane
- kolejne zapytania w ułamkach sekundy
📁 Cache reklam i eksportów
- każdy kanał w osobnym pliku
- aktualizacja tylko przy zmianach produktów
- wysoka prędkość nawet przy dużych eksportach
⚡ Asynchroniczny import bez blokowania
- import jako proces serwerowy
- strona dostępna dla użytkowników
- szczegółowy status importu
- pliki cache procesu z informacjami o postępie
- bez powtarzania importu dopóki poprzedni nie zakończony
🖥️ Środowisko serwera
- LiteSpeed jako szybki serwer
- optymalne cache serwera
- HTTP/2 i konfiguracja
⏱️ Kontrola aktualności plików cache
- znacznik czasowy w żądaniu
- serwer zwraca aktualną wersję
- przeglądarka zawsze dostaje najnowszy JS, CSS i treść
🌎 Hotlist.biz — jedna z najszybszych platform e-commerce na świecie
- duże katalogi
- wysokie obciążenie
- SEO
- skalowalność
- stabilność
Więcej artykułów i wskazówek: https://hotlist.biz/pl/blog/sitecreate_pl/