Het "Accelerated Mobile Pages" (AMP) -project van Google heeft er recentelijk toe bijgedragen dat websites sneller werden. Met een goede techniek en een krachtig content-distrobutienetwerk heeft Google direct met AMP versterkte sites sneller gemaakt. AMP heeft echter ook indirect gewerkt door ons aan te moedigen te kijken naar de optimalisaties en best practices die AMP bevat. Zelfs als u niet van plan bent de AMP-compliant van uw website te maken, is het handig om AMP te begrijpen als een takenlijst voor het optimaliseren van een niet-AMP-website.

Een van de optimalisaties op deze lijst is een techniek die 'lui laden' wordt genoemd en die we zagen in ons recente artikel over het gebruik van AMP's.  aangepast element. Met deze techniek worden, wanneer een bezoeker voor het eerst op een pagina arriveert, alleen de afbeeldingen in of nabij het kijkvenster geladen. De rest wordt getriggerd om te laden wanneer de bezoeker naar beneden scrolt.

Met Lazy loading kan een bezoeker eerder met inhoud beginnen werken en de verbeterde laadsnelheid kan de positie van uw zoekmachine verbeteren. Hoe meer afbeeldingen u op een pagina hebt, hoe groter de snelheidsverbeteringen die u kunt bereiken.

In deze zelfstudie gaan we kijken hoe u lui laden op niet-AMP-websites kunt implementeren met behulp van een script met de naam Layzr.js. We gaan de functionaliteit van AMP's repliceren element zo dicht mogelijk bij, maar we zullen ook werken met enkele van de specifieke kenmerken van Layzr.

Laten we beginnen!

1. Basisinstellingen

Als onderdeel van het artikel "AMP-project: zal het uw sites sneller maken?" Ik heb een basislayout gemaakt met vijf afbeeldingen. Om u in staat te stellen vergelijkingen te maken tussen het gebruik van AMP en het zelf inzetten van lui laden, creëren we dezelfde vijf beeldlay-out. Ik zal je laten zien hoe je verschillende load speed testen kunt uitvoeren later in deze tutor.

In de bronbestanden die bij deze zelfstudie zijn gevoegd, vindt u de AMP-versie van de lay-out en de voltooide versie van wat u hier gaat maken. Beide zijn opgenomen om u te helpen beslissen welke aanpak het beste bij u past.

Terwijl we alles doorlopen, raad ik aan om je werk te testen met Chrome Developer Tools (F12) met de Netwerk tab open, Cache uitschakelen gecontroleerd en throttling ingesteld op Normale 3G. Dit simuleert een gemiddelde mobiele verbinding, toont u een grafiek van elke afbeelding die in realtime wordt geladen en geeft u een duidelijk beeld van hoe uw luie lading werkt.

Wanneer u de pagina vernieuwt voor testen, houdt u de herladen knop, waardoor een vervolgkeuzemenu verschijnt met verschillende opties. Kiezen Lege cache en harde herladen om een ​​bezoeker die voor de eerste keer op uw site arriveert volledig te simuleren.

HTML-shell maken

Laten we beginnen met het achterhalen van de basis. Maak eerst een map om uw project te huisvesten en maak daarbinnen een bestand met de naam index.html.

Open het voor bewerking en voeg de volgende code toe:

         
Welkom bij het lui geladen web
  

Met de bovenstaande code krijgen we alleen een HTML-shell op zijn plaats, inclusief een beetje CSS om de pagina's te garanderen lichaam en afbeeldingen hebben geen onverwachte gaten om zich heen. 

We zijn ook inclusief marge: 0 auto; dus de afbeeldingen die we later toevoegen, worden gecentreerd.

Laad Layzr

Het layzr.js-script heeft twee handige CDN-bronnen waaruit je kunt laden. We gebruiken er een uit Cloudfare.

Voeg deze code toe aan je html, vóór de afsluiting label.

Als u het script liever niet vanuit een CDN wilt laden, kunt u het in plaats daarvan downloaden en de korte instructies volgen op: https://github.com/callmecavs/layzr.js#download

Onmiddellijk Layzr

Nu Layzr is geladen, moeten we het laten uitvoeren wanneer de pagina wordt geladen. Voeg deze code toe na de script tags die u zojuist in het vorige gedeelte hebt ingevoegd:

Deze code maakt eerst een instantie die wordt gebruikt om Layzr te bevatten, en vervolgens wanneer de DOM-inhoud van de pagina is geladen, wordt die instantie gebruikt om de functionaliteit van Layzr te activeren.

Uw algemene code tot nu toe zou er nu als volgt moeten uitzien:

         
Welkom bij het lui geladen web
    

2. Afbeeldingen toevoegen (normale resolutie)

Met Layzr geladen en klaar om te gaan kunnen we beginnen met het toevoegen van enkele afbeeldingen om zijn magie op te werken. U kunt alle afbeeldingen gebruiken die u wilt, maar als u de exacte codevoorbeelden wilt gebruiken die u in de volgende stappen ziet, kunt u de bronbestanden downloaden die bij deze zelfstudie horen. Daarin zul je een vinden afbeeldingen map die u kunt kopiëren en plakken in uw eigen project.

Om afbeeldingen toe te voegen wanneer u Layzr gebruikt, gebruikt u een gewone img element, maar in plaats van de src kenmerk dat u zult gebruiken data-normal zoals zo:

Zorgen dat afbeeldingen hoogte hebben

Om een ​​lazy loading script te laten werken, moet het de hoogte van alle afbeeldingen op een site weten, zodat het kan beslissen welke moeten worden geladen (omdat ze zich in de viewport bevinden of er dichtbij in de buurt zijn), en welke moeten wachten.

Het lastige is echter dat een afbeelding eigenlijk geen hoogte heeft totdat het volledig in een pagina is geladen. Dit betekent dat als we lui laden willen laten werken, we een manier moeten hebben om de pagina informatie te geven over de hoogte van het beeld voor de afbeeldingen zijn geladen.

We zullen twee methoden behandelen om dit te bereiken, een voor afbeeldingen met een vaste grootte en een voor responsief. Het is de eenvoudigste manier om de hoogte van afbeeldingen te vergroten door ze in grootte te veranderen, omdat je ze alleen hoeft toe te voegen hoogte en breedte attributen.

Ga je gang en voeg toe img elementen boven uw scripttags, met behulp van de data-normal attribuut en inclusief hoogte en breedte, voor elke afbeelding die u wilt laden.

Deze methode met vaste grootte zorgt ervoor dat lui laden werkt, maar voorkomt dat de afbeeldingen reageren en dit is niet ideaal. We bespreken hoe je afbeeldingen iets later en een hogere responsiviteit geeft.

3. Stel een laaddrempel in

Layzr zorgt standaard alleen voor afbeeldingen die zichtbaar zijn op het moment van laden. Bezoekers hebben echter een soepelere ervaring als de volgende afbeeldingen in de rij (net buiten de viewport) ook zijn voorgeladen.

Doe dit door een optie met de naam in te stellen drempel bij het instantiëren van het script. De manier waarop het werkt, is dat u een waarde opgeeft die een percentage van de kijkvensterhoogte vertegenwoordigt. Als u een waarde van 100 instelt, vertegenwoordigt dit 100% van de kijkhoogte, bijvoorbeeld 1200px. In dit geval zou ook alles buiten het scherm binnen 1200 px van de viewport worden geladen.

Als u bijvoorbeeld twee grote afbeeldingen had, werd één ervan net buiten de viewport gepusht en was uw drempelwaarde ingesteld op 100, beide afbeeldingen zouden laden:

Om een ​​drempelwaarde in te stellen vervangt u deze regel in uw code:

