Accelerare il caricamento delle pagine del blog


image 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:

image

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

8 commenti:

Manu ha detto...

Ottimi consigli Tenebrae, come sempre (è bello riaverti tra noi ;-)
Io mi ero già appassionato al discorso, e seguendo questo genere di consigli sono riuscito a portare l'homepage del mio blog ad un tempo di caricamento di 2,6 secondi.

Una cosa molto utile è il servizio di css sprites che allegerisce enormemente il caricamento delle pagine.

Ti do un trick: sai le scritte " view stats for this blog" e "powered by Criteo" sotto il widget di criteo? Secondo me sono molto anti-estetiche e così ho trovato il modo di eliminarle. Basta inserire questa lina nel css:
#cto_fr{display:none} e il gioco è fatto.

Ciao Tenebrae!

Manu

Recenso ha detto...

Ciao Tenebrae ho fatto il test e volevo capire cosa intende per
Total objects, per External objects e per (X)HTML e come fare a diminuirli visto che mi pare siano tanti.

Den ha detto...

Cercherò di seguire al meglio questi consigli perchè, anche se il mio blog ora è abbastanza veloce da caricare, ho paura di appensantirlo inserendo nuovi gadget...

C'èSolol'Inter ha detto...

Ciao Tenebrae, complimenti per le modifiche al blog, è veramente stupendo.
E' mesi che ti seguo e devo ai tuoi insegnamenti molte delle modifiche che ho apportato al mio blog. Non sono però mai riuscito ad organizzare, sia graficamente che nei contenuti, il blog come veramente avrei voluto. Finalmente però ho trovato in rete un template 'strepitoso' (per me) che accomuna diverse delle mie necessità. Avrei però bisogno di una consulenza da chi, come te, 'se ne intende' per qualche consiglio e dritta sulle problematiche relative ad alcuni aspetti del template. Se ti invio il link al template ti è possibile dargli un'occhiata (senza fretta naturalmente)? Attendo tuo riscontro, un saluto e complimenti ancora per il tuo straordinario lavoro.
ciao
Sergio

vicio ha detto...

tenebrae molto bello il tuo nuovo template (sn l' autore del blog impottante quello pesante da caricare...) ma nel tuo nuovo template manca una cosa che a me faceva molto comodo la barra delle ricerche! poi mi puoi fare un favore ho il blog con qualke problemino di incompatibilita' con ie nn e' che potresti fare una capatina nel blog impottante e capire il problema grz mille!se nn lo capisci fa nnt nn si muore per ie W firefox

Tenebrae ha detto...

@manu: molto interessanti le informazioni su criteo, proverò! d'altronde devo ancora sistemarlo al nuovo template, come vedi ;)

IlPrincipino89 ha detto...

posso chiederti come si fa a creare un homepage come la tua? ovvero con un'anteprima di ogni post separato ordinatamente e il link "continua a leggere per chi è interessato? Te ne sarei enormemente grato.

Annamaria ha detto...

Mi puoi aiutare? perchè con il Pc fisso carico immagini 400 x 300 e con il portatile 200 x 150?


Prima di lasciare un commento, leggete qui

Posta un commento