Accelerare il caricamento delle pagine del blog

Uno dei principali pregi di un blog è al tempo stesso il suo peggior difetto: foto, musica, tanti articoli bene in vista, immagini glitterate, animazioni in flash o in java, lo rendono qualcosa di più di una semplice pagina web. Diventa lo specchio di noi stessi, delle nostre vite e del nostro modo di essere. Tutto questo però si paga in termini di pesantezza delle pagine.

Tutti sappiamo quanto sia importante avere un blog veloce, e lo sappiamo per il semplice fatto che noi stessi, quando navighiamo su Internet, odiamo aspettare interminabili secondi prima di cominciare a vedere qualcosa.

Anche Google ama poco le pagine che si caricano lentamente.

Sempre più spesso mi viene chiesto come fare a rendere più veloce il caricamento dei nostri blog. Mi viene chiesto così spesso che ho deciso di dedicare questo post all’argomento, focalizzandomi sugli aspetti che maggiormente (e più spesso) appesantiscono le pagine sul web. Anche se qualche nota è riferita a Blogger, le regole sono universali e valgono per qualunque blog o sito.

Innanzitutto, per renderci conto effettivamente di quanto sia pesante il blog, possiamo utilizzare uno strumento di cui ho già parlato in passato, Pingdom Tools, che tra tutti gli strumenti che ho provato del genere è quello che ritengo più completo e affidabile. Man mano che alleggeriremo il nostro blog, potremo misurarne il tempo di caricamento per vedere come vanno le cose.

Le immagini

Le immagini presenti nel blog rappresentano l’elemento di maggior pesantezza in assoluto. Per questo è importante non inserirne mai troppe. E importantissimo: mai di dimensioni enormi. Scrivendo delle guide, a me per primo viene spontaneo riempire i post di immagini. Poi col tempo ho dovuto imparare a ridimensionarmi, perchè il tempo di caricamento della pagina principale del blog stava diventando eterno.

Se utilizzate Windows Live Writer, potete dimensionare le immagini facilmente all’interno del testo e il programma, proprio per accelerare il caricamento, creerà una copia più piccola dell’immagine (che è quella che effettivamente vedremo nel post) e una più grande che verrà visualizzata cliaccandoci sopra.

Direi che due o tre immagini al massimo in un post vanno bene. Non dico di non metterne perchè, obiettivamente, un post senza immagini è come mia moglie senza sorriso (che per voi non significa niente, ma per me significa stare alla larga!)

Il numero dei post

Il numero di articoli che visualizzate nella pagina principale del blog è importante, perchè in genere più post ci sono più immagini vengono visualizzate. Con dieci post, con tre immagini in ognuno, nella pagina principale ci sono almeno trenta immagini. Già troppe. Nel caso di Blogger, il numero degli elementi visualizzati viene scelto da Layout->Elementi pagina, cliccando su Modifica nell’area Post sul blog. Nella finestra che appare, Blogger di base propone sette, consiglio di lasciare invariato questo numero:

Nel caso che scriviate post particolarmente lunghi, anche l’idea di mettere un solo post nella pagina principale del blog non è male. Tanto potete sempre visualizzare l’elenco degli ultimi post. La visualizzazione sintetica dei post non accelera il caricamento, perchè vengono comunque caricati anche se nascosti in parte.

Flash, Quicktime, Javascript

Vuoi per visualizzare il contatore delle visite, vuoi per la slide delle foto del cenone di capodanno, vuoi per abbellire in generale il nostro blog con animazioni varie, tendiamo spesso a inserire elementi in Flash, Quicktime o JavaScript. Più cose si muovono nel blog, più tempo ci vorrà a questo per caricarsi. Alcune cose sono indispensabili, come gli strumenti per le statistiche del blog o gli annunci AdSense per chi vuole monetizzarlo, altre meno.

Va bene mettere un calendario, ma mi è capitato di vederne anche due o tre. Il gattino che segue il mouse con gli occhi è carino, ma se mettiamo quello magari evitiamo altre cose. Se mettiamo della musica, magari non facciamola partire in automatico o inseriamola in fondo alla pagina, così viene caricata per ultima.

E’ un peccato, lo so, la vita è fatta di scelte. In genere io indico nei post che pubblico se quello di cui parlo può appesantire o meno il caricamento del blog.

CSS esterni

Questo è un consiglio riservato ai grandi smanettoni: nelle pagine del vostro blog, potendo, utilizzate CSS esterni.

I CSS ricordo che sono definizioni, contenute nel template, che definiscono lo stile e l’apparenza del nostro blog. E’ possibile metterle in un file esterno, per far si che vengano caricati solo la prima volta. Anche su Blogger è possibile farlo, come ho spiegato in questo post, anche se sconsiglio di farlo a meno che non ne abbiate effettivamente l’esigenza.

Non utilizzare troppi servizi di file hosting

Per pubblicare immagini (o magari documenti) è meglio non utilizzare troppi servizi esterni. Se usate Skydrive, Imageshack o Picasa, limitatevi a quelli. Ogni volta che durante il caricamento della pagina il browser incontra un elemento ospitato in un nuovo servizio, ne risolve l’indirizzo, cioè si mette in contatto con il server che lo ospita.

Io uso Picasa per le immagini e Skydrive in genere per il resto. Li consiglio, perchè sono entrambi senza limiti di banda.

Questo non accelererà tantissimo il caricamento delle pagine, non quanto i consigli precedenti, ma se usate molti servizi, ridurli si farà sentire.

Spostare il codice JavaScript in file esterni

Molte modifiche di cui spesso parlo, specialmente quelle come la visualizzazione degli articoli correlati, implicano l’inserimento di codice JavaScript all’interno del template di Blogger. La cosa migliore sarebbe mettere questi codici in file esterni come gli effetti natalizi di cui ho parlato tempo fa, perchè anche gli script esterni vengono caricati solo una volta.

Anche questo consiglio non è incisivo come i precedenti, ma se utilizzate molti script nel vostro blog la differenza può diventare significativa. Ovviamente anche questo è riservato particolarmente agli smanettoni esperti.

Per quanto mi riguarda, prima o poi riproporrò alcune modifiche fatte utilizzando codice esterno.

Per concludere

Ci sono molti altri punti che potrei inserire in questo elenco, ma direi che almeno il 90% di tempo di caricamento di una pagina web è dovuto ai primi tre trattati. Diminuite e rimpicciolite le immagini, diminuite i post nella pagina principale, e diminuite gli elementi decorativi animati nel blog, e noterete subito una sostanziale differenza.

Per qualsiasi chiarimento, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!