const instance = Layzr ()

… hiermee:

const instance = Layzr (threshold: 100)

U kunt deze waarde wijzigen in wat het beste past bij de sites die u maakt. Als een interessant punt lijkt AMP's lazy loading threshold ongeveer gelijk te zijn aan 200.

4. Voeg Retina / HiDPI-afbeeldingen toe

Een van de grote voordelen van Layzr is dat het heel eenvoudig is om afbeeldingen toe te voegen voor apparaten met een hoge resolutie. Het enige dat u hoeft te doen, is het attribuut opnemen data-retina. Bijvoorbeeld:

Update alle img elementen in uw HTML om retina-afbeeldingen toe te voegen, zoals:

5. Responsieve afbeelding Placeholders en Reflow Prevention

Het lui laden van lui geladen afbeeldingen kan een lastige propositie zijn. Zoals we eerder vermeldden, om te bepalen wanneer afbeeldingen moeten worden geladen, moet Layzr eerst de hoogte ervan kennen. Omdat responsieve afbeeldingen hun dimensies voortdurend wijzigen, is hun hoogte onvoorspelbaar.

Bovendien willen we ook iets in onze paginalay-out hebben om terugvloeiing te voorkomen. Opnieuw plaatsen is wat er gebeurt wanneer een afbeelding klaar is met laden en van geen grootte komt en plotseling ruimte inneemt in de lay-out, waardoor alles eromheen beweegt. Dit kan erg frustrerend zijn voor bezoekers die zich alleen op uw inhoud willen concentreren om op de pagina op hen te kunnen springen.

We kunnen beide problemen oplossen door responsieve tijdelijke aanduidingen op de pagina op de juiste grootte voor elke afbeelding te krijgen. De plaatsaanduidingen zorgen ervoor dat de paginalay-out niet hoeft te worden doorgevoerd en geven ook Layzr-hoogten om mee te werken. We baseren onze aanpak op een ingenieuze techniek uit dit artikel "Een lijst uit elkaar" door Thierry Koblentz over "Intrinsieke ratio's voor video maken".

De enige voorwaarde is dat je de beeldverhouding van elke afbeelding die je plaatst vooraf moet kennen, omdat de CSS de afmetingen van de afbeeldingen zal aanpassen aan de hand van een bepaalde beeldverhouding.

Voeg een Aspect Ratio Wrapper toe

Het eerste wat we gaan doen, is een toevoegen div wrapper rond onze eerste afbeelding - dit div wordt onze tijdelijke aanduiding. We gaan de grootte van het formaat wijzigen div zelf met CSS, en vervolgens de afbeelding in te stellen om het horizontaal en verticaal te vullen.

We gaan de div een klassenaam die de beeldverhouding van de afbeelding vertegenwoordigt die deze bevat. In ons voorbeeld is de eerste afbeelding 960 pixels breed bij 640 pixels hoog, dus laten we uitvinden welke beeldverhouding het maakt.

640 (onze hoogte) is tweederde van 960 (onze breedte), wat betekent dat voor elke 2 eenheden van hoogte het beeld 3 eenheden van breedte heeft. Beeldverhoudingen worden meestal uitgedrukt als breedte hoogte, zoals in het geval van het bekende 16: 9. De verhouding van ons eerste voorbeeldbeeld is 3: 2.

Om deze beeldverhouding weer te geven, geven we onze wrapper div de klassenaam ratio_3_2.

Voeg Standard Aspect Ratio Styling toe

Nu zullen we de CSS toevoegen om dit allemaal te laten werken.

Tussen het bestaande tags in de kop van je index.html bestand, voeg deze code toe:

 div [class ^ = "ratio _"] position: relative; breedte: 100%; 

Deze selector neemt onze ratio_3_2 klasse, maar het zal ook elke andere klas oppakken die begint met verhouding_. Dit betekent dat we later meer klassen kunnen maken om rekening te houden met verschillende beeldverhoudingen.

