Googles "Accelerated Mobile Pages" -projekt har, för sent, hjälpt till att påverka webbplatser för att bli snabbare. Med bra teknik och ett kraftfullt innehållsdistributionsnätverk har Google direkt gjort AMP-förbättrade webbplatser snabbare. AMP har också arbetat indirekt genom att uppmuntra oss att titta på optimeringarna och bästa praxis som AMP innehåller. Även om du inte ska göra din webbplats AMP-kompatibel, är det bra att förstå AMP som en todo-lista för att optimera en icke-AMP-webbplats.

En av optimeringarna på denna lista är en teknik som kallas "lat laddning", vilket vi såg i åtgärd i vår senaste artikel om hur du använder AMP  anpassat element. Med den här tekniken, när en besökare först kommer till en sida, laddas bilderna i eller nära visningsporten. Resten utlöses för att ladda när besökaren rullar ner.

Lazy loading tillåter en besökare att börja engagera sig med innehåll tidigare, och den ökade belastningshastigheten kan öka din sökmotor ranking. Ju fler bilder du har på en sida, desto större hastighetsförbättringar står du för att vinna.

I denna handledning ska vi titta på hur du kan distribuera lat laddning på webbplatser utan AMP med hjälp av ett skript som heter Layzr.js. Vi ska replikera funktionaliteten hos AMP: er element så nära som möjligt, men vi arbetar också med några av de funktioner som är specifika för Layzr.

Låt oss börja!

1. Grundläggande inställning

Som en del av artikeln "AMP Project: Kommer det att göra dina webbplatser snabbare?" Jag skapade en grundläggande layout med fem bilder. För att göra det möjligt för dig att rita jämförelser mellan att använda AMP och installera lat laddning, kommer vi att återskapa samma fem bildlayout. Jag ska visa dig hur du kör olika lasthastighetsprov senare i denna tutoral.

I källfilerna som bifogas denna handledning hittar du AMP-versionen av layouten och den färdiga versionen av vad du ska göra här. Båda ingår för att hjälpa dig att bestämma vilket tillvägagångssätt som passar dig bäst.

När vi går igenom allt rekommenderar jag att du testar ditt arbete med hjälp av Chrome Developer Tools (F12) med Nätverk fliken öppen, Inaktivera cacheminnet kontrolleras och strypning inställd på Vanlig 3G. Detta simulerar en genomsnittlig mobilanslutning som visar ett diagram över varje bildbelastning i realtid och hjälper dig att få en klar bild av hur din lata lastning fungerar.

När du uppdaterar sidan för testning håller du ned knappen ladda om knappen, som kommer att göra en dropdown visas med olika alternativ. Välja Tom cache och hård uppdatering för att helt enkelt simulera en besökare som anländer till din webbplats första gången.

Skapa HTML-Shell

Låt oss börja med att få grunderna nere. Först, skapa en mapp för att hysa ditt projekt och inuti det skapa en fil med namnet index.html.

Öppna den för redigering och lägg till följande kod:

         
Välkommen till den lata laddade webben
  

Med koden ovan får vi bara ett HTML-skal på plats, och innehåller en liten CSS för att säkerställa sidans kropp och bilder har inga oväntade luckor runt dem. 

Vi ingår också marginal: 0 auto; så bilderna vi lägger till senare kommer att centreras.

Ladda Layzr

Layzr.js-skriptet har två bekväma CDN-källor du kan ladda från-vi kommer att använda en som kommer från Cloudfare.

Lägg till den här koden i din html, före stängningen märka.

Om du föredrar att inte ladda skriptet från en CDN kan du hämta det istället och följa de korta instruktionerna på: https://github.com/callmecavs/layzr.js#download

Instantiate Layzr

Nu när vi har lagt in Layzr, måste vi göra det exekverat när sidan laddas. För att göra så lägg till den här koden efter manus taggar du bara har lagt in i föregående avsnitt:

Den här koden skapar först en instans som används för att innehålla Layzr, då en gång sidans DOM-innehåll har laddats använder den instansen att aktivera Layzrs funktionalitet.

Din övergripande kod hittills skulle nu se ut så här:

         
Välkommen till den lata laddade webben
    

2. Lägg till bilder (Normal upplösning)

Med Layzr laddade och redo att gå kan vi börja lägga till några bilder för att det ska fungera. Du kan använda alla bilder du vill, men om du vill använda exakta kodprover som du ser i följande steg kan du ladda ner källfilerna som bifogas denna handledning. Där hittar du en bilder mapp som du kan kopiera och klistra in i ditt eget projekt.

För att lägga till bilder när du använder Layzr använder du regelbundet img element, men istället för att använda src attribut du ska använda data normal såhär:

Se till att bilderna har höjd

För att ett litet laddningsskript ska kunna fungera behöver man veta höjden på alla bilder på en sida så att den kan bestämma vilka som behöver laddas, (eftersom de är i visningsporten eller i närheten av den) och vilka som ska vänta.

Den knepiga delen är emellertid att en bild inte har någon höjd förrän den är fullt laddad i en sida. Detta innebär att om vi vill ha latig laddning på jobbet behöver vi ett sätt att ge sidinformation om bildhöjd innan bilderna laddas.

Vi kommer att täcka två metoder för att uppnå detta, en för bilder med fast storlek och en för responsiv. Att ge bilder höjd genom att göra dem lätta i storlek är den enklaste metoden, eftersom du bara behöver lägga till höjd och bredd attribut.

Fortsätt nu och lägg till img element över dina skript taggar, med hjälp av data normal attribut och inklusive höjd och bredd, för varje bild du vill ladda.

Den här fasta metoden gör det möjligt för lata lastning att fungera, men det förhindrar att bilderna är mottagliga, och det är inte idealiskt. Vi täcker hur du kan ge bilder både höjd och lyhördhet lite senare.

3. Ställ in en laddningsgräns

Som standard lägger Layzr bara in bilder som är synliga vid tidpunkten för belastningen. Däremot har besökare en jämnare upplevelse om bilderna nästa i rad (strax utanför visningsporten) är förladda också.

Gör detta genom att ange ett alternativ som heter tröskel när instantiating scriptet. Det sätt som det fungerar är att du ska ge ett värde som representerar en procentandel av visningsportens höjd. Om du anger ett värde på 100 representerar detta 100% av visningsportens höjd, t.ex. 1200px. I det här fallet kommer allt från skärmen inom 1200px av visningsporten också att laddas.

Om du till exempel hade två stora bilder, drevs en av dem strax utanför visningsporten, och din tröskel sattes till 100, skulle båda bilderna ladda:

För att ange ett tröskelvärde ersätt den här raden i din kod:

const instance = Layzr ()

… med detta:

const instance = Layzr (tröskel: 100)

Du kan ändra detta värde till det som passar bäst de webbplatser du skapar. Som en intressant punkt verkar det som om AMPs lata lastningströskel är ungefär lika med 200.

4. Lägg till Retina / HiDPI-bilder

En av de fantastiska sakerna om Layzr är det gör det väldigt rakt fram för att lägga till bilder för högupplösta enheter. Allt du behöver göra är att inkludera attributet data näthinnan. Till exempel:

Uppdatera alla img element i din HTML för att inkludera näthinnans bilder, som så:

5. Responsive Image Placeholders och Reflow Prevention

Att göra lat laddade bilder mottagliga kan vara ett knepigt förslag. Som vi nämnde tidigare, för att bestämma när bilder ska laddas måste Layzr först känna till sina höjder. Eftersom responsiva bilder ändrar sina dimensioner hela tiden, är deras höjd oförutsägbar.

Utöver detta vill vi också ha något i vår sidlayout för att förhindra återflöde. Reflow är vad som händer när en bild slutar ladda och går från att inte ha någon storlek för att plötsligt ta upp utrymme i layouten, vilket orsakar att allt runt det rör sig om att flytta. Detta kan vara mycket frustrerande för besökare som försöker fokusera på ditt innehåll bara för att få det att hoppa runt sidan på dem.

