Efter att ha lagt till den inbyggda lazy loading-funktionen i Chrome förra året låter Google nu utvecklare ladda tunga iframes. Läs vidare för att veta mer!
Ökningen av webbtrafik från mobilanvändare och människor runt om i världen med begränsade anslutningsmöjligheter fick företagen och utvecklarna att kraftigt optimera webbladdningshastigheterna. Traditionellt, när du navigerar till en webbsida, laddar den ner och visar allt tillgängligt innehåll: bilder, ikoner, GIF-filer, stilar, skript och så vidare. Som du kan föreställa dig orsakar laddning av allt det där en fördröjning när webbplatsen startar, särskilt för användare med långsamma anslutningar. Google har försökt eliminera detta problem ett tag. Bara förra året, tillade de funktionen för lata inläsning av bilder i Google Chrome 76. Nu ger Google samma funktionalitet till iframes.
Lazy loading laddar innehållet på webbsidan på begäran, vilket innebär att de inte kommer att laddas ner och visas tills du bläddrar nedåt och får dem i vyn, vilket minskar den initiala webbplatsstarten fart. Som nämnts har den lata laddningen av bilder varit tillgänglig på Chrome sedan förra året, men nu kan utvecklare använda samma metod på iframes också. För att implementera det på din egen webbplats behöver du bara lägga till
loading="lat" attribut till dina bilder och/eller iframe-element. Webbläsare som Firefox och Safari har redan implementerat den ursprungliga funktionen för lazy loading. När det gäller iframes arbetar de fortfarande med att fixa ett par buggar. Google nämnde också att Chrome för Android i Lite-läge automatiskt lata laddar bilder utanför skärmen och iframes.Ironiskt nog, under testningen av hur YouTube-videoinbäddningar (som är iframe-baserade) skulle påverka webbsidans laddningshastighet när den laddades, fick Chrome-teamet reda på att de "sparade 10 sekunder av hur snart våra sidor kunde vara interaktiva på mobila enheter."Det behöver inte sägas att lazy-loading har verkliga fördelar jämfört med den traditionella metoden att ladda ner hela innehållet på webbsidan så snart du besöker den.
Pris: Gratis.
4.1.
Källa: web.dev
Via: Techdows