Przyjrzyjmy się tematowi grafiki w formacie WebP w WordPress. Format ten wydaje się być dobrym pomysłem na zmniejszenie rozmiaru (ilości KB) danych pobieranych przez przeglądarki naszych odwiedzających. W ramach treningu postanowiłem wdrożyć obsługę WebP na 2-3 „realnych” stronach opartych o WordPress. Pokażę co z tego wynikło i porównam dla Ciebie 2 popularne wtyczki. obaczysz też wpływ wdrożenia na wyniki testów wydajności stron (np. GTMetrix).

Jeden z poradników, od którego zacząłem zgłębianie tego tematu to https://blog.lh.pl/webp-w-wordpressie-jak-wyswietlac-obrazy-w-formatach-nowej-generacji/. Jest tam kilka porad na temat wtyczki WebP Express i dość łopatologiczna instrukcja. W tym wpisie dowiesz się czegoś więcej o tym jak wdrożenie WebP może wpłynąć na Twoją stronę i czy warto w tym celu użyć alternatywnej (mniej popularnej) wtyczki polskiego autorstwa. Zapraszam!

Strony, na których wdrożymy WebP i narzędzia jakich użyjemy w testach

  • blog.elimu.pl – ta strona – na motywie Extra (od Elegant Themes) ,
  • nieporadnik.it – mój poboczny projekt – ciągle w powijakach, na bazowym motywie Twenty Twenty,
  • blog palika – na starym i lekkim motywie Bushwick.

Strony będziemy „mierzyć” przed i po wdrożeniu z pomocą GTMetrix oraz Boldgrid Speed Coach. Obie usługi pomagają sprawdzić szybkość ładowania zasobów, liczbę pobieranych MB i wiele innych parametrów. Pokazują też gdzie jest pole do poprawy jeśli chodzi o optymalizację szybkości ładowania stron.

Zastrzeżenie – oprócz bloga elimu prowadzę też inne strony oraz jednoosobową działalność oferującą doradztwo i usługi IT – w tym tworzenie, rozbudowa, przebudowa i utrzymanie stron internetowych. Szczegóły na https://palikowski.eu.

Dygresja numer 1 – wcześniej nie używałem GTMetrix a jest to rewelacyjne narzędzie. Co najlepsze w wersji darmowej pozwala wykonać do 50 testów „na żądanie” tygodniowo i bardzo szczegółowo porównywać wyniki historycznych pomiarów.

Boldgrid SpeedCoach nie jest tak zaawansowany ale nie ma limitu ilości testów. Jest on jednak dostępny tylko dla użytkowników niektórych wtyczek Boldgrid w wersji premium – ja akurat jedną taką mam.

Sprawdzamy wydajność blog.elimu.pl – zanim włączymy WebP

Przed włączeniem czegokolwiek postanowiłem zrobić testy, które pokażą nam jak strony radzą sobie obecnie. Od razu zastrzegam, że ich wyniki nie napawają mnie dumą – ale w temat optymalizacji i przyspieszania wgłębiam się od dość niedawna i nigdy nie mam na to tyle czasu ile chciałbym. Szewc bez butów chodzi :).

Kilka zrzutów ekranu dotyczących bloga Elimu.

Ogólny wynik z Boldgrid Speed Coach
Wskazówka dotycząca ograniczenia wielkości strony – obecnie ma ona 5,3MB!
z tego 4.6MB to obrazki!
Ogólny wynik GTMetrix

Dygresja 2 – przy okazji testów okazało się że obecny motyw (Extra od Elegant Themes) wyświetla obrazki w oryginalnych wielkościach i je skaluje po stronie przeglądarki – co powoduje pobieranie ogromnych plików przy ładowaniu każdej strony. Na razie zostawię to (ewidentnie złe) rozwiązanie tak jak zastałem – dzięki temu zmiana na WebP powinna pokazać dużo większy uzysk. Poprawą tego zajmiemy się później – może będzie to materiał na kolejny wpis :).

GTMetrix też wskazuje ilość obrazów i ciężar strony jako pierwsze do poprawy

Sprawdzamy wydajność Nieporadnik.it przed wdrożeniem obsługi WebP

Pora na kilka ekranów z wyników analizy wydajności strony nieporadnik.it.

Boldgrid Speed Coach
Kilka wskazówek od Boldgrid…
GTMetrix – ocena ogólna
GTMetrix – potencjalne obrazki do poprawy

Jak wygląda wydajność Blogu Palika?

Strona główna mojegi bloga zawiera raptem 1 duży obrazek więc nie nadaje się do testów wdrożenia WebP – efekt byłby mizerny.

Boldgrid
GTMetrix bardzo korzystnie ocenił stronę główną

Sprawdźmy więc jakąś podstronę zawierającą kilka grafik.

Dygresja 3 – podczas pisania artykułu odkrywałem różne opcje w GTMetrix. Nie należy on do najprostszych i najbardziej intuicyjnych narzędzi ale warto się weń wgłębić. Choćby taka opcja pokazania szczegółowej listy zasobów w postaci sortowalnego „wodospadu”. Może być lepiej? Może! Nad wykresem mamy możliwość przefiltrowania ich po rodzaju. Smaczek, ale jaki przydatny! Poniżej ekran „same obrazki posortowane po rozmiarze plików”:

Filtry nad listą żądań pozwalają skupić się na konkretnym typie analizowanych zasobów

Wdrażamy wtyczkę WebP Express na Blogu Elimu

Jedna z najpopularniejszych wtyczek do wdrożenia WebP bez korzystania z usług zewnętrznych to darmowy WebP Express. Pozwala ona skorzystać z bibliotek na serwerze (np. GD czy ImageMagick) w celu konwersji obrazków oraz dodaje reguły do .htaccess w celu podmiany w locie plików JPG i PNG na WebP. Jest to jedna z najpopularniejszych wtyczek związanych z naszym tematem, zaczniemy więc od niej.

Wdrożenie i konfiguracja przebiegły całkiem sprawnie. Nasze ustawienia to:

ustawienia wtyczki WebP Express na blogu Elimu
ustawienia wtyczki WebP Express na blogu Elimu – konwersja

Zobaczmy więc – czy widać jakąś poprawę?

W obu narzędziach widać nieznaczną poprawę szybkości ładowania strony. Jeśli jednak chodzi o ilość danych, to różnica jest porażająca – zamiast prawie 5 megabajtów obrazków ładujemy poniżej megabajta. Tak, to nadal sporo, ale około pięć razy mniej niż przed wdrożeniem!

zmiana z 4,6MB na 945kB – sukces!

Porównując przykładowy szczegółowy raport „przed” i „po” widać jakie mamy różnice, na niemal każdym pliku graficznym – od kilkunastu do nawet 90% po konwersji!

GTMetrix pozwala nam pobrać szczegółowy PDF z wynikiem każdego testu

Wykres z GTMetrix pokazujący całkowity rozmiar strony po wdrożeniu WebP nie pozostawia wątpliwości:

Zmiana w ilości pobieranych przez przeglądarkę danych – naprawdę robi wrażenie!

Tu drobna dygresja (to już czwarta?) dotycząca „procentów” (Performance i Structure ) i „literek” (Grade) pokazywanych przez usługi typu GTMetrix. Nie ma co się aż tak bardzo nimi sugerować. Są to tylko bardzo ogólne i rzadko powtarzalne wyniki- szczególnie, jeśli np. testuje nas serwer spoza Europy. Kolejne testy mogą pokazywać bardzo różne wartości – nawet jeśli nic na stronie nie zmieniamy. Przykładowo nasz serwer może być bardziej obciążony i ładować treści wolniej. Dodajmy do tego zmienne obciążenie sieci między nami a usługą testującą a czasy ładowania mogą różnić się czasem o kilkaset procent przy każdym odświeżeniu – co od razu zaniża (lub zawyża) nam ranking.

Poniżej przykładowy wykres kilku testów przed i po wdrożeniu WebP na blogu Elimu – widać, że różnice mogą sięgać kilkunastu procent nawet jeśli nic nie optymalizujemy.

Różnice w wynikach globalnych mogą być mylące

Zatem – jeśli grzebiemy przy optymalizacji skupmy się na konkretnych błędach i zaleceniach a nie na globalnym wyniku. Lepiej wczytać się w szczegóły i tam szukać konkretnych miejsc do poprawy.

Wdrażamy WebP Converter for Media na nieporadnik.it

Pora na polski akcent. Autorem wtyczki WebP Converter for Media jest bowiem Mateusz Gbiorczyk. Oferuje ona bardzo podobny zestaw funkcji co poprzednia. Instalacja i konfiguracja wydaje się nawet prostsza – mamy tu język polski i dość przejrzystą, prostszą i wzbogaconą w wiele odnośników do pomocy konfigurację:

To co bym ewentualnie zmienił w samej wtyczce to dodanie informacji jakie pliki .htaccess zostały utworzone czy też zmodyfikowane – i w jakich lokalizacjach. Plusem byłoby też nie tylko link do tabeli z konfiguracją serwera ale pokazanie jak ma się ona do zaleceń autora wtyczki – np. w postaci 2 kolumn obok siebie i znaczników (np. zielony / żółty / czerwony pokazujących spełnienie / częściowe / nie spełnienie wymagań).

Konfiguracja naszego serwera – szkoda, że nie ma tu oznaczeń czy jest poprawna (autor pisze aby samemu ją porównać z zaleceniami – jest to jednak mniej wygodne)

AKTUALIZACJA z 2020-01-17 – autor wtyczki napisał do mnie, że wiele błędów konfiguracji jest wykrywanych przez wtyczkę i użytkownik jest w takiej sytuacji informowany w czytelny sposób. Wyjaśnił mi też w czym jego wtyczka stara się być lepsza od konkurencji i przekonał mnie, że warto postawić właśnie na nią.

Ok, czy uzyskaliśmy jakiś efekt? Nieporadnik to mała strona, mimo to zmiany widać natychmiastowo, choćby po ilości pobieranych danych:

Porównanie wyników w GTMetrix też wygląda korzystnie, chociaż nie mogę powiedzieć aby była to reguła (przy blogu elimu aż tak jednoznacznie dobrze to nie wyglądało – ale nie skupiałbym się na tym – patrz moja dygresja wyżej o czytaniu wyników tego typu pomiarów).

Lista ładowanych zasobów pokazuje konkretne uzyski na poszczególnych plikach:

Wdrożenie WebP Converter for Media na Blogu Palika

Mój prywatny blog ma dość dużą bibliotekę mediów. Dlatego ich konwersja z poziomu wtyczki potrwała znacznie dłużej (około 10 minut) niż przy Nieporadniku. Wtyczka na bieżąco pokazywała postęp tego procesu…

… a ja nerwowo zaglądałem na limity mojego planu hostingowego, które ciągle pokazywały niemal maksymalne zużycie CPU i pamięci. Obawiałem się czy jakiś automat dbający o innych użytkowników serwera nie zablokuje mojego konta:

Na szczęście htop pokazało, że serwer ma się całkiem dobrze a proces zakończył się poprawnie.

Po zakończeniu operacji jeden rzut oka na wykres pokazujący zmianę ilości danych pobieranych przez przeglądarkę i nie ma wątpliwości – prawie dwukrotnie mniej przesłanych danych – 1,2MB zamiast 2,4MB. Robi wrażenie?

Zmiana wielkości obrazków – część z nich zmalała o około 90% – ewidentnie było warto (i ewidentnie wcześniej nie sprawdziłem, że te obrazki w treści trzeba zoptymalizować – sama ich optymalizacja mogła mocno poprawić sytuację)

Podsumowanie

Wszystkie wdrożenia zaowocowały naprawdę pokaźnymi oszczędnościami na ilości danych wysyłanych z serwera. Poszczególne obrazki zostały odchudzone od 20 do 90%. Strony stały się znacznie lżejsze. Wtyczki instaluje się szybko i wydają się działać sprawnie. Oczywiście na każdym hostingu może być inaczej, ale większość powinna dać sobie radę. Przed wdrożeniem warto jednak wykonać kopie zapasowe wszystkich plików – aby w razie czego móc szybko odwrócić zmiany jeśli coś sobie popsujemy.

Nie sprawdziłem czy na przeglądarkach nieobsługujących WebP wszystko działa tak jak obiecują autorzy wtyczek (czyli, że serwowane są pliki JPG/PNG) ale optymistycznie zakładam, że tak. Do tego Apple dodało obsługę WebP do Safari więc lista niezgodnych klientów jest już raczej marginalna.

Wtyczki testowałem na stronach, które korzystały z typowych ustawień WordPress. Nie były specjalnie dopieszczone pod względem optymalizacji. Według mnie oddaje to warunki większości stron prowadzonych przez niedoświadczonych użytkowników WordPress. Mamy nadzieję, że jego twórcy dbają o każdy szczegół i wykorzystanie wszystkich sztuczek w celu poprawienia szybkości ładowania stron, ale często okazuje się, że niekoniecznie tak jest. Warto więc sięgnąć po technologię WebP jeśli chcemy w prosty sposób ulżyć łączom naszych odbiorców i uzyskać kilka punktów więcej w różnorakich testach.

Biuletyn elimu

Wysyłany raz w miesiącu

Nie spamujemy! Zajrzyj do polityki prywatności po więcej informacji