Aumentare velocità di caricamento dei siti per iPhone con le immagini inline

Aumentare la velocità di caricamento dei siti su iPhone con le immagini inline

Le immagini inline usano lo schema data: URL per includere le immagini nella pagina. Questo può aumentare le dimensioni del vostro documento HTML. La combinazione delle immagini inline nei vostri fogli di stile in cache è una modalità per ridurre le richieste HTTP senza incidere sulle dimensioni della pagina. Le immagini inline non sono ancora supportate da tutti i browser principali.

Fonte: Performance Best Practices su Yahoo!

Ridurre il numero di connessioni è un fattore critico per la performance lato client. Per via della natura dei dispositivi mobili e delle reti mobili tale aspetto viene ancor di più amplificato. Molti sviluppatori non hanno utilizzato la tecnica delle immagini inline poiché non è supportata da tutti i browser, ma gli sviluppatori dell'iPhone si devono preoccupare solo di un browser, il quale fortunatamente supporta le immagini inline.

Osserviamo tramite Firebug (abilitando "Net" dal pannello di controllo) per vedere tutte le richieste effettuate dal browser per il sito iphone.cnet.com:

Ci sono in totale 26 richieste per questa pagina. Se prendiamo tutti i tag IMG e rimpiazziamo il valore src con le immagini inline codicificate in base 64, possiamo ridurre il numero di richieste a 13.

<img src=/img/guide/134/back-button-tip.png"      border="0" align="left" />  a...  <img src="data:image/png;base64,iVBORw0KGgottA ... SuQmCC"      border="0" align="left" />

Se compiamo il medesimo lavoro per altri files quali fogli di stile e javascript possiamo scendere fino a 6 richieste:

<link rel="stylesheet" type="text/css" href="http://i.i.com.com/cnwk.1d/css/rb/wdgt/iphone/iphone-reviews.css" />  a...  <link rel="stylesheet" type="text/css"  href="data:text/css;base64,Ym9keSB7CglvdmVy...YmxvY2s7Cn0%3D" />

Potete visualizzare la differenza direttamente sul vostro iPhone:

C|NET originale- 26 richieste
C|NET con immagini inline - 13 richieste
C|NET con quasi tutti gli elementi inline- 6 richieste

Per fare ciò potete utilizzare il tool di Grey Wyvern oppure il seguente semplice script PHP:

<?php  
   $options = getopt('f:');
    if(empty($options['f']))
     die("
Usage: php base64encode.php -f >filename<
");
    
    $ext_map = array(
    'png' => 'image/png',
    'gif' => 'image/gif',
    'jpg' => 'image/jpg',
    'css' => 'text/css',
    'js'  => 'text/javascript');
  
  $file = $options['f'];
  $ext = explode('.', $file);
  $ext = $ext[count($ext) - 1];
  
  if(empty($ext_map[$ext]))
    die("
Unknown extension
");
    echo 'data:'.$ext_map[$ext].
    'base64,'.urlencode(base64_encode(file_get_contents($file))) . "
";

?>

<a href="inline_iFrame1.html" title="Vedi esempio">Vedi codice</a>;

Ricordiamo che, come documentato su YUI Blog, l'iPhone non mette in cache elementi che superano i 25kb pre-gzip. Se usate questa tecnica abbiate cura di verificare che le risorse esterne che linkate non superino tale dimensione.