Czym jest Lazy Loading?
Lazy Loading to określenie opisujące zjawisko wczytywania treści na podstawie reakcji użytkownika/przeglądarki z interfejsem strony.
Najpopularniejszą implementacją „leniwego wczytywania” jest ładowanie obrazków w oparciu o scrollowanie strony przez użytkownika. Oznacza to, że podczas poruszania się po stronie, obrazki będą renderowane dynamicznie. Taki proces pozwala nam znacznie przyśpieszyć całkowite wczytywanie strony, gdyż przeglądarka nie musi czekać na wyświetlenie wszystkich zdefiniowanych na stronie zdjęć.
O krok przed użytkownikiem
Podczas implementacji Lazy Loading warto mieć na uwadze nie tylko optymalizację prędkości wczytywania strony ale także komfort użytkownika podczas jej przeglądania. Nie możemy zatem doprowadzić do sytuacji, w której obrazki będą wczytywały się na oczach użytkownika. Z Lazy Loading należy korzystać w taki sposób, aby docelowe działania wykonywały się chwilę przed tym zanim użytkownik zobaczy efekt końcowy. Dodatkowo, nie wszystkie grafiki powinny być dynamicznie wczytywane, np. logo albo obrazki z górnej części strony, które i tak wczytują się od razu po załadowaniu się witryny.
Nie tylko obrazki
Poza obrazkami, zabiegowi Lazy Loadingu możemy poddać wszelkie multimedialne elementy: filmy, iframe’y oraz obrazki w tle, które nie są renderowane przez tag img.
Jak wykorzystać Lazy Loading?
W sieci istnieje już kilka gotowych bibliotek JavaScript, z których możemy skorzystać przy implementacji Lazy Loadingu. W przypadku WordPressa możemy także sięgnąć po wtyczki.
Wtyczki WordPress do Lazy Loading
Korzystanie z wtyczek na pewno będzie dobrym rozwiązaniem dla osób nietechnicznych, które posiadają strony na WordPressie i chcą zoptymalizować ich działanie. Wtyczki te, zazwyczaj zaraz po instalacji są gotowe do działania i za sprawą jednego kliknięcia mogą włączyć na stronie Lazy Loading.
Proponowane wtyczki:
- SMUSH – wtyczka, która poza Lazy Loadingiem, pozwala m. in. na kompresję oraz automatyczną konwersję obrazków do formatu WebP.
- Lazy Loader
- A3 Lazy Load
Biblioteki JS
Web developerzy oraz nieco bardziej zaawansowani użytkownicy na pewno chętniej sięgną po bibliotekę JS, niż po wtyczkę. Biblioteki JS są z reguły lżejsze i łatwiejsze w zaawansowanej konfiguracji, dzięki czemu łatwiej będzie osiągnąć zamierzony efekt.
