Share
In questo tutorial ti mostrerò come migliorare le prestazioni delle tue pagine web usando in-view.js. Questa libreria JavaScript riporta quando qualcosa è sfogliato nel viewport e ci aiuta a caricare dinamicamente le nostre immagini quando sono necessarie.
Le prestazioni Web sono importanti, soprattutto se il tuo sito Web è indirizzato ai Paesi in via di sviluppo in cui le connessioni sono lente e i piani dati sono costosi. Alcune attività di base che comunemente ci impegniamo a migliorare le prestazioni dei nostri siti Web includono la riduzione di file JavaScript e fogli di stile, "gzipping" di risorse, compressione delle dimensioni dell'immagine, dopo di che siamo praticamente tutti impostati. Ma siamo noi?
Tempo di caricamento della pagina e timeline dell'ispettore del browserL'esempio di ispettore precedente mostra una singola pagina che carica 24 immagini in una finestra di dimensioni mobili alla normale velocità 3G. E come possiamo vedere, il caricamento della pagina è completo a circa undici secondi! Questo è davvero lento dato che abbiamo a che fare con una semplice pagina con nient'altro che poche immagini e un foglio di stile. La pagina non è ancora inquinata dagli annunci, né gli script di tracciamento che di solito aggiungono ulteriore zavorra alla pagina.
Vale anche la pena ricordare che questa è semplicemente un'emulazione. Non prende nemmeno in considerazione l'impostazione del server, la latenza e altri ostacoli tecnici. La performance potrebbe essere peggiore in realtà.
Quindi, come possiamo migliorare le prestazioni di caricamento della pagina?
Per prima cosa, abbiamo un numero di immagini. Il motivo per cui la pagina viene caricata lentamente è perché tutte le immagini si stanno allagando contemporaneamente al caricamento iniziale della pagina. Se guardi più da vicino l'immagine precedente, vedrai che questo non accade in parallelo: un paio di immagini iniziano a caricarsi solo quando gli altri vengono sottoposti a rendering, il che fa impallidire la pagina nel suo complesso.
Se abbiamo un gran numero di immagini su una singola pagina, possiamo considerare di caricare queste immagini in modo asincrono e solo quando l'utente ha bisogno di loro. Ciò consente al browser di completare il caricamento della pagina visualizzabile senza dover attendere il rendering di tutte le immagini, con conseguente risparmio della larghezza di banda dell'utente.
Per seguire, prendi l'index-starter.html dal repository. C'è anche un accompagnamento css / styles-starter.css che puoi usare anche tu.
Per cominciare, dobbiamo sostituire le sorgenti di immagini con un'immagine veramente piccola, preferibilmente codificata in base64 per evitare richieste HTTP aggiuntive. Usiamo questa immagine come segnaposto prima di servire l'immagine reale. Detto questo, dobbiamo anche memorizzare l'effettiva origine dell'immagine in un attributo personalizzato chiamato Dati-src.
Una volta fatto questo e aggiornato la pagina, dovresti trovare le immagini attualmente vuote e le loro dimensioni non sono necessariamente ciò che le tue immagini finali dovrebbero avere.
Quindi sistemiamo gli stili.
Le immagini che vogliamo utilizzare sono impostate su 800 per 550 pixel. Divideremo l'altezza dell'immagine (800px) in base alla larghezza dell'immagine (500px), e moltiplicare questo per 100%. Usa il risultato per impostare il imbottitura superiore dello pseudo-elemento del contenitore dell'immagine. Infine, dobbiamo impostare la posizione dell'immagine su assoluto e impostare l'altezza massima a 100%, quindi non aumenterà l'altezza.
figura posizione: relativa; figure img top: 0; a sinistra: 0; posizione: assoluta; altezza massima: 100%; figura: before padding-top: 69,25%; // (554/800) * 100%
A questo punto, le dimensioni dell'immagine dovrebbero essere corrette. Tuttavia, l'origine dell'immagine reale risiede ancora in un attributo personalizzato, quindi il browser non può ancora recuperare alcuna immagine.
L'immagine ha il rapporto appropriato, ma l'immagine è ancora caricata.Il nostro prossimo passo sarà aggiungere alcuni JavaScript che caricheranno l'immagine.
Innanzitutto, dobbiamo caricare in-view.js nella pagina. Come accennato, questa libreria leggera (che non dipende da jQuery o una libreria di base come Waypoint) rileva se un elemento si trova all'interno o all'esterno della finestra del browser.
Ora crea un nuovo file JavaScript in cui scriveremo il nostro JavaScript e caricarlo dopo in-view.js, come segue:
La libreria in-view.js espone il file in vista() funzione che accetta un selettore come argomento. In questo caso, passeremo il figura elemento; l'elemento che avvolge le immagini. Il motivo per cui selezioniamo l'elemento wrapper è dovuto al fatto che aggiungeremo un paio di classi per eseguire le transizioni di stile, operazione più facile quando la classe si trova sull'elemento wrapper anziché sull'immagine stessa, quindi:
InView ( 'figura')
Successivamente, usiamo il .sopra() metodo per legare l'elemento con il accedere evento per verificare se l'elemento si trova all'interno del viewport. Inoltre, in-view.js espone anche il Uscita evento che fa il contrario; questo rileva quando l'elemento è fuori dalla finestra.
Accentsconagua
inView ('figure') .on ('enter', function (figura) var img = figure.querySelector ('img'); // 1 if ('undefined'! == tipoof img.dataset.src) / / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = new Image (); newImg.src = img.dataset.src; newImg.addEventListener ('load', function () figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (function () figure.classList.remove ('is-loading'); figure.classList.add ('is-loaded') ;, 300);););Il accedere l'evento attiverà una funzione, che farà quanto segue:
figura.Dati-src attributo.è-loading al wrapper, figura, elemento.Dati-src attributo.è-loading classe con il è-loaded classe.Come puoi vedere dal codice precedente, abbiamo introdotto due nuove classi è-loading, e è-loaded. Noi usiamo il è-loading classe per aggiungere un'animazione spinner mentre l'immagine si sta caricando. Quindi usiamo il è-loaded classe, come suggerisce il nome, per aggiungere l'effetto di transizione all'immagine quando l'immagine è stata caricata completamente.
figure.is-loaded img animation: fadeIn 0,38s lineare 1s in avanti; figure.is-loading position: relativo; figure.is-loading: dopo content: "; display: block; color: #ddd; font-size: 30px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius : 50%; margin: auto; posizione: assoluta; top: 50%; left: 50%; margin-left: -0.5em; margin-top: -0.5em; transform: translateZ (0); animation: loading 1.7s infinita facilità; @keyframes in caricamento 0% transform: ruotare (0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; 5%, 95% box-shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 10%, 59% box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 20% box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; 38 % box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0. 74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; 100% transform: ruotare (360 gradi); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; @keyframes fadeIn 0% opacity: 0; 100% opacità: 1;
Spero per il meglio, ma pianifica il peggio. Quindi, nel caso in cui JavaScript sia in qualche modo disabilitato (un caso raro, ma perfettamente possibile) dobbiamo assicurarci che l'immagine sia ancora visualizzata. Utilizzare il elemento con la sorgente dell'immagine che punta immediatamente alla sorgente dell'immagine reale.
Siamo tutti pronti! Aggiorna la pagina, e se ispezioniamo la timeline della rete in DevTools possiamo vedere la velocità della pagina è ora notevolmente migliorata dal momento che stiamo caricando solo ciò che è visibile agli utenti.
Più veloce!Il caricamento della pagina è ora completo solo nella versione 1.95 alla normale velocità 3G; più di un miglioramento della velocità del 500%!
In questo tutorial, abbiamo esaminato come migliorare il caricamento della pagina eseguendo il rendering delle immagini solo quando l'utente le vede. Questo metodo è comunemente noto come "caricamento lazy" e può aiutare enormemente le prestazioni del tuo sito web.
Esistono molte librerie JavaScript e plugin jQuery, quindi perché optare per in-view.js? Personalmente, in-view.js è stato il tipo di script che stavo cercando dal momento che non tenta di fare troppo. Gestisce solo una cosa e lo fa bene. Questo tipo di libreria offre maggiore controllo e maggiore flessibilità.
Ad esempio, non solo possiamo usare in-view.js per eseguire il caricamento lazy, ma possiamo anche usarlo per cose come l'esecuzione di scroll infiniti, magari visualizzando un modulo floating subscribe quando l'utente raggiunge la fine della pagina (prendi dare un'occhiata alla demo per vederlo in azione) o creare una timeline verticale senza dover inserire un'altra libreria JavaScript. Facci sapere come lo usi!
Modulo di iscrizione fluttuante, animato in vista quando l'utente raggiunge la fine della pagina