Tag: samouczek leniwego ładowania w OpenCart

Wdrażanie leniwego ładowania obrazów produktów w OpenCart

W dzisiejszym świecie napędzanym internetem użytkownicy oczekują błyskawicznego ładowania stron internetowych. Klienci oczekują, że strony będą się szybko ładować, gdy odwiedzają Twoją witrynę. OpenCart Klienci mogą się zdenerwować, a Twoja firma może stracić dochody, jeśli strony produktów ładują się zbyt długo, zwłaszcza na urządzeniach mobilnych, gdzie prędkość połączenia internetowego może być niższa.

Duża liczba grafik jest często główną przyczyną powolnego ładowania strony. Zdjęcia produktów mogą być dużymi plikami, ale stanowią niezbędny element każdej witryny e-commerce. Leniwe ładowanie może temu zaradzić.

Wyzwanie wydajnościowe w witrynach eCommerce

Miejsca eCommerce firmy Moment są wręcz wizualne. Standardowy dostawca zamówień może mieć

  • 20-50 zdjęć produktu
  • Banery
  • Miniatury i ikony
  • Sekcje dotyczące produktów powiązanych

Jeśli wszystkie obrazy zostaną załadowane jednocześnie, przeglądarka będzie musiała załadować każdy z nich, zanim strona stanie się w pełni interaktywna. Prowadzi to do:

  • Pierwsze malowanie treści (FCP) w wolniejszym tempie
  • Wydłużony czas interakcji 
  • Słaba wydajność na urządzeniach mobilnych
  • Większe obciążenie serwera
  • Zwiększone wskaźniki odrzuceń

Będzie to miało znaczący wpływ na komfort użytkowania, zwłaszcza w przypadku wolniejszych sieci.

Czym jest Lazy Loading?

Technika znana jako „leniwe ładowanie” opóźnia ładowanie obrazów (lub innych treści) do momentu, gdy są one rzeczywiście potrzebne, czyli zazwyczaj wtedy, gdy użytkownik jest gotowy do ich obejrzenia, przewijając ekran. W przypadku leniwego ładowania obraz jest ładowany dopiero po jego załadowaniu, w przeciwieństwie do ładowania wszystkich obrazów naraz.

Leniwe ładowanie ma następujące zalety:

  • Ochrona przepustowości
  • Lepsza wydajność na urządzeniach mobilnych
  • Ulepszone SEO i niezbędne elementy witryny
  • Szybkie ładowanie pierwszej strony

Gdy na stronach produktów może załadować się wiele obrazów jednocześnie, funkcja leniwego ładowania jest szczególnie pomocna.

Dlaczego leniwe ładowanie ma znaczenie

Wyobraź sobie, że przeglądasz katalog produktów. Nawet jeśli zdjęcia produktów znajdują się daleko na końcu linii zagięcia, Twoja przeglądarka spróbuje załadować je wszystkie naraz, korzystając z tradycyjnego ładowania. W przypadku leniwego ładowania początkowo załadują się tylko obrazy znajdujące się w widocznej części ekranu lub w jej pobliżu. Pozostałe obrazy będą ładowane stopniowo w miarę przewijania.

Zarówno Twoi klienci, jak i wyszukiwarki, takie jak Google, które lubią szybko ładujące się strony internetowe, odniosą korzyści z szybszego i bardziej płynnego działania.

Przykład z życia wzięty: strona kategorii bez leniwego ładowania

Rozważ ten przykład:

24 produkty na stronie kategorii, Każda miniatura = 150 KB, Całkowita waga obrazu = 3.6 MB

Jeszcze przed załadowaniem banerów, arkuszy CSS i skryptów JavaScript przeglądarka musi pobrać obrazy o rozmiarze blisko 4 MB.

Załóżmy teraz, że użytkownik przewinął stronę tylko do połowy. Połowa obrazów nie została nigdy wyświetlona – a mimo to pobrana. Dlatego…to jest zmarnowana przepustowość i 0Tutaj właśnie pojawia się zjawisko leniwego ładowania.

