Za pośrednictwem atrybutu loading w przeglądarce Chrome 76 oraz Firefox pojawiło się natywne „leniwe ładowanie” obrazów. Dzisiaj udostępniono tę opcję z funkcją opóźnienia dla ramek iframe. Natywne lazy-loading znormalizowano i dołączono do przeglądarek opartych na Chromium.

Funkcja opóźniania ładowania ramek iframe odwleka ich załadowanie dopóki znajdują się poza ekranem. Jeśli użytkownik przesunie ekran w ich pobliże, obraz się załaduje. Dzięki temu oszczędza się dane, zmniejsza zużycie pamięci oraz przyspiesza ładowanie innych elementów strony. Poniżej najprostszy sposób załączenia ładowania w formie kodu i filmu:

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Przyczyny natywnego lazy-loading elementów iframe

Często na stronach dostępne są osadzone elementy zewnętrzne. Są to reklamy, odtwarzacze wideo czy posty w mediach społecznościowych (np. Facebook czy Twitter). Po wejściu na stronę znajdują się one albo w widoku użytkownika, albo poza nim. Mimo tego, że element nie jest widoczny od razu, użytkownik ponosi koszty pobierania danych elementów iframe.

Badania przeprowadzone przez Chrome wykazały zmniejszenie pobierania danych o nawet 2-3%. Redukcja FCP (First Contentful Paint) wyniosła 1-2%, a FID 2% na 95 percentylu.

Natywne lazy-loading – działanie 

Atrybut loading obsługuje trzy podstawowe wartości:

• lazy – leniwe ładowanie,
• eager – wczytaj od razu,
• auto – przeglądarka określa, czy element iframe ma się wczytać leniwie. Jest to obecnie domyślna wartość w Chrome.

Jeśli nie określimy atrybutu, otrzymamy taki sam wynik, jak niecierpliwe ładowanie zasobu. W przypadku wersji uproszczonej Chrome użyje auto wartości.

Korzystanie z atrybutu loading w elementach iframe – przykład

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
       height="400"></iframe>
<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>
<!-- or use loading="eager" to out of automatic
lazy-loading in Lite Mode -->
<iframe src="https://example.com"
        loading="eager"
        width="600"
        height="400"></iframe>

Specyficzne zachowanie atrybutu loading

W przypadku elementów iframe atrybut loading działa inaczej niż na obrazy. Wszystko zależy od tego, czy element iframe jest ukryty. Przeglądarka Chrome sama określa jego stan, korzystając z następujących kryteriów:

• Wymiary – szerokość i wysokość elementu iframe to 4px lub mniej.
• Występują elementy display: none lub visibility: hidden.
• Umieszczenie – element iframe jest umieszczony poza ekranem przy użyciu ujemnego pozycjonowania X lub Y.

W przypadku spełnienia któregokolwiek z tych warunków, Chrome uznaje go za ukryty i przeważnie nie ładuje go leniwie.

Co ciekawe, w przypadku przełączenia na lazy-loading strony Youtube na Chrome zauważono nawet 10 sekundowe oszczędności. Strony zyskują dzięki temu większą interaktywność na urządzeniach mobilnych.

Natywne lazy-loading – oszczędność danych

Przykładowe ilości oszczędzonych danych przy popularnych serwisach:

• YouTube – zapisuje ~ 500 KB przy początkowym wczytywaniu strony
• Instagram – zapisuje nie więcej niż 100 KB spakowane gzipem przy początkowym załadowaniu
• Spotify – oszczędza 514 KB przy początkowym ładowaniu

W przypadku facebookowej wtyczki Like (pokazującej, kto polubił stronę) jest to ok. 215KB zasobów, z czego 197KB to JavaScript. Często pojawia się ona na końcu strony, więc jej szybkie ładowanie poza ekranem może nie być optymalne.

Wniosek

Natywne lazy-loading, dzięki obsłudze ramek iframe z opóźnieniem, poprawia wydajność stron internetowych.