Vi kan lösa båda dessa problem genom att ha lyhörda platshållare på sidan med rätt storlek för varje bild. Plattformarna kommer att säkerställa att sidlayouten inte behöver återflöda, och kommer också att ge Layzr-höjder att arbeta med. Vi baserar vårt tillvägagångssätt på en genial teknik från den här "A List Apart" -artikeln av Thierry Koblentz om "Skapa Intrinsic Ratios for Video".

Det enda villkoret är att du måste känna till bildförhållandet mellan varje bild du lägger i förväg, eftersom CSS kommer att ändra storlek på bilderna enligt ett visst bildförhållande.

Lägg till ett bildförhållande

Det första vi ska göra är att lägga till en div wrapper runt vår första bild-detta div kommer att bli vår platshållare. Vi ska ändra storlek på div sig själv med CSS och ställer sedan in bilden för att fylla den horisontellt och vertikalt.

Vi ska ge div ett klassnamn som representerar bildförhållandet för den bild som den innehåller. I vårt exempel är den första bilden 960 pixlar bred med 640 pixlar hög, så låt oss ta reda på vilket bildförhållande som gör det.

640 (vår höjd) är två tredjedelar av 960 (vår bredd), vilket betyder att för varje 2 höjder har bilden 3 breddstorlekar. Bildförhållanden uttrycks typiskt som bredd höjd, som i fallet med den välkända 16: 9. Förhållandet mellan vår första exempelbild är 3: 2.

För att representera detta bildförhållande ger vi vår omslag div klassnamnet ratio_3_2.

Lägg till standardformatförhållande Styling

Nu lägger vi till CSS för att göra allt detta.

Mellan de befintliga taggar i huvudet på din index.html fil, lägg till den här koden:

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

Den här väljaren hämtar vår ratio_3_2 klass, men det kommer också att hämta någon annan klass som börjar med förhållande_. Det innebär att vi kan skapa fler klasser senare för att tillgodose olika bildförhållanden.

Inuti denna stil ser vi till att vårt inslag alltid sträcker sig till 100% av dess föräldras bredd. Vi ställer det också på position: relativ; Eftersom detta kommer absolut att positionera bilden inuti den-du kommer se varför lite senare.

Ge aspektförhållande Wrapper Höjd

Nu lägger vi till den här koden specifik för vår ratio_3_2 endast klass:

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

De padding-top värde där är det som gör det möjligt för oss att hålla vår omslag div vid det bildförhållande vi vill ha. Oavsett bredden på div, denna polstring kommer att hålla höjden vid 66.666667% av det beloppet, (två tredjedelar), vilket innebär att vårt 3: 2-bildförhållande hålls kvar.

För att bestämma vilken procentandel som ska sättas här, ta reda på hur högt ditt bildförhållande är när det uttrycks som en procentandel av bredden. Du kan göra detta med beräkningen:

100% * (höjd / bredd)

För vårt 3: 2-förhållande som gör det: 100% * (2/3) = 66,666667%

Du kan beräkna rätt procentandel för önskat bildförhållande i förväg, eller om du föredrar att du kan använda CSS calc () funktion som ses kommenterad i exemplet ovan:

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

Fyll in bildförhållande med bildförhållande

Vårt bildförhållandeomslag håller nu på att behålla de önskade dimensionerna oavsett bildportbredden. Så nu är allt vi behöver göra är att göra bilden inne i det fyller omslaget och därigenom ärva dess dimensioner.

Vi gör det genom att absolut placera någon bild som är näst i en förhållande_ klassad omslag div, Placera det i övre vänstra hörnet av omslaget och sträcka det till 100% höjd och bredd, så här:

 div [class ^ = "ratio_"]> img position: absolute; topp: 0; vänster: 0; bredd: 100%; höjd: 100%; 

Kontrollera din första bild och du bör nu se att den sträcker sig till bredden på visningsporten, men kommer att krympa för att passa när du ändrar storlek, håller dess bildförhållande hela tiden.

Lägg till extra bildförhållanden

Du kommer sannolikt att ha bilder med alla slags olika bildförhållanden och du vill kunna ta emot dem. I exemplet bilder vi arbetar med i denna handledning har de tre första ett bildförhållande på 3: 2, men den fjärde och femte är 16: 9.

För att ta hänsyn till detta lägg till en ny klass som heter enligt bildförhållandet, dvs. ratio_16_9, med en motsvarande padding-top värde:

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

Fortsätt och lägg till bildformat div wrappers runt resten av bilderna, med lämpliga klasser för varje beroende på storlek. Du kan också ta bort höjd och bredd attribut från dina bilder eftersom de nu alla kommer att överrullas av vår CSS.

Ladda om din webbläsares förhandsgranskning och ändra storlek på visningsporten: du borde nu hitta alla dina bilder är lyhörda, samtidigt som de behåller sin lata laddningsfunktion, utan återflöde.

6. Lägg till srcset

Layzr stöder också attributet srcset. I webbläsare som stöder srcset kommer den att användas i preferens över data normal och data näthinnan.

Snarare än att använda rak srcset attribut, men det borde läggas upp med data- precis som de andra attribut som vi hittills har använt. 

Uppdatera koden för din första bild till:

För att se att detta fungerar går du i din förhandsgranskning av webbläsaren, krympa visningsporten till under 320px bred, ladda om och titta på nätverkspanelen. Du bör se den minsta versionen av din bildbelastning först. Därefter öka storleken på visningsporten och du bör se mediet och stora versionerna ladda när du går.

Bilderna i källfilerna innehåller små, medelstora och stora versioner av varje bild. Uppdatera din kod för att använda dem alla i din data srcset attribut som så:

Lägg till en laddning Animation

Vi är nästan färdiga, men för att skapa ett sista lager av polska kommer vi att lägga till en laddningsanimation. Detta hjälper till att kommunicera till besökare vilka delar av layouten som fungerar som bildhållare, och att dessa bilder håller på att laddas.

Vi använder en ren CSS-lastare, en lätt modifierad version av denna stora penna av Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

För att undvika att behöva extra markup kommer vi att ha vår laddningsanimation i en :efter psuedo-element fäst vid varje aspektförpackning. Lägg till följande i din CSS:

 div [class ^ = "förhållande _"]: efter innehåll: "; display: block; bredd: 3rem; höjd: 3rem; gränsradien: 50%; gränsen: .5rem dubbel # 444; gränsen till vänster: .5rem dubbel vit: position: absolut; övre: calc (50% - 2rem); vänster: calc (50% - 2rem); animering: spin 0.75s oändlig linjär; @keyframes spin 0% transform: rotera (0deg); 100% transform: rotera (360deg);

Ovanstående kod skapar en liten cirkelformad loaderikon, centrerar den och gör att den snurrar 360 grader i en cirkel var 0.75 sekunder.

Vi ska också lägga till en mörkgrå bakgrundsfärg till våra inslagshanterare, så att de enkelt skiljer sig från resten av layouten. Lägg till detta bakgrundsfärg: # 333; linje enligt följande:

 div [class ^ = "ratio _"] position: relative; bredd: 100%; bakgrundsfärg: # 333; 

Slutligen behöver vi bara se till att vår lastare inte positionerar sig över toppen av våra bilder. För att göra detta lägger vi till raden z-index: 1; till våra bilder, flytta dem till ett lager ovanpå lastarna:

 div [class ^ = "ratio_"]> img position: absolute; topp: 0; vänster: 0; bredd: 100%; höjd: 100%; z-index: 1; 

Uppdatera din sida nu och du bör se din laddningsanimation i aktion.

Din slutkod

Med allt ovanstående är din kod nu så här:

         
Välkommen till den lata laddade webben
 
  
 
  
 
  
 
  
 
  
    

Avslutar

Du har nu helt implementerat lat laddning för hand, så nära som möjligt för att ha paritet med AMP.

Det finns ett par saker som AMP gör automatiskt, som hantering av bildförhållande i responsiva bilder, men på baksidan gör saker du själv tillåter extra kontroll, såsom att ange din egen laddningsgräns.

Förhoppningsvis arbetet genom denna process har hjälpt dig att bestämma vilken metod du föredrar.

Tiny tekniker med nätverkskablar, Kirill_M / Photodune.

Tack till Michael Cavalea för ett utmärkt manus! För att läsa mer om Layzr.js besök: https://github.com/callmecavs/layzr.js