Ottimizzare il caricamento di un sito Web

Grazie ai suggerimenti e ai consigli di Davide Salerno ho cercato di ottimizzare il caricamento di undolog.com, attività che, per questioni di "tempo", avevo sempre rimandato. In realtà non sono riuscito ad applicare tutte le preziose dritte di Davide, tuttavia sono riuscito a dare una bella "ripulita" e ridurre comunque i tempi di caricamento!

Riduzione dei Widget, Badget e Antipixel

La prima operazione che ho fatto è stata quella di ridurre il più possibile il carico prodotto dai vari Widget inseriti nel blog:

  • ho diminuito le righe visualizzate nel Widget di MyBlogLog: da 10 a 5 righe
  • ho eliminato gli antipixel dal BlogRoll
  • la biblioteca di aNoobi mostra 2 libri invece che 5

Compressione degli stili CSS del tema principale e degli Script Javascript

Visto che è ormai consolidato, ho "compresso" il file CSS relativo al tema del blog. Ho utilizzato il semplice compressore proposto da peterbe.com. Altri CSS, come quelli relativi ai Plugin, gli ho lasciati inalterati, sia per la loro esigua dimensione, sia per mantenere la possibilità di aggiornarli in automatico da WordPress e non "ricomprimerli" ogni volta.

Più complesso, invece, è stato ottimizzare gli script Javascript. Davide suggeriva di creare un unico file, ma nel mio caso l’operazione è alquanto articolata (alcuni script sono inclusi dinamicamanete dai Plugin). L’unica cosa che sono riuscito a fare è stato comprimere leggeremente prototype.js, utilizzando il compressore di Dean Edwards! Provate anche questo Javascriptcompressor.com.

WordPress Plugin cache

Qui non ho fatto proprio nulla… ho dato un’occhiata a varie soluzioni (WP-Cache o WP-SuperCache) ma devo dire che non mi hanno granchè soddisfatto… per ora! Vedremo in seguito!

Immagini: utilizzo della tecnica degli "sprite"

Quando si visualizzano immagini tramite gli stili CSS (con tecniche di image-replacement) è possibile effettuare una "speciale" forma di ottimizzazione grazie alle caratteristiche proprie degli stili. Normalmente io uso questa tecnica nei casi di rollover o, addirittura, nei siti multilingua. Questa procedura permette di ridurre le interrogazioni HTTP (viene richiesta una sola immagine che ne contiene varie) e, indirettamente, svolge anche quella funzione di preloading (realizzata in Javascript) tanto in voga fino a quelche tempo fa, prima del massiccio uso proprio de CSS. Definendo in modo opportuno lo stile di un elemento è possibile scegliere – tramite le definizione dell’attuale standard CSS – la porzione da visualizzare di una immagine che, in realtà, ne contiene più di una. Ad esempio i titoli del footer di undolog.com non sono tre immagini separate, ma una sola:

tits_footer

Quando si definisce il CSS è possibile indicare le coordinate da cui partire. Nel mio caso, ad esempio, un singolo titolo è 314×55 pixel. L’immagine unica contiene i tre titoli uno sotto l’altro, quindi 314 x ( 55 x 3)!
Vediamo come funziona partendo dal codice HTML, che funziona da contenitore:

1
2
3
<div class="footer-box" id="recentpost">
<h2 id="titf_recentpost" title="Post Recenti"><span>Post Recenti</span></h2>
....

Qui uso anche una tecnica di "image-replacement", ovvero di sostituzione del testo in caratteri con un’immagine appunto! La presenza del TAG SPAN serve proprio a questo: far sparire il testo mantenendo l’involucro H2 – che definisce l’area visualizzata: 314×55.

Nel file CSS il primo titolo viene risolto:

1
2
3
4
5
6
/* nascondo il testo in caratteri */
div.footer-box h2 span             {display:none}
/* definisco il contenitore */
div.footer-box h2                  {display:block;width:314px;height:55px}
/* metto come sfondo l'immagine del titolo */
div.footer-box h2#titf_recentpost  {background:url(images/tits_footer.png) no-repeat}

Il secondo titolo:

1
2
/* stessa immagine di prima ma con offeset verticale spostato 55 pixel in su */
div.footer-box h2#titf_mostview     {background:url(images/tits_footer.png) 0px -55px no-repeat}

Si noti la presenza del -55px che non fa altro che spostare l’offset di visualizzazione dell’immagine.

Questa tecnica è ottima per tutti quei casi in cui abbiamo varie immagini da sostituire (l’ho usata anche per i titoli nella sidebar o le freccie "verdi" di avanti e indietro dei post) tutte in no-repeat. Qualche problema, o se preferite, qualche attenzione va invece data nel caso di ripetizioni orizzontali e/o verticali. Se abbiamo una texture vera e propria, che dev’essere quindi ripetura orizzontalmente e verticalmente, questa tecnica non può essere usata. Nell’attuale versione dei CSS, infatti, è possibile indicare solo gli offeset di visualizzazione e non la dimensione "di taglio". Questa viene svolta indirettamente dal contenitore, nel mio caso da H2 (vedi definizione CSS display:block;width:314px;height:55px). Una dimensione maggiore del contenitore mostrerebbe il resto dell’immagine.
Nei casi di ripetizione solo orizzonatle o solo verticale, questa tecnca può essere ancora usata con un minimo di accortezze:

  • ripetizione orizzontale: l’immagine deve terminare a destra e a sinistra
  • ripetizione verticale: l’immagine deve terminare sopra e sotto

Forza bruta: export da MySQL e Notepad

Una cosa buona che ho fatto, usando davvero un basso livello di intervento, è stata quella di esportare tutti i Post come testo e dargli una sana ripulita:

  • Eliminati spazi inutili
  • Sostituzione di tutti i TAG OBJECT ed EMBED con il nuovo Plugin SWFObject, che ho introdotto da poco
  • Ripulita generale all’HTML dovuta anche al passaggio dalle varie versioni di WordPress: dalla 2.0 alla 2.5

Per “misurare” la bontà dei nostri interventi può essere utile affidarsi a strumenti di controllo e verifica disponibili direttamente online come PingDom

Anche l’occhio vuole la sua parte

Altre ottimizzazioni minori riguardano la compressione delle immagini di sfondo, che sono riuscito a ridurre e/o ad eliminare. Per il resto credo che anche l’occhio vuole la sua parte. Undolog.com non sarà il blog più veloce del mondo, tuttavia a me piace così ;)

7 commenti a: “Ottimizzare il caricamento di un sito Web”

  1. 27 mag, 2008 Davide Salerno:

    I miglioramenti si vedono e si sentono ;-)

    Anche comunque il cambio di hosting ha fatto il suo perchè MT è più reattiva e veloce.

    RispondiQuota
  2. 27 mag, 2008 Emanuele:

    Secondo me comunque è ancora troppo pesante il template. E’ difficile seguire post lunghi in bianco su nero.
    Ovviamente de gustibus…
    Ciao,
    Emanuele

    RispondiQuota
  3. 27 mag, 2008 Nicola:

    Stando a firebug hai gli etags impostati e non comprimi i dati in trasmissione.

    Gli etags, se non usati da WordPress (che dubito li usi), impediscono la cache lato client e la compressione ridurrebbe il traffico di testo (html, js e css) di un buon 50%.

    Se hai il sito servito da apache, aggiungi queste linee al tuo .htaccess (o crealo se non ce l’hai):

    FileETag none


            AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css app

            BrowserMatch ^Mozilla/4 gzip-only-text/html
            BrowserMatch ^Mozilla/4\.0[678] no-gzip
            BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

            Header append Vary User-Agent env=!dont-vary

    Provare per credere…

    Ci sono poi altri scherzetti fattibili, tipo impostare l’expiration degli elementi che non cambieranno mai parecchio nel futuro ma ciò comporta il non poterli modificare fino alla data impostata.

    RispondiQuota
  4. 27 mag, 2008 Giovambattista Fazioli:

    @Emanuele: avevo pensato anch’io ad eventuali problemi di lettura in modalità bianco su nero. Probabilmente vengo da una generazione che ha iniziato con i monitor a fosfori verdi :) e poi, quando ho a che fare con “codice”, preferisco di gran lunga questa soluzione ;) Ovviamente è una questione di gusto :P

    RispondiQuota
  5. 27 mag, 2008 Giovambattista Fazioli:

    @Davide: sono contento! L’unico “problema” che ho riscontrato in questi giorni è un notevole calo di prestazioni, da parte di (mt), durante le ore notturne, sino ad arrivare ad un blocco totale!
    Ho letto nel loro Blog che in questi giorni stanno eseguendo alcuni lavori di manutenzione ed essendo i server ubicati a Los Angeles, quindi con un fuso orario di ben 9 ore, quando da noi si avvicina la mezzanotte, da loro si hanno picchi di accessi. Confido tuttavia che la situazione andrà a migliorare, visto le eccellenti prestazioni durante le ore diurne qui in italia :)

    RispondiQuota
  6. 27 mag, 2008 Giovambattista Fazioli:

    @Nicola: ottima dritta! Mi documento e provo! Grazie :)

    RispondiQuota
  7. 28 mag, 2008 camu:

    Ottima la dritta sullo spostamento delle immagini. Io sul mio sito stavo pensando di introdurla, per ridurre il “peso” delle tante piccole icone che ho… per il resto se non hai un sito multilingua o multi-CSS, WP-Cache può fare al caso tuo. Riguardo agli ETag, a meno che non cambi il post e che non sia una cosa di WordPress, anche io consiglierei di disattivarli… Comunque mi sembra un ottimo lavoro di pulizia, che un po’ tutti dovremmo fare di tanto in tanto sui nostri blog!

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA