Googles prosjekt "Accelerated Mobile Pages" (AMP) har, for sent, bidratt til å påvirke nettsteder for å bli raskere. Med god teknikk og et kraftig innholdsforstyrrelsesnettverk har Google direkte gjort AMP-forbedrede nettsteder raskere. AMP har også arbeidet indirekte ved å oppfordre oss til å se på optimaliseringene og best practices AMP inneholder. Selv om du ikke skal gjøre nettstedet ditt AMP-kompatibelt, er det nyttig å forstå AMP som en todo-liste for å optimalisere et ikke-AMP-nettsted.

En av optimalisasjonene på denne listen er en teknikk som kalles "lat lasting", som vi så i aksjon i vår siste artikkel om bruk av AMP  egendefinert element. Med denne teknikken, når en besøkende først kommer til en side, lastes bildene i eller nær visningsporten. Resten utløses for å lastes mens den besøkende ruller ned.

Lazy loading lar en besøkende begynne å engasjere seg med innhold raskere, og den forbedrede lasthastigheten kan øke søkemotorrangeringene. Jo flere bilder du har på en side, jo større hastighetsforbedringer du står for å få.

I denne opplæringen skal vi se på hvordan du kan distribuere lat lasting på ikke-AMP-nettsteder ved hjelp av et skript som heter Layzr.js. Vi skal gjenskape funksjonaliteten til AMP element så tett som mulig, men vi vil også jobbe med noen av funksjonene som er spesifikke for Layzr.

La oss begynne!

1. Grunnoppsett

Som en del av artikkelen "AMP Project: Vil det gjøre nettstedene dine raskere?" Jeg opprettet en grunnleggende layout med fem bilder. For å gjøre det mulig å trekke sammen sammenligninger mellom bruk av AMP og distribusjon av lat lasting, vil vi gjenskape det samme fem bildeoppsettet. Jeg skal vise deg hvordan du kan kjøre forskjellige lasthastighetstester senere i denne tutoral.

I kildefilene som er vedlagt denne opplæringen finner du AMP-versjonen av oppsettet, og den fullførte versjonen av hva du skal lage her. Begge er inkludert for å hjelpe deg med å bestemme hvilken tilnærming som passer deg best.

Når vi går gjennom alt jeg anbefaler å teste arbeidet ditt ved hjelp av Chrome Developer Tools (F12) med Network fanen åpen, Deaktiver Cache sjekket og gasspjeld satt til Vanlig 3G. Dette simulerer en gjennomsnittlig mobilforbindelse, og viser deg et diagram over hvert bilde lastet i sanntid, og hjelper deg med å få et klart bilde av hvordan din latte lasting fungerer.

Når du oppdaterer siden for testing, hold nede reload knappen, som vil gi en rullegardinmeny med forskjellige alternativer. Velge Tom cache og hardt lasting å fullt ut simulere en besøkende som kommer til nettstedet ditt første gang.

Lag HTML Shell

La oss begynne med å få det grunnleggende nede. Først må du lage en mappe for å huse prosjektet ditt og inne i det lage en fil som heter index.html.

Åpne den opp for redigering og legg til følgende kode:

         
Velkommen til den lazy loaded weben
  

Med koden ovenfor får vi bare et HTML-skjerm på plass, og inkluderer et lite CSS for å sikre siden kropp og bilder har ikke uventede hull rundt dem. 

Vi inkluderer også margin: 0 auto; slik at bildene vi legger til senere, vil bli sentrert.

Legg inn Layzr

Layzr.js-skriptet har to praktiske CDN-kilder du kan laste fra - vi skal bruke en som kommer fra Cloudfare.

Legg denne koden til html, før avslutningen stikkord.

Hvis du foretrekker å ikke laste skriptet fra en CDN, kan du laste den ned i stedet og følge de korte instruksjonene på: https://github.com/callmecavs/layzr.js#download

Instantiate Layzr

Nå som vi har Layzr lastet inn, må vi gjøre det kjørt når siden laster. For å gjøre dette, legg til denne koden etter manus merker du bare satt inn i forrige seksjon:

Denne koden oppretter først en forekomst som brukes til å inneholde Layzr, så når siden DOM-innholdet har lastet inn, bruker den forekomsten til å aktivere Layzrs funksjonalitet.

