devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Narzędzia
Home›Narzędzia›Natywne lazy-loading dla iframe już dostępne

Natywne lazy-loading dla iframe już dostępne

By Bernadeta Zapała
27 lipca 2020
192
0
Share:

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>
https://storage.googleapis.com/web-dev-assets/iframe-lazy-loading/lazyload-iframes-compressed.webm

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.

Natywne lazy-loading

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.

TagsChromeChromiumiframeNatywne lazy-loading

Share:

  • Narzędzia

    Babel 7.10 z ulepszeniem React tree-shaking

  • Frontend

    Constraint Layout 2.0 – najnowsza biblioteka jetpack

  • GadżetyInformacje

    Złożone obrazy 3D w HoloLens 2 z chmurą publiczną

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

  • 24 listopada 2020

    Tailwind CSS 2.0 z narzędziami kontroli tekstu

  • 20 listopada 2020

    Angular 11 – stabilne wydanie platformy

  • 19 listopada 2020

    Chakra UI React v1 wydany z ulepszeniami

  • 19 listopada 2020

    Chrome 87 z szybszym startem i zmianami w kartach

  • 18 listopada 2020

    Silnik WebKit w przeglądarce Safari 14

  • 17 listopada 2020

    Poznańska konferencja POZITIVE TECHNOLOGIES 2020 platformą wymiany wiedzy i doświadczeń najlepszych specjalistów IT

  • 16 listopada 2020

    Babylon.js 4.2 z edytorem cząsteczek i Babylon React Native

  • 13 listopada 2020

    Apple Silicon M1 i MacBooki – spotkanie One More Thing

  • 12 listopada 2020

    .NET 5.0 Microsoftu z poprawioną wydajnością

  • 12 listopada 2020

    Windows Terminal 1.5 Preview z nowymi funkcjami

  • 10 listopada 2020

    GIMP 2.99.2 – pierwszy krok do głównej wersji

  • 6 listopada 2020

    iOS 14.2 dostępny z nowymi emotikonami

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT