Jak korzystać z plików WebP w WordPress i skrócić czas ładowania strony

WordPress plików internetowych

Większość z nas już wie, że optymalizacja obrazu jest bardzo ważna, ponieważ odgrywa ogromną rolę w całkowitym czasie ładowania witryny WordPress. Dziś chcemy podzielić się z Tobą łatwą alternatywą dotyczącą integracji plików Google WebP z Twoją witryną WordPress. Niektórzy użytkownicy zauważyli zmniejszenie rozmiaru pliku obrazu o ponad 70%!


Co to jest WebP?

Jeśli nie znasz WebP, jest to format pliku obrazu utworzony przez zespół ds. wydajności sieci w Google z zamiarem tworzenia obrazów, które są mniejsze i szybsze. Został on po raz pierwszy ogłoszony w 2010 roku i zawiera metody kompresji stratnej i bezstratnej. Obrazy są dostarczane do przeglądarki internetowej z serwera sieciowego na podstawie używanego typu MIME image / webp.

Są bezstratne obrazy WebP 26% mniejszy rozmiar w porównaniu do PNG i obrazów stratnych WebP 25-34% mniejsze niż JPEG.

Firmy takie jak YouTube i eBay już korzystają z WebP, aby po cichu zasilać wiele swoich witryn. Poniżej znajduje się przykład z serwisu eBay, w którym na swojej stronie domowej znajduje się średnio około 30 plików WebP.

korzystanie z serwisu eBay

Dlaczego WebP jest tak ważny? Według httparchive, od sierpnia 2016 r, obrazy stanowią ponad 64% średniej wagi strony internetowej. Zazwyczaj jest to więcej niż kombinacja CSS, JS i HTML. Dlatego wybór niezawodnej metody optymalizacji obrazu i formatu obrazu, takiego jak WebP, ma kluczowe znaczenie, ponieważ pozwala na maksymalne zmniejszenie masy strony. Ogólnie rzecz biorąc, im mniejsza strona, tym szybciej się ładuje. I to ucieszy nie tylko twoich odwiedzających, ale także Google, as szybkość strony jest czynnikiem rankingowym.

Wsparcie WebP

Teraz, gdy WebP jest bardzo ekscytujące, ważne jest również, aby wspomnieć o wsparciu przeglądarki. Nie wszystkie współczesne przeglądarki obsługują obecnie WebP. Według mogę uzyć, WebP jest obecnie obsługiwany w Chrome 23+, Opera 39+, we wszystkich wersjach Opera mini, przeglądarce Android 4.3+ i Chrome na Androida.

obsługa przeglądarki internetowej

Ale poczekaj! Nie bądź zbyt rozczarowany, ponieważ w tutorialu, który pokażemy poniżej, istnieje metoda dostarczać pliki WebP do obsługiwanych przeglądarek i plików JPG / PNG jako rezerwowe. Oznacza to, że nieobsługiwane przeglądarki nie zobaczą uszkodzonego obrazu, po prostu zobaczą to, co widziały wcześniej. Pomyśl o WebP jako o dodatku do witryny WordPress, a nie o migracji.

Według W3Schools, Chrome ma monopol na udział w rynku przeglądarek na poziomie nieco ponad 70%. Ale nie bierz udziału w rynku jako solidnego dowodu, spójrz na dane swoich gości i zobacz, jakich przeglądarek używają, ponieważ mogą się różnić w zależności od twojej niszy. Możesz być zaskoczony, jak wypaczone są statystyki. W Google Analytics w sekcji „Odbiorcy” możesz kliknąć „Przeglądarka i system operacyjny” i zobaczyć, z jakich przeglądarek korzystają użytkownicy odwiedzający Twoją witrynę. Stworzyliśmy losową stronę internetową i jak widać poniżej, 67% odwiedzających pochodzi z Chrome, a kolejny 1% z Opery. Więc 68% tych osób może przeglądać i korzystać z WebP format pliku obrazu!

przeglądarki Chrome Chrome