Din generelle kode så langt skal nå se slik ut:

         
Velkommen til den lazy loaded weben
    

2. Legg til bilder (Normal oppløsning)

Med Layzr lastet og klar til å gå, kan vi begynne å legge til noen bilder for at den skal fungere sin magi på. Du kan bruke noen bilder du vil, men hvis du vil bruke de eksakte kodeprøver du ser i de følgende trinnene, kan du laste ned kildefilene som er vedlagt denne opplæringen. Der finner du en Bilder mappe som du kan kopiere og lime inn i ditt eget prosjekt.

For å legge til bilder når du bruker Layzr, bruker du regelmessig img element, men i stedet for å bruke src attributt du vil bruke data-normal som så:

Sikre bilder har høyde

For at et latisk lasteskript skal virke, må det kjenne høyden på alle bildene på et nettsted, slik at det kan avgjøre hvilke som skal lastes, (fordi de er i visningsporten eller i nærheten av det), og hvilke som skal vente.

Den vanskelige delen er imidlertid at et bilde faktisk ikke har noen høyde før det er fullt lastet inn i en side. Dette betyr at hvis vi vil ha lat lasting på jobb, trenger vi en måte å gi sideinformasjon om bildehøyde før bildene er lastet.

Vi vil dekke to metoder for å oppnå dette, en for bilder med fast størrelse og en for responsiv. Å gi bilder høyde ved å gjøre dem faste i størrelse er den enkleste metoden, som du bare trenger å legge til høyde og bredde egenskaper.

Fortsett nå og legg til img elementer over skriptetiketter, ved hjelp av data-normal attributt, og inkludert høyde og bredde, for hvert bilde du vil laste inn.

Denne metoden med fast størrelse vil tillate lat lasting på jobb, men det forhindrer bildene å være lydhør, og dette er ikke ideelt. Vi vil dekke hvordan du skal gi bilder både høyde og lydfølelse litt senere.

3. Angi en innlastingsterskel

Som standard vil Layzr bare ta med bilder som er på visning på tidspunktet for belastningen. Imidlertid har besøkende en jevnere opplevelse hvis bilder neste i køen (like utenfor visningsporten) er forhåndslastet også.

Gjør dette ved å sette inn et alternativ som heter terskel når instantiating scriptet. Slik fungerer det, vil du gi en verdi som representerer en prosentandel av visningsportens høyde. Hvis du angir en verdi på 100, representerer dette 100% av visningsportens høyde, f.eks. 1200px. I dette tilfellet vil alt av skjerm innenfor 1200px i visningsporten også lastes inn.

Hvis du for eksempel hadde to store bilder, ble en av dem presset like utenfor utsikten, og terskelen din ble satt til 100, ville begge bildene lastes:

For å angi en terskelverdi, erstatt denne linjen i koden din:

const instance = Layzr ()

… med dette:

const instance = Layzr (terskel: 100)

Du kan endre denne verdien til det som passer best til nettstedene du lager. Som et poeng av interesse, virker det som om AMPs lat belastningsterskel er omtrent lik 200.

4. Legg til Retina / HiDPI-bilder

En av de store tingene med Layzr er at det gjør det veldig rett frem for å legge til bilder for høyoppløsningsenheter. Alt du trenger å gjøre er å inkludere attributtet data-retina. For eksempel:

Oppdater alle img elementer i HTML-en din for å inkludere retinabilder, slik som:

5. Responsive Image Placeholders og Reflow Prevention

Å lage latte lastede bilder responsive kan være et vanskelig forslag. Som vi nevnte tidligere, for å kunne bestemme når du skal laste bilder, må Layzr først kjenne sine høyder. Fordi responsive bilder endrer dimensjonene hele tiden, er høyden uforutsigbar.

På toppen av dette vil vi også ha noe i sidelayout for å forhindre reflow. Reflow er hva som skjer når et bilde fullfører lasting og går fra å ha ingen størrelse til å plutselig ta opp plass i layoutet, forårsaker alt rundt det for å bevege seg. Dette kan være veldig frustrerende for besøkende som prøver å fokusere på innholdet ditt bare for å få det til å hoppe rundt på siden på dem.

Vi kan løse begge disse problemene ved å ha responsive plassholdere på siden med riktig størrelse for hvert bilde. Plassholderne vil sørge for at sidelayout ikke trenger å reflow, og vil også gi Layzr høyder å jobbe med. Vi vil basere vår tilnærming på en genial teknikk fra denne "A List Apart" artikkelen av Thierry Koblentz på "Opprette Intrinsic Ratios for Video".

Det eneste forbeholdet er at du må vite aspektforholdet til hvert bilde du legger inn på forhånd, fordi CSS vil endre størrelse på bildene i henhold til et spesifisert formatforhold.

Legg til en Aspect Ratio Wrapper

Det første vi skal gjøre er å legge til en div wrapper rundt vårt første bilde - dette div blir vår plassholder. Vi vil endre størrelsen på div seg selv med CSS, og deretter sette bildet inn for å fylle det horisontalt og vertikalt.

Vi skal gi div et klassenavn som representerer aspektforholdet til bildet det vil inneholde. I vårt eksempel er det første bildet 960 piksler bredt med 640 piksler høyt, så la oss finne ut hvilket aspektforhold som gjør det.

640 (vår høyde) er to tredjedeler av 960 (vår bredde), noe som betyr at for hver 2 høyde enheter har bildet 3 breddebredder. Aspect ratioer er vanligvis uttrykt som bredde høyde, som i tilfelle av det velkjente 16: 9. Forholdet til vårt første eksempelbilde er 3: 2.

For å representere dette aspektforholdet gir vi vår innpakning div klassenavnet ratio_3_2.

Legg til Standard Aspect Ratio Styling

Nå legger vi til CSS for å få alt dette til å fungere.

Mellom den eksisterende merker i hodet på din index.html fil, legg til denne koden:

 div [class ^ = "ratio _"] posisjon: relative; bredde: 100%; 

Denne velgeren henter vår ratio_3_2 klassen, men det vil også hente en annen klasse som begynner med forhold_. Dette betyr at vi kan lage flere klasser senere for å imøtekomme ulike forholdsforhold.

I denne stilen sørger vi for at vår wrapper alltid strekker seg til 100% av sin overordnede bredde. Vi setter det også på stilling: relativ; da dette vil absolutt posisjonere bildet i det - du vil se hvorfor litt senere.

Gi sidehøydehøydehøyde

Nå legger vi til denne koden spesifikk for vår ratio_3_2 kun i klassen:

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

De padding-top verdi det er det som gjør at vi kan holde vår wrapper div på aspektforholdet vi vil ha. Uansett bredden på div, denne polstring vil holde høyden på 66.666667% av det beløpet, (to tredjedeler), og dermed opprettholde vårt 3: 2-forhold.

For å finne ut hvilken prosentandel som skal settes her, finne ut hva høyden på bildeforholdet ditt er når det uttrykkes som en prosentandel av bredden. Du kan gjøre dette med beregningen:

100% * (høyde / bredde)

For vårt 3: 2-forhold som gjør det: 100% * (2/3) = 66,666667%

Du kan beregne riktig prosentandel for ønsket aspektforhold på forhånd, eller hvis du foretrekker at du kan bruke CSS calc () fungere som sett kommentert i eksemplet ovenfor:

polstring: kalk (100% * (2/3));

Fyll aspektforholdspaketet med bildet

Vårt inndelingspakke skal nå opprettholde de ønskede dimensjonene, uavhengig av visningsbredde. Så nå er alt vi trenger å gjøre for å gjøre bildet inne i det fylle opp wrappen, og dermed arve sine dimensjoner.

Vi gjør dette ved å plassere et bilde som er nestet inne i a forhold_ klassifisert wrapper div, plasserer den i øverste venstre hjørne av innpakningen, og strekker den til 100% høyde og bredde, slik som:

 div [klasse ^ = "ratio_"]> img posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; 

Sjekk ditt første bilde, og du bør nå se det strekker seg til bredden på visningsporten, men vil krympe for å passe når du endrer størrelsen, samtidig som du beholder størrelsesforholdet.

Legg til tilleggsforhold

Du vil sannsynligvis ha bilder med alle slags forskjellige forhold og du vil kunne imøtekomme dem. I eksemplet bildene vi jobber med i denne opplæringen har de tre første et forhold på 3: 2, men den fjerde og femte er 16: 9.

