Jak leniwe ładowanie w WordPress (obrazy i wideo)

Jeśli jesteś właścicielem witryny, prawdopodobnie przynajmniej raz w przeszłości myślałeś o szybkości witryny. W końcu Google bierze pod uwagę szybkość przy określaniu, gdzie umieścić witryny w wynikach wyszukiwania. Tak więc, jeśli Twoja witryna ładuje się wolno, jesteś w niekorzystnej sytuacji, jeśli chodzi o ranking. Wszyscy wiemy, że wyższe rankingi prowadzą do większego ruchu.

Jak więc upewnić się, że witryna WordPress ładuje się tak szybko, jak to możliwe? Jednym ze sposobów jest leniwe ładowanie obrazów.

Leniwe ładowanie to technika, która opóźnia renderowanie obrazów i filmów, dopóki nie będą potrzebne. Wdrożenie tego może znacznie przyspieszyć Twoją witrynę, a dobrą wiadomością jest to, że nie musisz być programistą, aby to zadziałało.

Dzisiaj pokażemy Ci, jak leniwie ładować obrazy i filmy w WordPress za pomocą dwóch metod: z wtyczką i bez.

Co to jest leniwe ładowanie?

Leniwe ładowanie jest powszechną techniką stosowaną w celu poprawy szybkości strony. Pomysł jest prosty: zamiast ładować wszystkie obrazy na stronie, gdy odwiedzający pojawia się po raz pierwszy, renderuje tylko te obrazy, które są widoczne. Następnie, gdy odwiedzający przewija stronę w dół, w razie potrzeby ładuje się więcej obrazów.

Oznacza to, że jeśli odwiedzający nigdy nie przewinie strony w dół, obrazy poniżej wyświetlanego obszaru nigdy nie zostaną załadowane. W ten sposób leniwe ładowanie może zaoszczędzić cenne milisekundy (a nawet sekundy) czasu ładowania strony.

Ponadto leniwe ładowanie może również pomóc w oszczędzaniu przepustowości. Jest to szczególnie ważne, jeśli masz osoby, które odwiedzają Twoją witrynę na urządzeniu mobilnym. Opóźniając ładowanie obrazów i filmów, które nie są widoczne, można zmniejszyć ilość używanych danych.

Jak działa leniwe ładowanie?

Ogólnie rzecz biorąc, leniwe ładowanie działa na jeden z dwóch sposobów. WordPress, począwszy od wersji 5.5, dodaje atrybut HTML5 o nazwie „ładowanie”. W takim przypadku przeglądarka obsługuje wszystkie części procesu leniwego ładowania bez potrzeby stosowania dodatkowego kodu JavaScript.

Inną metodą, opracowaną przed atrybutem HTML5, jest użycie kreatywnego JavaScript. W tym przypadku podczas wczytywania strony wyświetlany jest pusty symbol zastępczy, a następnie używany jest JavaScript do wczytywania obrazów, które pojawiają się w widocznym obszarze.

Tak czy inaczej ładowane są tylko te obrazy, które są potrzebne przeglądarce. Inne obrazy są ładowane, gdy użytkownik przewinie stronę w dół.

Można to zrobić na kilka różnych sposobów, które omówimy bardziej szczegółowo poniżej. Ale to jest sedno działania leniwego ładowania.

Jakie są zalety leniwego ładowania?

Leniwe ładowanie obrazów ma trzy główne zalety:

• Zwiększona prędkość witryny
• Zmniejszone wykorzystanie przepustowości
• Lepsze wrażenia użytkownika

Zwiększona prędkość witryny jest zwykle główną motywacją do wdrożenia leniwego ładowania. Czekając na renderowanie niepotrzebnych obrazów, możesz skrócić czas ładowania strony. Jest to szczególnie prawdziwe, jeśli masz dużo obrazów na stronie lub obrazy są duże.

Następnie leniwe ładowanie może pomóc w oszczędzaniu przepustowości. Jeśli odwiedzający nigdy nie zapuszczają się na dół strony, nie ma marnowania przepustowości na ładowanie obrazów, których nigdy nie zobaczą.

Wreszcie leniwe ładowanie może poprawić komfort użytkowania. Dzieje się tak dlatego, że użytkownicy nie muszą czekać na załadowanie wszystkich obrazów na stronie, zanim będą mogli wejść w interakcję z Twoją witryną.

Czy WordPress domyślnie ładuje się z opóźnieniem?

Tak, od wersji WordPress 5.5 leniwe ładowanie jest domyślnie włączane automatycznie po instalacji. Istnieje jednak kilka sposobów dostosowania doświadczenia, które są dość proste i intuicyjne. Omówimy te metody bardziej szczegółowo poniżej.

Czy powinienem leniwie ładować moje obrazy? Czy są wady?

W większości przypadków leniwe ładowanie obrazów to świetny pomysł, jeśli chcesz poprawić szybkość strony lub zaoszczędzić przepustowość. Należy jednak wziąć pod uwagę również pewne potencjalne wady.

Przesunięcie układu

Jeśli leniwie ładujesz obrazy, układ strony może się zmienić. Na przykład, jeśli masz pasek boczny po prawej stronie strony i leniwie ładujesz znajdujący się na nim obraz, pasek boczny może przesunąć się w dół, aby zwolnić miejsce. Może to być bardzo dezorientujące dla odwiedzających.

Zasadniczo zaleca się używanie symboli zastępczych, aby uniknąć tego problemu.

Potencjalny hit dla SEO

Jeśli nie zrobisz tego poprawnie, leniwe ładowanie obrazów może spowodować, że wyszukiwarki, takie jak Google, będą miały problemy z ich indeksowaniem. Treść jest królem, jeśli chodzi o rankingi, aw tym przypadku możesz stracić cenne fragmenty.

Twoje obrazy mogą już nie pojawiać się w wynikach wyszukiwania i, w zależności od tego, jak ważne są obrazy w stosunku do pozostałej zawartości strony (np.

To powiedziawszy, jeśli prawidłowo skonfigurujesz leniwe ładowanie, nie będzie to problemem. Dlatego, jeśli nie jesteś pewnym siebie programistą, najlepszym sposobem działania jest użycie wtyczki ładowania z opóźnieniem lub trzymanie się domyślnego ładowania z opóźnieniem zawartego w WordPress.

Konflikty wtyczek

Ponadto leniwe ładowanie może powodować problemy z niektórymi wtyczkami WordPress — takimi jak wtyczki, które używają obrazów do generowania podglądów w mediach społecznościowych.

Za każdym razem, gdy wprowadzasz zmiany w swojej witrynie, powinieneś dokładnie je przetestować, aby upewnić się, że wszystko działa tak, jak powinno.

A na wypadek, gdyby coś poszło nie tak, miej pod ręką kopię zapasową witryny WordPress, aby szybko ją odzyskać.

Jak włączyć leniwe ładowanie w WordPress

Leniwe ładowanie jest teraz domyślnie włączone w WordPress. Jeśli nie używasz nowoczesnej iteracji WordPressa (chociaż zalecamy to) lub jeśli chcesz mieć bardziej szczegółową kontrolę nad procesem leniwego ładowania, możesz to zrobić za pomocą jednej z dwóch różnych metod: za pomocą wtyczki lub dodania kodu do swojego strona.

1. Leniwe ładowanie z wtyczką

Jeśli nie jesteś doświadczonym programistą, zalecamy użycie wtyczki, ponieważ za każdym razem, gdy edytujesz kod swojej witryny, ryzykujesz wystąpieniem problemów. Nawet jeśli masz pod ręką kopie zapasowe na wypadek, gdybyś coś zepsuł, nadal najlepiej będzie po prostu użyć renomowanej wtyczki.

Jetpack Boost to darmowa wtyczka przeznaczona do pomocy w ocenie i poprawie wydajności witryny. Oferuje takie funkcjonalności jak:

• Odroczenie nieistotnego kodu JavaScript
• Optymalizacja ładowania CSS
• Leniwe ładowanie obrazu
• Testy wydajności witryny

Aby rozpocząć korzystanie z Jetpack Boost, pobierz go bezpłatnie z katalogu wtyczek WordPress.

Lub w panelu WordPress przejdź do Wtyczki → Dodaj nowy, a następnie wyszukaj „Jetpack Boost” i kliknij Zainstaluj teraz . Po zainstalowaniu kliknij Aktywuj .

Następnie przejdź do nowej opcji menu deski rozdzielczej zatytułowanej Boost . Następnie kliknij Rozpocznij za darmo .

Na następnej stronie przewiń w dół do dużego przełącznika z napisem Lazy Image Loading i włącz go. Teraz spójrz na swoją witrynę i upewnij się, że wszystko renderuje się prawidłowo i wygląda dobrze. Otóż ​​to! Leniwe ładowanie jest dobre, wystarczy kilka kliknięć.

Jeśli chcesz pójść o krok dalej i dostosować leniwe ładowanie witryny, możesz to zrobić za pomocą fragmentów kodu, które możesz dodać do pliku functions.php . Możesz też wstawić je za pomocą wtyczki funkcjonalnej.

Oto tylko kilka zadań, które możesz wykonać:

1. Wyłącz leniwe ładowanie na niektórych stronach
2. Ustaw symbol zastępczy, który będzie wyświetlany do momentu załadowania obrazu
3. Wyłącz leniwe ładowanie dla określonych obrazów
4. Wyłącz leniwe ładowanie dla określonej klasy CSS

Na przykład, jeśli chcesz wykluczyć klasę CSS z procesu leniwego ładowania, użyjesz tego kodu:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Aby uzyskać więcej informacji, zapoznaj się z pełną dokumentacją leniwego ładowania.

2. Jak leniwie ładować obrazy w WordPressie bez wtyczki

Jak wspomnieliśmy wcześniej, WordPress domyślnie umożliwia leniwe ładowanie wszystkich obrazów, które mają ustawione wymiary. Aby to zrobić, nie musisz niczego włączać ani dodawać żadnego kodu. Może się jednak zdarzyć, że zechcesz dostosować sposób działania tej funkcji.

Załóżmy na przykład, że nie chcesz dołączać obrazów szablonów. Dodałbyś ten kod do swojego pliku functions.php :

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

A może chcesz uzyskać superziarnistość i wyłączyć leniwe ładowanie dla określonych obrazów. Możesz to zrobić, przypisując dodatkową klasę obrazu do każdego obrazu dodawanego do strony lub postu, a następnie dodając tę ​​klasę do następującego kodu w pliku functions.php :

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Aby dodać klasę obrazu skip-lazy z powyższego przykładu do obrazu:

1. Dodaj obraz do strony lub postu za pośrednictwem Biblioteki multimediów.
2. Po dodaniu obrazu znajdź ustawienia obrazu. Może to wyglądać inaczej w zależności od tego, czy używasz edytora Gutenberg Blocks, edytora klasycznego czy wtyczki do tworzenia witryn. Możliwość dodania nowej klasy CSS zwykle znajduje się w obszarze ustawień zaawansowanych (Gutenberg i klasyczne edytory) lub w dolnej części opcji ustawień obrazu (większość innych kreatorów witryn).
3. Dodaj klasę skip-lazy do obrazu i zapisz aktualizację.

Możesz dowiedzieć się więcej o możliwościach w dokumentacji WordPress.

Jak leniwie ładować filmy w WordPress

Jeśli chcesz leniwie ładować swoje filmy, możesz to zrobić, dodając kod do samego filmu w poście lub na stronie. Ten kod powinien wyglądać mniej więcej tak:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Często zadawane pytania dotyczące leniwego ładowania w WordPress

Chcesz dowiedzieć się więcej o leniwym ładowaniu WordPressa? Poniżej odpowiedzieliśmy na kilka często zadawanych pytań:

Czy leniwe ładowanie i opóźnianie obrazów poza ekranem to to samo?

Odraczanie obrazów poza ekranem oznacza czekanie na załadowanie obrazów do momentu załadowania reszty krytycznej zawartości widocznej na ekranie. Można to zrobić na kilka sposobów, ale witryny WordPress zazwyczaj używają leniwego ładowania.

Zasadniczo leniwe ładowanie to metoda odkładania obrazów poza ekranem.

Czy mogę leniwie ładować obrazy tła w WordPress?

Tak, jeśli chcesz, możesz leniwie ładować obrazy tła. Jetpack Boost włącza leniwe ładowanie obrazów tła. Jednak w zależności od konfiguracji obrazów może nie być w stanie zidentyfikować ich wszystkich. Na przykład, jeśli obraz jest ładowany za pomocą właściwości background:url, wtyczka nie odczyta go jako obrazu, a zatem nie włączy dla niego leniwego ładowania.

W takiej sytuacji możesz użyć narzędzia takiego jak Lazy Loader, które pozwoli ci wybrać określone obrazy tła, które chcesz leniwie załadować.

Czy mogę leniwie załadować film z YouTube?

Tak, możesz! Aby to zrobić, wstaw następujący fragment kodu z WPOrbit do pliku functions.php motywu. Jeśli nie masz pewności, jak to zrobić, zapoznaj się z naszym przewodnikiem dotyczącym uzyskiwania dostępu i edytowania pliku functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Czy leniwe ładowanie wpływa na SEO?

Tak, leniwe ładowanie może mieć pozytywny wpływ na rankingi w wyszukiwarkach. Google bierze pod uwagę szybkość witryny przy podejmowaniu decyzji o pozycji stron w wynikach wyszukiwania. A ponieważ leniwe ładowanie poprawia wydajność, może również poprawić postrzeganie Twojej witryny przez Google.

Jeśli zrobisz to ręcznie, zamiast używać leniwej wtyczki ładującej, i popełnisz błąd, może to mieć negatywny wpływ na SEO, utrudniając rozpoznawanie Twoich zdjęć przez wyszukiwarki.

Czy leniwe ładowanie wpływa na wygodę użytkownika?

Tak, leniwe ładowanie może poprawić wrażenia użytkownika, ponieważ skraca czas ładowania witryny, a jednocześnie zapewnia odwiedzającym natychmiastowy dostęp do treści. To z kolei może poprawić ich postrzeganie Twojej marki.

Czy potrzebuję wtyczki do leniwego ładowania treści?

Nie, nie potrzebujesz wtyczki do leniwego ładowania treści. Leniwe ładowanie jest domyślnie włączone w WordPressie. Jeśli jednak chcesz mieć większą kontrolę nad procesem leniwego ładowania, możesz użyć wtyczki. Oto wybór najlepszych wtyczek leniwego ładowania dla WordPress.

Czy leniwe ładowanie treści ma jakieś wady?

Nie ma wielu wad leniwego ładowania treści. Poprawia szybkość, wygodę użytkownika i rankingi w wyszukiwarkach. Czasami jednak może powodować dziwne zmiany w układach stron. Dlatego zawsze powinieneś przetestować swoją witrynę po włączeniu leniwego ładowania.

Czy muszę leniwie ładować całą zawartość?

Nie, nie musisz leniwie ładować całej zawartości. Możesz wybrać leniwe ładowanie tylko określonych elementów, takich jak obrazy, filmy lub ramki iFrame.

Co jeszcze mogę zrobić, aby poprawić szybkość ładowania?

Oprócz leniwego ładowania istnieje wiele innych sposobów na zwiększenie szybkości witryny WordPress, w tym:

• Korzystanie z sieci dostarczania treści (CDN)
• Skupienie się na ulepszaniu tych samych rzeczy, które poprawiają również Core Web Vitals.
• Optymalizacja obrazów
• Włączanie buforowania przeglądarki
• Zmniejszanie zasobów

Przyspiesz swoją witrynę dzięki leniwemu ładowaniu WordPress

Leniwe ładowanie obrazów to świetny sposób na optymalizację wydajności witryny i poprawę ogólnego doświadczenia użytkownika. Jetpack Boost oferuje najwygodniejszy i najbardziej niezawodny sposób na leniwe ładowanie, zapewniając jednocześnie inne potężne narzędzia przyspieszające. Gotowy żeby zacząć? Zdobądź Jetpack Boost!