Część obrazów i filmów w typowym ładunku na stronie internetowej może być znaczna. Niestety zainteresowane osoby biorące udział w projekcie mogą nie chcieć wyciąć żadnych zasobów multimedialnych z istniejących aplikacji. Takie nieprawidłowości są frustrujące, zwłaszcza gdy wszystkie zaangażowane strony chcą poprawić wydajność witryny, ale nie mogą się dogadać. Na szczęście leniwe ładowanie to rozwiązanie, które zmniejsza początkowy ładunek strony oraz czas wczytywania, ale nie pomija treści.
Co to jest leniwe ładowanie?
Leniwe ładowanie to technika, która opóźnia wczytywanie niekrytycznych zasobów do czasu wczytywania strony. Te niekrytyczne zasoby są wczytywane w chwili, gdy są potrzebne. W przypadku obrazów termin „niekrytyczny” jest często synonimem terminu „niekryte”. Jeśli korzystasz już z Lighthouse i poznasz możliwości ulepszenia tej usługi, możesz otrzymać wskazówki w postaci audytu obrazów poza ekranem:
Czasem leniwe ładowanie wygląda mniej więcej tak:
- Po przejściu do strony zaczynasz przewijać w miarę czytania jej treści.
- W pewnym momencie przewiniesz obraz zastępczy do widocznego obszaru.
- Obraz zastępczy zostaje nagle zastąpiony końcowym obrazem.
Przykład leniwego ładowania obrazów można znaleźć na popularnej platformie publikowania Medium, która wczytuje lekkie obrazy zastępcze podczas wczytywania strony i zastępuje je obrazami leniwie ładowanymi podczas przewijania.
Jeśli nie wiesz, jak działa leniwe ładowanie, być może zastanawiasz się, jak przydatna jest ta technika i jakie są jej zalety. Przekonaj się.
Dlaczego leniwe ładowanie obrazów lub filmów zamiast ich ładowania?
Możliwe, że wczytujesz treści, których użytkownik nigdy nie zobaczy. Jest to problematyczne z kilku powodów:
- To marnuje dane. W przypadku połączeń bez pomiaru użycia danych nie jest to najgorsze, co może się zdarzyć (chociaż możesz wykorzystać tę cenną przepustowość do pobierania innych zasobów, które rzeczywiście będą widoczne dla użytkowników). Jednak w przypadku abonamentów z ograniczoną ilością danych wczytywanie treści, których użytkownik nie widzi, może być stratą pieniędzy.
- Powoduje to stratę czasu przetwarzania, baterii i innych zasobów systemu. Po pobraniu zasobu multimedialnego przeglądarka musi go zdekodować i wyrenderować jego zawartość w widocznym obszarze.
Leniwe ładowanie obrazów i filmów skraca czas wstępnego wczytywania strony, początkową wielkość strony i wykorzystanie zasobów systemowych. Wszystkie te elementy mają pozytywny wpływ na wydajność.
Wdrażanie leniwego ładowania
Leniwe ładowanie można wdrożyć na kilka sposobów. Wybór rozwiązania musi uwzględniać obsługiwane przeglądarki oraz to, co chcesz ładować w trybie leniwego ładowania.
Nowoczesne przeglądarki implementują leniwe ładowanie na poziomie przeglądarki, które można włączyć za pomocą atrybutu loading w obrazach i elementach iframe.
Aby zapewnić zgodność ze starszymi przeglądarkami lub skorzystać z leniwego ładowania elementów bez wbudowanego leniwego ładowania, możesz wdrożyć rozwiązanie z własnym kodem JavaScript.
Istnieją również biblioteki, które mogą Ci w tym pomóc.
Szczegółowe informacje o każdym z tych działań znajdziesz w postach na tej stronie:
Przygotowaliśmy też listę potencjalnych problemów związanych z leniwym ładowaniem oraz rzeczy, na które trzeba uważać przy implementacji.
Podsumowanie
Rozważnie użycie leniwego ładowania obrazów i filmów może znacznie skrócić czas początkowego wczytywania i ilość liczby stron w witrynie, w tym podstawowe wskaźniki internetowe. Dzięki temu użytkownicy nie będą generować niepotrzebnej aktywności w sieci, w tym rywalizacji o wolniejsze połączenia, ani kosztów przetwarzania zasobów multimedialnych, których mogą nigdy nie zauważyć. W razie potrzeby mogą je przeglądać.
Jeśli chodzi o techniki poprawy wydajności, leniwe ładowanie nie jest kontrowersyjne. Jeśli w witrynie masz dużo obrazów w treści, jest to doskonały sposób na ograniczenie niepotrzebnych plików do pobrania. To docenią zarówno użytkownicy Twojej witryny, jak i zainteresowane osoby związane z projektem.