subscribe: Posts | comments

RssDeliciousTwitterAnobiiFacebook

Quanto pesa la tua homepage?

10 commenti

peso Quanto pesa la tua homepage?In termini di KB ovviamente. Usabile.it ci fa riflettere su questo argomento (grazie Maurizio!). Riassumo brevemente:

Sembra che in barba ai principi di usabilità, accessibilità nonchè di buon senso, le homepage dei siti, blog soprattutto, siano sempre più pesanti da caricare (tralasciamo il discorso Flash e preloader in questo caso, rimaniamo sempre nell’xhtml). Eppure solo il 17% dei nuclei familiari della popolazione italiana ha un’adsl veramente veloce.

Ma soprattutto in termini di successo questi siti non perdono assolutamente visitatori e sembra che ci sia una tolleranza fino addirittura a 20/30 secondi. Com’è possibile? I motivi possono essere i seguenti:

  1. Il tempo di attesa dipende dal compito che si deve svolgere (navigare è più tollerante che dover aspettare per riempire dei campi di un form ad esempio)
  2. Il sito è comunque fruibile nei contenuti principali finchè si continua a caricare il resto. Ha cioè un tipo di caricamento incrementale.
  3. I visitatori sono degli affezionati, per cui non essendo la prima volta che ci tornano, hanno già in cache css, javascript e quant’altro, con notevole diminuzione nella velocità di caricamento.
  4. Il traffico verso tali siti riguarda proprio chi ha la banda larga

Ciò però non deve assolutamente farci dimenticare che se una pagina è leggera da caricare (almeno sotto i 56KB) fra immagini, css e tutto il resto, chi ha ancora un modem 56kbps appunto, può visualizzare il sito in pochi secondi.

Due strumenti utili

A tal proposito ecco due strumenti che vi aiuteranno nel definire il caricamento e l’ottimizzazione della vostra homepage.

Web page analyzer di Websiteoptimization.com (che vi segnala a fine pagina cosa andrebbe ottimizzato e cosa va bene)

e

Pingdom, che trovo migliore per la visualizzazione immediata di cosa viene caricato nella pagina analizzata, in modo che avete la possibilità di verificare sui singoli oggetti cosa è meglio ottimizzare e cosa va bene)

E Italianwebdesign come se la cava? Male…

Ad esempio Web page analyzer dice di Iwd che l’html è ottimizzato e leggero. Tutto il resto ha dei warning perchè troppo pesante. mmmm ma cosa in particolare? Ed ecco che Pingdom me lo dice:

5 secondi di caricamento con un’adsl, ma con tutti gli oggetti andiamo ben oltre i 666KB (il numero del diavolo!!) allora, cosa potrei ottimizzare?

Non ci posso credere, gli script per gli adsense da soli pesano 50 KB!! e 22KB le statistiche! Un paio di plugin che caricano dei javascript (ora vado a capire quali sono e li disattivo se inutili) mentre il resto sono immagini, mi converrà ottimizzarle di volta in volta senza semplicemente prelevarle e inserirle, che ne dite?

Poi riproveremo e vedremo come sto messa…

Aggiornamento delle 11.42 : Sono riuscita a ridurre la homepage di circa 100KB, togliendo Technorati (quanto pesava quel microwidget!), il plugin dei sondaggi (lo riattiverò all’occorrenza) e ottimizzando l’immagine della testata. Ora le immagini che ci sono, sono quelle che sono, una pesa ben 160KB ma andrà via con i prossimi articoli.

