Problemi di peso

No, non mi riferisco ai chili in più dovuti ad una dieta troppo calorica, ma al peso eccessivo delle pagine web dei nostri siti o blog. Essere troppo pesanti non fa bene nemmeno alla loro salute; infatti, ciò significa che il caricamento sarà più lento, e che i visitatori potrebbero abbandonare il sito dopo pochi istanti, spazientiti da attese troppo lunghe o da una navigazione comunque faticosa. La leggerezza è quindi un ideale anche per le pagine web, anche se non è di natura “estetica” come per gli esseri umani, ma “pratica”!

La lentezza nel caricamento è tra le prime cause di una elevata frequenza di rimbalzo (bounce rate), ovvero, dell’abbandono precoce del sito da parte dei visitatori. Oltretutto, Google penalizza i siti lenti, e premia invece quelli più veloci, mettendoli ai primi posti nei risultati di ricerca. È per questo che, quando ci rendiamo conto che il sito è troppo pesante, dobbiamo subito correre ai ripari per renderlo più leggero.

In un precededente articolo ho riunito in una lista alcuni efficaci strumenti per testare la velocità di caricamento di un sito web o di un blog; consiglio di partire da lì per vedere quanto sono pesanti le vostre pagine.

Se l’esito dei test non è buono, ecco alcuni consigli per rendere il vostro sito più leggero e veloce.  Chi più, chi meno, ognuno fa la sua parte.

Precauzioni generiche

1. Eliminare immagini, banner, script, widget, plugin, gadget, servizi di statistiche che non siano assolutamente indispensabili.
2. Non esagerare con la pubblicità.
3. Cercare di limitare il più possibile il numero di oggetti e query al database.
4. Attenzione a tutti gli elementi di dimensione particolarmente ingombrante: immagini, video, documenti pdf molto corposi, slides, animazioni flash pesanti, ecc.
5. Quando si offre del materiale da scaricare, comprimerlo in file .zip, così il download sarà più rapido. Se il risultato è ugualmente pesante, considerare l’eventualità di distribuire il materiale in più file zip.
6. Tenere aggiornato WordPress (o Joomla, o altra piattaforma) e i suoi plugin.
7. Leggere attentamente le impostazioni avanzate dei plugin, per vedere se, attivando qualche opzione, è possibile alleggerire il sito.

Immagini

1. Salvare le immagini nel formato più adatto: in genere, per le foto è il jpg, per disegni, immagini a tinte piatte, o con poche sfumature di colore, l’ideale è il gif o il png.
2. Usare immagini opportunamente ottimizzate per il web. In Photoshop, ciò si ottiene tramite la voce “Salva per web”, ma tutti i programmi di image-editing hanno un comando simile, che permette di ridurre il peso dell’immagine e quindi di renderla più veloce da scaricare. Spesso saper impostare i giusti parametri di trasparenza e dithering consente di ottenere immagini ancora più leggere.
3. Cercare di sfruttare ed integrare le proprietà di css e html nella costruzione della grafica del sito; lo scopo è quello di usare meno immagini possibili, approfittando ad esempio delle tecniche che consentono di ripetere le immagini (ideale per gli sfondi, le sfumature, gli effetti di trasparenza), di creare sfondi uniformi, bordi, ecc.
4. Non dimenticare di specificare altezza e larghezza delle immagini inserite, tramite i tag height e width; il browser caricherà più velocemente la pagina, perché saprà in anticipo quanto spazio occupa l’immagine.
5. Non inserire immagini (o altri elementi) che risiedono in siti esterni, al fine di evitare fastidiosi “colli di bottiglia”; ciò si verifica spesso anche senza che ne ce ne rendiamo conto, quando ad esempio copiamo e incolliamo i codici “pronti per l’uso” (ad esempio, per inserire script, o per i famosi antipixel). Quando copiamo questi codici, controlliamo sempre che non ci siano immagini. Se ci sono, controlliamo a che link sono situate, scarichiamole nel nostro server, e poi creiamo il nuovo collegamento. Controlliamo anche che siano presenti i tag height e width (vedi punto 4), perché spesso mancano.

Codice

1. Ogni volta che si scrive l’indirizzo di un sito, non dimenticare di aggiungere lo slash alla fine. Ad esempio:
   http://nosatispassion.altervista.org
   http://nosatispassion.altervista.org/
   Il sito è raggiungibile comunque, ma nel secondo caso il browser passa attraverso un inutile redirect che rallenta (anche se impercettibilmente) il caricamento.
   Questa regola va osservata sia quando si scrive il codice html di una pagina web, sia ogni volta che inseriamo il link al nostro sito nei vari servizi, form, moduli di contatto, commenti dei blog, ecc.
2. Rimuovere i tag vuoti (ad esempio: <p> </p>), i commenti e gli spazi bianchi all’interno del codice html e css delle nostre pagine web, così si caricheranno un pochino più velocemente, perché saranno di dimensione leggermente ridotta. Esistono anche dei tool on-line che promettono di pulire ed ottimizzare questi file. Ad esempio:
   http://www.selfseo.com/html_optimizer.php
   http://www.cleancss.com/
   Non li ho mai usati, però. Se qualcuno vuol darmi il suo parere, ne sarei felice.
3. L’ideale è utilizzare un solo file css esterno; più sono i file css, più il browser perderà tempo per caricarli tutti ogni volta.
4. Creare un file css il più possibile breve; ciò si ottiene cercando di dargli una struttura logica e ordinata, priva di ridondanze e involuzioni.
5. Creare file esterni anche per il codice javascript che viene ripetuto su più pagine, così da poterlo richiamare evitando di caricarlo ogni volta.
6. Ove non sia possibile attuare il pto 5, cercare di mettere il codice javascript sempre in fondo alla pagina, così il lettore avvertirà di meno la lentezza del caricamento, perché potrà vedere prima la parte alta della pagina, mentre il resto si starà ancora caricando.
7. Ci sono molti tool e servizi on-line che consentono di comprimere i file javascript; ad esempio:
   http://javascriptcompressor.com/
   Non ne ho esperienza, però. Se qualcuno vuol dirmi come si è trovato con questi strumenti, mi farebbe molto piacere.

Plugin e script WordPress

Ci sono dei plugin per WordPress che consentono di creare una copia statica delle pagine già visitate, cosicché non sarà necessario ricaricarle. Ad esempio, uno di questi è
http://wordpress.org/extend/plugins/wp-super-cache/

C’è anche uno script che riduce le richieste  HTTP, e contemporaneamente comprime i file javascript, CSS e HTML.
http://aciddrop.com/php-speedy/

Non ne ho mai fatto uso, però. Se qualcuno vuol dirmi la sua esperienza, sono tutta orecchi! ^^

Trucchetti

Ghido ci suggerisce 2 modi molto facili e veloci per velocizzare il caricamento del sito. Io ho provato il secondo modo, e mi pare che funzioni: il blog si carica un po’ più velocemente.

Hosting

Quando il sito comincia a diventare molto frequentato, è meglio abbandonare un hosting economico, perché questo potrebbe essere causa di rallentamenti, e passare ad uno di classe più alta. Fino a 3000 o 4000 visite uniche giornaliere, però, anche un hosting economico dovrebbe reggere bene.

Foto: Aaron Jacobs