Leniwe ładowanie polega na czekaniu na wczytanie zasobów, aż będą potrzebne, zamiast ładować je z wyprzedzeniem. Może to poprawić wydajność, zmniejszając ilość zasobów, które muszą być wczytywane i analizowane przy wstępnym wczytaniu strony.
Obrazy umieszczone poza ekranem podczas początkowego wczytywania strony to idealne rozwiązanie. A co najważniejsze, dzięki leniwym rozmiarom można bardzo łatwo wdrożyć taką strategię.
Dodaj skrypt leniwego rozmiaru do strony
- Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
Plik lazysizes.min.js
został już pobrany i dodany do tego błędu. Aby go uwzględnić na stronie:
- Dodaj ten tag
<script>
do witrynyindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
Leniwe rozmiary inteligentnie wczytują obrazy, gdy użytkownik przewija stronę, i nadaje priorytet tym obrazom, z którymi użytkownik wkrótce się zetknie.
Wskaż obrazy do leniwego ładowania
- Dodaj klasę
lazyload
do obrazów, które powinny być ładowane leniwie. Dodatkowo zmień atrybutsrc
nadata-src
.
Na przykład zmiany dla 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 wypróbuj leniwe ładowanie flower3.png
, flower4.jpg
i flower5.jpg
.
Zobacz, jak to działa
Znakomicie. Aby zobaczyć, jak te zmiany działają, wykonaj te czynności:
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
Otwórz konsolę i znajdź obrazy, które zostały przed chwilą dodane. Zajęcia na koncie powinny zmienić się z
lazyload
nalazyloaded
w miarę przewijania strony.
- Obserwuj panel sieci, aby widzieć, jak pliki graficzne są ładowane pojedynczo, gdy przewijasz stronę w dół.
Zweryfikuj, korzystając z Lighthouse
Warto też zweryfikować te zmiany za pomocą narzędzia Lighthouse. Audyt wydajności „Przekaż obrazy poza ekranem” w Lighthouse wskazuje, czy nie dodano leniwego ładowania do obrazów niewyświetlanych na ekranie.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem 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 jest zaznaczone pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
- Sprawdź, czy kontrola odroczania obrazów poza ekranem została zakończona.
Success! Do leniwego ładowania obrazów na stronie używasz leniwego rozmiaru.