Leniwe ładowanie obrazów poza ekranem za pomocą leniwego rozmiaru

Katie Hempenius

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ń atrybut src na data-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 na lazyloaded, 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.

1. Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran .
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Lighthouse.
4. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
5. Kliknij przycisk Wygeneruj raport.
6. Sprawdź, czy test Odłóż obrazy poza ekranem został zaliczony.

Gotowe. Używasz leniwego rozmiaru, by leniwie ładować obrazy na stronie.