In deze stijl zorgen we ervoor dat onze wrapper altijd 100% van de bovenliggende breedte beslaat. We leggen het ook op positie: relatief; omdat dit de afbeelding absoluut in de juiste positie plaatst, zul je zien waarom iets later.

Geef de hoogte-breedteverhouding wrapper

Nu voegen we deze code toe die specifiek is voor onze ratio_3_2 alleen klasse:

 .ratio_3_2 / * padding-top: calc (100% * (2/3)); * / padding-top: 66.666667%; 

De padding-top waarde is er wat ons in staat stelt om onze verpakking te houden div bij de beeldverhouding die we willen. Ongeacht de breedte van de div, deze opvulling houdt de hoogte op 66.666667% van dat bedrag, (twee derde), waardoor onze beeldverhouding van 3: 2 behouden blijft.

Als u wilt bepalen welk percentage u hier moet plaatsen, moet u bepalen wat de hoogte van uw beeldverhouding is wanneer deze wordt uitgedrukt als een percentage van de breedte. U kunt dit doen met de berekening:

100% * (hoogte / breedte)

Voor onze 3: 2 ratio maakt dit het: 100% * (2/3) = 66.666667%

U kunt van tevoren het juiste percentage voor uw gewenste beeldverhouding berekenen of, als u dat wilt, de CSS gebruiken calc () functie zoals gezien in het bovenstaande voorbeeld:

padding-top: calc (100% * (2/3));

Vul de beeldverpakking Wrapper met afbeelding

Onze wikkelaar met beeldverhouding gaat nu de gewenste afmetingen behouden ongeacht de breedte van de viewport. Dus alles wat we nu hoeven te doen is ervoor zorgen dat het beeld dat zich erin bevindt de omslag opvult en zo de afmetingen ervan erven.

We doen dit door absoluut elke afbeelding te positioneren die genest is in een verhouding_ gekaarde wrapper div, plaats hem in de linkerbovenhoek van de verpakking en trek hem vervolgens uit tot 100% hoogte en breedte, zoals:

 div [class ^ = "ratio_"]> img position: absolute; boven: 0; links: 0; breedte: 100%; hoogte: 100%; 

Controleer je eerste afbeelding en je zou nu zien dat deze zich uitstrekt tot de breedte van het kijkvenster, maar krimpt om te passen wanneer je het formaat wijzigt, terwijl je de lengte-breedteverhouding behoudt.

Voeg extra beeldverhoudingen toe

Je hebt waarschijnlijk afbeeldingen met allerlei verschillende beeldverhoudingen en je wilt ze kunnen aanpassen. In de voorbeeldafbeeldingen waarmee we werken in deze zelfstudie hebben de eerste drie een beeldverhouding van 3: 2, maar de vierde en vijfde zijn 16: 9.

Voeg om dit te verklaren een nieuwe klasse toe met de naam van de beeldverhouding, d.w.z.. ratio_16_9, met een overeenkomstige padding-top waarde:

 .ratio_16_9 / * padding-top: calc (100% * (9/16)); * / padding-top: 56.25%; 

Ga je gang en voeg beeldverhouding toe div wikkels rondom de rest van de afbeeldingen, met behulp van de juiste klassen voor elke, afhankelijk van hun grootte. U kunt ook de hoogte en breedte attributen van uw afbeeldingen omdat ze nu allemaal worden overschreven door onze CSS.

Laad het browservoorbeeld opnieuw en wijzig het formaat van de viewport: je zou nu moeten zien dat al je afbeeldingen responsief zijn terwijl ze hun lazy-loading functionaliteit behouden, zonder reflow.

6. Voeg srcset toe

Layzr ondersteunt ook het kenmerk srcset. In browsers die ondersteuning bieden voor srcset, wordt deze bij voorkeur gebruikt data-normal en data-retina.

