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”!

sito_pesanteLa 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

12 thoughts on “Problemi di peso

  1. Grazie della segnalazione sul mio “photoxgraph”, mi ha fatto piacere perchè ho potuto conoscere il tuo blog e scoprire che condividiamo le stesse passioni. Continuerò a leggerti. Ora sappiamo entrambi dove incontrarci. Ciao Serena

  2. Ciao Serena! Vieni a trovarmi ogni volta che vuoi, sei la benvenuta! A presto! :)

  3. grazie tante!con la tua guida sto creando un sito. “ideando e creando” e tratterà di gioielle handmade e altre cose.ho appena finito l’installazione perchè ho problemi con xampp start che non parte. ora che avrò finito il tuo book, come farò ad andare avanti?di nuovo tante grazie

  4. Ciao Anna, benvenuta! Sono contenta che la mia guida ti stia aiutando a realizzare il sito. Spero che ogni tanto tornerai a trovarmi! Se hai qualche problema, chiedi pure! Se posso, ti aiuto volentieri.

  5. sono in piena confusione non so da dove cominciare.
    1. oggi ho scoperto che xampp mi scrive mcript controllare la configurazione di php. il file php in apache/bin non l’ho trovato.
    2. sono due giorni che altervista mi ha mollato non ci sono più i banner insomma non funziona.
    in più il forum di altervista mi ha bannato perchè involontariamente ho postato 2 volte e così non ho risposta.
    da che parte inizio? butto giu tutto e prendo un altro hosting? cosa mi consigli?
    grazie

  6. Cara Anna, per quanto riguarda la prima questione, non so proprio come aiutarti; non mi è mai capitato quel messaggio di errore e non so cosa significhi né da cosa dipenda. Se fossi al tuo posto, proverei a capirlo cercando su Google, o chiedendo direttamente nel forum di WordPress.it. Al limite, se proprio non se ne viene a capo, prova a reinstallare tutto e ripartire dall’inizio.
    Il secondo problema, invece, è che non ci sono più i banner? Può darsi che tu abbia involontariamente modificato il template… Prova a reinserirli un’altra volta. Se Altervista ti ha bannato dal forum, non preoccuparti: non è una cosa permanente, e inoltre riguarda solo il forum, non ha alcuna conseguenza sul tuo sito, che puoi gestire tranquillamente come se niente fosse.
    Intanto, però, ti consiglio di fare esercizio in locale (con Xampp); quando lì le cose funzionano bene, dovrai solo fare il trasferimento con FileZilla.

  7. carissima, ti ringrazio per la tempestività con cui mi hai risposto.sai mi sono un pò stufata di questi ragazzetti saputelli dei forum che non hanno alcuna pazienza e talvolta ti considerano una demente!
    A proposito dei template forse hai ragione. ho cambiato il tema di wp preso su internet ma garantito funzionante! si chiama water lily.sai alcune volte mi viene la tentazione di passare a blogspot perchè vedo dei siti più dinamici e forse più compatibili con l’argomento visto che io sono alle prime armi e di modificare al momento non ci penso neanche. il mio sarà un blog di creazioni: bracciali collane ricette… un mondo un pò femminile e trovo wp troppo schematico ma adottato perchè ho trovato la tua guida e non mi sono dovuta preoccupare di niente. spero di non averti annoiato, ti ringrazio e qualsiasi suggerimento sarà ben accetto!!!

  8. Se hai sostituito il tema di Altervista, in cui c’erano i banner già installati, con un altro qualsiasi, è proprio per questo che sono spariti i banner. Per riaverli, li devi inserire tu “a mano” dal pannello di controllo; devi cioè copiare i codici dei banner dalla sezione “Guadagni e pubblicità”, e incollarli dentro le pagine del template.
    Un template femminile? Hmmm… Non me ne viene in mente uno preciso; prova comunque a guardare qui, ce ne sono tanti:
    http://www.skinpress.com/category/wordpress/
    Se pensi di passare a BlogSpot, non ne ho esperienza. A quanto ho letto in giro mi sono fatta l’idea che lasci poca libertà di gestione, però d’altra parte credo sia molto più semplice da gestire per un principiante. Prova, al limite, se non ti trovi bene, puoi sempre passare ad altro! :)
    P.S.: Non te la prendere con i ragazzi del forum… Forse a volte hanno l’aria di essere un po’ scorbutici, ma non sono affatto cattivi, te l’asssicuro! ;)

  9. per ora ti ringrazio spero di non doverti più disturbare……ti farò sapere quando il blog sarà attivo.

  10. scusami di nuovo ma devo sbagliare qualcosa perchè non me li prende. in quali pagine del tema li devo inserire?grazie

  11. Stai parlando dei banner, vero? Dipende; non posso sapere il nome preciso, perché lo ha scelto il creatore del tuo tema. Di solito però c’è “header”, che riguarda la parte alta; il “footer” che si riferisce alla parte sotto, il pié di pagina; la “sidebar”, relativa al menu laterale; l’ “index” è la homepage; le pagine e gli articoli dovrebbero essere chiamati rispettivamente “page” e “single”. Almeno, nel mio tema si chiamano così.
    Nella prossima edizione della mia guida mi devo ricordare di aggiungere un capitolo sui banner di Altervista; vedo che molte persone hanno difficoltà! ;)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.