Iscriviti al mio Feed RSS

Non ti perdere i miei prossimi articoli!
Resta aggiornato iscrivendoti al mio Feed RSS!
Feed RSS via Mail di Enea Moro Feed RSS di Enea Moro

3 Consigli per un sito che Supera i Limiti di Velocità

CronometroDa quando Google ha annunciato che verrà dato peso alla velocità di caricamento dei siti per definirne il posizionamento, la corsa alla velocizzazione dei blog è iniziata.

Oggi voglio darti 3 preziosi suggerimenti per velocizzare il tuo sito o blog.

In generale, un blog o sito veloce, è piacevole da sfogliare.

Mi trovo spesso a navigare in siti con caricamenti ancora molto lunghi. Ormai tutti hanno una connessione ADSL come minimo, quindi mi pare un peccato che chi naviga debba farlo in un sito che in velocità ricorda molto quel baraccone di Modem 56k che hai volentieri buttato nella pattumiera ritenendolo obsoleto.

Quindi spendi qualche minuto a leggere questi consigli, perchè se il tuo lettore è come me, dopo 7-8 secondi di caricamento di una pagina, comincia a guardarsi attorno alla ricerca della X di chiusura scheda.

Quanto è il tempo di caricamento ideale?

Quanto tempo pensi di poter attendere il caricamento di una pagina nell’era dell’internet veloce? Come detto sopra, io comincio a stufarmi dopo 7-8 secondi.

Non ci sono degli standart, ognuno ha una connessione e delle situazioni differenti. Può essere influenzato da molti fattori la velocità con la quale una pagina si carica.

Può dipendere dalla tua linea, della linea del server dove risiede il sito, da quante e quali applicazioni hai in esecuzione nel momento in cui navighi.

Molti fattori influenzano il caricamento, quindi quando inizi ad ottimizzare il tuo sito per la velocità, preoccupati anche di analizzarlo non avengo applicazioni in esecuzioni che “succhino” troppa banda (esempio download / upload attivi)

Prima di iniziare

Il primo passo è quello di installare un tool che analizzi la velocità di caricamento delle pagine.

Page Speed è un’ottimo strumento, lavora assieme a FireBug, altro validissimo plugin. Sono plugin per FireFox, esistono degli equivalenti anche per Internet Explorer e altri browser.

Nei consigli mi baserò principalmente sui consigli che Page Speed dà (consigliato da Google per l’analisi di velocità delle pagine).

Per prima cosa faccio una panoramica degli strumenti che ti ho consigliato.

Hanno molte funzioni che ti invito a scoprire. Concentriamoci però solo su quello che utilizzi per realizzare i passi di questo articolo.

FireBug si divide in diverse schede. Quelle che ti interessano sono “Net” e “Page Speed”, che ti spiego nei prossimi due paragrafi.

Analisi Net

In questa scheda puoi vedere quanti secondi il tuo blog impiega nel caricarsi.

Il risultato viene diviso in singoli oggetti che carica.

Quanto tempo ci ha messo?

Il mio blog ci mette 4.8 secondi. Lo ritengo un buon tempo, il sito è piuttosto veloce. Sarebbe ottimo riuscire a ridurlo a 3 secondi, ma aimè più di così non sono riuscito a spingermi (sicuramente potrei fare di meglio).

Analisi di Page Speed

Aprendo la scheda Page Speed,  fai un’analisi della homepage del tuo blog.

Che punteggio hai ottenuto?
Quanti punti esclamativi e triangoli gialli hai?

Su questo blog ottengo 66/100. Sono sincero, non ci ho speso molto tempo, in quanto ritengo che questo blog si carichi piuttosto velocemente, quindi non ho puntato a raggiungere i 100/100, soprattutto perchè quello che ci sarebbe da migliorare, non dipende quasi più da me, ma da tool esterni che non sono ottimizzati (Widget Twitter, annunci Google, script java, ecc).

Il miglior punteggio l’ho ottenuto sul mio sito da Freelance per la creazione di siti web.

