Lazyload JS: caricamento immagini progressivo on scroll

Lazyload JS (chiamato anche vanilla-lazyload) è uno script che permette il caricamento delle immagini allo scroll della pagina (effetto detto appunto “lazy load”). Perché lo facciamo? Innanzitutto per velocizzare il caricamento della pagine e poi per fornire una migliore User Experience: soltanto le immagini che effettivamente sono visibili nel viewport saranno richieste al server e mostrate all’utente.

Sembra banale ma.. perché richiedere risorse al server che non verranno mai usate? Questo porta anche ad un secondo vantaggio: risparmiare risorse e banda consumata. Se usiamo un servizio CDN risparmieremo decisamente molte richieste.

Lazyload è uno script di soli 3Kb che non ha dipendenze, cioè può essere usato senza includere jQuery o altre librerie. È scritto in javascript “liscio” (detto vanilla) e ha un moltissime di opzioni di configurazione che vedremo in questo articolo.

Includiamo lo script

Innanzitutto includiamo lo script nelle nostre pagine. Il consiglio è quello di farlo attraverso un CDN, in modo da non caricare nessun file sul nostro server e sfruttare l’ottimizzazione di Cloudflare:

 

A questo punto ci sono vari modi per sfruttare le sue potenzialità. Tutto dipende da come sono posizionate le immagini nel nostro codice e che obiettivo vogliamo raggiungere. Vediamo tre esempi pratici:

Caso 1: immagini in-line

Usiamo questo semplice esempio per il caso più diffuso, cioè un immagine da caricare una volta che è “nello schermo”:

HTML

Javascript

Caso 2: immagini responsive con srcset

In questo caso usiamo la tecnica delle misure srcset , sostituendolo con l’attributo data-original-set :

HTML

Javascript

Caso 3: con il tag <picture>

Se usiamo il tag <picture> per le immagini responsive, possiamo usare un codice analogo a questo:

HTML

Javascript

Caso 4: immagini di sfondo CSS

Se volessimo applicare l’effetto lazyload a immagini posizionate come background-image  in CSS, possiamo farlo in questo modo:

HTML

Javascript

Ulteriori vantaggi

È SEO-friendly perché non nasconde le immagini ai motori di ricerca.

Funziona anche in presenza di altri script, come jQuery, Angular, React o Vue.

È molto più veloce del famoso jQuery lazyload: si stima infatti che sia circa 6 volte più veloce.

Evitare l’hotlinking dei file javascript con .htaccess

Uno dei classici problemi dei tanti copia-incollatori seriali di internet, è che – magari a loro insaputa – incollano pure gli indirizzi dei nostri script. A tutti gli effetti richiedono questi file javascript direttamente dal nostro server e in sostanza abusano delle nostre risorse. Questo fenomeno è chiamato hotlinking e possiamo aggirarlo facilmente. Magari pure essendo un po’ cattivi.

Uno dei casi più diffusi è sicuramente quello delle immagini, per il quale potete leggere l’articolo su come prevenire l’hotlinking delle immagini. Un secondo caso, dicevamo, è quello dei file javascript. Per bloccarne l’hotlink è sufficiente aggiungere una regola nel file .htaccess come questa:

Naturalmente è necessario sostituire NOSTRO_DOMINIO.IT con il nostro dominio reale. Queste regola, in sostanza, significa:

[Se il chiamante è diverso da vuoto ed è diverso dal nostro dominio, con o senza www, e il file richiesto termina con .js, non rispondere alla richiesta]

A tutti gli effetti, quindi, il sistema non invierà il file al chiamante. Ma c’è una variante un po’ più cattivella, certamente più divertente! Potremmo, anziché non rispondere come nell’esempio precedente, servire un file javascript specifico.

Come vedete, abbiamo modificato l’ultimo rigo, dicendo al sistema di servire il file hotlink.js, nel quale possiamo decidere di mettere questo codice:

Appena qualcuno proverà a fare un hotlink di un nostro file javascript, il browser dell’utente verrà reindirizzato al nostro sito.

Minimizzare CSS e Javascript con lo YUI Compressor

Lo YUI Compressor è uno strumento molto valido per alleggerire i file Javascript e CSS che serviamo agli utenti: è possibile cioè ridurne il peso tra il 20 e il 50% senza intaccarne le funzionalità, così da poterli integrare nei nostri progetti in piena sicurezza.

Esistono varie librerie dedicate alla minimizzazione, ma lo YUI Compressor resta quella con un maggior focus sulla riduzione di peso, che è il fattore che ci interessa maggiormente quando vogliamo ottenere le massime performance in termini di velocità di caricamento dell’intero sito.

Come funziona?

Lo YUI Compressor è scritto in Java, ed è basato sulla libreria open source Rhino, che serve per “far leggere” Javascript a Java stesso. Il sistema di compressione inizia analizzando il file leggendo il codice che abbiamo scritto. Cambia poi i nomi di variabili e funzioni sostituendoli con nomi più brevi dove possibile. Infine, toglie più spazi bianchi possibili e rimuove tutti i commenti. Pare poca cosa, ma in termini di velocità otterremo grandi benefici, ve lo assicuro. Vediamo come usarlo.

Installazione di Java

Per eseguirlo, abbiamo bisogno di avere installato Java JRE (Java Runtime Environment) sul nostro sistema. Se lo avete già fatto, passate al punto successivo.

Installazione di Java su Linux basati su Red Hat, CentOS o Fedora

Per installarlo, ci affidiamo al gestore pacchetti yum

Verifichiamo che l’installazione sia andata a buon fine

Installazione di Java su Linux basati su Ubuntu o Debian

Per installarlo, ci affidiamo al gestore pacchetti APT

Verifichiamo che l’installazione sia andata a buon fine

Installazione di Java su Windows

Procedete al download dal sito ufficiale ed installate il pacchetto. Al termine, riavviate la macchina.

Download di YUI Compressor

A questo punto non ci rimane che scaricare l’ultima versione del compressore, che consiste in un singolo file .jar, dalla pagina download ufficiale. Scarichiamo il pacchetto, manualmente oppure tramite il comando wget

Minimizziamo un file

A questo punto possiamo già utilizzare lo YUI Compressor, testiamolo quindi su un file javascript.

Abbiamo eseguito l’applicativo indicandogli come input il file file.js  e come file output avremo la sua versione minimizzata nel file  file-min.js . Il tipo di compressione (Javascript o CSS) è basato sull’estensione del file che stiamo minimizzando (.js oppure .css). Se i file che intendiamo processare non hanno una di queste estensioni, possiamo forzare il compressore ad un interpretare il tipo, usando l’opzione –type js oppure –type css

In questo caso un file javascript ha estensione .txt: diciamo al compressore di trattarlo come fosse un javascript (.js) e di mettere l’output minimizzato nel file file-min.js.

Opzioni disponibili

È possibile modificare il comportamento del compressore usando una o più opzioni. Per consultare la lista delle opzioni disponibili, digitiamo

Una delle più interessanti è sicuramente la modalità verbose che ci permette di ottenere dei piccoli suggerimenti su come ottimizzare il codice. Ad esempio, quando dichiariamo una variabile che non utilizziamo successivamente. Per abilitare la modalità verbose, aggiungiamo l’opzione –verbose

Fatto. Se volete soltanto provare lo YUI Compressor o utilizzarlo saltuariamente, sono disponibili diversi tool che vi permettono di utilizzarlo online, come questo.