Wat zijn uitgestelde afbeeldingen?

Een uitgestelde afbeelding wordt gedownload nadat de eerste pagina is geladen
Afbeeldingen die aanvankelijk niet zichtbaar waren op een pagina (onder de vouw) kunnen worden uitgesteld, waardoor wat zichtbaar is sneller kan worden geladen

Afbeeldingen uitstellen voor snellere pagina’s

Dit artikel beschrijft een eenvoudige manier om afbeeldingen uit te stellen zonder jQuery of lui laden.

Een van de belangrijkste redenen waarom een ​​pagina langzaam wordt geladen, zijn afbeeldingen. Er is nergens een internetgebruiker die geen afbeelding heeft gezien en langzaam van boven naar beneden laadt.

Zelfs als een gebruiker kijkt naar het langzaam laden van die afbeelding, zijn er vaak meerdere afbeeldingen verderop op de pagina die nog niet zichtbaar zijn voor die gebruiker, en ze laden ook allemaal.

Al deze afbeeldingen concurreren om dezelfde bandbreedte als uw paginabronnen zoals css en javascript. Dit betekent dat afbeeldingen het aanvankelijk zichtbare deel van uw webpagina zo snel mogelijk aan gebruikers kunnen bieden.
Dit is een bekend probleem

De belangrijkste manier waarop ontwikkelaars en webmasters dit probleem hebben opgelost, is via een methode die lui laden wordt genoemd.

Lazing laden van afbeeldingen is een oplossing waarbij als een gebruiker naar beneden scrolt, afbeeldingen worden geladen als dat nodig is. Er zijn veel prachtige dingen over lui laden en ik gebruik het vaak, maar er zijn enkele problemen …

Lui laden kan prestatieproblemen veroorzaken.
Lazyloading biedt voor sommige webpagina's geen bruikbare oplossing.
Lui laden is niet ideaal voor mobiele prestaties.

Afbeeldingen uitstellen zonder lui te laden of jQuery

De waarheid is dat lui laden van afbeeldingen gewoon een meer gecompliceerde manier is om afbeeldingen uit te stellen.

Om terug te gaan naar de basis zullen we het hebben over het uitstellen van afbeeldingen zonder lui laden. Maar laten we eerst de dingen definiëren die lui laden eigenlijk doet.

Een schuifpositie observeren
Scrollpositie bewaken
Reageren op een schuifpositie
afbeeldingen uitstellen

In de vier bovenstaande dingen is er slechts één het uitstellen van beelden.
Laten we het uitstel van afbeeldingen bespreken

Wanneer een webpagina in een browser wordt weergegeven, probeert de browser alle afbeeldingen te downloaden die hij op de pagina kan vinden. Als er twee afbeeldingen op de pagina staan, worden er twee afbeeldingen gedownload. Als er honderd afbeeldingen op de pagina staan, worden alle honderd afbeeldingen gedownload.

Dit is standaard browsergedrag. Het moet alle afbeeldingen aanvragen en downloaden.

De enige betrouwbare manier om dit te omzeilen (voor alle browsers) is om de browser te laten denken dat die afbeeldingen er niet zijn.

De manier waarop dat gebeurt bij lui laden en elders is om een ​​kleine standaardafbeelding in onze html te bieden en vervolgens die standaardafbeelding via javascript te schakelen naar de echte afbeelding die we willen weergeven.

Dit betekent dat afbeeldingen worden gemarkeerd met iets als …

<img src = “fake.png” data-src = “real-image.png”

Wanneer de pagina in eerste instantie wordt geladen, krijgt de browser een keer de “nep-afbeelding” en dan is dat de enige afbeelding die de browser ziet, dus of u één afbeelding of honderd hebt, het maakt niet uit omdat de browser al is gedownload het neppe beeld.

Vervolgens wisselen we via javascript de nepafbeelding uit met de echte.

Wanneer de browser ziet dat er een nieuwe afbeelding in de html staat, zal deze deze nu downloaden.

Deze relatief eenvoudige stap kan verbluffende resultaten opleveren. Ik heb onlangs een pagina gemaakt die acht seconden nodig had om te laden en minder dan een seconde gebruikte om alleen deze methode te gebruiken. (We zullen de methode hieronder volledig beschrijven met voorbeeldcode)
Inzicht in het laden van de pagina

Om te begrijpen hoe, wanneer en welke methode van uitstel om te gebruiken, moeten we begrijpen hoe een pagina wordt geladen. Dit is een goede kennis om te hebben en het duurt maar een minuut of twee om te lezen.

De afbeelding hierboven toont een kleine webpagina laden. De pagina heeft een hoofdafbeelding, verschillende andere afbeeldingen, een css-bestand en een javascript-bestand.

Op deze nogal typische pagina concurreert elke afzonderlijke bron om tegelijkertijd te worden gedownload.

De waarheid is echter dat het enige dat moet worden gedownload, het spul boven de stippellijn is. Dit is het “boven de vouw” of het aanvankelijk zichtbare deel van de pagina.

Dit betekent dat de gebruiker alleen de html, css, javascript en de hoofdafbeelding nodig heeft om de bovenstaande vouwinhoud te kunnen zien.

Laten we eens kijken hoe we deze pagina twee keer (of meer) sneller kunnen laten laden dan nu. We zouden moeten…

Laad alleen de hoofdafbeelding
Stel de rest van de afbeeldingen uit

Zodra we dat doen, zien we dat de gebeurtenis pageload op een veel eerder deel van de belasting kan plaatsvinden.

Nu hebben we zojuist een pagina geknipt die 12 items laadde voordat de pagina werd geladen in een pagina die slechts vier dingen laadde vóór de gebeurtenis pageload.

Het betekent dat mijn adsense-advertenties sneller kunnen worden weergegeven, mijn gebruikers dingen sneller kunnen kopen en Google denkt dat ik geweldig ben.

Laten we echt zijn. Je weet en ik weet dat je pagina’s tientallen en tientallen afbeeldingen hebben, niet de weinige die hier worden weergegeven. Vergis je niet, deze methode kan je pagina’s serieus sneller maken. Hoe meer afbeeldingen je hebt, hoe meer tijd je hiermee kunt scheren.
Doet lui laden dit al niet voor mij?

Dat doet het, maar er zijn veel situaties waarin lui laden niet ideaal werkt.

De meest voorkomende reden waarom mensen misschien niet kiezen