Jak obsługiwać obrazy WebP w SiteGround?
SiteGround jest jedną z rekomendowanych firm hostingowych przez oficjalną WordPress.org. W ostatnich latach hosting SiteGround urósł na inny poziom. Zastąpili tradycyjną konfigurację cPanel i przenieśli wszystkie istniejące konta do niestandardowej konfiguracji Narzędzi witryny. Dzięki temu możesz wyświetlać obrazy WebP zamiast PNG lub JPEG, aby przyspieszyć ładowanie witryny. W tym artykule wyjaśnimy, jak wyświetlać obrazy WebP w SiteGround i sprawdzać w przeglądarce.
Dlaczego obrazy WebP?
Za każdym razem, gdy sprawdzisz wynik szybkości strony w narzędziu Google PageSpeed Insights, pokaże Ci wiele możliwości, które mogą poprawić szybkość witryny. Jedną z ważnych sugestii, których nie można łatwo rozwiązać, jest „Wyświetlaj obrazy w formatach nowej generacji". Formaty nowej generacji obejmują WebP, JPEG 2000 lub JPEG XR, które zastępują tradycyjne formaty obrazów PNG i JPEG.
Wyświetlaj obrazy w formatach nowej generacji
Dlatego udostępnienie obrazu WebP pomoże Ci rozwiązać problem Google PageSpeed Insights. Co więcej, zmniejsza rozmiar obrazu do ponad 75% mniej przy tej samej jakości, poprawiając w ten sposób szybkość ładowania strony.
Jak to działa z SiteGround?
SiteGround oferuje wtyczkę SG Optimizer, która umożliwia konwersję wszystkich obrazów do formatu WebP. Dobrą stroną jest to, że nie potrzebujesz żadnej innej konfiguracji.
- Wszystkie obrazy WebP są przechowywane po stronie serwera i nie można ich przeglądać w Bibliotece multimediów ani za pomocą FTP.
- Możesz sprawdzić, czy obrazy WebP są ładowane podczas przeglądania witryny w przeglądarce.
- Musisz aktywować WebP dla indywidualnej witryny na swoim koncie hostingowym.
Jak obsługiwać obrazy WebP w SiteGround?
Jeśli nie używasz SG Optimizer, musisz najpierw zainstalować wtyczkę.
- Zaloguj się do swojej witryny WordPress i przejdź do sekcji „Wtyczki > Dodaj nowy”.
- Wyszukaj „SG Optimizer”, aby znaleźć wtyczkę.
- Zainstaluj i aktywuj wtyczkę w swojej witrynie.
Zainstaluj wtyczkę SG Optimizer
Po zainstalowaniu SG Optimizer przejdź do menu „SG Optimizer”, a następnie do sekcji „Media Optimization”. Tutaj masz opcje włączania obrazów WebP w swojej witrynie.
Pamiętaj, że jeśli używasz już wtyczek buforujących, nie powinieneś włączać innych opcji we wtyczce SG Optimizer. Upewnij się, że nie włączasz tych samych opcji w dwóch wtyczkach i nie psujesz strony.
Włącz WebP dla nowych obrazów
Najpierw włącz opcję „Generuj kopie WebP nowych obrazów”. Wybierz typ optymalizacji, aby wybrać jakość obrazów WebP. Opcja bezstratna pomaga zachować jakość, a opcja stratna pozwala znacznie zmniejszyć rozmiar poprzez obniżenie jakości obrazu.
Generuj obrazy WebP w SiteGround
Zalecamy wybór bezstratnego, aby zachować jakość przy nominalnym zmniejszeniu rozmiaru. Jeśli jednak masz większe obrazy na swojej stronie i obniżenie jakości jest dla Ciebie akceptowalne, wybierz opcję stratną. W przypadku opcji stratnej możesz wybrać procent jakości, przeciągając suwak.
Generuj stratny WebP w SiteGround
Prześlij nowy obraz i sprawdź jakość kilku obrazów w przeglądarce (patrz poniższa sekcja) przed zbiorczym przetwarzaniem wszystkich istniejących obrazów.
Masowe generowanie plików WebP
Po podjęciu decyzji i skonfigurowaniu jakości kliknij przycisk „Bulk Generate WebP Files”. Spowoduje to zregenerowanie wersji WebP dla wszystkich istniejących obrazów. W przeciwieństwie do zwykłej opcji optymalizacji obrazu, tworzenie obrazów WebP zajmie tylko mniej czasu, w zależności od liczby obrazów w Twojej witrynie. W naszym przypadku mamy obrazy 14K, które zajęły niecałą minutę.
Zmiana jakości
W dowolnym momencie możesz zdecydować się na zmianę jakości z bezstratnej na stratną lub odwrotnie. Możesz również zmienić jakość stratnych obrazów WebP w dowolnym momencie później. Za każdym razem, gdy zmienisz jakość, kliknij link „regeneruj”, aby ponownie wygenerować obrazy w nowej jakości. Alternatywnie, kliknij przycisk „Usuń wszystkie pliki WebP”, a następnie kliknij „Zbiorcze generowanie plików WebP”, aby zregenerować obrazy w nowej jakości.
Testowanie obrazów WebP w przeglądarce
Otwórz swoją witrynę w Google Chrome i sprawdź kod źródłowy w Konsoli programisty. Nadal będziesz widzieć ładowane obrazy PNG lub JPEG zamiast obrazów WebP. Nie jest to jednak właściwy sposób sprawdzania.
Źródło wyświetlające obraz PNG
Ponieważ nie widzisz obrazów WebP na serwerze hostingowym ani w Bibliotece multimediów, możesz nie mieć pewności, czy działa w Twojej witrynie, czy nie. Postępuj zgodnie z poniższymi instrukcjami, aby upewnić się, że witryna działa z obrazami WebP.
- Otwórz Google Chrome i otwórz sekcję Narzędzia dla programistów Chrome. Dostęp do narzędzi programistycznych można uzyskać, naciskając klawisz F12 w systemie Windows i przechodząc do „Opcja + Command + I” na komputerze Mac.
- Kliknij zakładkę „Sieć” i otwórz stronę w pasku adresu. Jeśli już otworzyłeś stronę, kliknij przycisk odświeżania, aby ponownie załadować stronę.
- Teraz możesz zobaczyć, jak aktywność sieciowa jest rejestrowana i kliknąć zakładkę „Img”.
- Tutaj możesz zobaczyć typ zasobu załadowanego z Twojej witryny.
- Możesz posortować kolumnę „Nazwa” lub „Typ”, aby sprawdzić typ obrazu. Powinien być wyświetlany jako „WebP”.
- Jest to sposób na potwierdzenie, że obrazy WebP są udostępniane z Twojej witryny.
Sprawdź SiteGround WebP w przeglądarce
Alternatywny sposób testowania
Drugi sposób testowania jest prosty.
- Otwórz swoją stronę internetową w Chrome i kliknij prawym przyciskiem myszy dowolny obraz.
- Wybierz opcję „Zapisz obraz jako…”.
Zapisz obraz jako
- Powinieneś zobaczyć format obrazu jako „Google WebP”.
Zapisz obraz WebP
Chociaż oryginalny obraz to PNG (lub JPEG), powinieneś widzieć format jako „Google WebP”, ponieważ jest to format obrazu dostępny w Twojej witrynie.
Buforowane obrazy WebP
Niektóre wtyczki do buforowania, takie jak WP Rocket, umożliwiają buforowanie obrazów WebP. Jeśli buforujesz obrazy WebP, możesz znaleźć wersje .png.webp lub .jpg.webp na serwerze hostingowym w katalogu uploads. Nie jest to domyślne zachowanie usługi SiteGround WebP, a po wyłączeniu wtyczki buforowania generowanie pamięci podręcznej zostanie zatrzymane i należy użyć jednej z powyższych metod do weryfikacji.
Buforowanie WebP w WP Rocket
Ile rozmiaru mogę zaoszczędzić?
To naprawdę zależy od jakości, jaką wybierzesz dla swoich obrazów WebP. W naszym przypadku wybieramy opcję bezstratną i mamy oszczędność ponad 77% na pojedynczym obrazie.
- Oryginalny rozmiar obrazu PNG – 139 KB
- Rozmiar obrazu WebP – 31 KB
Testowanie z powrotem za pomocą Google PageSpeed Insights
Teraz wróć do narzędzia Google PageSpeed Insights i przetestuj jedną ze swoich stron internetowych. Sugestia serwowania obrazków w formacie nowej generacji powinna już zniknąć.
Punkty, na które należy uważać
Podczas korzystania z WebP w swojej witrynie pamiętaj o następujących kwestiach:
- Nie wszystkie przeglądarki obsługują WebP, sprawdź swoją witrynę w Google Chrome lub dowolnej obsługiwanej przeglądarce.
- Wtyczki buforujące, takie jak WP Rocket, oferują buforowanie obrazów WebP w celu zwiększenia szybkości ładowania strony. Jednak te wtyczki buforujące nie wykryją obrazów WebP na serwerze SiteGround. Możesz potwierdzić z twórcą wtyczki przed włączeniem buforowania obrazów WebP.
- Usługi CDN, takie jak Cloudflare, będą bezproblemowo współpracować z SiteGround. Jeśli jednak masz oddzielną konfigurację CNAME do obsługi plików multimedialnych przez CDN, sprawdź u swojego dostawcy CDN, czy mogą obsługiwać obrazy WebP.
- Opcja WebP nie jest dostępna dla witryn nadal korzystających z konfiguracji cPanel. Czekasz, aż SiteGround zmigruje Twoje konto do Narzędzi witryny.
- Aby włączyć WebP, musisz użyć wtyczki SG Optimizer, bez wtyczki nie ma możliwości włączenia jej z konta hostingowego.
- Pamiętaj, aby ponownie wygenerować obrazy za każdym razem, gdy zmienisz jakość obrazów WebP.
Ostatnie słowa
Szybkość witryny staje się ważnym czynnikiem w ogłoszonych przez Google Core Web Vitals, które będą miały wpływ na ranking w przyszłości. Witryny SiteGround są już na platformie Google Cloud, a dzięki WebP znacznie wyprzedzisz konkurencję hostowaną na innych firmach.
Źródło nagrywania: webnots.com