Czepiłem się tematu WebP w WordPress jak rzep psiego ogona. Dlaczego? Bo według mnie to bardzo prosty i niedoceniany sposób na poprawienie jednego z parametrów wpływających na szybkość ładowania stron. Po kilku pierwszych testowych wdrożeniach postanowiłem ruszyć w świat realnych, produkcyjnych serwisów. Przy czym „wdrożenia” to chyba zbyt szumne określenie. Uruchomienie WebP w WordPress to zwykle włączenie jednej wtyczki i zaakceptowanie standardowej konfiguracji.
Zobaczmy jak taka operacja wpłynie na stronę TZO24.pl. Firmy świadczącej usługi typu przeglądy budowlane, wszelkiego rodzaju pomiary (np. elektryczne) czy abonamentową opiekę typu „złota rączka„. Jest firma mojego przyjaciela. Stroną mam przyjemność się opiekować od niepamiętnych czasów a jej dobro leży mi na sercu.
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.
Już teraz strona osiąga całkiem niezłe wyniki. Kluczowym czynnikiem jest tu naprawdę lekki motyw. Nie jest to żaden gotowy szablon, Divi ani Elementor. Dedykowany kod stworzony przez Artunico robi sporo dobrej roboty. Oprócz tego na wydajność wpływa z pewnością:
- niedrogi ale wydajny i dobry hosting,
- unikanie zbyt wielu wtyczek (średnio mi idzie, ale pracuję nad tym :)),
- korzystanie z mechanizmów typu cache po stronie serwera (jeśli hosting takie oferuje),
- ustawianie nagłówków typu Cache-Control i ExpiresByType,
Jestem w trakcie nauki tego wszystkiego i przyznam, że to temat rzeka. Na szczęście istnieje wiele zasobów i narzędzi wspierających ten proces. Jednym z nich jest świetny GTMetrix. Sprawdźmy więc wyniki GTMetrix dla 3 przypadków:
Spis treści
Wyniki przed wdrożeniem WebP
Strona główna serwisu tzo24.pl – ilość pobranych przez przeglądarkę danych – 693kB
Strona z listą wpisów w kategorii Zrealizowane projekty – 636kB
Pojedynczy wpis ze sporą galerią – 2,65MB
Wpis posiadający kilkanaście zdjęć będzie chyba najlepszym miernikiem naszych poczynań. Obecnie jego pobranie oznacza transfer około 2,5MB do urządzenia naszego odwiedzającego.
Jak widać – jest całkiem nieźle. Zobaczmy czy uruchomienie grafiki w formacie WebP pozwoli osiągnąć jakąś poprawę.
WebP na WordPress – jakiej wtyczki użyć?
Ponownie użyję wtyczki WebP Converter for Media naszego rodaka – Mateusza Gbiorczyka. Wśród kilku wtyczek na rynku wyróżnia się ona szybkim i polskojęzycznym wsparciem oraz przyjemnym i nieskomplikowanym panelem konfiguracyjnym. Jej konkurencją jest chyba tylko WebP Express, ale tam razi trochę zaniedbane wsparcie oraz dość nieprzyjaźnie wyglądająca konfiguracja.
Wtyczka Mateusza stara się zastosować automatycznie najlepszą konfigurację oraz wykryć ustawienia serwera i pokazać komunikat jeśli coś może pójść nie tak.
Wdrożenie WebP – czy zawsze bezproblemowe?
Już miałem napisać, że nie było mi dane obejrzeć takiego komunikatu. W wypadku strony tzo24.pl pojawił się błąd (bypassing_apache). Dziwne, bo strona jest na tym samym serwerze co inna, na której WebP działa.
Na szczęście wtyczka jest wpierana na bieżąco a z jej autorem jestem w stały kontakcie więc przyczyna szybko została namierzona.
Winnym okazał się cache skonfigurowany w panelu zarządzania MyDevil. Po jego wyłączeniu wtyczka ruszyła z kopyta i zaczęła serwować pliki graficzne w formacie WebP. Co za tym idzie:
- poniższe wyniki (i ich porównanie z widniejącymi wyżej) nie mogą być niestety w 100% miarodajne, bo jednak poprzednie były wykonane w środowisku gdzie hosting myDevil zapewniał dodatkowy cache,
- patrząc na te nowe wyniki mam wątpliwości czy ten cache był aż tak bardzo potrzebny :)
A jeśli WebP popsuje moje obrazki?
Zanim pokażę efekty wdrożenia – jeszcze jeden obrazek. Porównanie 2 fragmentów zdjęć przed i po optymalizacji (ustawionej na 75% jakości). Nie wiem czy będzie widać różnicę bo na elimu jest wdrożony WebP. Obrazek zostanie więc zoptymalizowany :). Tak wiem, trochę to przypomina oglądanie reklam nowych lepszych telewizorów. Próbuje się w nich pokazać o ile lepszy będzie obraz jeśli kupimy nowy odbiornik. Trudno – tu raczej chodzi o pokazanie, że zmiana na WebP nie robi zdjęciom dużej krzywdy.
W razie gdyby jednak wdrożenie WebP popsuło nam ocenę za „wrażenia artystyczne” to wtyczkę możemy bezpiecznie wyłączyć, ponieważ nie usuwa ona istniejących fotek i grafik a tworzy ich skonwertowane kopie – więc powrót do świata jpg, png czy gif jest bardzo prosty.
Jeszcze tylko rzut oka na konfigurację wtyczki – zmieniłem w niej tylko dwie rzeczy – dodałem katalogi plugins i themes oraz obniżyłem nieco zalecaną jakość.
Wyniki po wdrożeniu WebP
Strona główna serwisu tzo24.pl – ilość pobranych przez przeglądarkę danych spada z 693kB na 439kB
Strona z listą wpisów w kategorii Zrealizowane projekty – zmiana z 636kB do 472kB
Pojedynczy wpis ze sporą galerią – spadek z 2,65MB do 1,51MB
Podsumowanie
Jak już wcześniej donosiłem – efekty są zauważalne i da się je uzyskać naprawdę niewielkim nakładem pracy. Wykorzystana przeze mnie wtyczka (jak też jej bezpośrednia konkurencja – WebP Express) potrafi rozpoznać przeglądarki nie obsługujące WebP i zaserwować im „normalne” formaty. Jej wdrożenie nie usuwa starych plików graficznych i nie powoduje zauważalnych spadków wydajności (chociaż generuje jednorazowe obciążenia serwera przy konwersji grafik). Odchudza za to strony o kilkadziesiąt procent. Format WebP jest promowany przez Google, obsługuje go niemal komplet popularnych przeglądarek. Ciężko znaleźć powód dla którego mielibyśmy nie używać WebP w naszych WordPressach. Jeśli jeszcze macie wątpliwości lub argumenty przeciwko WebP – zapraszam do dyskusji.
Na deser jeszcze jeden czy dwa wykresiki:
W przypadku stron firmowych, gdzie zdjęcia nie graja tak dużej roli WebP jest wybawieniem, ale jak mamy stronę fotografa to niestety klient nie akceptuje nawet 3% kompresji. Na mojej testowej stronie (15k uu/mo) okazało się, że prawie 25% przeglądarek dalej nie wyświetla webP poprawnie, oczywiście z uwagi na stare ich wersje lub całe systemy użytkowników co nie pozwala się w pełni cieszyć. Ta procent to nadal nieprzewidywalne zachowanie o ile nie wdroży się opcji zaradczych na takie wypadki.
strony fotograficzne to faktycznie nisza, przy której formaty graficzne trzeba ogarnąć na zupełnie innym poziomie, natomiast zgodność ze starszymi przeglądarkami powinna zapewniać sama wtyczka – wg jej autora wykrywa ona niezgodne przeglądarki i „podstawia” im starsze formaty – jeśli z Twoich testów wynika, że ten mechanizm szwankuje to może to zgłosić do autora wtyczki konkretne przykłady aby zmniejszyć ilość takich przypadków?