Jak łatwo leniwie ładować obrazy w WordPress (2 sposoby)

Nikt nie lubi wolnej strony internetowej. Jeśli ładowanie Twoich stron trwa zbyt długo, odwiedzający opuszczą je, zanim zobaczą Twoją treść.

Obrazy są często główną przyczyną wolnego ładowania. Zajmują najwięcej przepustowości, spowalniając Twoją wydajność i rankingi wyszukiwania.

Zoptymalizowaliśmy setki stron pod kątem szybkości, a leniwe ładowanie (lazy loading) jest jednym z najskuteczniejszych szybkich rozwiązań, które polecamy. Powstrzymuje ładowanie obrazów, dopóki użytkownik faktycznie nie przewinie strony, aby je zobaczyć.

W tym przewodniku pokażemy Ci, jak łatwo wdrożyć leniwe ładowanie obrazów w WordPress, aby natychmiast zwiększyć szybkość Twojej witryny.

Dlaczego leniwie ładować obrazy w WordPress?

Lenistwo ładowania obrazów WordPress może przyspieszyć Twoją witrynę i zapewnić lepsze wrażenia użytkownika.

Nikt nie lubi wolnych stron internetowych. W rzeczywistości badanie wydajności stron internetowych wykazało, że 1-sekundowe opóźnienie w czasie ładowania strony prowadzi do 7% mniej konwersji, 11% mniej wyświetleń stron i 16% spadku satysfakcji klienta.

Wyszukiwarki takie jak Google również nie lubią wolno ładujących się stron internetowych. Dlatego szybsze strony zajmują wyższe pozycje w wynikach wyszukiwania.

Obrazy zajmują najwięcej czasu na ładowanie na Twojej stronie WordPress w porównaniu do innych elementów strony. Jeśli dodasz dużo obrazów do swoich artykułów, każdy obraz zwiększa czas ładowania strony.

Jednym ze sposobów radzenia sobie z tą sytuacją jest użycie usługi CDN, takiej jak BunnyCDN, lub prostszej opcji, takiej jak Envira CDN. CDN pozwoli użytkownikom pobierać obrazy z najbliższego im serwera internetowego i skróci czas ładowania witryny.

Jednak Twoje obrazy nadal będą ładowane i wpłyną na ogólny czas ładowania strony. Aby rozwiązać ten problem, możesz opóźnić ładowanie obrazów, wdrażając leniwe ładowanie na swojej stronie internetowej.

Jak działa leniwe ładowanie obrazów?

Zamiast ładować wszystkie obrazy naraz, leniwe ładowanie pobiera tylko obrazy widoczne na ekranie użytkownika. Zastępuje wszystkie inne obrazy obrazem zastępczym lub pustym miejscem.

Gdy użytkownik przewija stronę w dół, Twoja strona internetowa ładuje obrazy, które są widoczne w obszarze przeglądania przeglądarki.

Lenistwo ładowania może być bardzo korzystne dla Twojego bloga WordPress:

• Zmniejsza to czas początkowego ładowania strony internetowej, dzięki czemu użytkownicy szybciej zobaczą Twoją witrynę.
• Oszczędza przepustowość, dostarczając tylko obrazy, które są wyświetlane, co może zaoszczędzić pieniądze na kosztach hostingu WordPress.

Czym jest natywne leniwe ładowanie w WordPress?

Od wersji WordPress 5.5 platforma domyślnie zawiera „natywne leniwe ładowanie”. Oznacza to, że WordPress automatycznie dodaje atrybut HTML loading="lazy" do Twoich tagów img.

Mówi to nowoczesnym przeglądarkom (takim jak Chrome, Firefox i Safari), aby opóźniły ładowanie obrazu, dopóki użytkownik nie przewinie strony w jego pobliże.

Skoro WordPress robi to automatycznie, dlaczego potrzebuję wtyczki?

Chociaż natywne lenistwo ładowania jest dobrym początkiem, nie jest idealne. Opiera się całkowicie na przeglądarce odwiedzającego, aby zdecydować, kiedy załadować obraz. Dedykowane wtyczki, takie jak WP Rocket, oferują lepszą wydajność, ponieważ:

• Lenowo ładują obrazy w tle (czego natywny WordPress nie potrafi).
• Lenowo ładują konkretnie ramki iframe i filmy.
• Używają zaawansowanych skryptów, które ładują obrazy szybciej niż domyślne zachowanie przeglądarki.

Przyjrzyjmy się, jak leniwie ładować obrazy w WordPress przy użyciu dwóch różnych wtyczek. Możesz skorzystać z poniższych szybkich linków, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Leniwe ładowanie obrazów w WordPress za pomocą WP Rocket

Polecamy użycie wtyczki WP Rocket do lenistwa ładowania obrazów w WordPress. Jest to najlepsza wtyczka do buforowania WordPress na rynku, która pozwala łatwo włączyć lenistwo ładowania obrazów.

Poza tym, jest to bardzo potężna wtyczka, która pomaga zoptymalizować szybkość strony bez znajomości skomplikowanych terminów technicznych lub konfigurowania zaawansowanych ustawień.

Od razu po wyjęciu z pudełka, wszystkie ich domyślne zalecane ustawienia buforowania znacznie przyspieszą Twoją witrynę WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WP Rocket. Aby uzyskać więcej szczegółów, możesz zapoznać się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Aby włączyć leniwe ładowanie obrazów, wystarczy zaznaczyć kilka pól. Możesz nawet włączyć leniwe ładowanie filmów, co jeszcze bardziej poprawi szybkość Twojej witryny.

Wszystko, co musisz zrobić, to przejść do Ustawienia » WP Rocket w swoim panelu WordPress i kliknąć zakładkę „Media”. Następnie możesz przewinąć do sekcji „LazyLoad” i zaznaczyć pola obok „Włącz dla obrazów” oraz „Włącz dla ramek i filmów”.

Więcej informacji znajdziesz w naszym przewodniku na temat tego, jak prawidłowo zainstalować i skonfigurować WP Rocket w WordPress.

Metoda 2: Leniwe ładowanie obrazów w WordPress z Optimole

Ta metoda wykorzystuje darmową wtyczkę Optimole. Jest to jedna z najlepszych wtyczek do kompresji obrazów WordPress, która pozwala łatwo włączyć lenistwo ładowania obrazów.

Jeśli Twój ruch przekroczy limity darmowego planu, będziesz potrzebować płatnej wersji Optimole. Aby uzyskać więcej szczegółów, zobacz naszą kompletną recenzję Optimole.

Najpierw musisz zainstalować i aktywować wtyczkę Optimole. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji zobaczysz ekran z prośbą o zarejestrowanie klucza API. Ten ekran można również znaleźć, przechodząc do Optimole w menu administratora.

Upewnij się, że podany adres e-mail jest poprawny, a następnie kliknij przycisk „Utwórz i połącz konto”. Alternatywnie, jeśli jesteś już użytkownikiem, po prostu kliknij przycisk „Mam już klucz API”.

Może być konieczne odczekanie kilku sekund, podczas gdy wtyczka łączy się z Optimole. Następnie wtyczka automatycznie rozpocznie optymalizację obrazów, dzięki czemu odwiedzający zobaczą najlepsze obrazy dla swoich urządzeń.

Gdy to się dzieje, możesz kliknąć zakładkę „Ustawienia”, aby skonfigurować lenistwo ładowania.

Tutaj musisz upewnić się, że ustawienie „Skaluj obrazy i & Leniwe ładowanie” jest włączone. Spowoduje to generowanie obrazów w oparciu o rozmiar ekranu odwiedzającego i poprawi szybkość ładowania.

Następnie kliknij opcję menu „Zaawansowane” i wybierz „Leniwe ładowanie”. Na tym ekranie znajduje się kilka różnych ustawień, które pozwalają dostosować sposób leniwego ładowania obrazów.

Po pierwsze, możesz dostosować ustawienie „Wyklucz pierwszą liczbę obrazów z leniwego ładowania”.

Zatrzyma to lenistwo ładowania obrazów na górze Twoich postów lub stron. Zapewnia to natychmiastowe ładowanie obrazów powyżej "fold line", co poprawia Twój wynik Largest Contentful Paint (LCP) dla lepszego SEO.

Możesz ustawić to na 0, jeśli chcesz, aby każdy obraz ładował się leniwie.

W Optimole znajduje się kilka innych zaawansowanych ustawień leniwego ładowania, które możesz sprawdzić. Ustawienia te są domyślnie włączone.

Pierwszym z nich jest ustawienie „Skaluj obrazy”. Skaluje ono obrazy do rozmiaru ekranu odwiedzającego i przyspiesza ładowanie strony.

Następnie zobaczysz ustawienie „Włącz lenistwo ładowania dla obrazów tła”. Spowoduje to lenistwo ładowania Twoich obrazów tła, które mogą być największymi obrazami w Twojej witrynie.

Innym ustawieniem jest lenistwo ładowania osadzonych filmów i ramek iframe. Jeśli masz dużo osadzonych treści wideo, będziesz chciał zostawić to ustawienie włączone. Załaduje ono obraz zastępczy zamiast filmu. Po kliknięciu obrazu zastępczego załaduje się pełny film.

Możesz nadal dostosowywać te ustawienia i sprawdzać, co najlepiej działa dla Twojej strony internetowej i Twoich obrazów.

Zanim opuścisz ustawienia pluginu, upewnij się, że kliknąłeś przycisk „Zapisz zmiany” na dole strony.

Rozwiązywanie typowych problemów z leniwym ładowaniem

Czasami włączenie leniwego ładowania może spowodować znikanie obrazów lub ich rozmycie.

Oto typowe rozwiązania:

1. Obrazy się nie wyświetlają

Dzieje się tak często, jeśli masz aktywne dwa wtyczki do leniwego ładowania jednocześnie (np. WP Rocket i wbudowane leniwe ładowanie Twojego motywu). Upewnij się, że używasz tylko jednej metody, aby uniknąć konfliktów.

2. Obrazy nad linią zgięcia ładują się z opóźnieniem

Jeśli Twoje logo lub obraz nagłówka pojawia się po reszcie strony, może to negatywnie wpłynąć na doświadczenie użytkownika. Jak wspomniano w powyższych metodach, aby to naprawić, powinieneś wykluczyć pierwsze 2-3 obrazy na stronie z leniwego ładowania.

3. Przesunięcie układu (CLS)

Jeśli Twoje treści „skaczą” podczas ładowania obrazu, obniża to Twój wynik SEO. Aby temu zapobiec, upewnij się, że wszystkie Twoje obrazy mają zdefiniowane atrybuty width i height. WordPress robi to automatycznie, ale niektóre motywy mogą to nadpisać.

Najczęściej zadawane pytania dotyczące leniwego ładowania obrazów

Wiemy, że możesz mieć jeszcze kilka pytań dotyczących leniwego ładowania w WordPress. Oto odpowiedzi na najczęściej zadawane pytania.

1. Czy WordPress automatycznie leniwie ładuje obrazy?

Tak, od czasu wydania WordPress 5.5, podstawowe lenistwo ładowania obrazów jest domyślną funkcją. Jednak ta natywna funkcja jest ograniczona i nie dotyczy obrazów tła, ramek iframe ani filmów. Aby zapewnić optymalizację wszystkich Twoich multimediów, zalecamy użycie dedykowanej wtyczki, takiej jak WP Rocket lub Optimole.

2. Czy leniwe ładowanie jest dobre dla SEO?

Absolutnie. Lenistwo ładowania znacząco poprawia szybkość ładowania strony, co jest kluczowym czynnikiem dla doświadczenia użytkownika. Wyszukiwarki takie jak Google preferują szybsze strony internetowe, więc poprawa szybkości dzięki lenistwu ładowania może dać Twojej witrynie miły impuls w rankingach wyszukiwania.

3. Jaki jest najlepszy plugin do leniwego ładowania dla WordPressa?

Dla wszechstronnej wydajności i łatwości użycia polecamy WP Rocket. Jest to najlepsza wtyczka wydajnościowa na rynku i zawiera potężną i prostą funkcję lenistwa ładowania za pomocą zaledwie kilku kliknięć. Jeśli szukasz świetnej darmowej alternatywy, Optimole jest doskonałym wyborem, który również oferuje solidne opcje lenistwa ładowania.

4. Czy można leniwie ładować filmy w WordPressie?

Tak, możesz i powinieneś! To fantastyczny sposób na poprawę szybkości stron, które zawierają dużo osadzonych treści wideo. Zarówno WP Rocket, jak i Optimole pozwalają łatwo włączyć leniwe ładowanie filmów, które zastępuje je obrazem zastępczym, dopóki użytkownik nie kliknie odtwórz.

5. Czy powinieneś leniwie ładować obrazy nad linią zgięcia?

Ogólnie rzecz biorąc, najlepszą praktyką jest wykluczenie obrazów znajdujących się na samej górze strony (nad linią zgięcia) z leniwego ładowania. Zapewnia to, że pierwsza rzecz, którą zobaczą Twoi odwiedzający, ładuje się natychmiast, tworząc świetne pierwsze wrażenie. Wtyczki takie jak Optimole pozwalają łatwo wykluczyć kilka pierwszych obrazów z leniwego ładowania z tego właśnie powodu.

6. Jak wyłączyć natywne leniwe ładowanie w WordPress?

Jeśli wolisz używać konkretnej wtyczki i chcesz mieć pewność, że natywne lenistwo ładowania WordPress nie będzie przeszkadzać, możesz je wyłączyć, dodając prosty fragment kodu do pliku functions.php swojego motywu lub używając wtyczki do fragmentów kodu, takiej jak WPCode.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Dodatkowe wskazówki dotyczące optymalizacji obrazów w WordPress

Chociaż leniwe ładowanie pomoże poprawić szybkość ładowania strony internetowej, istnieje kilka innych sposobów optymalizacji obrazów WordPress pod kątem najlepszej wydajności.

Na przykład, zalecamy kompresję obrazów przed przesłaniem ich do witryny za pomocą narzędzia takiego jak TinyPNG lub JPEGmini. Alternatywnie, możesz użyć zautomatyzowanej wtyczki do kompresji obrazów, takiej jak Optimole lub EWWW Image Optimizer.

Ważne jest również wybranie odpowiedniego formatu pliku. Chociaż JPEG i PNG są powszechne, zdecydowanie zalecamy używanie formatów nowej generacji, takich jak WebP. Te typy plików oferują lepszą kompresję i jakość, co pomaga w znacznie szybszym ładowaniu Twojej witryny.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak lenistwo ładować obrazy w WordPress. Możesz również zapoznać się z naszym poradnikiem na temat jak łatwo optymalizować obrazy dla sieci bez utraty jakości oraz naszymi ekskluzywnymi wyborami najlepszych wtyczek do przesyłania plików dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.