Jak przyspieszyć ładowanie zdjęć w sklepie Magento — case study

Wyobraź sobie sklep z 50 000 produktami. Każdy ma kilka zdjęć. Serwer co jakiś czas regeneruje miniatury — i robi to przez kilka dni. Klienci w tym czasie widzą wolno ładujące się strony albo brakujące zdjęcia.

Tak wyglądała sytuacja, z którą przyszedł do mnie klient.

Dlaczego Magento nie radzi sobie ze zdjęciami

Mechanizm miniaturek w Magento 2 ma kilkanaście lat i nie nadąża za tym, co przeglądarki potrafią dziś obsłużyć.

Trzy największe problemy:

Generuje za dużo plików. Magento z góry tworzy dziesiątki rozmiarów każdego zdjęcia — na wypadek gdyby któryś był potrzebny. Przy dużym katalogu to miliony plików. Większość z nich nie zostanie nigdy wyświetlona. Przy 100 000 zdjęć regeneracja trwa od 3 do 6 dni.

Nie obsługuje WebP. WebP to format zdjęć który przy tej samej jakości waży nawet 75% mniej niż JPEG. Przeglądarki obsługują go od ponad dekady. Magento nie konwertuje do WebP bez dodatkowego rozszerzenia.

Nie dostosowuje zdjęć do urządzenia. Standard HTML pozwala podać przeglądarce kilka wariantów zdjęcia i pozwolić jej wybrać właściwy rozmiar — zależnie od ekranu. Magento tego nie robi. Telefon komórkowy pobiera to samo zdjęcie co monitor 4K.

Efekt: sklep ładuje się wolno, serwer jest przeciążony, a miejsce na dysku zajmują pliki których nikt nie potrzebuje.

Rozwiązanie: zdjęcie tworzone tylko wtedy, gdy ktoś go potrzebuje

Zamiast generować wszystko z góry — zaczęliśmy generować na żądanie.

Zasada jest prosta:

1. Przeglądarka prosi o konkretne zdjęcie w konkretnym rozmiarze.
2. Jeśli plik już istnieje w chmurze (AWS S3) — wraca od razu.
3. Jeśli nie istnieje — system tworzy je w locie, oddaje do przeglądarki i odkłada kopię do chmury. Od razu w formacie WebP.
4. Następnym razem ten sam plik leci z chmury. Zero generowania.

Każda platforma — sklep, aplikacja mobilna, wersja na tablet — prosi o swój rozmiar. Dostaje dokładnie to czego potrzebuje. Nic więcej.

Co z tego ma sklep?

Szybsze ładowanie strony. Zdjęcia są lżejsze (WebP) i serwowane z chmury, nie z serwera sklepu. Serwer przestał być wąskim gardłem.

Mniejsze koszty. Po 3 miesiącach w chmurze były tylko pliki, które ktoś faktycznie zobaczył. Przez 10 lat działania sklepu nazbierały się gigabajty plików po produktach dawno usuniętych z oferty. System posprzątał to sam. Klient zmniejszył dysk u dostawcy hostingu — realna oszczędność co miesiąc.

Elastyczność bez migracji. Gdy zmienił się dostawca chmury, nie trzeba było nic przeklejać. Nowy adres — zdjęcia budowały się pod nim automatycznie przy pierwszym wywołaniu.

Czas wdrożenia: 1 tydzień.

Dla kogo to ma sens?

To rozwiązanie sprawdza się gdy:

• masz duży katalog produktów (kilka tysięcy wzwyż)
• rozwijasz sklep na różnych platformach (mobile, PWA, web)
• czas ładowania zdjęć to problem który już zauważają klienci
• płacisz za hosting i chcesz wiedzieć za co płacisz

Masz sklep Magento i zdjęcia ładują się za wolno? Napisz do mnie — powiem Ci czy mogę to naprawić w Twoim przypadku.