In plaats van het rechte stuk te gebruiken srcset attribuut, maar het moet worden voorafgegaan door gegevens- net zoals de andere attributen die we tot nu toe hebben gebruikt. 

Werk de code van uw eerste afbeelding bij naar:

Als u dit wilt zien, gaat u naar het voorbeeld van uw browser, verkleint u de viewport tot onder 320 px breed, laadt u opnieuw en bekijkt u het netwerkpaneel. Je zou eerst de kleinste versie van je afbeelding moeten zien laden. Verhoog vervolgens de grootte van het kijkvenster en u zult zien dat de middelgrote en grote versies worden geladen terwijl u werkt.

De afbeeldingsmap in de bronbestanden bevat kleine, middelgrote en grote versies van elke afbeelding. Update uw code om ze allemaal te gebruiken in uw data-srcset attributen zoals zo:

Voeg een laadanimatie toe

We zijn bijna klaar, maar om een ​​laatste laagje Pools te maken, gaan we een laadanimatie toevoegen. Hiermee wordt aan bezoekers duidelijk gemaakt welke gedeelten van de lay-out optreden als tijdelijke aanduidingen voor afbeeldingen en dat die afbeeldingen worden geladen.

We zullen een pure CSS-loader gebruiken, een enigszins aangepaste versie van deze geweldige pen van Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Om te voorkomen dat extra markup nodig is, hebben we onze laadanimatie opgenomen in een :na psuedo-element bevestigd aan elke wikkelaar met beeldverhouding. Voeg het volgende toe aan uw CSS:

 div [class ^ = "ratio _"]: na content: "; display: block; width: 3rem; height: 3rem; border-radius: 50%; border: .5rem double # 444; border-left: .5rem double wit; positie: absoluut; top: calc (50% - 2rem); links: calc (50% - 2rem); animatie: spin 0.75s oneindig lineair; @keyframes spin 0% transform: rotate (0deg); 100% transform: rotate (360deg);

De bovenstaande code maakt een klein cirkelvormig loaderpictogram, centreert het en laat het elke 0,75 seconden 360 graden ronddraaien in een cirkel.

We voegen ook een donkergrijze achtergrondkleur toe aan onze breedbeeldratio-omslagen, zodat deze eenvoudig kunnen worden onderscheiden van de rest van de lay-out. Voeg dit toe achtergrondkleur: # 333; regel als volgt:

 div [class ^ = "ratio _"] position: relative; breedte: 100%; achtergrondkleur: # 333; 

Ten slotte moeten we er alleen voor zorgen dat onze lader niet boven de afbeeldingen uitsteekt. Om dit te doen voegen we de regel toe z-index: 1; naar onze afbeeldingen, ze verschuiven naar een laag bovenop de laders:

 div [class ^ = "ratio_"]> img position: absolute; boven: 0; links: 0; breedte: 100%; hoogte: 100%; z-index: 1; 

Vernieuw je pagina nu en je zou je laadanimatie in actie moeten zien.

Uw definitieve code

Als al het bovenstaande is voltooid, ziet uw code er nu als volgt uit:

         
Welkom bij het lui geladen web
 
  
 
  
 
  
 
  
 
  
    

Afsluiten

U hebt lui laden nu volledig handmatig geïmplementeerd, met zo dicht mogelijk om pariteit met AMP weer te geven.

Er zijn een aantal dingen die AMP automatisch doet, zoals het behoud van de beeldverhouding op responsieve beelden, maar aan de andere kant zorgt het zelf doen voor extra controle, zoals het specificeren van uw eigen laaddrempel.

Hopelijk heeft het doorlopen van dit proces je geholpen om te beslissen welke aanpak jouw voorkeur heeft.

Kleine technici met netwerkkabels, Kirill_M / Photodune.

Met dank aan Michael Cavalea voor een uitstekend script! Ga voor meer informatie over Layzr.js naar: https://github.com/callmecavs/layzr.js