Technika ta poprawia wydajność strony internetowej, ładując obrazy tylko wtedy, gdy są widoczne lub w pobliżu ekranu użytkownika.

W dzisiejszym szybko zmieniającym się cyfrowym świecie posiadanie wydajnej witryny internetowej jest niezbędne. Jednym z kluczowych aspektów tego jest zapewnienie wydajnego ładowania obrazów. Użytkownicy oczekują płynnego i szybkiego przeglądania, a w tym artykule dowiesz się, jak to osiągnąć.

Poznasz koncepcję leniwego ładowania obrazów i dowiesz się, jak ją wdrożyć przy użyciu HTML i JavaScript z interfejsem API Intersection Observer.

Co to jest leniwe ładowanie?

Leniwe ładowanie opóźnia ładowanie elementów, takich jak obrazy, do momentu, gdy będą wymagane. Zamiast ładować wszystkie obrazy podczas ładowania strony, leniwe ładowanie ładuje tylko obrazy, które są aktualnie widoczne lub znajdują się w pobliżu obszaru wyświetlania użytkownika. Ta poprawa wydajności witryny internetowej skraca początkowy czas ładowania i oszczędza przepustowość.

Dlaczego warto korzystać z leniwego ładowania?

instagram viewer

Istnieje kilka istotnych powodów, dla których warto zastosować leniwe ładowanie obrazów w witrynie, np.:

  • Szybsze początkowe ładowanie strony: Leniwe ładowanie uniemożliwia jednoczesne ładowanie wszystkich obrazów, skracając początkowy czas ładowania strony. Użytkownicy mogą szybciej rozpocząć interakcję z Twoją witryną, co zapewnia lepszą wygodę użytkowania.
  • Poprawiona responsywność strony: Ładując obrazy podczas przewijania użytkownika, witryna pozostaje responsywna i płynna, zapewniając płynne przewijanie i nawigację bez konieczności czekania na załadowanie całej zawartości.
  • Oszczędność przepustowości: Leniwe ładowanie oszczędza przepustowość, dzięki czemu jest idealne dla użytkowników mobilnych i osób korzystających z wolnych łączy internetowych. To może zmniejsz zużycie danych w Twojej witrynie, z korzyścią dla użytkowników.
  • Korzyści SEO: Wyszukiwarki takie jak Google rozważ szybkość strony jako czynnik rankingowy. Leniwe ładowanie puszki pozytywnie wpłynąć na wydajność SEO Twojej witryny poprzez skrócenie czasu ładowania.

Teraz, gdy rozumiesz, dlaczego leniwe ładowanie jest korzystne, przyjrzyjmy się, jak je wdrożyć.

Implementowanie leniwego ładowania: znaczniki HTML

Aby rozpocząć, musisz zmodyfikować swój kod HTML, aby uwzględnić ładowanie="leniwy" atrybut na twoim tagi.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

The Ładowanie atrybut jest używany w HTML do kontrolowania zachowania ładowania elementów na stronie internetowej. Kiedy ustawisz ładowanie="leniwy" na tag, informuje przeglądarkę, aby odłożyła ładowanie zasobu do czasu, aż będzie potrzebny.

Na chwilę obecną strona wygląda następująco:

Implementacja leniwego ładowania: implementacja JavaScript

Aby przenieść swoje leniwe ładowanie na wyższy poziom, użyj interfejsu API Intersection Observer. Ten interfejs API pozwala obserwować, kiedy element wchodzi do rzutni i wychodzi z niej.

Powód stosowania Obserwatora skrzyżowań do leniwego ładowania obrazów jest prosty: podczas ładowania strony pobierany jest obraz o niższej jakości.

Następnie, gdy obraz stanie się widoczny w rzutni, JavaScript zamienia go na wersję o wyższej jakości. Aby zastosować to w praktyce, zmodyfikuj swój kod HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

W tym przypadku głównym źródłem obrazu jest wersja o niskiej jakości, a obraz o wysokiej jakości jest źródłem wtórnym. Strona wygląda wówczas następująco:

Następnie wybierz wszystkie obrazy, które chcesz leniwie załadować:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Następnie utwórz plik Obserwator Przecięcia obiekt.

const observer = new IntersectionObserver();

Następnie przekaż wpisy (tablicę Wpis obserwatora Intersection obiekty, reprezentujące obserwowane elementy i ich przecięcie z rzutnią) i obserwator (the Obserwator Przecięcia sama instancja).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Następnie sprawdź przecięcia i zamień obraz niskiej jakości na obraz wysokiej jakości, gdy tylko ten element się przecina.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Na koniec zainicjuj obserwację każdego elementu.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Dzięki temu zaimplementowałeś leniwe ładowanie za pomocą JavaScript.

Uwagi dotyczące leniwego ładowania

Integrując leniwe ładowanie, należy wziąć pod uwagę następujące aspekty:

  • Dostępność: Aby zapewnić dostępność, podaj alternatywny tekst obrazów z rozszerzeniem alt atrybut. Informacje te służą jako punkt odniesienia dla czytników ekranu.
  • Zgodność przeglądarki: Przed wdrożeniem leniwego ładowania sprawdź jego kompatybilność z różnymi przeglądarkami. Nie wszystkie przeglądarki obsługują tę funkcję. W niektórych przypadkach włączenie wypełnienia może okazać się konieczne, szczególnie w przypadku starszych przeglądarek. Narzędzie takie jak Mogę uzyć jest cennym źródłem do oceny kompatybilności przeglądarek.
  • Testowanie: Kompleksowe testowanie implementacji leniwego ładowania na różnych urządzeniach i wymiarach ekranu ma ogromne znaczenie.

Zwiększanie szybkości witryny i komfortu użytkownika

Włączając leniwe ładowanie obrazów w swojej witrynie, możesz przyspieszyć jej działanie i poprawić komfort użytkowania. Użytkownicy chcą szybszego ładowania i płynniejszego przeglądania, a ta technika zapewnia to samo.

Ponadto będziesz cieszyć się lepszym SEO i oszczędzać na wykorzystaniu przepustowości. Więc po co czekać? Zacznij optymalizować swoją witrynę już dziś, korzystając z tej prostej, ale skutecznej metody.