Baza wiedzy - wszystkie artykuły

Co to jest Lazy Loading

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.

PSD2CSS jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce / PHP / HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end. Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość - zapraszamy do kontaktu.

Cookies Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Polityka prywatności