Leniwe ładowanie polega na oczekiwaniu na wczytanie zasobów, aż będą potrzebne, zamiast wczytywania ich z wyprzedzeniem. Może to poprawić wydajność przez zmniejszenie liczby zasobów, które muszą zostać załadowane i przeanalizowane podczas wstępnego wczytywania strony.
Idealnie sprawdzają się w przypadku tej metody obrazy wyświetlane poza ekranem podczas wstępnego wczytywania strony. A co najlepsze, leniwe rozmiary sprawiają, że wdrożenie tej strategii jest bardzo proste.
Dodaj do strony skrypt leniwego rozmiaru
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
Plik lazysizes.min.js
został już pobrany i dodany do tej błędu. Aby uwzględnić go na stronie:
- Dodaj do witryny
index.html
ten tag<script>
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
Leniwe rozmiary wyświetlają obrazy, gdy użytkownik przewija stronę, i nadają priorytet obrazom, które użytkownik wkrótce zobaczy.
Wskaż obrazy do leniwego ładowania
- Dodaj klasę
lazyload
do obrazów, które powinny być leniwie ładowane. Dodatkowo zmień atrybutsrc
nadata-src
.
Na przykład zmiany dla elementu flower3.png
będą wyglądać tak:
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
W tym przykładzie użyj leniwego ładowania flower3.png
, flower4.jpg
i flower5.jpg
.
Zobacz, jak to działa
Znakomicie. Aby zobaczyć, jak te zmiany działają:
Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .
Otwórz konsolę i znajdź nowo dodane obrazy. Ich klasy powinny zmienić się z
lazyload
nalazyloaded
, gdy przewijasz stronę w dół.
- Obserwuj panel sieci, aby zobaczyć, jak pliki obrazów ładują się pojedynczo, gdy przewijasz stronę w dół.
Zweryfikuj za pomocą Lighthouse
Warto też sprawdzić te zmiany za pomocą narzędzia Lighthouse. Audyt wydajności narzędzia Lighthouse „Przekaż obrazy poza ekranem” wskaże, czy nie masz dodanego leniwego ładowania do obrazów niewyświetlanych na ekranie.
- Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
- Sprawdź, czy test Odłóż obrazy poza ekranem został zaliczony.
Gotowe. Używasz leniwego rozmiaru, by leniwie ładować obrazy na stronie.