TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak obsługiwać obrazy WebP w SiteGround?

5

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.

Powiązane: Jak używać WebP w WordPress, aby naprawić błąd wyświetlania obrazów w formatach nowej generacji w narzędziu Google PageSpeed ​​​​Insights?



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.

Jak obsługiwać obrazy WebP w SiteGround?

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.

Jak obsługiwać obrazy WebP w SiteGround?

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.

Jak obsługiwać obrazy WebP w SiteGround?

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.

Jak obsługiwać obrazy WebP w SiteGround?

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.

Jak obsługiwać obrazy WebP w SiteGround?

Ź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.

Jak obsługiwać obrazy WebP w SiteGround?

Sprawdź SiteGround WebP w przeglądarce

Alternatywny sposób testowania

Drugi sposób testowania jest prosty.

Jak obsługiwać obrazy WebP w SiteGround?

Zapisz obraz jako

  • Powinieneś zobaczyć format obrazu jako „Google WebP”.

Jak obsługiwać obrazy WebP w SiteGround?

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.

Jak obsługiwać obrazy WebP w SiteGround?

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
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów