Nadat Google vorig jaar de native functie voor het lui laden van afbeeldingen aan Chrome had toegevoegd, laat Google ontwikkelaars nu lui zware iframes laden. Lees verder om meer te weten!
De toename van het webverkeer van mobiele gebruikers en mensen over de hele wereld met beperkte verbindingsmogelijkheden heeft de bedrijven en ontwikkelaars ertoe aangezet de laadsnelheid van hun websites sterk te optimaliseren. Wanneer u traditioneel naar een webpagina navigeert, wordt alle beschikbare inhoud gedownload en weergegeven: afbeeldingen, pictogrammen, GIF's, stijlen, scripts, enzovoort. Zoals u zich kunt voorstellen, veroorzaakt het laden van al dat spul een vertraging bij het opstarten van de website, vooral voor gebruikers met trage verbindingen. Google probeert dit probleem al een tijdje op te lossen. Vorig jaar nog, voegden ze eraan toe functie voor het lui laden van afbeeldingen in Google Chrome 76. Nu brengt Google dezelfde functionaliteit naar iframes.
Lazy Loading laadt de inhoud van de webpagina op aanvraag, wat betekent dat deze niet wordt gedownload weergegeven totdat u naar beneden scrolt en ze in beeld krijgt, waardoor de initiële opstarttijd van de website wordt verminderd snelheid. Zoals gezegd is het lui laden van afbeeldingen sinds vorig jaar beschikbaar in Chrome, maar nu kunnen ontwikkelaars dezelfde methode ook op iframes gebruiken. Om het op uw eigen website te implementeren, hoeft u alleen maar iets toe te voegen
laden = "lui" toe te schrijven aan uw afbeeldingen en/of iframe-elementen. Browsers zoals Firefox en Safari hebben de native functie voor het lui laden van afbeeldingen al geïmplementeerd. Wat de iframes betreft, ze werken nog steeds aan het oplossen van een aantal bugs. Google vermeldde ook dat Chrome voor Android in Lite-modus automatisch lui offscreen-afbeeldingen en iframes laadt.Ironisch genoeg ontdekte het Chrome-team tijdens het testen hoe YouTube-video-embeds (die op iframe zijn gebaseerd) de laadsnelheid van webpagina's zouden beïnvloeden wanneer ze lui geladen waren, dat ze "bespaarde 10 seconden van hoe snel onze pagina's interactief konden zijn op mobiele apparaten.Onnodig te zeggen dat lazyloading echte voordelen heeft ten opzichte van de traditionele methode waarbij de volledige inhoud van de webpagina wordt gedownload zodra u deze bezoekt.
Prijs: gratis.
4.1.
Bron: web.dev
Via: Techdows