Post correlati

  1. Giovanni (26 comments) says:

    Potresti provare ad usare smush.it (www.smush.it) per ridurre notevolmente la pesantezza delle immagini presenti nel sito.

  2. grazie questo post capita a fagiolo, in questi giorni meditavo su questa problematica e trovo che siano ottime risorse quelle che presenti, da provare subito ;-)

  3. Interesantissimi questi due ultimi link! ho provato..e la mia pagina si carica in 3 secondi..106 kb circa..non male direi! ;) sempre cose utilissime qui!!! una meraviglia! saluti!

  4. franto (2 comments) says:

    se mi permetti una segnalazione

    be da quello che vedo dal mio browser il javascript goolesyndication viene caricato due volte

    in più ci sono le 4 immagini dgli ultimi ariticoli che pesano da sole piu di 300 kb (metà del peso della pagina!)

  5. Lauryn (3390 comments) says:

    @Giovanni: uso Photoshop ma da oggi in poi cercherò di “usarlo” seriamente. grazie però della segnalazione, può essere utile agli altri!

    @Flashmotus e alessandro: felice di essere stata di aiuto!

    @franto: google syndacation è caricato due volte perchè sono due differenti servizi. adsense e analytics
    le 4 immagini sono pesanti infatti, nei prossimi articoli le ottimizzerò meglio infatti, come ho già scritto ;)

  6. Sarò l’unica che usa esclusivamente Fireworks per esportare le immagini??? Io lo trovo decisamente migliore di PS

  7. Giacomo (13 comments) says:

    Sono d’accordo sul fatto che bisognerebbe realizzare pagine più leggere possibile, ma prendendo ad esempio il nostro lavoro, il cliente che ha la fortuna (o il merito) di avere una linea veloce riesce a comprendere meglio le potenzialità e l’utilità dell’avere un sito per la propria attività. Diversamente chi ha ancora una 56k per motivi geografici o peggio per scarso interessamento… bè… difficilmente si riuscirà a convincere… leggero o pesante che sia… anche se non è lui che deve vedere il sito! Chi ha una 56k non sta ore a cercare le cose su internet ma esce di casa e va al negozio più vicino, semplicemente perchè fa prima… quindi bisognerebbe anche riuscire ad individuare il target della propria utenza e ottimizzare il peso della pagine di conseguenza. Non ha senso creare pagine di 5 kb e mortificare l’esperienza dell’utente se sappiamo che i nostri clienti tipo sono al 90% equipaggiati con adsl. Io trovo che anche questo potrebbe essere uno strumento di selezione della propria clientela…

  8. Lauryn (3390 comments) says:

    @Giacomo: sicuramente è un dato statistico da tenere presente, così come la risoluzione del browser, etc.
    ma se i dati sono irrilevanti e trasversali, ovvio che dovrai ottimizzare sempre e in ogni caso.

    e per il motivo che hai detto tu infatti è inutile andare aproporre a privati che hanno un 56k di crearsi un sito. viceversa ti sfido a trovare aziende che abbiano un 56k e che quindi non si rendano conto delle potenzialità di internet, ed ecco i nostri potenziali clienti.

  9. Nyo (13 comments) says:

    e, ovviamente, grazie ancora per questi tool!
    uff volevo segnalarlo io smush.it :P

  10. Cheope (26 comments) says:

    Sono d’accordo solo in parte con questi ultimi commenti.
    Nelle WCAG si parla chiaramente anche di disabilità tecnologiche, compresa la connessione lenta, perciò l’ideale è sempre creare siti dai contenuti fruibili indipendentemente dalla tecnologia utilizzata, il mitico e tanto vagheggiato obiettivo di “device indipendence” promosso dal W3C.
    Certo questi concetti spesso cozzano con quelle che sono le esigenze di mercato, la soddisfazione del cliente e bla bla bla. IMHO nella creazione di un sito bisognerebbe sempre tenere conto almeno in parte anche di quegli utenti “a 56KB”, anche quando non sono fetta rilevante del target, perchè anche loro hanno diritto di fruire delle informazioni e fra di loro potrebbe anche esserci un potenziale cliente. Non dimentichiamo che al momento a non avere velocità spropositate non ci sono solo le connessioni Dial up, ma ad esempio le connessioni GPRS dei dispositivi mobili (visto che la copertura UMTS a 3.6 o HSDPA c’è solo nelle grandi città). E chi usa il telefonino o il palmare per navigare, probabilmente si rende conto delle potenzialità di internet, anche se ha una connessione lenta, no?
    Oppure c’è anche chi ha sì l’ADSL, ma deve dividersi la banda disponibile con magari altri 100 computer di una LAN.
    Non ci trovo niente di strano in un cliente (privato o azienda che sia) che ha la 56K e vuole un sito. Anzi, se è a quei livelli di user experience e riesce a comprendere lo stesso le potenzialità del mezzo, è più lungimirante di molti altri che si sparano i film in streaming.
    IMHO la velocità di connessione non è sufficiente a definire un target, non può essere da sola una discriminante attendibile. Google docet.

    Dal punto di vista pratico, per alleggerire il peso delle pagine IMHO la tecnica migliore è quella di ridurre le chiamate HTTP.
    In questo senso un ottimo strumento di analisi che mi sembra non sia stato citato è l’estensione Yslow per Firefox, basata sui comandamenti di Yahoo. Provare per credere.

Lascia un commento