Optymalizacja obrazów w PrestaShop: największy zysk na czasie ładowania

Optymalizacja obrazów PrestaShop jest pojedynczą zmianą o największym wpływie na odczuwalną szybkość sklepu. Powód jest arytmetyczny: na karcie produktu i na listingu kategorii zdjęcia stanowią zwykle większość przesyłanych danych, a element, który przeglądarka uznaje za największy w widocznym obszarze, to prawie zawsze zdjęcie. Wskaźnik LCP mierzy dokładnie moment jego wyświetlenia.

Dobra wiadomość jest taka, że to praca na danych i na konfiguracji, nie na kodzie. Zła: rozkłada się na cały katalog, więc bez ustalonej zasady wraca po kilku miesiącach razem z nowym towarem.

Skąd biorą się ciężkie zdjęcia w sklepie

Nie z niedbalstwa, tylko z tego, że zdjęcia wpływają do sklepu kilkoma drogami naraz i żadna z nich nie ma wbudowanej kontroli rozmiaru.

• Sesja zdjęciowa. Fotograf oddaje pliki w rozdzielczości aparatu, bo tak wygląda jego standard dostawy. Nikt ich nie przeskalowuje przed wgraniem.
• Materiały od dostawcy. Przychodzą w formacie i wymiarach, jakie dostawca akurat ma, i różnią się między dostawcami.
• Import z pliku. Zdjęcia pobierane z zewnętrznych adresów trafiają do sklepu w oryginale, bez żadnego progu.
• Banery od marketingu. Grafika kampanijna bywa najcięższym plikiem na stronie głównej i jednocześnie tym, który mierzy LCP.

PrestaShop generuje z oryginału zestaw miniatur w zdefiniowanych rozmiarach i to działa dobrze. Problem pojawia się w dwóch miejscach: przy powiększeniu na karcie produktu, gdzie bywa serwowany plik pełnowymiarowy, oraz przy przeliczaniu miniatur, które przy tysiącach produktów w oryginalnej rozdzielczości obciąża serwer na długo.

Jak sprawdzić stan w kwadrans

Nie potrzebujesz audytu, żeby wiedzieć, czy ten obszar wymaga pracy. Trzy sprawdzenia i masz odpowiedź.

Waga strony a waga obrazów

Otwórz kartę produktu w narzędziach deweloperskich przeglądarki, w zakładce z listą pobranych zasobów, i posortuj po rozmiarze. Jeśli na górze listy stoją zdjęcia, a ich suma przewyższa resztę strony, wiesz, gdzie pracować. To zajmuje minutę i jest bardziej wiarygodne niż jakikolwiek wynik punktowy.

Rozmiar serwowany a rozmiar wyświetlany

Najczęstsza strata polega na wysłaniu zdjęcia znacznie większego, niż potrzeba do wyświetlenia. Miniatura na listingu zajmuje kilkaset pikseli szerokości, a serwowany plik bywa kilkukrotnie szerszy. Przeglądarka pobiera całość i skaluje w dół, więc klient płaci transferem za piksele, których nigdy nie zobaczy. Narzędzia deweloperskie pokazują obie liczby przy każdym obrazie.

Który element mierzy LCP

Warto to sprawdzić, zanim zaczniesz optymalizować cokolwiek. Jeśli na karcie produktu LCP mierzy zdjęcie główne, praca nad nim ma sens. Jeśli mierzy baner nad nagłówkiem albo blok z opinią klienta, optymalizowanie zdjęć produktowych nie ruszy wskaźnika. Metodologię pomiaru opisuje dokumentacja Google na web.dev.

Format i kompresja

Formaty nowej generacji dają wyraźnie mniejsze pliki przy tej samej jakości wizualnej niż klasyczny JPEG. To zmiana konfiguracyjna, niewidoczna dla klienta i niewymagająca decyzji projektowych, więc zwykle jest pierwszą rzeczą do włączenia.

Dwie rzeczy warto przy tym ustalić. Po pierwsze, mechanizm zapasowy dla przeglądarek, które nowego formatu nie obsługują: sklep powinien serwować im wersję klasyczną, a nie pusty obszar. Po drugie, moment konwersji. Przerabianie w locie przy każdym żądaniu obciąża serwer, więc pliki konwertuje się przy wgrywaniu albo w zadaniu wsadowym, a wynik zapisuje na dysku.

Przy poziomie kompresji obowiązuje zasada praktyczna: obniżaj do momentu, w którym różnicę widać na największym wyświetlanym rozmiarze, i cofnij o jeden stopień. Ustawienie „maksymalna jakość” dla miniatury o szerokości kilkuset pikseli jest czystą stratą, bo tej jakości nikt nie zobaczy.

Jak PrestaShop generuje miniatury i dlaczego to ważne

Sklep nie serwuje oryginału tam, gdzie potrzebna jest miniatura. Z każdego wgranego zdjęcia generuje zestaw rozmiarów zdefiniowanych w panelu, osobno dla listingu, karty produktu, miniatur galerii i podglądu w koszyku. To dobry mechanizm, o ile zestaw rozmiarów odpowiada temu, co realnie wyświetla motyw.

Rozjazd między definicjami a motywem jest częstszy, niż się wydaje, bo rozmiary bywają dziedziczone z poprzedniego projektu graficznego. Objawy są dwa i oba kosztują. Jeśli zdefiniowany rozmiar jest mniejszy niż obszar wyświetlania, przeglądarka rozciąga obraz i zdjęcia wyglądają nieostro. Jeśli większy, klient pobiera piksele, których nie zobaczy.

Sprawdzenie zajmuje kilka minut: w narzędziach deweloperskich najedź na miniaturę na listingu i porównaj rozmiar pliku z rozmiarem wyświetlanym. Powtórz dla karty produktu. Rozbieżność większa niż dwukrotna oznacza, że definicje wymagają korekty.

Ekrany o wysokiej gęstości pikseli

Nowoczesne telefony i laptopy wyświetlają więcej pikseli fizycznych niż logicznych, więc obraz dopasowany dokładnie do obszaru wyświetlania bywa na nich nieostry. Rozwiązaniem nie jest jednak serwowanie wszystkim pliku dwukrotnie większego, tylko przygotowanie kilku wariantów i pozostawienie wyboru przeglądarce. Ta pobierze wersję odpowiednią dla swojego ekranu i szerokości okna.

Mechanizm jest standardem od lat i sprowadza się do podania listy dostępnych wariantów przy każdym obrazie. Wymaga zmiany w szablonie motywu, więc idzie przez wykonawcę technicznego, ale wykonany raz działa dla całego katalogu.

Regeneracja miniatur

Po zmianie definicji rozmiarów trzeba przeliczyć miniatury dla całego katalogu. Przy tysiącach produktów operacja trwa godzinami i mocno obciąża serwer, więc wykonuje się ją poza godzinami sprzedaży i partiami. Przed rozpoczęciem zrób kopię katalogu ze zdjęciami: proces nadpisuje pliki, nie ma przycisku cofnięcia, a przerwany w połowie zostawia katalog w stanie mieszanym, w którym część produktów ma nowe miniatury, a część stare.

Wymiary w kodzie i stabilność układu

Obraz bez podanych wymiarów zmusza przeglądarkę do zgadywania, ile miejsca zarezerwować. Gdy plik się doładuje, treść pod nim przeskakuje w dół. Klient, który zdążył sięgnąć po przycisk, klika w coś innego.

Zjawisko mierzy wskaźnik CLS, którego próg wynosi 0,1. Rozwiązanie jest banalne i polega na podaniu szerokości i wysokości przy każdym obrazie, żeby przeglądarka mogła zarezerwować proporcje przed pobraniem pliku. W praktyce problem wraca przez elementy dokładane później: banery, plakietki promocyjne i widżety opinii, które wstawiają się nad treścią po jej wyświetleniu.

Test na dwie minuty: załaduj kartę produktu na telefonie przy wolnym połączeniu i obserwuj, czy treść skacze. Jeśli tak, znajdź element, który się doładowuje, i zarezerwuj mu miejsce z góry.

Kolejność ładowania: co odroczyć, a czego nie

Leniwe ładowanie odracza pobranie zdjęć do momentu, w którym klient przewinie do nich stronę. Oszczędza transfer i skraca czas pierwszego wyświetlenia. Zastosowane hurtowo potrafi jednak pogorszyć dokładnie ten wskaźnik, który miało poprawić.

Powód: jeśli odroczysz zdjęcie widoczne od razu po wejściu na stronę, przeglądarka odkryje je później i zacznie pobierać z opóźnieniem. LCP rośnie. Dotyczy to zdjęcia głównego karty produktu i pierwszego rzędu miniatur na listingu.

• Zdjęcie widoczne od razu ładuj normalnie, dodatkowo oznaczając je jako priorytetowe, żeby przeglądarka pobrała je przed resztą zasobów.
• Wszystko poniżej pierwszego ekranu odraczaj. Galeria, sekcja produktów powiązanych, stopka.
• Zdjęcia w karuzeli ładuj tylko dla widocznego slajdu. Karuzela z sześcioma grafikami pobierająca wszystkie naraz to typowa przyczyna wysokiego LCP na stronie głównej.

Weryfikacja jest prosta: po zmianach sprawdź, czy element mierzący LCP nadal jest tym samym i czy jego czas spadł. Jeśli LCP przeskoczyło na inny element, przesunąłeś problem zamiast go usunąć.

Optymalizacja obrazów PrestaShop na istniejącym katalogu

Sklep z tysiącami produktów ma zdjęcia wgrane przez lata, w różnych rozmiarach i formatach. Przerobienie wszystkiego naraz obciąża serwer i bywa niewykonalne w godzinach sprzedaży. Kolejność, która się sprawdza:

1. Sto najczęściej odwiedzanych produktów. Zacznij od nich, bo to one generują ruch. Efekt zobaczysz w danych szybciej niż po przerobieniu całego katalogu.
2. Banery i grafiki na stronie głównej. Kilkanaście plików, a często największy pojedynczy zysk.
3. Reszta katalogu wsadowo, poza godzinami sprzedaży. Regeneracja miniatur przy dużym katalogu potrafi trwać godzinami i obciąża serwer.
4. Zasada na wejściu. Ustalony maksymalny wymiar i format oryginału przy wgrywaniu. Bez tego katalog zaśmieci się ponownie w tempie, w jakim przybywa towaru.

Przed regeneracją miniatur zrób kopię katalogu ze zdjęciami. Operacja nadpisuje pliki i nie ma przycisku cofnięcia, a przy przerwaniu w połowie zostawia katalog w stanie mieszanym.

Osobna uwaga o tekstach alternatywnych. Uzupełnia się je przy tej samej okazji, bo i tak przechodzisz przez katalog. Alt opisuje zdjęcie osobom korzystającym z czytników ekranu i wyszukiwarkom, a przy imporcie da się go wygenerować z nazwy produktu. Puste pole to strata bez żadnej rekompensaty.

Zdjęcia to nie tylko wydajność

Warto to powiedzieć wprost, bo praca nad wagą plików łatwo przeradza się w wyścig do najmniejszego rozmiaru. Zdjęcie jest głównym nośnikiem informacji o produkcie i jedynym, na podstawie którego klient ocenia towar, którego nie może dotknąć. Kompresja posunięta za daleko kosztuje sprzedaż skuteczniej niż wolne ładowanie.

Granicę wyznacza największy wyświetlany rozmiar. Obniżaj jakość do momentu, w którym różnicę widać przy powiększeniu na karcie produktu, i cofnij o jeden stopień. Miniatura na listingu zniesie znacznie mocniejszą kompresję niż zdjęcie w powiększeniu, więc traktowanie obu jednakowo jest stratą po jednej albo po drugiej stronie.

Trzy rzeczy, które przy tej samej pracy warto poprawić, bo dotyczą tego samego katalogu zdjęć:

• Spójny kadr i tło w obrębie kategorii. Produkty fotografowane w różnych kadrach dają listing, który wygląda na niedokończony, nawet jeśli każde zdjęcie z osobna jest dobre. Przy zdjęciach od kilku dostawców to stan domyślny.
• Kompletność galerii. Produkt z jednym zdjęciem sprzedaje się gorzej niż ten sam produkt z czterema ujęciami. Braki wychodzą przy przeglądzie katalogu i warto je wtedy wypisać.
• Teksty alternatywne. Opisują zdjęcie osobom korzystającym z czytników ekranu i wyszukiwarkom. Przy imporcie da się je wygenerować z nazwy produktu, więc puste pole to strata bez rekompensaty.

Banery i grafiki kampanijne

Zdjęcia produktowe przechodzą zwykle przez jakiś proces, choćby import. Grafiki kampanijne wgrywa się ręcznie, w pośpiechu, w dniu startu akcji, i to one bywają najcięższym plikiem w całym sklepie. Baner na stronie głównej jest przy tym niemal zawsze elementem, który mierzy LCP.

Wystarczy jedna reguła wpisana w proces publikacji kampanii: grafika przechodzi kontrolę wagi tak samo, jak przechodzi korektę tekstu. Osoba przygotowująca baner dostaje maksymalny rozmiar pliku i docelowe wymiary, a nie odsyłacz do ogólnych zaleceń.

Drugie miejsce, o którym łatwo zapomnieć, to karuzela. Sześć grafik pobieranych naraz przy wejściu na stronę główną kosztuje sześciokrotność jednego banera, a klient zobaczy najwyżej dwie. Ładuj slajd widoczny, resztę dopiero przy przejściu dalej.

Czego nie robić

Nie kompresuj w locie przy każdym żądaniu. Przerabianie obrazu w momencie wyświetlenia strony zamienia problem transferu na problem obciążenia procesora. Konwertuj raz i zapisuj wynik.

Nie odraczaj zdjęcia głównego. Powtarzamy to, bo jest to najczęstszy błąd popełniany w dobrej wierze, zwykle przez włączenie leniwego ładowania globalnie.

Nie usuwaj oryginałów po konwersji. Zmiana szablonu albo wymogów formatu za rok wymaga ponownego przetworzenia, a bez oryginałów zostaje ponowna sesja zdjęciowa.

Nie licz na CDN jako rozwiązanie. Sieć dostarczania treści skraca dystans do pliku, ale nie zmniejsza jego rozmiaru. Zdjęcie ważące kilka megabajtów pozostanie ciężkie niezależnie od tego, z którego serwera przyjdzie.

Czego się spodziewać po tej pracy

Nie podamy procentu poprawy, bo zależy on od tego, jak ciężkie były zdjęcia na starcie, a to różni się między sklepami o rząd wielkości. Warto natomiast wiedzieć, na co patrzeć po zmianach.

• LCP na karcie produktu i na listingu, mierzone z realnego ruchu, osobno dla telefonu i komputera. To jest wskaźnik, na który ta praca wpływa wprost.
• Łączna waga strony. Najprostsza liczba do porównania przed i po, dostępna w narzędziach deweloperskich.
• CLS, jeśli przy okazji uzupełniłeś wymiary obrazów. Powinien spaść i już nie wrócić.

Jeśli LCP nie drgnął mimo wyraźnie lżejszych zdjęć, przyczyna leży wcześniej: w czasie odpowiedzi serwera albo w zasobach blokujących wyświetlanie. Obie ścieżki rozkładamy w przewodniku o optymalizacji PrestaShop, a samą warstwę serwera w tekście o czasie odpowiedzi serwera PrestaShop.

Utrzymanie efektu sprowadza się do jednej zasady wpisanej w procedurę zespołu: ustalony maksymalny wymiar oryginału przy wgrywaniu i kontrola banerów kampanijnych przed publikacją. To najczęstsza droga, którą prędkość wycieka z powrotem. Usługowo obszar zamyka optymalizacja wydajności PrestaShop.