AVVISO IMPORTANTE: Dato l'elevato numero di richieste, Eternal Curiosity non può accettare nuovi clienti, sia che si tratti di consulenze scritte che di ottimizzazione SEO diretta. Valutiamo solo casi eccezionali e ad alto budget. Per informazioni, vi invitiamo a scriverci a [email protected]

Questo articolo apparteneva al vecchio blog (blog.danilopetrozzi.it), per cui le informazioni potrebbero non essere più aggiornate ed attendibili.

Esperimento: migliorare la velocità di caricamento con le immagini in Base64

Già nel lontano aprile 2013 mi ero impuntato con la compressione e ottimizzazione delle immagini, al fine di ridurne il peso, e quindi la velocità di caricamento. Addirittura mi era scappato anche un rage-post 😀 (a sinistra). Pochi giorni fa ho anche pubblicato un’altro esperimento in cui la riduzione del peso è stata più del 99% (destra)

Anche nell’esperimento di metà 2013 le cose erano andate bene: ero riuscito a comprimere un’immagine di quasi 10 volte (.png 147 KB, la mia .gif 14,6 KB) mantenendo inalterato l’aspetto visivo percepito!

Oggi, però, non ci soffermeremo sui metodi di compressione delle immagini. Forse in futuro farò un articolo su come ottenere quel tipo di .gif ultra compresse ma oggi, invece, parliamo di codifica in Base64. L’analisi degli operatori SEO italiani ci ha detto che circa il 2% dei nostri siti contiene immagini codificate in questo modo. E’ davvero utile usare questo metodo? Ci sono vantaggi? Scopriamolo!

Cosa significa codificare una immagine in base64

Chi segue il mio blog dalla sua apertura (nemmeno una settimana fa 🙂 ) ha già letto un post che parla di criptazione (il cifrario monouso) e uno legato all’hashing (la guida introduttiva agli hash), ma rimane ancora un terzo modo per trasformare le informazioni: l’encoding.

A differenza dei primi due, l’encoding (e il concetto di charset, set di caratteri) non ha alcun valore intrinseco in ambito crittografico, ma riveste un ruolo molto importante in informatica. L’encoding è la “lingua” con cui viene visualizzata o trasformata una determinata stringa: da un punto di vista tecnico, è la modalità con cui gruppi di bit vengono trasformati in caratteri.  (avrai sicuramente sentito parlare di UTF-8, Unicode, ASCII e così via)

Codificare in base64 significa, appunto, trasformare un input con questo algoritmo di codifica. (la spiegazione tecnica ce la offre Wikipedia, ma poco ci importa). Decodificare in base64, significa trasformare un testo codificato base64 in output “comprensibile” (es. UTF-8)

Quando il concetto di encoding viene applicato alle immagini, non cambia nulla: l’encoding viene applicato ai bit che compongono i pixel dell’immagine, e quindi è possibile trasformare un qualsiasi .jpeg, .png, e così via, in stringa testuale base64.

Cosa valutiamo con questo esperimento

L’obiettivo di questo esperimento è quello di valutare se la trasformazione delle immagini in base64 permette di migliorare la velocità di caricamento e, eventualmente, di quanto. Inoltre, a fine post, trarremo le conclusioni legate all’applicabilità del metodo e ai suoi benefici/svantaggi in ambito SEO.

L’esperimento

Per effettuare un test con valore statistico, ho deciso di preparare 3 pagine differenti così composte:

  • pagina statica .html in cui l’immagine viene caricata normalmente ( img src=”URL” )
  • pagina .php in cui l’immagine viene caricata tramite una codifica base64 fatta sul momento ( img src="data:image/png;Base64,<?php echo base64_encode(file_get_contents("URL")); ?>" )
  • pagina .php in cui l’immagine viene caricata tramite stringa base64 precaricata in precedenza ( img src=”data:image/png;Base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAqRXhpZgAASUkqAAgAAAABADE[…..]” )

Per vedere come si comporta la codifica base64, ho scelto due immagini differenti per i test (foto del mio cane :D): una molto grande (1286 x 855) e una molto piccola (250 x 166)

Dato che ci sono 3 pagine per ogni immagine, alla fine abbiamo 6 pagine totali scansionate. Se volete dare un’occhiata, le ho lasciate nell’FTP:

3 versioni dell’immagine grande:

  • http://www.danilopetrozzi.it/esperimenti/base64/1-normale.html
  • http://www.danilopetrozzi.it/esperimenti/base64/1-base64.php
  • http://www.danilopetrozzi.it/esperimenti/base64/1-base64-cache.php

3 versioni dell’immagine piccola:

  • http://www.danilopetrozzi.it/esperimenti/base64/2-normale.html
  • http://www.danilopetrozzi.it/esperimenti/base64/2-base64.php
  • http://www.danilopetrozzi.it/esperimenti/base64/2-base64-cache.php

