Niemożliwe możliwe: jak osiągnęliśmy prawie 100% w Google PageSpeed

We współczesnym świecie internetu szybkość ładowania strony jest jednym z kluczowych czynników sukcesu. Niedawno udało nam się dokonać prawdziwego przełomu i podnieść wyniki Google PageSpeed do prawie 100% we wszystkich najważniejszych metrykach! To rezultat kompleksowej i dokładnej optymalizacji, w którą włożyliśmy maksimum wiedzy i doświadczenia.

https://pagespeed.web.dev/analysis/https-hotlist-biz-ru/v87znuv93s?form_factor=desktop

Co pomogło osiągnąć taki rezultat?

1. Optymalizacja ładowania skryptów i stylów
Wdrożyliśmy opóźnione ładowanie JavaScript i CSS, tak aby krytyczne zasoby potrzebne do renderowania strony ładowały się w pierwszej kolejności, a pozostałe — asynchronicznie i tylko wtedy, gdy są potrzebne. Większość skryptów na platformie ładuje się bezpośrednio podczas interakcji użytkownika. Dzięki temu użytkownicy widzą zawartość natychmiast, a przeglądarka nie jest blokowana dodatkowymi wywołaniami.

2. Kompresja i minimalizacja danych
Wszystkie skrypty, style i obrazy zostały maksymalnie skompresowane i zoptymalizowane. Wykorzystanie nowoczesnych formatów obrazów WebP/SVG oraz minifikacja CSS i JavaScript znacznie zmniejszyły całkowitą ilość ładowanych danych.

3. Efektywne cache'owanie i CDN
Skonfigurowaliśmy cache na serwerze i użyliśmy sieci dostarczania treści (CDN), co pozwoliło dostarczać pliki bliżej użytkowników i zmniejszyć czas odpowiedzi serwera.

4. Inteligentna praca z obrazami
Dla wszystkich obrazów wdrożono adaptacyjne ładowanie — różne rozmiary i formaty dla różnych urządzeń i rozdzielczości. Stosujemy techniki lazy loading, które pozwalają nie ładować obrazów, dopóki użytkownik do nich nie dotrze.

5. Optymalizacja czcionek
Podłączenie czcionek wykonano z parametrem font-display: swap, co skraca czas wyświetlania tekstu bez opóźnień związanych z ładowaniem czcionek.

6. Poprawa renderowania i DOM
Zmniejszyliśmy ilość zbędnych elementów, zoptymalizowaliśmy strukturę HTML, usunęliśmy niepotrzebne przerysowania i powtórne obliczenia styli, co pozwoliło przyspieszyć pierwsze renderowanie i uczynić interfejs responsywnym.

Wszystkie te działania pozwoliły nam praktycznie osiągnąć maksymalne wyniki w Google PageSpeed Insights — co oznacza, że strona ładuje się szybko, płynnie i wygodnie na wszystkich urządzeniach i sieciach.

Niemożliwe stało się możliwe dzięki dbałości o szczegóły i kompleksowemu podejściu do optymalizacji. Otwiera to nowe horyzonty dla poprawy doświadczenia użytkownika i zwiększenia konwersji.

Wszystkie te korzyści otrzymasz, jeśli wybierzesz platformę Hotlist.biz do tworzenia stron i sklepów internetowych.

Dodano strony producentów według krajów

Na platformie Hotlist.biz pojawiła się nowa strona z listą krajów producentów. Teraz odwiedzający Twoje sklepy internetowe mogą szybko wyszukiwać produkty według kraju ich pochodzenia.

Dodatkowo w karcie produktu nazwa kraju producenta stała się aktywnym linkiem. Klikając w niego, przejdziesz na stronę z wszystkimi produktami z tego samego kraju, co wybrany produkt.

Ta aktualizacja sprawi, że wyszukiwanie i wybór produktów będzie jeszcze wygodniejsze oraz pomoże szybciej znaleźć towary o pożądanym pochodzeniu.

Na platformę Hotlist.biz dodano Price Range Swiper — suwak wyboru zakresu cen w filtrze wyszukiwania. Teraz użytkownicy mogą wygodnie ustawiać minimalną i maksymalną cenę za pomocą suwaków „Od” i „Do”, które wyświetlane są nad formularzem wyszukiwania. To poprawia wygodę i precyzję dopasowania produktów według ceny.

Aby zainstalować ten kod, wykonaj następujące kroki:

1. Przejdź do sekcji „Strony” → „Widżety HTML”.
2. W punkcie „Price range swiper - Suwak wyboru zakresu cen w filtrze wyszukiwania” skopiuj kod JavaScript.
3. Utwórz blok menu i wklej do niego skopiowany kod.
4. Zaznacz opcję „JavaScript / CSS style”.
5. W pojawiającym się polu parametrów wybierz „Javascript - async”.

Aby podłączyć style:

1. Skopiuj styl CSS ze strony instrukcji tworzenia „Price Range Swiper”.
2. Wklej go w edytorze designu na zakładce „Style CSS”.

Kod jest dostępny pod linkiem: #Price_range_swiper

Aktualizacja wydajności strony: optymalizacja JavaScript i opóźnione ładowanie

Przeprowadziliśmy szeroką optymalizację JavaScript na stronie w celu zwiększenia szybkości ładowania i poprawy doświadczenia użytkownika. Teraz większość bibliotek ładuje się opóźnione — tylko wtedy, gdy jest to naprawdę konieczne.

Wszystkie skrypty zostały przeniesione do osobnych plików i ładowane wyłącznie na stronach, gdzie są używane lub gdy użytkownik wchodzi w interakcję z odpowiednimi elementami.

W efekcie poprawiono działanie następujących funkcji:

• Przewijanie towarów i artykułów
• Zmiana ilości towarów podczas dodawania do koszyka
• Interakcja z wariantami towarów
• Dodawanie towarów do ulubionych
• Wyświetlanie i ukrywanie wypełnionych wartości w filtrze wyszukiwania
• Menu mobilne
• Skrypt menu slide
• I inne...

Ta aktualizacja znacznie przyspiesza ładowanie stron i sprawia, że korzystanie ze strony jest bardziej płynne i komfortowe. Dziękujemy, że wybierasz nas!

Dodano obsługę plików CSS w blokach/menu.
Teraz na Hotlist.biz możesz tworzyć nie tylko cache’owane pliki JavaScript, ale także pliki stylów CSS — bezpośrednio w treści bloków/menu.

Co to daje:

• 🔧 Możliwość dodania własnych stylów tylko na wybranych stronach;
• 📁 Style są przechowywane w oddzielnym pliku z cache, a nie w kodzie strony;
• ⚡ Zapewnia czyste i szybkie ładowanie stron bez osadzonego CSS.

Jak używać:
Aby utworzyć plik CSS, ustaw parametr bloku/menu na CSS.
Wstaw swój styl CSS do treści bloku/menu i wskaż strony, na których ma być używany.

Aktualizacja analityki: ulepszone sygnały dla Google Tag Manager i GA4 Do systemu dodano zaktualizowane sygnały i zdarzenia dla Google Tag Manager oraz Google Analytics 4 (GA4). Konfiguracja została dostosowana do wymagań GA4 – dla maksymalnej zgodności z nowoczesnymi raportami i automatycznego śledzenia konwersji. Obsługa przestarzałej wersji Google Analytics Universal została całkowicie wycofana.

Dodano specjalny styl CSS poprawiający wygląd tabeli koszyka na urządzeniach mobilnych oraz ekranach o szerokości mniejszej niż 450 pikseli. Styl jest ładowany wyłącznie na stronie koszyka i nie wpływa na inne sekcje witryny. Dzięki temu korzystanie z koszyka na smartfonach i małych ekranach jest bardziej wygodne i czytelne.