Ho ottenuto 98/100. Non c’è molto contenuto da caricare, il sito è semplice. Il risultato però non è scontato, ottenere un punteggio vicino al 100/100 richiede diversi interventi.

Come vedi Page Speed dà parecchie informazioni su quello che potresti e dovresti migliorare.

Si comincia

Segnati i tempi di caricamento che ti dà la scheda Net e il punteggio di Page Speed, in modo che potrai vedere quanto ti sono serviti i miei consigli.

Comprimere in Gzip HTML / JS / CSS / PHP / XML

Molti lo fanno per abitudine, altri non sanno minimamente cosa sia.

La compressione Gzip viene fatta lato server. In pratica tutto il contenuto in html viene compresso come fosse un’archivio Zip / Rar, occupando molta meno momoria, velocizzandone così l’invio da host a browser.

La compressione gzip di una pagina migliora circa del 60 – 80% la velocità di caricamento del codice del vostro sito. Con questo non vuol dire che tutto il contenuto diventerà più veloce.

Come hai potuto osservare nella scheda Net, ci sono molti elementi che vengono caricati in una normale pagina web, il codice spesso è la minima parte quando si utilizzano dei javascript o del PHP collegato magari ad un database MySQL.

Ma come fai ad attivare questa compressione?

No, non devi comprimerli manualmente!

Ti basta l’inserimento di qualche linea nel tuo file .htaccess. Per usare la compressione Gzip devi avere il MOD_Deflate attivato nel tuo server Apache 2.x.

Aggiungi questo codice all’inizio del tuo file .htaccess:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
<FilesMatch \\.(js|css|html|htm|php|xml)$“>
SetOutputFilter DEFLATE

</FilesMatch>

Se invece non hai accesso a tale file, puoi usare un codice PHP che funziona tramite zlib. Prima, tamite PHPInfo, controlla che sia attivo il supporto a zlib.

Ecco il codice da inserire preferibilmente prima del tag <!DOCTTYPE (quindi come prima linea del sito). C’è chi dice di metterlo prima del tag <html>, io l’ho sempre messo a inizio di tutto e non ho mai avuto problemi.

<?php ob_start( 'ob_gzhandler' ); ?>

Per verificare che la compressione sia attiva, utilizza questo utile tool online che ti dice se la compressione è attiva e di quanto è stato compresso (eneamoro.com risulta compresso del 73%).

Ottimizzare le immagini per il web

Partiamo dalla base, ragionando anche in un contesto di codice corretto e valid w3c. Gli standart w3c impongono questo genere di codice per un corretto utilizzo del tag <img />:

<img src=link_immagine alt=testo alternativo immagine width=larghezzaheight=altezza />

È bene usare sempre alt, width e height. Non dimeticarti mai dello “/” finale, in quanto è considerato un’errore di codice non metterlo (almeno per quanto riguarda i siti XHTML). Non che dia particolari problemi ometterlo alla fine del tag <img>, ma è buona abitudine usarlo, onde evitare lunghi elenchi di errori nella validazione w3c di un sito.

Ma come puoi ridurre la dimensione delle immagini?

Spesso, quando crei un’immagine e la salvi, questa non è ottimizzata per il web. Arriva ad occupare anche il 90% in più dello spazio necessario. Per esempio un’immagine di 1mb potrebbe raggiungere un peso di 100k se alleggerita per il web.

PageSpeed ti viene incontro, proponendoti una versione ottimizzata per il web delle tue immagini usate nel sito.

Infatti, alla voce “Optimize Image”, puoi vedere quali immagini non sono ottimizzate per il web, e in quale percentuale puoi risparmiare banda su quell’immagine. Puoi poi salvarle direttamente in versione ottimizzata per il web.

Te le devi salvare sul disco con lo stesso nome dell’immagine online, per poi rimpiazzarla con il tuo client FTP.

Passati pazientemente tutte le immagini che usi. Potrebbe capitarti che alcune immagini le hai prese da altri siti. Scaricatele ottimizzate e rimpiazzale hostandole sul tuo spazio web (chiedendo ovviamente consenso al proprietario se si tratta di immagini sotto licenza), o magari chiedendo all’host dell’immagine di rimpiazzarla con una versione ottimizzata della stessa.

