Jest rok 2021. Za nami wiele zmian w SEO. Google wymyśla coraz to nowe wytyczne, które mają poprawiać jakość usług e-Commerce. W tym wpisie przedstawię praktyczne korzyści płynące z używania plików WEBP w sklepach internetowych (opartych na WooCommerce/WordPress).
Pliki WEBP są znacznie mniejsze od plików JPG
Płyną z tego dwie istotne korzyści dla e-Commerce.
Pliki WEBP zajmują mniej miejsca
Pierwsza, być może mniej istotna, to fakt, że na dyskach serwera WWW pliki WEBP zajmują mniej miejsca. A co za tym stworzenie kopii zapasowej, przeniesienie sklepu na inny hosting jest szybsze. No dobrze, ale tego nie robi się zbyt często… Ale nie można powiedzieć, że nie jest to nieistotne.
Posłużę się przykładami – bone najlepiej oddają skalę i problemów i korzyści. Kilka katalogów ze zdjęciami (głównie produktów). W postaci plików JPG zajmują zwykle 3-4 razy więcej miejsca niż pliki WEBP. Gdy „startujemy” ze sklepem, wydaje się to nie mieć znaczenia. Z czasem jednak robi się 10 GB lub więcej plików na serwerze.
Pierwszy przykład skuteczności kompresji WEBP. Pliki JPG (i to zoptymalizowane) zajmują prawie 10 GB. Po zmianie na WEBP zajmują ok. 3 GB – czyli ponad trzykrotnie mniej miejsca. A to dopiero pliki z jednego niepełnego roku działania sklepu internetowego z blogiem, prezentacjami produktów i inspiracjami fotograficznymi.

Drugi przykład skuteczności kompresji WEBP. Właściwie to „to samo” co powyżej (tylko mi się screenshot zrobił odwrotnie JPG<->WEBP). Znacząco większa redukcja wielkości plików graficznych – zdjęć, zdjęć produktów, ilustracji, rozmiarówek, renderingów, zdjęć reklamowych….

Kto bogatemu zabroni? Jeśli koszty przestrzeni dyskowej nie mają znaczenia, to sprawy związanie z nawet setkami GB plików graficznych wydają się nie mieć znaczenia. Ale jest drugi aspekt – istotny z punktu widzenia wyszukiwarek internetowych, a w tym wiodącej wyszukiwarki Google…
Pliki WEBP ładują się dużo szybciej
I znów (kto bogatemu zabroni) wydaje się, że nie zawsze trzeba się liczyć z transferem, posiadając bardzo wydajne łącza od serwera. Ale jest inny aspekt – znany obecnie jako zbiór wytycznych Web Vitals. W wielkim skrócie: wyszukiwarka premiuje komfort i wygodę internauty. To firmy posiadające portale czy sklepy internetowe mają się starać o to, aby takiemu przeciętnemu kowalskiemu wszystko szybko się ładowało. Jeśli spełni się wytyczne Google – Google nagrodzi serwis WWW wzrostem pozycji, większym ruchem z wyszukiwarki, sklepy internetowe zyskają większe rzesze odwiedzających.
Kto nie gra wedle reguł narzucanych przez Google – nie istnieje (lub wkrótce przestanie istnieć – w internecie).
Nie odkrywam ameryki – na tym samym serwerze, na tym samym łączu, do tego samego odbiorcy/klientta plik 3 razy mniejszy obraz WEBP dotrze 3 razy szybciej, niż analogiczny obraz w pliku JPG.
Mawia się, że jeden obraz zastępuje tysiąc słów. Przeliczając to na bajty, megabajty, gigabajty śmiało można stwierdzić, że jeden obraz, jedno zdjęcie produktu, to zwykle dużo, dużo więcej niż tysiąc słów (jeśli chodzi o ilość bajtów). Warto więc zadbać, by ten obraz szybko się załadował.
Ponieważ pliki graficzne, zdjęcia produktów, renderingi, banery, etc. stanowią znaczącą (wagowo) zawartość przesyłanych danych, co z kolei wpływa na szybkość działania strony u odwiedzającego / klienta a co za tym idzie na Core Web Vitals – to nie ma wyjścia, należy się dostosować.
Podsumowanie
W chwili obecnej (2021) właściciele sklepów internetowych muszą kłaść duży nacisk na spełnianie wytycznych Google odnośnie m.in. plików graficznych i dostarczać je w nowych formatach takich jak WEBP, zamiast starych JPG.
Na szczęście dla właścicieli WooCommerce i WordPress: To się pluginem zateguje…