Jak korzystać z plików WebP w WordPress

W dzisiejszym przykładzie użyjemy kombinacji dwóch różnych wtyczek WordPress, aby uruchomić WebP w WordPress. Są one tworzone i rozwijane przez zespół w KeyCDN, która jest globalną siecią dostarczania treści (CDN).

  1. [premia] Optimus Image Optimizer: Bezstratna wtyczka do kompresji obrazów dla WordPress, konwertuje obrazy do WebP
  2. [wolny] WordPress Cache Enabler: Wtyczka buforująca która umożliwia obsługę WebP do obsługiwanych przeglądarek

Optimus Image Optimizer

Możesz pobrać Optimus Image Optimizer z Repozytorium WordPress, od optimus.io, lub z poziomu pulpitu wtyczek. Uwaga: Wymaga licencji premium, jeśli chcesz przekonwertować swoje zdjęcia na WebP. Po zainstalowaniu możesz włączyć opcję „Tworzenie plików WebP” w ustawieniach wtyczki.

tworzenie plików webp

Po włączeniu WebP tworzy to zasadniczo dodatkowy obraz dla wszystkiego, co jest konwertowane. Więc jeśli prześlesz plik PNG lub JPG, istnieje teraz również wersja obrazu .webp. Pamiętaj, że PNG / JPG jest nadal potrzebny, ponieważ są one nadal używane do obsługi nieobsługiwanych przeglądarek. Optimus wykonuje kompresję bezstratną, więc pliki PNG i JPG są również kompresowane.

pliki webp i png

Dostępna jest również opcja optymalizacji zbiorczej w przypadku, gdy już skompresowałeś swoje zdjęcia i nadal musisz je przekonwertować na WebP.

Optymalizator obrazu zbiorczego

WordPress Cache Enabler

Teraz, gdy masz obrazy WebP, potrzebujesz sposobu, aby powiedzieć WordPressowi, aby wyświetlał obrazy WebP w obsługiwanych przeglądarkach i PNG / JPG w innych przeglądarkach. Można to osiągnąć dzięki bezpłatnej wtyczce WordPress Cache Enabler. Możesz pobrać wtyczkę z Repozytorium WordPress lub zainstaluj go z poziomu pulpitu wtyczek. Po zainstalowaniu możesz włączyć opcję „Utwórz dodatkową wersję buforowaną WebP” w ustawieniach wtyczki.

ustawienia aktywatora pamięci podręcznej

Po włączeniu tej opcji tworzona jest dodatkowa buforowana wersja strony WebP.wersje webp

I to jest to! Teraz powinieneś mieć pliki WebP uruchomione na swojej stronie WordPress.

Porównanie JPG do WebP

Przeprowadziliśmy porównanie JPG do WebP aby pokazać różnice, które możesz osiągnąć.

NAZWA PLIKUORYGINALNY JPGSPRĘŻONY JPGFORMAT WEBPRÓŻNICA WIELKOŚCI%
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58,8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71,7 KB93%

WebP spowodowało Zmniejszenie średniego rozmiaru obrazu o 85,87%.

Porównanie PNG do WebP

Ponownie przeprowadziliśmy również porównanie PNG do WebP aby pokazać różnice, które możesz osiągnąć.

Nazwa plikuOryginalny PNGSkompresowany PNGFormat WebPRóżnica wielkości%
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

WebP spowodowało Zmniejszenie średniej wielkości obrazu o 42,8%.

Podsumowanie

Jak widać, WebP jest bardzo łatwy do wdrożenia w witrynie WordPress i można osiągnąć znacznie mniejsze rozmiary plików graficznych! Nie ma kompresji obrazu, która mogłaby się równać z oszczędnościami WebP. Aha, i czy wspominaliśmy, że WebP ma możliwość korzystania z kompresji bezstratnej? Oznacza to, że nie zauważysz zauważalnej utraty jakości. Jeśli szukasz lepszego sposobu na przyspieszenie WordPressa, WebP może być świetnym rozwiązaniem.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map