Come velocizzare il tuo blog in 5 mosse!

Siccome son paranoico questo blog è un tavolo degli esperimenti, da qualche giorno queste pagine si aprono più velocemente che mai. Per la precisione la prima apertura ha guadagnato mezzo secondo mentre un qualsiasi reload sucessivo della pagina si è dimezzato: da poco più di tre secondi a circa un secondo e mezzo.

Come ho fatto? Vuoi velocizzare anche le tue pagine?

I passi necessari sono:

  1. Riunisci in un unico file i css e javascript presenti nelle pagine: se controlli sotto la gonna di questo blog vedrai che non vi sono più differenti css o javascript sparsi, oltre quelli caricati da domini esterni (ad esempio Google Analytics). Il motivo è semplice: il tuo browser scarica queste pagine “due pezzi per volta”, così se diminuisci il numero di file da recuperare, diminuisci il tempo di caricamento totale della pagina.
  2. Minimizza qualsiasi cosa possibile: javascript e css sicuramente possono esser sostituiti dalla loro versione compressa, cui son stati rimossi spazi e commenti ed han ricevuto un paio di ottimizzazioni. Per comprimerli ho usato JSCompress per i javascript e MinifyCSS per i fogli di stile. Il risparmio si quantifica in quasi 100kb in meno (moltiplicali per il numero di visitatori e conta il risparmio giornaliero). Ovviamente se hai immagini non ottimizzate puoi intervenire anche lì: non mettere online una foto a 2500×2500 se poi la visualizzi in un’area della pagina limitata a 300×400!
  3. Richiama dall’esterno i javascript comuni: framework come jQuery o prototype (se li usi), puoi richiamarli attraverso la loro versione (minificata) fornita da Google, questo alleggerisce il carico sul tuo server, parallelizza il download della pagina e molto probabilmente un visitatore avrà già scaricato il file navigando altrove.
  4. Imposta correttamente l’expire dei file. E’ inutile ricaricare le immagini che, su un blog, molto probabilmente non cambieranno mai: quando pubblico qualcosa è perché voglio rimanga lì. E allora ecco i codici da inserire nel file .htaccess del tuo blog:
  5. # Abilita l'expire dei contenuti
    <ifmodule mod_expires.c>
    ExpiresActive On
    # 1 anno per gli mp3, i video e i contenuti multimediali
    <filesmatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
    ExpiresDefault A9030400
    </filesmatch>
    # 1 mese per le immagini e i fogli di stile
    <filesmatch "\.(jpg|jpeg|png|gif|swf|css)$">
    ExpiresDefault A2592000
    </filesmatch>
    # 7 giorni per i javascript
    ExpiresByType application/x-javascript "access plus 7 days"
    </ifmodule>
    
  6. Rimuovi l’header ETag per ogni file. Questa te la spiego così: il browser ad ogni connessione interroga il server e controlla che ciò che già conosce (per via di una visita precedente) non sia cambiato. L’ETag è un codice univoco usato per il confronto. Perché rimuoverlo? Perché senza esso il browser fa totale affidamento su quanto gli hai detto sopra con l’expire dei file: una volta al mese aggiorna le immagini, per il resto non fa alcun controllo e si fida che sia rimasto tutto uguale. Ecco cos’altro inserire.
  7. # Rimuove il tag ETag dall'header per tutti i file
    <ifmodule mod_headers.c>
    Header unset ETag
    FileETag None
    </ifmodule>
    
  8. Si può fare di più (si può sempre fare di più!). Il prossimo passo sarà utilizzare i CSS Sprites per riunire le immagini statiche (non quelle dei post). Il motivo è  lo stesso del punto uno… ma lascio a te il compito di approfondire l’argomento! 🙂

Hai altri consigli?

Emanuele

13 commenti » Scrivi un commento

  1. Ottimo post, non c’è bisogno di aggiungere altro. Solo una piccola precisazione, il controllo sull’IFMODULE attorno all’HEADER unset dovrebbe essere su mod_headers.c, non sul mod_rewrite 🙂

    • Uops, correggo, è scappato tra i vari copia-incolla per preparare il post! Tu usi altro camu? Pensavo proprio a te mentre sistemavo un po’ il tutto…! 🙂
      Ciao,
      Emanuele

  2. Beh, io uso i file .gz sul server (css, js) per far contento PageSpeed, che richiedono un altro paio di stringhe (di cui avevo parlato sul blog) all’interno di .htaccess. Inoltre, tra gli “expires” ho anche l’estensione .ico (favicon) ed altre sottigliezze da maniaco perfezionista che non sto ad elencare 🙂

    • Lorenzo, gzip è attivo per le pagine, non ancora per i css/js perché avevo dimenticato a controllare. 😛
      camu, ottimo il consiglio della ico, dimenticata anch’essa. Quali sono le altre sottigliezze? E’ bello essere maniaci! 🙄
      Ciao,
      Emanuele

  3. Beh, come PageSpeed stesso suggerisce, io uso domini diversi e COOKIELESS per immagini, fogli di stile e javascript. Anche per quello ti servirà aggeggiare un po’ con .htaccess ma qui dipende dal provider. Inoltre ho un “Vary Accept Encoding” specificato, che aiuta i proxy sul cammino tra te e l’utente a mettere in cache la roba giusta 🙂 E poi basta, mica posso svelarti tutti i trucchi del mestiere!

    • L’idea di “domini diversi”, quando in realtà risiede tutto sullo stesso server non mi piace proprio. Preferisco perder punti per PageSpeed che aumentare le connessioni verso la stessa macchina (l’effetto è quello) perché alla fine la banda è superiore di pochissimo. Per il cookieless delle immagini come hai provveduto? Spiegami meglio la storia del Vary Accept Encoding. I trucchi van condivisi, che tanto io non faccio mica il SEO per lavoro! 🙂
      Ciao,
      Emanuele
      PS: ho notato che il .ico è già impostato sull’htaccess con scadenza ad un anno!
      PPS: lo sapevo che questo post apriva altre mille cose da migliorare… ma son felice proprio per questo! 🙂

  4. Ottimi consigli (alcuni già li uso) 😀

    Grazie camu e Manu 😛

    Appena finisco la piattaforma blog su cui sto lavorando, avrete un altro impiastro tra i piedi (forse xD)

  5. mi sa che hai velocizzato tutto il velocizzabile… quello che rallenta di più sono proprio i componenti richiamati dall’esterno. 😡

    • Ennò, ci sono ancora da unificare le immagini e richiamarle al punto giusto tramite CSS Sprites! Ci sto già lavorando però… 😉
      Ciao,
      Emanuele

  6. Pingback: CSS Sprites (anche su questo blog). - …time is what you make of it…

  7. Pingback: HostingZoom, l’hosting che ti comprende. - …time is what you make of it…

Lascia un commento

I campi richiesti sono marcati con *.


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.