Lazy Loading i podstawowe wskaźniki internetowe

Wskaźniki internetowe. Na poniższe kwestie mają bezpośredni wpływ duże obrazy:

  • Malowanie z największą zawartością (LCP)
  • Zmiana w układzie kumulacyjnym (CLS)
  • Następna interakcja farby (INP)

Prawidłowe i powolne ładowanie obrazów poprawi wskaźniki wydajności, zwłaszcza na stronach z listami produktów i kategorii.

Mimo wszystko jest jedna ważna rzecz, o której należy pamiętać

 Obrazów umieszczonych nad opakowaniem, podobnie jak głównego obrazu produktu w panelu szczegółów produktu, nie należy ładować w trybie leniwym.

Kiedy stosować Lazy Loading?

Leniwe ładowanie najlepiej sprawdza się w przypadku:

  • Strony z listami produktów
  • Strony kategorii
  • Strony z listami blogów
  • Strony producenta
  • Sekcje sprzedaży dodatkowej

Może nie być to najlepsze rozwiązanie dla:

  • Banery bohaterów powyżej zagięcia
  • Główny obraz produktu na stronie produktu
  • Krytyczne elementy wizualne marki

Jak wdrożyć funkcję Lazy Loading w OpenCart

Metoda 1: Leniwe ładowanie w przeglądarkach natywnych

Nowoczesne przeglądarki korzystają z właściwości loading=”lazy”, aby zapewnić wbudowaną funkcję leniwego ładowania

Przykład:

<img src=”image.jpg” ładowanie=”leniwy” alt=”Obraz produktu”>

Kroki OpenCart:

  • Otwórz plik motywu:
Wersja Ścieżka pliku
OpenCart 2.x katalog/widok/motyw/twój_motyw/szablon/produkt/kategoria.tpl
OpenCart 3.x katalog/widok/motyw/twój_motyw/szablon/produkt/kategoria.twig
OpenCart 4.x katalog/widok/szablon/produkt/kategoria.twig
  • Znajdź obraz produktu etykietka.
  • Zmień to w następujący sposób:

Przed:

<img src="{{ product.thumb }} alt="{{ product.name }}"  width="300"  height="300"

     tytuł="{{ nazwa produktu }}">

Po:
<img src="{{ product.thumb }}"ładowanie="leniwy"  alt="{{ nazwa produktu }}" szerokość="300" wysokość="300"     tytuł="{{ nazwa produktu }}">

To wszystko. JavaScript nie jest konieczny. Co więcej, jest to najłatwiejszy i najczystszy sposób.

Metoda 2: Korzystanie z funkcji lazysizes (najlepsza w przypadku obsługi starszych przeglądarek)

Kroki:

  1. Dodaj skrypt lazysizes:
     
    

    2. 

  2.  Otwórz plik motywu oparty na wersji OpenCart wymienionej w Metodzie 1 i zaktualizuj znaczniki obrazu:
    3. 



    

  • Przed:
    
    

    

    • 

  • Po:
    
    

    

    • 



Metoda 3: Korzystanie z interfejsu API Intersection Observer (zaawansowana kontrola)




Nowoczesne API JavaScript zapewniające lepszą kontrolę.


Przykład:


const images = document.querySelectorAll(“img[źródło danych]”);


const observer = new IntersectionObserver((wpisy, observer) => {


  wpisy.forEach(wpis => {


jeśli (entry.isIntersecting) {


   const img = entry.target;


   img.źródło = img.zestaw_danych.źródło;


      obserwator.unobserve(img);


}


  });


});


 


obrazy.forEach(img => observer.observe(img));


Ta metoda zapewnia pełną kontrolę nad zachowaniem ładowania.


Ważne: Filtrowanie produktów oparte na AJAX-ie


Gdy produkty są ładowane dynamicznie za pośrednictwem AJAX:


Tubylec ładowanie=”leniwy” działa automatycznie.


Jeśli jednak używasz leniwy rozmiar, Następnie obserwator skrzyżowania Po załadowaniu treści AJAX należy ponownie uruchomić funkcję leniwego ładowania.


Przykład:


document.addEventListener('ajaxComplete', function() {

    lazySizes.autoSizer.checkElems();

});

W przeciwnym wypadku nowo wstrzyknięte obrazy mogą nie załadować się prawidłowo.


Najlepsze metody leniwego ładowania w OpenCart


✔ Unikaj ładowania obrazów znajdujących się powyżej linii zagięcia.


✔ Upewnij się, że Twoje obrazy mają odpowiedni rozmiar; unikaj używania zbyt dużych miniatur.


✔ Zawsze używaj PageSpeed ​​Insights do testowania i optymalizacji obrazów do formatu WebP.


✔ Zawsze testuj za pomocą PageSpeed ​​Insights


✔ Po wprowadzeniu zmian w szablonie wyczyść pamięć podręczną OpenCart.


Pomiar wydajności przed i po wdrożeniu


Aby ocenić wpływ leniwego ładowania, wykonaj następujące kroki:


Przed wdrożeniem


Przetestuj swoją stronę kategorii i zapisz następujące dane:


    

  • Rozmiar strony
    • 

  • Czas wczytywania strony
    • 

  • Wyniki podstawowych wskaźników internetowych
    • 



Po wdrożeniu


Uruchom ponownie te same testy i porównaj wyniki. Powinieneś zauważyć:


    

  • Skrócony czas początkowego ładowania
    • 

  • Krótszy całkowity czas blokowania (TBT)
    • 

  • Poprawiony wynik wydajności Lighthouse
    • 



Opcje implementacji opisane w tym przewodniku, od natywnych atrybutów HTML, przez lazysizes, po API Intersection Observer, oferują rozwiązania dla każdego poziomu złożoności technicznej. Niezależnie od tego, czy prowadzisz mały butik, czy zarządzasz katalogiem wielokategoriowym o dużym ruchu, istnieje podejście dopasowane do Twoich potrzeb. Zacznij od Metody 1, aby uzyskać natychmiastowe rezultaty, i przechodź do bardziej zaawansowanych metod w miarę wzrostu wymagań. Optymalizacja wydajności nie jest zadaniem jednorazowym, lecz stałym zobowiązaniem. Połącz leniwe ładowanie z kompresją obrazów, konwersją WebP i odpowiednim buforowaniem, aby w pełni wykorzystać potencjał szybkości swojego sklepu OpenCart.


O Knowbandie


Knowband to zaufany dostawca wtyczek i rozszerzeń do handlu elektronicznego z wieloletnim doświadczeniem w pomaganiu sprzedawcom internetowym w budowaniu szybszych, inteligentniejszych i bogatszych w funkcje sklepów. Niezależnie od tego, czy prowadzisz swój sklep na PrestaShop, OpenCart, Shopify, WooCommerce, Magento, lub dowolnej innej dużej platformie, Knowband oferuje szeroką gamę gotowych do użycia wtyczek i rozszerzeń, które pomogą Ci zwiększyć funkcjonalność, poprawić wydajność i zapewnić lepsze wrażenia zakupowe bez konieczności tworzenia ich od podstaw. Oprócz wtyczek, Knowband oferuje również kompleksowe tworzenie stron internetowych i aplikacji mobilnych Usługi. Niezależnie od tego, czy potrzebujesz w pełni spersonalizowanego sklepu internetowego zbudowanego od podstaw, spersonalizowanej aplikacji mobilnej na iOS i Androida, czy też indywidualnej integracji z istniejącymi systemami, zespół programistów Knowband posiada wiedzę i doświadczenie, aby urzeczywistnić Twoją wizję. Jeśli chcesz jeszcze bardziej zoptymalizować swój sklep OpenCart lub inną platformę eCommerce, zapoznaj się z ofertą wtyczek Knowband lub skontaktuj się z naszym zespołem, aby omówić rozwiązanie dopasowane do Twoich celów biznesowych. Skontaktuj się z nami pod adresem support@knowband.com w zakresie tworzenia niestandardowych wtyczek, tworzenia stron internetowych i usług tworzenia aplikacji mobilnych.