For å ta hensyn til dette, legg til en ny klasse oppkalt etter aspektforholdet, dvs.. ratio_16_9, med en tilsvarende padding-top verdi:

 .ratio_16_9 / * padding-top: calc (100% * (9/16)); * / polstring-topp: 56,25%; 

Gå videre og legg til aspektforhold div wrappers rundt resten av bildene, ved hjelp av de riktige klassene for hver avhengig av størrelsen deres. Du kan også fjerne høyde og bredde attributter fra bildene dine som de nå kommer til å bli overstyrt av våre CSS.

Last inn forhåndsvisning av nettleseren din og endre størrelsen på visningsporten: Du bør nå finne at alle bildene dine er responsive, samtidig som de beholder sin lataktige funksjonalitet, uten reflow.

6. Legg til srcset

Layzr støtter også srcset attributtet. I nettlesere som støtter srcset vil det bli brukt i preferanse over data-normal og data-retina.

Snarere enn å bruke den rette srcset attributt, men det bør bli prepended med data- akkurat som de andre attributene vi har brukt hittil. 

Oppdater koden til ditt første bilde til:

For å se dette arbeidet, gå til forhåndsvisning av nettleseren, krymp ned visningsporten ned til 320px bred, last på nytt og se på nettverkspanelet. Du bør se den minste versjonen av bildebelastningen først. Deretter øker størrelsen på visningsporten, og du bør se mediet og store versjoner lastes når du går.

Bildemappen som er oppgitt i kildefilene, inneholder små, mellomstore og store versjoner av hvert bilde. Oppdater koden din for å bruke dem alle i din data-srcset attributter som så:

Legg til en laster animasjon

Vi er nesten ferdige, men for å lage et siste lag av polsk skal vi legge til en lastingsanimasjon. Dette vil bidra til å kommunisere til besøkende hvilke deler av oppsettet som fungerer som bildebeholdere, og at bildene er i ferd med å lastes.

Vi bruker en ren CSS loader, en litt modifisert versjon av denne flotte pennen av Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

For å unngå å trenge ekstra oppslag, skal vi ha vår laste animasjon inneholdt i en :etter psuedo-element festet til hvert aspektforholdsinnpakning. Legg til følgende i CSS:

 div [class ^ = "ratio _"]: etter content: "; display: block; width: 3rem; height: 3rem; border-radius: 50%; border: .5rem double # 444; border-left: .5rem double hvitt; posisjon: absolutt; topp: calc (50% - 2rem); venstre: calc (50% - 2rem); animasjon: roter 0.75s uendelig lineær; @keyframes spin 0% transform: rotate (0deg); 100% transform: roter (360deg);

Ovennevnte kode lager et lite sirkelformet loader-ikon, sentrerer det, og gjør det spinn 360 grader i en sirkel hver 0.75 sekunder.

Vi kommer også til å legge til en mørk grå bakgrunnsfarge til våre innpakningsstørrelser, slik at de lett skiller seg fra resten av oppsettet. Legg til dette bakgrunnsfarge: # 333; linje som følger:

 div [class ^ = "ratio _"] posisjon: relative; bredde: 100%; bakgrunnsfarge: # 333; 

Til slutt må vi bare sørge for at lasteren ikke plasserer seg selv over toppen av bildene våre. For å gjøre dette legger vi til linjen z-indeks: 1; til våre bilder, skift dem til et lag på toppen av lastere:

 div [klasse ^ = "ratio_"]> img posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; z-indeks: 1; 

Oppdater siden din nå, og du bør se din lastingsanimasjon i gang.

Din siste kode

Med alt ovenfor fullført, må koden din nå se slik ut:

         
Velkommen til den lazy loaded weben
 
  
 
  
 
  
 
  
 
  
    

Wrapping Up

Du har nå fullstendig implementert lat lasting for hånd, med så nært som mulig å ha paritet med AMP.

Det er et par ting som AMP gjør automatisk, som å håndtere aspektforholdsbeskyttelse på lydhør bilder, men på baksiden gjør ting selv tillater ekstra kontroll, for eksempel angi egen belastningsterskel.

Forhåpentligvis arbeidet gjennom denne prosessen har hjulpet deg med å bestemme hvilken tilnærming du foretrekker.

Små teknikere med nettverkskabler, Kirill_M / Photodune.

Takk til Michael Cavalea for et utmerket skript! For å lære mer om Layzr.js besøk: https://github.com/callmecavs/layzr.js