WebP w WordPress, czyli wyświetlamy obrazy w formacie nowej generacji

W poprzednim roku omawialiśmy temat optymalizacji szybkości serwisu internetowego, dokładnie w tym temacie: https://www.s90.pl/responsywnosc-w-2021-jak-ewoluuja-strony-na-urzadzeniach-mobilnych/. Omawiane były wtedy różnice pomiędzy stroną responsywną, a mobilną, lub jakie są kluczowe elementy dla urządzeń mobilnych. Jednak kluczowym rozdziałem z tamtego wpisu jest kwestia PageSpeed Insights. Od tamtej pory renoma tego serwisu nie straciła na znaczeniu, wynik otrzymany w jego teście niejednokrotnie jest niejaką wyrocznią dobrze wykonanego serwisu, oraz zielonym światłem od Google, aby w przyszłości pojawić się w wynikach wyszukiwania.

Który element najłatwiej poprawić w PageSpeed Insights?

Powyższe pytanie zadaje się każda osoba weryfikująca swój serwis internetowy, co można w szybki sposób poprawić – aby wynik był chociaż trochę lepszy?

Bardzo często możemy spotkać się z takimi wynikami testu:

Aż w sumie dziwne, że w powyższym screen’nie nie ma nic o problemie z blokowaniem renderowania JavaScript oraz CSS – gdyż jest to również niejaką klasyką niezoptymalizowanych serwisów. Jednak wracając do meritum, co na powyższym przykładzie zajmuje najdłużej serwerowi, przy wczytywaniu serwisu? Grafika! Najczęściej są dwa problemy, za duże grafiki oraz w złym rozszerzeniu. Rozmiar grafiki można w szybki sposób zmienić, ale co z tymi formatami nowej generacji? Zacznijmy od początku.

Co to jest WebP?

Jest to stosunkowo nowe rozszerzenie formatów graficznych, stworzone przez Google z myślą o serwisach internetowych. WebP łączy ze sobą możliwości jakie znamy z formatów JPG (lekkość) oraz PNG (przezroczystość) – przy czym jest od nich dużo dużo lżejszy, dzięki czemu skraca czas ładowania serwisu internetowego. Szczególnie jest to ważne w przypadku serwisów o dużej ilości grafik (np. blogów czy sklepów internetowych). Użycie formatów nowe generacji nie tylko skróci czas ładowania strony internetowej, ale i polepszy ocenę uzyskaną z testu, co w fazie końcowej może mieć duży wpływ na efekty pozycjonowania serwisu internetowego.

Konkretne informacje znajdziemy u twórcy: https://developers.google.com/speed/webp 

Z początkiem wprowadzenia tego rozszerzenia obsługa przez przeglądarki była niewielka, trzeba było stosować narzędzia podmiany grafik jeżeli był problem z wyświetleniem grafik przez przeglądarki innych producentów. Początkowo jedynie przeglądarka Chrome wyświetlała grafiki w formacie WebP, na szczęście w dniu dzisiejszym wszystkie popularne przeglądarki internetowe obsługują to rozszerzenie.

Wdrożenie WebP w Wordpress 5.9.3

Idealnie by było, aby takie rozwiązanie twórcy wprowadzili jako domyślne w naszym CMS, jednak jeżeli nawet kiedyś to nastąpi to jeszcze musimy uzbroić się w cierpliwość i wykorzystać narzędzia jakie posiadamy na dzień dzisiejszy.

Do wprowadzenia formatu nowej generacji użyjemy wtyczki WebP Express, dostępną w repozytorium WordPress’a. Moduł ten w kilku prostych krokach odtworzy nasze dotychczasowe grafiki w nowym formacie.

Z najważniejszych cech jakimi moduł się wyróżnia to:

• wyświetla zdjęcia w wzorcowym formacie, w przypadku gdy przeglądarka nie obsługuje nowych formatów,
• konwertuje wgrane grafiki do formatu Webp za pomocą mocy obliczeniowej serwera.

Zainstalowanie modułu oraz aktywowanie nie powinno być bardziej skomplikowane, niż przy instalacji innych modułów. Natomiast po zainstalowaniu wtyczki przechodzimy do ustawień, gdzie mamy poniższe opcje do wyboru:

Sekcja „General” odpowiada za podstawowe ustawienia dla mniej zaawansowanego użytkownika, pozostała reszta ustawiona jest domyślne. Jednak ustawienia te pozwolą bez problemu na zwiększenie wyniku w teście PageSpeed Insights i szybszym wczytywaniu się serwisu internetowego.

Najważniejsze aby ustawić:

1. Operation mode na tryb Varied Image Response
2. Destination folder: na Mingled
3. W przypadku File extension: polecam „Set to .webp”

Dzięki opcji 1, obrazy będą dostosowane do parametrów używanych przeglądarek, przy opcji 2 obrazy przekonwertowane będą przechowywane w tym samym folderze co oryginały (co przyśpieszy ich wczytywanie). Natomiast w opcji 3, grafiki będą miały tą samą nazwę co pliki oryginalne, jedynie z nowym rozszerzeniem.

Zmiana rozmiaru grafik

Kolejną szybką opcją na jaką mamy wpływ, to dostępny rozmiar grafik na stronie. Bardzo często popełniamy błąd i wgrywamy bardzo duże zdjęcie w miejsce gdzie wyświetlana jest jedynie miniatura. Sytuacja ta niepotrzebnie spowalnia wczytywanie się serwisu internetowego i najlepiej takich sytuacji unikać.

Rozmiary grafik oczywiście możemy edytować na wiele sposobów, w profesjonalnych programach graficznych typu Adobe Photoshop lub w jego darmowym odpowiedniku GIMP. Ewentualnie możemy jeszcze masowo zmieniać rozmiary grafik narzędziem Fotosizer, gdzie zamieszczam screen poniżej w jaki sposób można to osiągnąć:

Mam jednak jeszcze możliwość edycji grafik z poziomu WordPress’a bez instalowania dodatkowych modułów:

Ostatnią deską ratunku dla pojedynczego pliku jest wbudowane narzędzie do edycji zdjęć w systemie Windows 10 lub 11.

Podsumowanie

Jak sami widzicie, warto czasami poświęcić dodatkowy czas na obróbkę zdjęcia lub grafiki przed wgraniem jej do serwisu internetowego. Dbanie o detale będzie miało korzystny wpływ na nasze pozycje w wynikach Google. A te przełożą się na liczbę klientów, która do nas będzie docierać.

Jeżeli macie inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.