WordPress / WooCommerce i pliki WEBP
I znów – żeby nie było za prosto – mamy dwa aspekty. Istniejące sklepy od lat są wypełniane plikami JPG. Dodawanie (od teraz) plików WEBP nie rozwiązuje problemu starych obrazów. Rozwiązań jest kilka a ja postaram się przedstawić moim zdaniem najlepsze, które sprawdza się w praktyce.
Założenie:
Mamy dostarczać internaucie do jego przeglądarki na komputerze czy smartfonie pliki graficzne nowej generacji WEBP, nawet jak w sklepie mamy już całe GB plików JPG.
Rozwiązanie:
Szczęśliwie jest wtyczka, która radzi sobie z tym wyśmienicie. Pobierz i zainstaluj WebP Converter for Media (autor: Mateusz Gbiorczyk) a następnie włącz. Konfiguracja ustawień nie jest trudna i właściwie wszystko działa doskonale na ustawieniach domyślnych.

Następnym krokiem jest konwersja wszystkich wgranych do tej pory plików obrazów (jpg, png) do formatu WEBP. To może trochę potrwać i może obciążyć serwer. Szczęśliwie, jest to działanie jednorazowe.
Gdy to się skończy, będzie szybciej 🙂 Zaznaczę też, że od tej pory, każdy nowy wgrany plik JPG czy PNG zostanie przez wtyczkę automatycznie poddany konwersji na plik WEBP.
W efekcie otrzymamy pliki WEBP, które będą wysyłane zamiast plików JPG. Mniejsze WEBP dotrą do odbiorcy szybciej. Sumarycznie więc strona ładować się będzie szybciej i działać płynniej. Spełniając część wytycznych SEO związanych z Core Web Vitals.
Warto tutaj zaznaczyć, że wszystkie pliki JPG, PNG, które były na serwerze – zostały. Dodatkowo postały pliki WEBP. A więc wracając do moich przykładów z początku wpisu – jeśli mieliśmy 9GB plików JPG, to teraz mamy dodatkowe 3GB plików WEBP – czyli w sumie 12GB. Strata miejsca w zamian za szybsze ładowanie się stron potencjalnym klientom jest (musi być) do zaakceptowania.
Moim zdaniem nieopłacalne jest robienie z tym porządku. To znaczy można się pokusić na pousuwanie plików JPG i wgraniu ich ponownie już jako WEBP, ale o ile w małym serwisie to jeszcze da się zrobić relatywnie małym nakładem pracy, o tyle w dużym sklepie internetowym może to i spor kosztować (czasu, zasobów, pieniędzy) jak i może doprowadzić do wszelakich komplikacji, brakujących obrazków, zdjęć produktów w treściach artykułów, a także pousuwania dobrze wypozycjonowanych w Google Images starych plików JPG.
Lepiej zostawić już przeszłość, i myśleć o tym, jak lepiej zrobić w przyszłości…
Założenie:
Każdy nowy obraz, zdjęcie wgrywamy już jako gotowy WEBP. Dzięki temu już „na starcie” pliki będą mniejsze. A po katalogach serwera nie będą leżały niepotrzebne pliki JPG/PNG.
Rozwiązanie:
WordPress nie potrafi wgrywać plików WEBP. Na szczęście znów rozwiązaniem jest wtyczka – Support WebP. Instalujemy i włączamy plugin. I to wszystko. Od tego momentu możemy wgrywać do WordPressa zdjęcia i grafiki w formacie WEBP.

Podsumowanie
W działającym (od jakiegoś czasu) sklepie WooCommerce / WordPress wykonujemy dwa kroki:
- Optymalizujemy stare pliki JPG/PNG i tworzymy za pomocą wtyczki pliki WEBP
- Staramy się dodawać już tylko pliki WEBP (ale jak dodamy JPG czy PNG to pierwsza wtyczka je przekonwertuje)

Jak przygotować pliki WEBP
Temu jak przygotować pliki WEBP poświęcam osobny wpis. Dlaczego? Bo z jednej strony wydawałoby się, że wystarczy wykonać w programie graficznym „zapisz plik jako… webp” a następnie wgrać ten plik do WooCommerce / WordPress. Ale z drugiej strony poruszam tematy związane z SEO, nazewnictwem plików, i masowym przetwarzaniem PNG/JPG na WEBP – z racji tego, że ręczna robota w stylu „zapisz plik jako… webp” (nawet hurtowo) nie zawsze da się ogarnąć, gdy mamy do czynienia z tysiącami plików graficznych, obrazów, zdjęć produktów etc.
Zobacz także: