Co to jest leniwe ładowanie i jak poprawia wygodę użytkownika?

Jeśli istnieje jeden aspekt witryny internetowej, który większość właścicieli witryn ignoruje, jest nim czas ładowania strony. Spędzasz dużo czasu i pieniędzy, przygotowując idealny projekt naszej witryny internetowej i dodając różne rodzaje treści, aby utrzymać zaangażowanie odwiedzających. Ale co, jeśli to nie wystarczy, aby zamienić odwiedzających w użytkowników?

Badania pokazują, że z każdą dodatkową sekundą ładowania Twojej witryny, szansa na konwersję odwiedzającego w klienta maleje. Według Portenta szansa na konwersję wynosi 40% w ciągu jednej sekundy ładowania, po czym spada do 34% w kolejnej i 29% po trzech sekundach. Być może zastanawiasz się: „Jakie jest zatem rozwiązanie?”

I tu właśnie pojawia się koncepcja leniwego ładowania. To szybszy sposób na załadowanie witryny bez utraty jakości treści.

W tym artykule omówimy Lazy Loading, dlaczego warto z niego korzystać i jak wypada na tle innych metod. Wejdźmy w to!

Spis treści

• Co to jest leniwe ładowanie?
• Znaczenie leniwego ładowania
• Chętne ładowanie vs. leniwe ładowanie
• Jak działa leniwe ładowanie
• Implementacja leniwego ładowania

Co to jest leniwe ładowanie?

Leniwe ładowanie to sposób na zaoszczędzenie czasu poprzez ładowanie tylko tych części witryny, których potrzebujesz od razu. Zamiast ładować wszystko na raz, co może być powolne i zużywać dużo zasobów, ta metoda ładuje zawartość krok po kroku

Obrazy lub filmy, które nie ładują się od razu, często zawierają elementy zastępcze, dopóki nie będą potrzebne. Na przykład Lazy Loading nie ładuje wszystkich obrazów na raz. Ładuje tylko te, które widzisz na ekranie. Reszta nie zostanie załadowana, dopóki nie przewiniesz w dół

Zamiast czekać, aż wszystko się załaduje, możesz od razu zobaczyć, co jest już na ekranie.

Wskazówka eksperta: Sprawdź, jak dobrze działa leniwe ładowanie w różnych przeglądarkach i urządzeniach.Ma to na celu upewnienie się, że nie występują żadne problemy ze zgodnością.

Znaczenie leniwego ładowania

Wiemy już, że Lazy Loading może pomóc Ci zwiększyć konwersję. Ale to nie jedyna zaleta, jaką ma. Oto kilka innych powodów, dla których warto wdrożyć Lazy Loading w swojej witrynie.

Optymalizuj wydajność

Leniwe ładowanie ogranicza transfer danych, gdy ktoś odwiedza Twoją witrynę. Ma to kluczowe znaczenie dla osób korzystających z urządzeń mobilnych z wolnym internetem i planami o małej przepustowości.

Zmniejsz przepustowość i obciążenie serwera

Leniwe ładowanie oszczędza dane i zmniejsza pracę serwera. Obniża to koszty dla właścicieli witryn i użytkowników, zatrzymując ładowanie treści, gdy nie są potrzebne.

Popraw SEO

Wyszukiwarki takie jak Google przywiązują dużą wagę do szybko ładujących się witryn internetowych, dlatego jest to oficjalny czynnik rankingowy. Stosując technikę Lazy Loading, możesz zwiększyć prędkość ładowania strony, zmniejszyć współczynnik odrzuceń i wyprowadzić swoją witrynę na wyższy ranking.

Co to jest chętne ładowanie?

Chętne ładowanie jest dokładnym przeciwieństwem leniwego ładowania. Początkowo ładuje wszystkie wymagane zasoby na raz, w tym pliki multimedialne, skrypty i style. Oznacza to, że wszystkie niezbędne elementy strony są od razu dostępne. Nie ma więc dodatkowego ładowania, gdy użytkownicy przewijają lub wchodzą w interakcję.

