Czym jest Lazy Loading i dlaczego warto go wdrożyć na stronie internetowej?

Czym jest Lazy Loading i dlaczego warto go wdrożyć na stronie internetowej?

Czas czytania: 3 minut

W dzisiejszych czasach użytkownicy witryn internetowych oczekują, że strona internetowa załaduje się im zaledwie w kilka sekund. A co za tym idzie dłuższy okres oczekiwania na załadowanie witryny może spowodować, że użytkownik straci nią zainteresowanie. W dobie kiedy konkurencja jest całkiem spora warto wziąć to pod uwagę.

Dlaczego strona długo się wczytuje w przeglądarce?

Co jest zatem najczęstszym powodem długiego wczytywania się strony? Z własnego doświadczenia powiem pliki na niej zamieszczone. Chodzi głównie o nie do końca dobrze zoptymalizowane grafiki (za duże / za ciężki) oraz pliki CSS czy JS o filmach lub muzyce nie wspominając. Zbyt duża ich ilość oraz nie zawsze poprawne ich rozmieszczenie (np. biblioteki JS na zewnętrznych serwerach) może doprowadzić do sytuacji kiedy strona potrzebuje naprawdę dużo czasu na wczytanie.

Jak w takim razie sobie z tym radzić? W praktyce jest kilka opcji np.:

  • odpowiednia optymalizacja zdjęć
  • zmniejszenie ilości dodatkowych bibliotek/plików CSS lub JS
  • usuniecie nie działających lub starych nie używanych skryptów
  • wpłynąć na moment ładowania się elementów strony

Dziś właśnie zajmę się tą ostatnią opcją. Bo właśnie do tego wykorzystuje się Lazy Loading.

Czym jest Lazy Loading?

Określenie Lazy loading (lub asynchronous loading) pochodzi z języka Angielskiego i oznacza „Powolne ładowanie”. Dla nas jednak będzie to technika dzięki, której obrazki lub filmy zostają załadowane na stronę dopiero w sytuacji, gdy są one potrzebne. Oznacza, to że część grafik które nie będą widoczne na ekranie po załadowaniu mogą zostać załadowane dopiero po pewnym czasie. Jednym słowem przeglądarka zacznie pobieranie materiałów od tych, które mają wyświetlić się na pierwszym ekranie. Dopiero później zajmie się resztą grafik na stronie.

Jak wczytuje obrazy Lazy Loading  na stronie internetowej
Czym jest Lazy Loading i dlaczego warto go wdrożyć na stronie internetowej?

Czy moja strona go potrzebuje?

Nie jestem w stanie powiedzieć czy akurat to rozwiązanie jest konkretnie dla twojej strony. Być może źródłem twojego problemu (?) jest zbyt duża ilość kodu na stronie lub innych materiałów. Aby się upewnić czy warto wdrożyć Lazy Loading na stronie warto wykonać test z pomocą narzędzia Google PageSpeed insights. Test jest darmowy i szybki, może też dużo powiedzieć o naszej stronie.

Przykładowy test z pomocą PageSpeed Insights
Przykładowy test z pomocą PageSpeed Insights

Z mojego testu jak widać wynika, że muszę popracować nad kilkoma elementami strony. Na szczęście nie są to grafiki (na tej stronie już wdrożyłam Lazy Loading). Tylko Google Fonts.

Podczas sprawdzania swojej strony warto przetestować wszystkie wrażliwe podstrony. Czyli miejsca, które potencjalnie mogą interesować czytelników bądź klientów. Chodzi np o:

  • stronę główną
  • stronę z produktami
  • kontakt
  • stronę z wynikami wyszukiwania

I kilka innych w zależności od tego czym się zajmujesz. 🙂

Gotowe wtyczki do wdrożenia lazy loading

Jeżeli chcieli byście wdrożyć tę metodę i posiadacie stronę opartą o system CMS to poniżej znajdziecie listę wtyczek. Dodają one Lazy Loading do różnych systemów

Źródło: semstorm.com

Co jeśli nie mam CMS lub nie ma dla niego wtyczki?

W takiej sytuacji możesz zawsze samodzielnie lub z czyjaś pomocą zmodyfikować szablon swojej strony internetowej. Pomogą ci w tym poniższe skrypty:

Warto też zapoznać się z dokumentacją udostępnioną przez firmę Google.

Podsumowanie

Mam na dzieję, że dzisiejszy wpis przypadł wam do gustu. Jeśli chcieli byście się czegoś więcej na ten temat dowiedzieć lub dodać coś od siebie zostawcie komentarz. 🙂

źródła: