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ę.
Spis treści
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.
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.
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:
- https://www.semstorm.com/pl/blog/seo-and-ppc/jak-leniwe-obrazki-pomagaja-w-szybszym-ladowaniu
- https://bedekodzic.pl/lazy-loading/
- https://www.whitepress.pl/baza-wiedzy/644/czym-jest-lazy-loading-i-dlaczego-warto-sie-nim-zainteresowac-w-kontekscie-seo
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.
2 komentarze do „Czym jest Lazy Loading i dlaczego warto go wdrożyć na stronie internetowej?”
Przetestowałam stronę i wypadła mega słabo! Z tym, że kompletnie nie orientuję się w tym temacie i javascript jest mi zupełne obcy. Niegdyś dziubałam odrobinę w CSS przy tworzeniu szablonów, ale to już wiedza zapomniana:D
Wydaje mi się, że większość stron wypada w tym teście słabo. Często problem jednak nie leży w samej stronie, ale w serwerze na którym się ona znajduje. Dlatego bardzo istotne jest by wybrać odpowiedni.
Co do JavaScript to sporo osób go tak naprawdę nie zna. Wykorzystują jedynie przygotowane przez innych rozwiązania co najwyżej lekko je modyfikując. 🙂
Możliwość komentowania została wyłączona.