Il progetto "Accelerated Mobile Pages" (AMP) di Google ha contribuito a far sì che i siti web diventino più veloci. Con una buona tecnica e una potente rete di distrobuzione dei contenuti, Google ha reso i siti AMP direttamente più veloci. AMP ha anche lavorato indirettamente, tuttavia, incoraggiandoci a esaminare le ottimizzazioni e le best practice che AMP contiene. Anche se non stai per rendere il tuo sito web compatibile con AMP, è utile capire AMP come elenco di cose da fare per ottimizzare un sito Web non AMP.

Una delle ottimizzazioni su questa lista è una tecnica chiamata "lazy loading", che abbiamo visto in azione nel nostro recente articolo sull'utilizzo di AMP  elemento personalizzato. Con questa tecnica, quando un visitatore arriva per la prima volta in una pagina, vengono caricate solo le immagini nella o vicino al viewport. Il resto viene attivato per caricare mentre il visitatore scorre verso il basso.

Il caricamento lento consente a un visitatore di iniziare a interagire con i contenuti prima, e la maggiore velocità di caricamento può aumentare il posizionamento nei motori di ricerca. Più immagini hai su una pagina, maggiori sono i miglioramenti di velocità che stai ottenendo.

In questo tutorial vedremo come è possibile distribuire il carico pigro su siti Web non AMP utilizzando uno script denominato Layzr.js. Stiamo andando a replicare la funzionalità di AMP elemento il più vicino possibile, ma lavoreremo anche con alcune delle funzionalità specifiche di Layzr.

Cominciamo!

1. Impostazione di base

Come parte dell'articolo "Progetto AMP: renderà i tuoi siti più veloci?" Ho creato un layout di base contenente cinque immagini. Per consentire all'utente di effettuare confronti tra l'utilizzo di AMP e l'implementazione di un caricamento pigro, verrà ricreato lo stesso layout di cinque immagini. Ti mostrerò come eseguire vari test della velocità di carico più avanti in questo tutorial.

Nei file sorgente allegati a questo tutorial troverai la versione AMP del layout e la versione completa di ciò che realizzerai qui. Entrambi sono inclusi per aiutarti a decidere quale approccio ti si addice meglio.

Mentre passiamo attraverso tutto, ti consiglio di testare il tuo lavoro utilizzando Chrome Developer Tools (F12) con il Rete scheda aperta, Disabilitare la cache selezionato e impostato su 3G regolare. Questo simula una connessione mobile media, mostrandoti un grafico di ogni immagine in tempo reale, e ti aiuterà a ottenere una visione chiara di come funziona il tuo lazy loading.

Quando aggiorni la pagina per il test, tieni premuto il tasto ricaricare pulsante, che farà comparire un menu a discesa con diverse opzioni. Scegliere Cache vuota e Hard Reload per simulare completamente un visitatore che arriva al tuo sito la prima volta.

Crea shell HTML

Iniziamo mettendo le basi in basso. Innanzitutto, crea una cartella per ospitare il tuo progetto e al suo interno crea un file chiamato index.html.

Aprilo per la modifica e aggiungi il seguente codice:

         
Benvenuti nel web pigro caricato
  

Con il codice sopra stiamo solo ottenendo una shell HTML e includendo un piccolo CSS per garantire la pagina corpo e le immagini non hanno spazi vuoti inattesi intorno a loro. 

Stiamo anche includendo margine: 0 auto; quindi le immagini che aggiungeremo in seguito saranno centrate.

Carica Layzr

Lo script layzr.js ha due comode sorgenti CDN che puoi caricare - ne useremo una proveniente da Cloudfare.

Aggiungi questo codice al tuo html, prima della chiusura etichetta.

Se preferisci non caricare lo script da un CDN, puoi scaricarlo e seguire le brevi istruzioni su: https://github.com/callmecavs/layzr.js#download

Istanziare Layzr

Ora che abbiamo caricato Layzr, dobbiamo eseguirlo quando viene caricata la pagina. Per fare ciò, aggiungi questo codice dopo il copione tag che hai appena inserito nella sezione precedente:

Questo codice crea innanzitutto un'istanza che viene utilizzata per contenere Layzr, quindi una volta caricato il contenuto DOM della pagina utilizza tale istanza per attivare la funzionalità di Layzr.

Il tuo codice generale finora dovrebbe ora assomigliare a questo:

         
Benvenuti nel web pigro caricato
    

2. Aggiungi immagini (risoluzione normale)

Con Layzr caricato e pronto per andare possiamo iniziare ad aggiungere alcune immagini per far funzionare la sua magia. Puoi utilizzare qualsiasi immagine che desideri, tuttavia se desideri utilizzare gli esempi di codice esatto che vedi nei passaggi seguenti puoi scaricare i file sorgente allegati a questo tutorial. Lì troverai un immagini cartella che puoi copiare e incollare nel tuo progetto.

Per aggiungere immagini quando usi Layzr userai un normale img elemento, ma invece di usare il src attributo che userete Dati-normale così:

Garantire che le immagini abbiano altezza

Per far funzionare qualsiasi script di caricamento pigro, è necessario conoscere l'altezza di tutte le immagini su un sito in modo che possa decidere quali devono essere caricati, (perché sono nella finestra o vicini ad esso) e quali dovrebbero aspettare.

La parte difficile, tuttavia, è che un'immagine non ha effettivamente altezza fino a quando non viene caricata completamente in una pagina. Questo significa che se vogliamo che il carico pigro funzioni, abbiamo bisogno di un modo per dare informazioni sulla pagina sull'altezza dell'immagine prima le immagini sono caricate.

Copriremo due metodi per raggiungere questo obiettivo, uno per le immagini a dimensione fissa e uno per le risposte. Dare l'altezza delle immagini rendendole di dimensioni fisse è il metodo più semplice, in quanto è necessario solo aggiungere altezza e larghezza attributi.

Vai avanti ora e aggiungi img elementi sopra i tag script, utilizzando il Dati-normale attributo e incluso altezza e larghezza, per ogni immagine che vuoi caricare.

Questo metodo di dimensioni fisse consente il caricamento lento, tuttavia impedisce alle immagini di rispondere, e questo non è l'ideale. Tratteremo come dare immagini sia all'altezza sia alla reattività un po 'più tardi.

3. Impostare una soglia di caricamento

Di default, Layzr porterà solo immagini che sono in vista al momento del caricamento. Tuttavia, i visitatori hanno un'esperienza più fluida se le immagini successive (appena fuori dal viewport) sono anch'esse precaricate.

Fallo impostando un'opzione chiamata soglia quando si istanzia lo script. Il modo in cui funziona è che fornirai un valore che rappresenta una percentuale dell'altezza del viewport. Se imposti un valore di 100, ciò rappresenterebbe il 100% dell'altezza della finestra, ad es. 1200px. In questo caso verrebbe caricato anche tutto lo schermo fuori da 1200px della vista.

Ad esempio, se disponi di due immagini di grandi dimensioni, una di esse è stata inserita appena fuori dalla finestra e la soglia è stata impostata su 100, verranno caricate entrambe le immagini:

Per impostare un valore di soglia, sostituire questa riga nel codice:

const instance = Layzr ()

… con questo:

const instance = Layzr (threshold: 100)

Puoi modificare questo valore per adattarlo al meglio ai siti che crei. Come punto di interesse, sembrerebbe che la pigra soglia di caricamento di AMP sia all'incirca equivalente a 200.

4. Aggiungi immagini Retina / HiDPI

Una delle grandi cose di Layzr è che rende molto semplice aggiungere immagini per dispositivi ad alta risoluzione. Tutto quello che devi fare è includere l'attributo Dati-retina. Per esempio:

Aggiorna tutto il img elementi nel codice HTML per includere le immagini retinate, in questo modo:

5. Segnaposto immagine reattiva e prevenzione del riflusso

Rendere le immagini caricate pigre reattive può essere una proposta difficile. Come accennato in precedenza, per determinare quando caricare le immagini, Layzr deve prima conoscere le loro altezze. Poiché le immagini reattive cambiano continuamente le loro dimensioni, la loro altezza è imprevedibile.

Oltre a questo vogliamo anche avere qualcosa nel nostro layout di pagina per evitare il riflusso. Riflusso è ciò che accade quando un'immagine finisce di caricarsi e passa dall'assenza di dimensioni a occupare improvvisamente spazio nel layout, causando il movimento di tutto ciò che lo circonda. Questo può essere molto frustrante per i visitatori che cercano di concentrarsi sui tuoi contenuti solo per farli saltare intorno alla pagina su di loro.

Possiamo risolvere entrambi questi problemi disponendo segnaposto reattivi nella pagina con le dimensioni corrette per ogni immagine. I segnaposto garantiranno che il layout della pagina non debba ridursi e fornirà anche le altezze Layzr con cui lavorare. Baseremo il nostro approccio su una tecnica ingegnosa da questo articolo "A List Apart" di Thierry Koblentz su "Creazione di rapporti intrinseci per i video".