Il primo caso (la versione .html) rispecchia la situazione tradizionale in cui un’immagine è caricata con l’url diretto. Nel secondo caso (codifica con il PHP), il server deve occuparsi di prendere l’immagine, trasformarla in stringa base64 e poi stamparla nel codice sorgente. Nell’ultimo caso, invece, la trasformazione in base64 è stata fatta in precedenza e quindi ho semplicemente incollato direttamente la stringa nell’html della pagina (quest’ultimo test serve a simulare il caso in cui la trasformazione in base64 di una immagine sia “cachata”, che è quello che dovrebbe accadere nella maggiorparte dei siti web)

Come è stato effettuato il test

Per testare la velocità di caricamento delle 6 pagine, ho utilizzato WebPageTest e ho ripetuto il test, su ciascuna, 5 volte (quindi ci sono state 30 misurazioni totali). Ho effettuato 5 scansioni per ogni pagina in modo da ridurre al minimo gli errori statistici e le fluttuazioni dei risultati del tool. Dato che per ogni pagina, poi, ho calcolato la media dei 5 risultati, le analisi sono molto più affidabili.

La location impostata su WebPageTest è quella di default mentre il browser è stato cambiato da IE a Firefox (non me la sentivo di lasciare Internet Explorer per un test così particolare, non si sa mai…)

Per ogni scansione, ho ovviamente considerato solo i dati della first-view e non della visita ripetuta (dato che noi vogliamo misurare solo l’effettivo tempo di caricamento )

Se vi interessa, cliccando qui potete scaricare il .csv con i dati grezzi delle 30 scansioni.

Risultati dell’esperimento

 tempi di caricamento immagine grandeIn questo caso passiamo da una velocità media di 0,951 per la versione normale, a 0,8292 per la base64 standard fino a 0,8028 per la base64 “cachata”.

Il miglioramento in termini di velocità è stato del 15.6%

tempo di caricamento immagine piccola

La situazione si ripete anche qui: 0,6318 per la versione normale, 0,4868 per la base64 standard e 0,3986 per la base64 precomputata.

Il guadagno in termini di velocità è più di un terzo, ben 36.1%

Conclusioni

Sopratutto se supportato da un sistema di caching che eviti il ricorso a PHP a ogni caricamento, la conversione in Base64 delle immagini può avere un impatto drastico sulla velocità di caricamento.

È tutto ora quello che luccica? Mhh.. no.

Vantaggi

Il vantaggio sotto il profilo SEO è chiaro: le pagine si caricano in modo più veloce e le richieste HTTP sono inferiori. Dato che la velocità di caricamento è un fattore di ranking, il guadagno è assicurato. Se consideriamo che la velocità di caricamento è anche un fattore positivo per l’utenza, il vantaggio è doppio (minore la velocità di caricamento, maggiore il tempo di permanenza, il numero di pageviews e così via).

Il vantaggio in termini di velocità di caricamento è maggiore nel caso in cui ci siano molte immagini di piccole-medie dimensioni. In questo caso, la riduzione di richieste HTTP è talmente “benefica”, che la percentuale di miglioramento può anche superare il 40%.

Nel caso di poche immagini di grandissime dimensioni, è sconsigliato l’uso della conversione base64 dato che il tempo totale di caricamento aumenterebbe: la singola pagina .html peserebbe decine di megabyte dato che è popolata da stringhe chilometriche.

Svantaggi

L’uso delle immagini in base64 presenta due svantaggi da valutare con attenzione:

i browser più vecchi non supportano questa possibilità (se non sbaglio addirittura Internet Explorer 7 non supporta i data URI base64)

– dato che l’immagine non è più passata come file esterno, i motori di ricerca non la tratteranno più come una vera e propria immagine. I motori sono comunque in grado di analizzare e interpretare questi codici al fine di “capire” che si tratta di una immagine, ma dato che non è presente nel filesystem del sito, questo genere di immagini sicuramente non finiranno mai su Google Images.

– passare da un sistema basato su immagini vere a uno basato su stringhe base64 non è una cosa facile: sopratutto se si utilizza un CMS c’è bisogno di progettare tutto con cura, bisogna mettere mano ai plugin, ai template e così via. Finché si codifica una singola immagine, è sufficiente una riga di PHP, se invece il metodo base64 va esteso a tutto il sito, allora la programmazione è decisamente più complessa.

PS. Magari in un futuro, se avrò tempo, creerò uno script in grado di comprimere le immagini con il mio metodo (quello che produce .gif 10 volte più leggere dell’originale) e che le codifica in Base64, in modo da ottenere le immagini più veloci possibili e immaginabili. Stay tuned 🙂 Prima o poi, giuro che mi ci metto 😉

Danilo petrozzi

Ciao! Io sono Danilo Petrozzi, il fondatore di Eternal Curiosity. Oltre a essere un senior SEO Specialist e un Web Developer, è dall'età di 9 anni che mi appassiono a qualsiasi cosa ruoti intorno al web e all'informatica in generale.

Lascia un commento