Teraz Hotlist.biz ma zaimplementowaną możliwość asynchronicznego importu produktów — oznacza to, że możesz przesyłać duże ilości danych bez odświeżania strony i bez tymczasowego wyłączania witryny dla Ciebie.
🔹 Wcześniej: podczas importu strona stawała się tymczasowo niedostępna dla administratora, dopóki cały proces nie został zakończony. Było to niewygodne — zwłaszcza przy dużej liczbie produktów.
🔹 Teraz: możesz kontynuować pracę z witryną, podczas gdy import odbywa się w tle. Proces importu nie blokuje już interfejsu, a wiersze z pliku są przetwarzane i wyświetlane w czasie rzeczywistym bezpośrednio na ekranie.
💡 Na przykład, podczas przesyłania 5000 produktów, z których każdy zawiera dziesiątki zdjęć, czas przetwarzania może zająć dziesiątki minut. Asynchroniczny import całkowicie rozwiązuje ten problem — witryna pozostaje dostępna, a Ty widzisz postęp.

Dodano powiadomienia push. Powiadomienia push to krótkie wiadomości, które pojawiają się na ekranie (komputera lub telefonu), nawet gdy Twoja strona lub hotlist.biz są zamknięte. Pomagają szybko dowiedzieć się o ważnych wydarzeniach: zamówieniach, wiadomościach, zakończeniu importu, opiniach.

Przeprowadzono dodatkową optymalizację zapytań do bazy danych i przyspieszenie platformy. Wkrótce zostanie wprowadzona aktualizacja zabezpieczeń.

System posiada API — odpowiednik API WooCommerce — które umożliwia: otrzymywanie statystyk zamówień, dodawanie, aktualizowanie i usuwanie zamówień, przeglądanie kategorii i zarządzanie produktami. Wszystko to jest dostępne za pośrednictwem bezpiecznych żądań.
Możliwe jest zbiorcze dodawanie lub aktualizowanie produktów, w tym ich cech i odmian.

Więcej szczegółów w instrukcji: https://hotlist.biz/pl/user_guide.html#hotengine-CommerceAPI

Zaktualizowano zakładki służące do dodawania i edycji towarów, a także wprowadzono funkcję ich zwijania i rozwijania dla parametrów różnorodności.

Dodano opcję ochrony formularza zamówienia w koszyku za pomocą obrazka (captcha), a także wprowadzono dodatkowe filtrowanie tekstu we wszystkich zamówieniach i formularzach na stronie.

Dodano okno pop-up do edycji recenzji i komentarzy

Dodano funkcję zgody na pliki cookie i przesyłania danych do Google Analytics i Menedżera tagów.

Dodano masowe przenoszenie ceny z odmian do ceny głównej produktu. Możesz ustalić minimalną i maksymalną cenę dla danej odmiany. Funkcja ta znajduje się w sekcji Ustawienia, Sklep, Usługi.

Dodano kalendarz rezerwacji. Kalendarz zawiera informacje o zajętych miejscach umieszczonych w kalendarzu. Kolory statusów i podpowiedzi są podobne do kolorów statystyk sprzedaży. Dodatkowo dodano możliwość wyświetlania czasu w systemie rezerwacyjnym, zarówno w formacie 24-godzinnym, jak i 12-godzinnym - AM/PM. Dodano możliwość stworzenia systemu rezerwacji na wiele dni.

Dodano widget Rezerwacji.
Funkcja rezerwacji to dodatkowy widget, który pozwala zrealizować system zapisów na dostępne przedziały czasowe. Rezerwację można zrealizować z podziałem na grupy, na przykład dla łóżek do masażu, stolików w restauracji, samochodów do wynajęcia lub innych zasobów.

Możesz określić harmonogram dostępnych okien w swoim grafiku, zarówno powtarzających się, jak i jednorazowych. Po tym użytkownik będzie mógł dokonać rezerwacji.

Podczas rezerwacji dostępne są różne statusy. Będziesz mógł określić domyślny status do rejestracji, a także aktywować funkcję Płatności, po której zostanie ustawiony inny status, wskazany w ustawieniach.

Funkcja pozwala ograniczyć daty wyświetlane w kalendarzu. Dodatkowo, można zrealizować rezerwację jednego slotu na określoną liczbę miejsc.

Dodano widżet z recenzjami Google Reviews – Api (Google Moja Firma).
Widżet umożliwia otrzymywanie opinii o Twojej firmie z profilu Google Moja Firma.
Google Reviews - Api