L'unica condizione è che devi conoscere le proporzioni di ogni immagine che pubblichi in anticipo, perché il CSS ridimensionerà le immagini in base a un rapporto aspetto specificato.

Aggiungi un wrapper con proporzioni

La prima cosa che faremo è aggiungere un div involucro attorno alla nostra prima immagine: questa div diventerà il nostro segnaposto. Ridimensioneremo il div stesso con i CSS, quindi impostando l'immagine all'interno per riempirla orizzontalmente e verticalmente.

Daremo il div un nome di classe che rappresenta le proporzioni dell'immagine che conterrà. Nel nostro esempio, la prima immagine ha una larghezza di 960 pixel e un'altezza di 640 pixel, quindi cerchiamo di capire quali sono le proporzioni che lo rendono.

640 (la nostra altezza) è due terzi di 960 (la nostra larghezza), il che significa che per ogni 2 unità di altezza l'immagine ha 3 unità di larghezza. I rapporti di aspetto sono in genere espressi come larghezza altezza, come nel caso del ben noto 16: 9. Il rapporto della nostra prima immagine di esempio è 3: 2.

Per rappresentare questo aspetto, daremo il nostro involucro div il nome della classe ratio_3_2.

Aggiungi Styling rapporto aspetto standard

Ora aggiungeremo il CSS per far funzionare tutto questo.

Tra l'esistente tag nella testa del tuo index.html file, aggiungi questo codice:

 div [class ^ = "ratio _"] position: relativo; larghezza: 100%; 

Questo selettore prenderà il nostro ratio_3_2 classe, ma raccoglierà anche qualsiasi altra classe che inizia con rapporto_. Ciò significa che possiamo creare più classi in seguito per adattarle a diversi rapporti di aspetto.

All'interno di questo stile ci stiamo accertando che il nostro wrapper si estenda sempre al 100% della larghezza genitore. Lo stiamo anche impostando posizione: relativa; poiché questo posizionerà l'immagine in modo assoluto al suo interno, vedrai perché un po 'più tardi.

Dare l'altezza del wrapper Ratio

Ora aggiungeremo questo codice specifico al nostro ratio_3_2 solo lezione:

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

Il padding-top valore ci è ciò che ci permette di mantenere il nostro involucro div con le proporzioni che vogliamo. Qualunque sia la larghezza del div, questa imbottitura manterrà l'altezza al 66,666667% di quella quantità, (due terzi), mantenendo quindi il nostro rapporto di aspetto 3: 2.

Per determinare quale percentuale inserire qui, capire quale sia l'altezza delle proporzioni quando è espressa come percentuale della larghezza. Puoi farlo con il calcolo:

100% * (altezza / larghezza)

Per il nostro rapporto 3: 2 che lo rende: 100% * (2/3) = 66,666667%

È possibile calcolare in anticipo la percentuale corretta per il rapporto aspetto desiderato oppure, se preferisci, puoi utilizzare il CSS Calc () funziona come visto commentato nell'esempio sopra:

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

Riempi il wrapper Ratio con l'immagine

Il nostro wrapper per aspect ratio ora manterrà le dimensioni desiderate indipendentemente dalla larghezza della finestra. Quindi ora tutto ciò che dobbiamo fare è fare in modo che l'immagine contenuta al suo interno riempia l'involucro, ereditandone le dimensioni.

Lo faremo posizionando assolutamente qualsiasi immagine annidata dentro a rapporto_ involucro classificato div, posizionandolo nell'angolo in alto a sinistra del wrapper, quindi allungandolo al 100% di altezza e larghezza, in questo modo:

 div [class ^ = "ratio_"]> img position: absolute; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; 

Controlla la tua prima immagine e ora dovresti vederla allungata fino alla larghezza del viewport, ma si restringerà per adattarsi quando ridimensioni, mantenendo le proporzioni per tutto il tempo.

Aggiungi rapporti aspetto extra

È probabile che tu abbia immagini con tutti i tipi di proporzioni diverse e vorresti essere in grado di accoglierle. Nelle immagini di esempio con cui stiamo lavorando in questo tutorial, i primi tre hanno proporzioni di 3: 2, mentre il quarto e il quinto sono 16: 9.

Per tenere conto di ciò, aggiungi una nuova classe chiamata in base allo aspect ratio, cioè. ratio_16_9, con un corrispondente padding-top valore:

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

Vai avanti e aggiungi proporzioni div avvolge tutto il resto delle immagini, usando le classi appropriate per ognuna a seconda delle loro dimensioni. Puoi anche rimuovere il altezza e larghezza attributi dalle tue immagini poichè ora stanno per essere sovrascritti dal nostro CSS.

Ricarica l'anteprima del tuo browser e ridimensiona il viewport: ora dovresti trovare tutte le tue immagini reattive pur conservando la loro funzionalità di caricamento pigro, senza reflow.

6. Aggiungi srcset

Layzr supporta anche l'attributo srcset. Nei browser che supportano srcset, verrà usato di preferenza su Dati-normale e Dati-retina.

Piuttosto che usare la scala srcset attributo, tuttavia, dovrebbe essere preceduto da dati- proprio come gli altri attributi che abbiamo usato finora. 

Aggiorna il codice della tua prima immagine a:

Per vedere questo funziona vai all'anteprima del tuo browser, riduci il viewport fino a una larghezza inferiore a 320px, ricarica e guarda il pannello di rete. Dovresti vedere prima caricare la versione più piccola dell'immagine. Quindi aumenta la dimensione della finestra e dovresti vedere le versioni di medie e grandi dimensioni caricate mentre vai.

La cartella delle immagini fornita nei file sorgente include versioni piccole, medie e grandi di ciascuna immagine. Aggiorna il tuo codice per utilizzarli tutti nel tuo Dati-srcset attributi come questi:

Aggiungi un'animazione di caricamento

Abbiamo quasi finito, ma per creare un ultimo livello di smalto stiamo per aggiungere un'animazione di caricamento. Ciò aiuterà a comunicare ai visitatori quali parti del layout fungono da segnaposto di immagini e che quelle immagini sono in fase di caricamento.

Useremo un puro caricatore CSS, una versione leggermente modificata di questa grande penna di Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Per evitare di richiedere ulteriori markup, avremo la nostra animazione di caricamento contenuta in un file :dopo psuedo-elemento collegato a ogni wrapper di formato. Aggiungi il seguente al tuo CSS:

 div [class ^ = "ratio _"]: dopo content: "; display: block; width: 3rem; height: 3rem; border-radius: 50%; border: .5rem double # 444; border-left: .5rem double bianco; posizione: assoluta; top: calc (50% - 2rem); left: calc (50% - 2rem); animazione: spin 0,75s infinito lineare; @keyframes spin 0% transform: ruotare (0deg); 100% transform: ruotare (360 gradi);

Il codice precedente crea una piccola icona del caricatore a forma di cerchio, la centra e la fa ruotare di 360 gradi in un cerchio ogni 0,75 secondi.

Aggiungeremo anche un colore di sfondo grigio scuro ai nostri wrapper per il rapporto aspetto, in modo che si distinguano facilmente dal resto del layout. Aggiungi questo colore di sfondo: # 333; linea come segue:

 div [class ^ = "ratio _"] position: relativo; larghezza: 100%; colore di sfondo: # 333; 

Infine, dobbiamo solo assicurarci che il nostro caricatore non si posizioni sopra le nostre immagini. Per fare questo aggiungeremo la linea z-index: 1; alle nostre immagini, spostandole su uno strato in cima ai caricatori:

 div [class ^ = "ratio_"]> img position: absolute; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; z-index: 1; 

Aggiorna la tua pagina ora e dovresti vedere l'animazione di caricamento in azione.

Il tuo codice finale

Con tutto quanto sopra completo, il tuo codice dovrebbe ora apparire come questo:

         
Benvenuti nel web pigro caricato
 
  
 
  
 
  
 
  
 
  
    

Avvolgendo

Ora hai completamente implementato il caricamento pigro a mano, il più vicino possibile per garantire la parità con AMP.

Ci sono un paio di cose che AMP fa automaticamente, come gestire la conservazione del rapporto di aspetto su immagini reattive, ma il rovescio della medaglia fare le cose da solo ti permette un controllo aggiunto, come ad esempio specificare la tua soglia di caricamento.

Spero che il lavoro svolto durante questo processo ti abbia aiutato a decidere quale approccio preferisci.

Piccoli tecnici con cavi di rete, Kirill_M / Photodune.

Grazie a Michael Cavalea per una sceneggiatura eccellente! Per ulteriori informazioni sulla visita di Layzr.js: https://github.com/callmecavs/layzr.js