• About Me
  • Skills
  • Education
  • Employment
  • Blog
  • Contact
  • Open Source
    • WordPress
      • 3B Meteo Plugin
      • Facebook Like and Send
      • Google Monthly XML Sitemap
      • Google News Sitemap
      • Google Plus Comments
      • Google Plus One Button
      • I don’t endorse Google
      • I don’t endorse Wikipedia
      • I don’t endorse WIkipedia
      • Ottimizzare WordPress per renderlo più veloce
      • Rich Category Editor
      • Save To Google Drive
      • Sociable Italia
      • Third Party Cookie Eraser
      • Twitter Follow Button
      • WP instantempo
      • WP Super Secure and Fast htaccess
    • Plone SEO – collective.perseo
  • Creations
    • Web Marketing
    • SEO
    • WPO
    • SEO Stupidity
    • Webmaster Superhero
    • Il Vero SEO

Come fare per ridurre il numero di Richieste HTTP

05 Febbraio 2010 / By Andrea Pernici
  • Home
  • Come fare per ridurre il numero di Richieste HTTP

Continuiamo oggi con il tormentone del momento, ossia il miglioramento delle prestazioni del proprio sito web.

Dopo aver dato le mie considerazioni sull’intervento di Web Performance Optimization: alcune considerazioni sul Convegno Gt e poi aver offerto qualche utile consiglio per Ottimizzare wordpress per renderlo più veloce e qualche trucco per utilizzare Google App Engine come Content Delivery Network oggi è il momento di passare ad uno dei punti più importanti nella riduzione dei tempi di caricamento delle pagine, ossia il numero di richieste HTTP di ogni pagina.

Per essere più precisi ogni richiesta HTTP aggiunge in media 200+ millisecondi al caricamento della pagina. La latenza tra richieste HTTP, e le limitazioni dei browser riguardo la gestione parallela delle richieste incidono in maniera determinante sulla velocità di caricamento.

Uno dei consigli che viene spesso dato è quello di usare CSS sprite che è molto utile, ma spesso molto difficile da utilizzare se non in certi casi poco efficiente.

Tuttavia esiste un ulteriore metodo per ridurre drasticamente le richieste HTTP e questo metodo è quello che consente di sfruttare i  Base64-Encoded Data URIs.

Base64-Encoded Data URIs

Per una spiegazione più dettagliata delle Data URIs potete leggere questo documento di Nicolas Zakas di Yahoo!, ma per farla breve dirò che le Data URIs permettono di descrivere eventuali risorse esterne all’interno della pagina sotto forma di dato che ne descrive il contenuto.

Questo cosa significa ? Significa semplicemente che un file CSS come un’immagine possono essere espressi in un formato che viene letto esattamente alla stregua di semplice testo e quindi senza dover richiamare risorse esterne e di conseguenza senza effettuare richieste HTTP.

Questo significa anche che possiamo riempire la nostra pagina di immagini, javascript, css senza nessun incremento in termini di richieste HTTP.

In sintesi è una cosa fantastica !

Ma facciamo un esempio

Classico utilizzo delle immagini nei CSS