La grafica comincia a caricarsi molto più velocemente vero?

Usare CSS pulito e ottimizzato

Di solito, buona parte dei punti da ottimizzare secondo page speed è il CSS e relative regole.

Molto spesso crei fogli di stile automaticamente servendoti di programmi come Dreamweaver, o usi temi per CMS che hanno regole infinite e che definiscono spesso la stessa cosa su div sovrapposti (esempio il background color su due div sovrapposti che hanno lo stesso colore).

Esempio di CSS:

/* Classe per definire il bla bla del div su bla bla in file blabla.bla */
.classe {
padding:0px;
margin:0px;
float: left;
}

Esempio CSS ottimizzato:

.classe{padding:0px;margin:0px;float: left;}

Notevole la riduzione di linee e spazio.

È un lavoro di pazienza, ma nel quale può aiutarti PageSpeed in primis. Ti offre una versione ridotta del file CSS. Salvalo e comincia ad usarlo.

Ti risulterà molto compatto, ma in caso di file css chilometrici, si arriva a ridurre la lunghezza della pagina di molto. Attenzione che elimina tutti i commenti all’interno del CSS, quindi se hai bisogno dei commenti, non servirtene e fallo manualmente. Tieniti comunque sempre una copia dell’originale, si sa mai che si perda qualche regola.

Ti viene poi incontro anche un tool online per la riduzioni e l’ottimizzazione del css.

È un tool molto valido che non solo riduce lo spazio occupato dal file css eliminando tutti gli spazi presenti nel file, ma controlla anche le regole del css, correggendole e ottimizzandole.

Offre diverse opzioni per creare il css, configuralo per come più ti si addice.

Per concludere

Sono solo 3 consigli, eppure penso che tu abbia già potuto notare un notevole miglioramento di prestazioni del tuo sito.

Ora puoi rifare una bella analisi finale da scheda Net e PageSpeed e vederne le differenze.

Le mie?

Websiteticino.ch
Net: da 1.8s a 0.4s (no, non mi hosto in locale)
PageSpeed: da 74/100 a 98/100

E tu?

Scrivimelo nei commenti, in attesa del secondo capitolo con altri utili consigli per farti beccare dal radar per un’incredibile velocità di caricamento pagine!

30 aprile 2010

SEO

Il prossimo articolo?

Ricevilo via mail o leggilo tramite Feed RSS
Abbonati!

Ricevi il prossimo articolo sul tuo indirizzo Email Leggi il mio prossimo articolo tramite Feed RSS



4 Risposte per “3 Consigli per un sito che Supera i Limiti di Velocità”

  1. addalo.it scrive:

    3 Consigli per un sito che Supera i Limiti di Velocità…

    Le 3 cose che devi fare per avere un sito ottimizzato in velocità e pronto a scattare ai primi posti delle SERP di Google. Non perderti queste preziose pillole…

  2. Technotizie.it scrive:

    3 Consigli per un sito che Supera i Limiti di Velocità…

    Le 3 cose che devi fare per avere un sito ottimizzato in velocità e pronto a scattare ai primi posti delle SERP di Google. Non perderti queste preziose pillole…

  3. ZicZac.it, clicca qui e vota questo articolo! scrive:

    Questo articolo è stato segnalato su ZicZac.it….

    Le 3 cose che devi fare per avere un sito ottimizzato in velocità e pronto a scattare ai primi posti delle SERP di Google. Non perderti queste preziose pillole…

  4. 4 Punti Base per Aumentare la Velocità del Sito | Enea Moro scrive:

    […] sempre aggiornato!Powered by WP Greet Box WordPress PluginDopo la prima parte dove ti ho dato 3 Consigli per un sito che supera i limiti di velocità, oggi ti dò altri consigli su come velocizzare il caricamento del tuo sito.Gli argomenti che trovi […]

Lascia una risposta