Ładowanie eager było konwencjonalną metodą stosowaną w przeszłości i wiele stron internetowych nadal z niej korzysta.

Chociaż jest to łatwe do wdrożenia, szybkie ładowanie stało się mniej istotne ze względu na kilka czynników, w tym:

Zwiększony rozmiar strony internetowej

Nowoczesne strony internetowe wykorzystują więcej multimediów i części interaktywnych. Oznacza to, że przeciętna strona internetowa jest znacznie większa niż wcześniej. Dlatego szybkie ładowanie może skutkować dłuższym czasem ładowania strony początkowej. Zwłaszcza dla użytkowników z wolniejszym łączem internetowym.

Negatywny wpływ na wydajność

Dłuższy czas ładowania strony może zaszkodzić ważnym miarom wydajności witryny , takim jak First Contentful Paint (FCP) i Largest Contentful Paint (LCP). Są one kluczowe dla SEO i doświadczenia użytkownika.

Wzrost liczby użytkowników mobilnych

W związku z masowym korzystaniem z przeglądania mobilnego niezwykle szybkie ładowanie treści od samego początku stało się kluczowe.

Chętne ładowanie kontra leniwe ładowanie

Oto krótkie porównanie Eager Loading i Lazy Loading:

Leniwe ładowanie i szybkie ładowanie to dwie różne metody ładowania zasobów, które mają swój własny zestaw zalet i wad. Jednak z dzisiejszego punktu widzenia technologicznego Lazy Loading jest uważaną za preferowaną technikę w przypadku większości nowoczesnych witryn internetowych ze względu na jej wydajność, lepszą wydajność i lepsze doświadczenie użytkownika.

Jak działa leniwe ładowanie

Teraz, gdy już wiesz, dlaczego Lazy Loading zapewnia lepsze wyniki między nimi, przyjrzyjmy się, jak to osiąga.

Nawigacja i interakcja użytkownika : Leniwe ładowanie zależy od sposobu, w jaki użytkownicy korzystają ze strony internetowej.Często zaczyna się, gdy użytkownik przewija lub porusza myszą. Podczas przewijania przeglądarka zgaduje, że w obszarze, który widzi, potrzebna jest nowa treść. Następnie rozpoczyna ładowanie tych zasobów. Leniwe ładowanie może również rozpocząć się od innych działań, takich jak kliknięcie przycisku lub najechanie kursorem na element.

Techniczna implementacja obrazów : Leniwe ładowanie działa inaczej w przypadku różnych rodzajów treści.W przypadku obrazów, które są bardzo popularne, zwykle zaczynasz od pokazania symbolu zastępczego niskiej jakości lub prostej ikony ładowania. Gdy użytkownik przewija w pobliżu prawdziwego obrazu, ładuje się wyraźny obraz wysokiej jakości. W ten sposób użytkownicy nie czekają na obrazy, których jeszcze nie widzą.

Zastosowanie różnych zasobów sieciowych : Leniwe ładowanie to elastyczna metoda, której można używać w przypadku różnych elementów, nie tylko obrazów.Działa równie dobrze w przypadku filmów, ramek iframe, a nawet elementów wymagających dużej liczby skryptów. Ładowanie tych elementów tylko wtedy, gdy jest to potrzebne, oznacza, że ​​możesz znacznie przyspieszyć ładowanie swojej strony i efektywnie zarządzać swoimi zasobami. Jest to szczególnie istotne w przypadku dużych zasobów, takich jak filmy w wysokiej rozdzielczości.

Implementacja leniwego ładowania

W tej części pokażemy Ci różne sposoby wdrożenia Lazy Loading na Twojej stronie internetowej.

Metoda 1 – Ręczne wdrażanie leniwego ładowania

Ręczny sposób implementacji Lazy Loading nie jest dla każdego. Jest to skomplikowane i powinieneś mieć przynajmniej średniozaawansowaną wiedzę na temat kodowania.

Aby to zrobić, będziesz głównie używać HTML i JavaScript. Zanim zaczniesz, upewnij się, że masz dostęp do plików motywu swojej witryny WordPress i możesz swobodnie edytować kod HTML i JavaScript.

Oto szczegółowy przewodnik, który pomoże Ci przejść przez ten proces:

Krok 1 : Utwórz kopię zapasową swojej witryny

Zawsze wykonaj kopię zapasową witryny WordPress przed wprowadzeniem jakichkolwiek zmian w plikach motywu, aby uniknąć utraty danych w przypadku popełnienia błędu.

Krok 2 : Edytuj plik Functions.php motywu

• Uzyskaj dostęp do plików swojej witryny WordPress (za pomocą klienta FTP lub Menedżera plików w panelu sterowania hostingu).
• Przejdź do /wp-content/themes/your-theme/ i znajdź plik Functions.php .
• Otwórz plik Functions.php do edycji.

Krok 3 : Dodaj skrypt Lazy Loading

W plikufunctions.php dodaj funkcję kolejkowania pliku JavaScript dla leniwego ładowania. Oto podstawowy przykład:

funkcja add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

W tym kodzie założono, że masz plik JavaScript o nazwie lazy-load.js w folderze js w katalogu motywu.

Krok 4 : Utwórz plik JavaScript

• Utwórz nowy plik o nazwie lazy-load.js w folderze js w katalogu motywów.
• Dodaj JavaScript, aby obsłużyć leniwe ładowanie. Oto podstawowy przykład użycia IntersectionObserver :

document.addEventListener(“DOMContentLoaded”, funkcja() {

niech lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if („IntersectionObserver” w oknie) {

niech lazyImageObserver = new IntersectionObserver(funkcja(wpisy, obserwator) {

wpisy.forEach(funkcja(wpis) {

if (entry.isIntersecting) {

niech lazyImage = wpis.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove(“leniwy”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(funkcja(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

Krok 5 : Zaktualizuj tagi graficzne w WordPress

Zmodyfikuj tagi obrazów, aby obsługiwały leniwe ładowanie. W szablonach PHP lub bezpośrednio w swoich postach/stronach zmień tagi graficzne w następujący sposób:

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”opis obrazu”>

Zastąp plik placeholder-image.jpg obrazem o niskiej rozdzielczości lub ładującą się grafiką, a oryginalny-image.jpg rzeczywistym adresem URL obrazu.

Wskazówka eksperta: użyj responsywnych symboli zastępczych dla obrazów ładowanych z opóźnieniem, aby mieć pewność, że układ pozostanie stabilny.

Krok 6 : Przetestuj zmiany

• Jeśli masz zainstalowaną wtyczkę buforującą, pamiętaj o wyczyszczeniu pamięci podręcznej swojej witryny.
• Następnie przejdź do swojej witryny i przewiń w dół do sekcji, w której obraz powinien być ładowany z opóźnieniem.
• Poświęć chwilę, aby sprawdzić, czy obrazy ładują się płynnie podczas przewijania.

Notatki

• Pamiętaj, aby zawsze najpierw przeprowadzić testy w środowisku programistycznym, zanim zrobisz to na działającej stronie internetowej.
• Rozważ utworzenie motywu podrzędnego, robiąc to. Aktualizacje motywu mogą zastąpić Twoje zmiany.
• W przypadku innych typów treści, takich jak filmy lub ramki iframe, można zastosować podobne podejście, w którym atrybut src zastępuje się atrybutem data-src i ładuje za pomocą JavaScript w rzutni.

Ta technika to prosty sposób na włączenie leniwego ładowania. Jeśli masz bardziej skomplikowane witryny internetowe lub masz specyficzne wymagania, możesz rozważyć silniejsze rozwiązanie lub wtyczkę.

Metoda 2 – Użycie wtyczki WordPress do wdrożenia Lazy Loading

Jest to najłatwiejsza z dwóch metod, ponieważ możesz użyć wtyczki WordPress, aby bezpiecznie włączyć Lazy Loading. Pozwala na to wiele wtyczek, ale w tym przykładzie użyjemyWP-Optimize .WP-Optimize to potężna wtyczka WordPress, która pomaga zwiększyć szybkość witryny i poprawić komfort użytkowania.

Oferuje prostą i łatwą metodę ustawiania obrazów, ramek iframe i filmów na leniwe ładowanie. Wbudowana funkcja Lazy Load automatycznie opóźnia ładowanie zasobów sieciowych do czasu, aż staną się widoczne, co skutkuje znacznie szybszym czasem ładowania strony. Jest to jednak funkcja premium WP-Optimize.

Aby włączyć tę funkcję:

• Otwórz kartęWP-Optimize > Obrazy w panelu administracyjnym WordPress
• Otwórz podkartę Lazy Load Images
• W tym miejscu możesz włączyć leniwe ładowanie zarówno obrazów, jak i filmów/ramek Iframe

Jeśli chcesz wyłączyć leniwe ładowanie dla niektórych obrazów, obrazów tła, filmów lub ramek iframe, po prostu włącz je tutaj. Możesz także pominąć niektóre klasy obrazów.

Przed i po

Przetestowaliśmy prędkość przykładowej witryny przed i po wdrożeniu Lazy Load. Według GTMetrix strona była już dość szybka, a czas ładowania First Contentful Paint (FCP) wynosił 1,5 sekundy.

Po włączeniu Lazy Loading FCP osiągnął 344 ms, czyli znacznie szybciej niż wcześniej. Wyniki mogą się różnić w zależności od ilości treści na Twojej stronie, ale w większości przypadków Twój wynik FCP ulegnie poprawie.

Chcesz przyspieszyć czas ładowania strony?

Więc to jest to! Rozmawialiśmy o tym, czym jest Lazy Loading i jak ważna jest funkcja Lazy Loading w nowoczesnych witrynach. Czekanie z załadowaniem rzeczy, aż będą potrzebne, powoduje szybsze ładowanie stron, oszczędza dane internetowe i sprawia, że ​​przeglądanie staje się płynniejsze, szczególnie na telefonach z ograniczoną ilością danych.

Podaliśmy także kilka przydatnych porad na temat korzystania z Lazy Loading w WordPress. Omawiamy wszystko, od samodzielnego wykonania kodu po użycie wtyczki takiej jak WP-Optimize.

Spróbuj dodać Lazy Loading do swojej witryny i powiedz nam, jak wpływa to na Twoją wydajność. Masz pytania? Śmiało pytajcie w komentarzach.

Często Zadawane Pytania

Czy leniwe ładowanie jest dobre czy złe?

Leniwe ładowanie jest ogólnie uważane za dobrą praktykę, ponieważ ma kilka zalet. Pomaga skrócić czas ładowania strony internetowej i poprawia komfort użytkownika, ładując zawartość tylko wtedy, gdy jest to potrzebne.

Co to jest leniwe ładowanie w interfejsie użytkownika?

Leniwe ładowanie w interfejsie użytkownika odnosi się do praktyki ładowania elementów wizualnych, takich jak obrazy i filmy, tylko wtedy, gdy znajdują się one w widoku użytkownika (lub są w jego pobliżu).

Czy Lazy Loading wpływa na SEO?

Po prawidłowym wdrożeniu funkcja Lazy Loading może mieć pozytywny wpływ na SEO, skracając czas ładowania strony i poprawiając wygodę użytkownika, a oba te czynniki są ważnymi czynnikami rankingowymi.

Czy powinieneś leniwie ładować wszystkie obrazy?

Chociaż korzystne jest leniwe ładowanie obrazów znajdujących się poza ekranem, nie jest to konieczne w przypadku obrazów, które są natychmiast widoczne po załadowaniu strony. Natychmiastowe załadowanie tych obrazów może zapobiec opóźnieniom w ich wyświetlaniu.

Jakie są problemy z leniwym ładowaniem?

Niektóre problemy z Lazy Loading obejmują opóźnienia w ładowaniu treści podczas przewijania przez użytkowników, potencjalne problemy z indeksowaniem w wyszukiwarce, jeśli nie jest ona poprawnie zaimplementowana, oraz poleganie na JavaScript, który może nie być obsługiwany przez wszystkie przeglądarki.