Zdjęcia produktów cięższe, niż muszą być

Objaw

Na laptopie w biurowym wi-fi sklep działa dobrze. Na telefonie, po transmisji komórkowej, karta produktu pokazuje tekst, a potem przez dwie sekundy szary prostokąt, zanim pojawi się zdjęcie.

Przyczyną jest zwykle plik z aparatu wgrany dokładnie w takiej postaci, w jakiej zszedł z karty, albo zdjęcie od dostawcy w jakości do druku wrzucone prosto do biblioteki — 4000 pikseli szerokości i kilka megabajtów, żeby wyświetlić się w ramce o szerokości 600 pikseli.

Ile to kosztuje

Na karcie produktu główne zdjęcie jest prawie zawsze największym elementem na ekranie — a to oznacza, że to właśnie je Core Web Vitals mierzy jako Largest Contentful Paint. Ile ten obrazek waży, tyle odwiedzający czeka, zanim strona zacznie wyglądać na gotową.

• Pierwsi wychodzą użytkownicy telefonów. Są większością ruchu w handlu elektronicznym, mają najwolniejsze łącza i wychodzą najwcześniej.
• Na stronach kategorii to się kumuluje. Jedno ciężkie zdjęcie to wolna karta produktu; dwadzieścia cztery w siatce kategorii to strona, która nigdy się nie uspokaja.
• Kosztuje transfer — na Twoim hostingu i w pakiecie danych odwiedzającego.

Merchlint używa domyślnie progu 500 KB — na tyle wysokiego, że porządnie wyeksportowane zdjęcie produktowe przechodzi spokojnie, i na tyle niskiego, że nietknięty plik z aparatu nie przechodzi.

Jak to sprawdzić samodzielnie

Prosto z systemu plików, bo to jest uczciwy pomiar:

find wp-content/uploads -type f \
  \( -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png' -o -iname '*.webp' \) \
  -size +500k -printf '%s\t%p\n' | sort -rn | head -40

To wypisuje czterdzieści najcięższych plików z rozmiarami. Na Windowsie bez powłoki uniksowej to samo robi jedna linia WP-CLI:

wp eval 'foreach ( get_posts(["post_type"=>"attachment","post_mime_type"=>"image","posts_per_page"=>-1,"fields"=>"ids"]) as $id ) { $f = get_attached_file($id); if ( $f && file_exists($f) && filesize($f) > 512000 ) printf("%d\t%s\t%s\n", $id, size_format(filesize($f)), basename($f)); }'

Jak naprawić

1. Zmniejsz przed wgraniem. Ustal największy rozmiar, jaki motyw kiedykolwiek wyświetla — zwykle między 1200 a 2000 pikseli na dłuższym boku — i eksportuj do niego. WordPress nie zmniejszy oryginału, który mu dałeś, poza własnym progiem dużych obrazów.
2. Kompresuj. JPEG w jakości 80 jest na zdjęciu produktowym nie do odróżnienia od jakości 100, a waży ułamek tego.
3. Serwuj nowoczesne formaty. WebP albo AVIF zwykle znowu połowi transfer. Zrobi to każda z popularnych wtyczek do obrazów, bez ruszania oryginałów.
4. Nie kasuj oryginałów dla oszczędności miejsca, jeśli sprzedajesz wydruki albo potrzebujesz powiększenia — naprawą jest przestać je serwować, a nie je stracić.

Kiedy to fałszywy alarm

Jest jeden istotny i należy mu się powiedziane wprost.

Merchlint mierzy plik, który został wgrany, a nie ten, który pobiera odwiedzający. WordPress generuje mniejsze warianty i serwuje jeden z nich; wtyczka optymalizująca może serwować WebP, który w ogóle nie dotyka oryginału. Więc trzymegabajtowy oryginał może stać za stroną przesyłającą 90 KB, a ta kontrola i tak go zgłosi.

To jest świadomy kompromis, nie przeoczenie: zapisany plik jest faktem, który skaner odczyta bez ani jednego zapytania na zewnątrz, a ta wtyczka takich zapytań nie wykonuje. Potraktuj znalezisko jako „ten oryginał jest cięższy, niż musi być” — co i tak warto wiedzieć przy kopiach zapasowych i migracjach — a nie jako „Twoja strona jest wolna”.

Pozostałe przypadki: zdjęcia sprzedawane jako produkt (pliki do druku, treści cyfrowe) oraz zdjęcia do powiększania, które naprawdę potrzebują rozdzielczości.

Jak znajduje to Merchlint

Merchlint odczytuje rozmiar każdego pliku zdjęcia produktowego na dysku i porównuje go z progiem, który jest ustawieniem. Przy znalezisku widać zmierzony rozmiar, próg i nazwę pliku, a zgłaszany jest załącznik, nie produkt — jedna fotografia często należy do kilku produktów i poprawia się ją raz.

Pewność: F — fakt z bazy i z systemu plików. Liczba bajtów porównana z liczbą.

Ograniczenie z sekcji piątej jest napisane przy samym znalezisku, nie tylko tutaj. Skaner, który podaje liczbę, nie mówiąc, czego ta liczba nie obejmuje, przegrywa spór w pierwszych trzydziestu sekundach.