{code type=css}..sfondo { background: url(http://www.andreapernici.com/wp-content/uploads/2010/02/cc-logo.png); }{/code}

Base64 Data URI As Background Image

{code type=css}.sfondo { background: url(data:image/png;base64,iVBORw0K…..); }{/code}

Come potete vedere il caso Data URI contiene moltissimi caratteri (infatti ho messo i puntini), ma descrive l’immagine all’interno del codice  eliminando completamente la richiesta HTTP. Ovviamente utilizzando questo metodo ci sarà un aumento considerevole nella dimensione della pagina, ma nel complesso e nella maggior parte dei casi il risultato sarà migliore rispetto a moltissime richieste HTTP. Inoltre il problema dell’aumento di dimensione può essere facilmente risolto utilizzando GZIP sui file che usano questa tecnica. Nella maggior parte dei casi la grandezza del file sarà la stessa sia con una tecnica che con l’altra.

Inconvenienti di questo metodo

Come sempre accade nelle belle storie di noi SEO, WebMaster, WedDesigner, Programmatori esistono le grandi masse che utilizzano le versioni datate di Internet Explorer 🙂

Le Data URI sono infatti supportate solo dai seguenti Browser:

  • Firefox 2+
  • Safari – all versions
  • Google Chrome – all versions
  • Opera 7.2+
  • Internet Explorer 8+

e per quel che riguarda IE8 questo supporta solamente le Data URI inferiori a 32 kilobytes.

Alcuni strumenti per la codifica Base64

Uno degli strumenti migliori e più facili da usare è il cssembed JAR file. Una volta scaricato questo file (assicurandovi di avere Java installato) mettetelo dove volete ed eseguite questo comando:

{code type=php}java -jar cssembed-0.3.2.jar styles.css > styles-base64.css{/code}

in modo da creare il file styles-base64.css che sarà la versione codificata base64 del vostro foglio di stile (ovviamente al posto di styles.css mettete il nome del vostro file). E’ anche possibile utilizzare alcune istruzioni con questo software che permettono di mantenere il file compatibile con vecchie versioni di IE.

Esistono oltre a questo strumento anche molti siti che permettono la compressione online e uno dei più semplici è questo http://www.greywyvern.com/code/php/binary2base64.

Se siete invece su hosting linux e avete il comando php exec abilitato potete utilizzare anche questa riga di comando nei vostri script:

{code type=php}exec(“base64 -w0 nomefile”);{/code}

Conclusioni

Questo post non è nulla di futuristico perché questa tecnologia può essere usata senza troppi problemi già ora e se ne volete un esempio osservate il codice sorgente della ricerca di cotoletta su Google…oppure provate ad eseguire pagespeed di google o YSlow su Salserocafe.com…e allora perché non utilizzarla ?

A voi la scelta.

Tags
HTTP requests, Page Speed, Velocizzare Sito, Web Performance

Comments are closed.

Blog Comments
giorgiotave (Giorgio Taverniti) 5 Febbraio 2010

Come fare per ridurre il numero di Richieste HTTP – http://www.andreapernici.com/come-fare-per-ridurre-il-numero-di-richieste-http/

JACK1971 (Stefano Scetti) 5 Febbraio 2010

RT @giorgiotave: Come ridurre il numero di Richieste HTTP – http://www.andreapernici.com/come-fare-per-ridurre-il-numero-di-richieste-http/

Andrea moro 5 Febbraio 2010

Interessante tecnica, ma oltre a quanto da te evidenziato, ovvero limite dei browsers piuttosto che dimensioni dei file maggiori, aggiungerei una capacità di mantenimento del sito bassina, che si presta su siti consolidati ma non su quelli dove c’è bisogno di cambi repentini.

Andrea Pernici 5 Febbraio 2010

Ciao Andrea. Cosa intendi per siti dove c’è bisogno di un cambio repentino ?

Andrea Moro 5 Febbraio 2010

Cambi repentini = cambi frequenti.

Ogni volta dovresti re-encodare le immagini e non è proprio il massimo della praticità.

Andrea Pernici 5 Febbraio 2010

Io personalmente le codifico tutte con degli script quindi non è poi così non-agile sia per quanto riguarda le immagini non nel css sia quelle nel css che grazie al tool segnalato sono davvero facili da ricreare.

Il mio consiglio è dunque di tenere sempre salvato il css originale e quando si devono far modifiche farle su quello e poi codificarlo con l’apposito tool.

andrea Moro 5 Febbraio 2010

Si probabilmente è una strada perseguibile. Cmq bel pezzo, ho imparato una cosa nuova che seppur cattiva (non supporta IE) è cmq valida.
Come ti comporti con i detentori di quelle ciofeca di IE prima della 8?

Andrea Pernici 5 Febbraio 2010

Come ho scritto nel post il cssembed supporta anche le istruzioni per mantenere la compatibilità oppure ci sono varie soluzioni in rete come:
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/
oppure altra soluzione riconoscere il browser ed in base a questo servire l’apposito file o eseguire l’apposita funzione.

Bello il termine ciofeca;) adatto soprattutto 🙂

andrea Moro 5 Febbraio 2010

La seconda che hai detto è da perseguire lato server side. Proverò a vedere i link che hai passato. Sono curioso di approfondire.
Hai fatto test pubblici circa il risparmi di banda e roundtrip tra una versione e l’altra?

Andrea Pernici 5 Febbraio 2010

I test sono in corso su alcuni siti, ma per ora posso dirti che a quanto pare la strada più conveniente sia quella di utilizzare base64 per file minori di 50kb e usarli dopo aver compresso l’immagine al massimo. Questo fino ad ora sembra dare i risultati migliori.

Sto facendo alcuni test anche su base64 di interi CSS e JS.

andrea Moro 5 Febbraio 2010

Si, ma se comprimi l’immagine al massimo viene fuori una porcheria. Parli di compressione ratio/quality giusto?

Andrea Pernici 6 Febbraio 2010

Sto parlando di compressione senza perdita di qualità. Un esempio con Smush.it: http://developer.yahoo.com/yslow/smushit/

andrea Moro 6 Febbraio 2010

Grande, bel sito.

andrea Moro 6 Febbraio 2010

ma a te funziona regolarmente? Io non riesco a Smushare le immagini, rimane impiccato con immagini da 50k 🙁

Andrea Pernici 7 Febbraio 2010

Strano. Comunque prova pure a usare il base64 e poi fare dei test perché delle volte anche con immagini più grandi si ottiene il beneficio. Quella mia era una media.

Leave a Comment
About Me
about-me
Andrea Pernici

Chief Technology Officer at Search On Media Group and 3BMeteo.com

Categories
  • Apache 2.2
  • Blog e Social
  • CSS
  • Featured Articles
  • Google
  • Grafica
  • Linux
  • Marketing
  • Politica
  • Programmazione
  • Seo
  • Sicurezza
  • Sport
  • Varie
  • Viaggi
  • Video
  • WebServer
Popular Post
  • Corso HTML per SEOlunedì - Dicembre 05, 2022
  • Antonio Jelich e Pallamano 85. La terza di campionato.lunedì - Marzo 15, 2021
  • How to Dominate “Google In-The News” Box (aka “Top Stories”)…lunedì - Maggio 08, 2017
  • WordPress Brute Force Attacks: lock your wp-login.php with ModSecuritymercoledì - Ottobre 28, 2015
  • All the small things that make a great productmartedì - Ottobre 27, 2015
Tags
Andrea Pernici apache Bug Google Convegno gt Convegno SEO Design Errori Google Eventi SEO Facebook Facebook Like Google Google Maps Google News Sitemap Google Plus Google profile gtConference gt study days instantempo Instant Previews Joomla Linkedin Linux Loghi Marketing Matt Cutts Meteo migliori tweet Open Source Ottimizzare Wordpress Page Speed Rich Snippet script Seo SERP shell Significati Nascosti Sociable italia Social Network Twitter Usabilità Web Performance WebProNews Web Server Apache Wordpress Wordpress plugin
Recent Comment
  • Come fare Redirect 301 di una pagina web giovedì - Maggio 06, 2021 08:44 am
  • Come fare Redirect 301 di una pagina web martedì - Maggio 04, 2021 02:03 pm
  • Come fare Redirect 301 di una pagina web sabato - Aprile 10, 2021 02:05 pm
  • Come fare Redirect 301 di una pagina web venerdì - Aprile 09, 2021 11:02 pm
  • Come fare Redirect 301 di una pagina web giovedì - Aprile 01, 2021 10:08 am
© 2017 Andrea Pernici - SEO, Design & Technology as attitudes - Me on freebase - Privacy Policy