Użyj leniwego ładowania, aby przyspieszyć wczytywanie

Część argumentu obrazy i film w sekcji typowy ładunek witryny może być istotny. Niestety osoby biorące udział w projekcie mogą niechętnie odcinać zasoby medialne z obecnych aplikacji. Takie impasy są frustrujące, zwłaszcza wtedy, gdy wszystkie zaangażowane strony chcą poprawić wydajność witryny, ale nie mogą się dojść do porozumienia. Na szczęście leniwe ładowanie to rozwiązanie, które zmniejsza początkowy ładunek strony oraz czas wczytywania, ale nie omija treści.

Co to jest leniwe ładowanie?

Leniwe ładowanie to technika, która opóźnia wczytywanie niekrytycznych zasobów na stronie. czas wczytywania strony. Zamiast tego te niekrytyczne zasoby są ładowane w chwili potrzeby. Obrazy zawierające treści, które nie mają krytycznego znaczenia. jest często synonimem „poza ekranem”. Jeśli korzystasz już z Lighthouse i zapoznaj się z możliwościami możesz zauważyć pewne wskazówki w tym zakresie w formie Odłóż kontrolę obrazów poza ekranem:

Zrzut ekranu pokazujący kontrolę obrazów poza ekranem w Lighthouse.
Jednym z audytów wydajności narzędzia Lighthouse jest identyfikować obrazy niewidoczne na ekranie, które mogą być leniwe ładowanie.

Z pewnością zdarzyło Ci się już zobaczyć, jak działa leniwe ładowanie. to:

  • Gdy przeglądasz stronę, rozpoczynasz jej przewijanie.
  • W pewnym momencie przesuwasz obraz zastępczy w widoczny obszar.
  • Obraz zastępczy zostaje nagle zastąpiony końcowym obrazem.

Przykład leniwego ładowania obrazów można znaleźć na popularnej platformie wydawniczej Średni, który wczytuje niewielkie obrazy zastępcze na poziomie podczas wczytywania strony i zastępuje je obrazami leniwie ładowanymi w widocznym obszarze.

Zrzut ekranu pokazujący medium witryny w trakcie przeglądania, przedstawiający leniwe ładowanie. Niewyraźny obiekt zastępczy znajduje się po lewej stronie, a załadowany zasób – po prawej.
Przykład leniwego ładowania obrazów w praktyce. O obraz zastępczy jest ładowany podczas wczytywania strony (po lewej stronie) i po przewinięciu widoczny obszar, ostateczny obraz wczytuje się w chwili, gdy jest potrzebny.

Jeśli nie wiesz, jak działa leniwe ładowanie, możesz zastanawiać się, jak przydatna jest ta funkcja. jakie są zalety tej metody i jakie są z niej korzyści. Przekonaj się.

Dlaczego obrazy lub filmy są ładowane leniwie, zamiast wczytywać je?

Możliwe, że wczytujesz rzeczy, których użytkownik może nigdy nie zobaczyć. To jest problematyczne z kilku powodów:

  • Marnuje dane. Przy połączeniach bez pomiaru nie jest to najgorsze, co może (chociaż ta cenna przepustowość może zostać wykorzystana do pobierania inne zasoby, które rzeczywiście będą widoczne dla użytkownika). Przy ograniczonych danych jednak wczytywanie informacji, których użytkownik nigdy nie widzi, może okazać się marne ich pieniędzy.
  • Powoduje to marnowanie czasu przetwarzania, baterii i innych zasobów systemu. Po multimediach gdy zostanie pobrany, przeglądarka musi go zdekodować i wyrenderować jego treść widoczny obszar.

Leniwe ładowanie obrazów i filmów skraca czas wstępnego wczytywania strony rozmiar strony i wykorzystanie zasobów systemowych. Wszystkie te czynniki mają pozytywny wpływ skuteczność reklam.

Wdrażanie leniwego ładowania

Leniwe ładowanie można wdrożyć na kilka sposobów. Przy wyborze rozwiązania musisz wziąć pod uwagę obsługiwane przeglądarki, a także co próbujesz leniwie ładować.

Nowoczesne przeglądarki obsługują leniwe ładowanie na poziomie przeglądarki, który można włączyć za pomocą atrybutu loading w przypadku obrazów i elementów iframe. Aby zapewnić zgodność ze starszymi przeglądarkami lub leniwe ładowanie elementów bez wbudowanego leniwego ładowania. możesz wdrożyć rozwiązanie, korzystając z własnego JavaScriptu. Dostępnych jest też kilka bibliotek, które mogą Ci w tym pomóc. Szczegółowe informacje o każdej z tych metod znajdziesz w postach na tej stronie:

Przygotowaliśmy też listę potencjalnych problemów z leniwym ładowaniem. i rzeczy, na które trzeba zwrócić uwagę podczas implementacji.

Podsumowanie

Podczas korzystania z rozwagą leniwe ładowanie obrazów i filmów może znacznie obniżyć wartość początkową czas wczytywania i ładunki stron w witrynie, w tym podstawowe wskaźniki internetowe. Nie będą musieli korzystać z sieci. – w tym rywalizację w sieci o wolniejszych połączeniach – oraz koszty przetwarzania zasobów mediów, których być może nigdy nie zobaczą. nadal będą mogli wyświetlać te zasoby.

Jeśli chodzi o techniki zwiększania wydajności, leniwe ładowanie jest niekontrowersyjne. Jeśli masz w witrynie dużo zdjęć, To doskonały sposób na ograniczenie liczby zbędnych plików do pobrania. Użytkownicy Twojej witryny uczestnicy projektu docenią go.