Come migliorare la velocità del vostro sito con FireBug e PageSpeed

«
»

Questa guida è stata aggiornata il

Avere un sito veloce o almeno un sito che non è più lento rispetto alla media, può aiutare a ottenere o mantenere un buon posizionamento nei motori di ricerca e di conseguenza può portare più traffico al vostro sito web. La velocità di un sito viene determinata dal tempo di caricamento di tutti gli elementi di una pagina web, il suo testo, le immagini, i video, etc.

Già nel 2010, Google ha aggiunto in Strumenti per Webmaster un tool:  Prestazioni del sito, in cui la velocità del sito viene elaborata e stabilita tramite 200 fattori,  ciò significa che la velocità del sito è molto considerata quando si lavora sull’ottimizzazione dei motori di ricerca (SEO).

Come ottimizzare il proprio sito?

Compressione del sito: usando la compressione gzip, si può ridurre di molto il tempo necessario per inviare i contenuti del vostro sito ai visitatori. La compressione agisce sugli elementi di testo del sito,  Html, JavaScript e Css e accelera il tempo necessario per caricare la pagina. La compressione non influisce sulle immagini.

Ottimizzare le immagini: non usare immagini di grandi dimensioni, se è possibile impostare sempre la larghezza e l’altezza nel codice Html corrispondenti all’immagine caricata, altrimenti se l’immagine è più grossa rispetto alle dimensioni inserite nel codice Html, ci sarà un ridimensionamento dell’immagine che rallenterà il caricamento della pagina.

Scegliere il formato del file: non utilizzate un file JPG a meno che non si desideri includere una fotografia con una vasta gamma di colori. Per la maggior parte delle immagini, utilizzate un file GIF o PNG, questi tipi di file si caricano più velocemente.

Inserire il codice in ordine ottimale: la collocazione dei fogli di stile (CSS) và inserita nella parte superiore (Header) e il JavaScript in fondo al codice (Footer) per ciascuna delle vostre pagine web, questo può migliorare la velocità percepita del tuo sito per i visitatori.

Acquista un Hosting Professionale: per la maggior parte dei siti web è importante avere un Hosting competente che risponde rapidamente quando hai una domanda o un problema. I fattori che possono determinare la velocità o i rallentamenti del vostro sito sono sempre controllati dalla società di Hosting che ospita il vostro sito web. Se stai cercando un Hosting Professionale, guarda i nostri Piani Hosting.

Usare PageSpeed per ottimizzare il proprio sito.

Page Speed ​​è un progetto open-source iniziato da Google per aiutare gli sviluppatori a ottimizzare le proprie pagine web. Il progetto Page Speed ​​è iniziato come un’estensione per browser,  ora è distribuito come prodotto anche a terzi, come Webpagetest.org , Slow Show e Google Webmaster Tools.

Come installo PageSpeed?

Prima di tutto, bisogna installare Firefox. Si può scaricare tramite questa pagina www.mozilla-europe.org/it/, lo installate.

 

 

 

 

 

 

 

 

 

Ora scarichiamo ed installiamo Firebug, da questa pagina getfirebug.com/downloads/

 

 

 

 

 

 

 

 

 

A questo punto, scarichiamo ed installiamo PageSpeed, da questa pagina code.google.com/intl/it-IT/speed/page-speed/download.html.

 

 

 

 

 

 

 

 

 

 

 

Ora apriamo Firefox, clicchiamo su Strumenti -> Firebug -> Avvia firebug, si aprirà una schermata come l’immagine sotto. Per analizzare il sito, clicchiamo su Page Speed -> Analyze Performance.

 

 

 

 

 

 

 

 

 

La velocità del sito viene determinata da un punteggio (Max 100), nel caso del nostro sito, già ottimizzato, restituisce un punteggio di 97 su 100, quasi il massimo.

 

 

 

 

 

 

 

 

 

Vediamo nel dettaglio cosa abbiamo ottimizzato:

Abilita la compressione: abbiamo abilitato la compressione Gzip dal Pannello di Controllo Hosting, in alternativa si può abilitare tramite file .Htaccess, inserendo il seguente codice:

# BEGIN Gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>
# END Gzip

Sfrutta il caching del browser: per sfruttare il caching del browser abbiamo inserito sempre nel file .htaccess, il seguente codice:

<FilesMatch “\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|
midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|
pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|
DIVX|DOC|DOCX|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|
MPG|MPE|MPP|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SWF|TAR|TIF|
TIFF|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$”>
Header set Cache-Control “max-age=37739520, public”
</FilesMatch>

Minimizza CSS: abbiamo ridotto le dimensioni dei file CSS, scaricando il file proposto da PageSpeed e sovrascrivendo l’originale.

Minimizza JavaScript: abbiamo ridotto le dimensioni dei file Javascript, scaricando il file proposto da PageSpeed e sovrascrivendo l’originale.

Ottimizza immagini: abbiamo ridotto le dimensioni delle immagini, scaricando il file proposto da PageSpeed e sovrascrivendo l’originale.

Minimizza HTML: abbiamo ridotto le dimensioni dei file Html, scaricando il file proposto da PageSpeed e sovrascrivendo l’originale.

Specifica dimensioni immagine: abbiamo specificato, in alcune immagine le dimensioni nel codice Html.

 

Il risultato è notevole, 97 su 100.

Giudicate voi stessi la velocità del nostro sito Xlogic.org

 

State cercando un Hosting Professionale?

I nostri Piani Hosting sono l’ideale.. Offriamo Hosting a prezzi contenuti e prestazioni elevate.

Contattateci

 

 

 

Come migliorare la velocità del vostro sito con FireBug e PageSpeed ultima modifica: 2011-06-04T19:15:22+02:00 da Andrea (Xlogic.org)
2 Comments
  • Risparmiato.com - il portale sul risparmio says:

    Grazie dell’articolo è proprio quello che cercavo! Per ora sono a 68 (ma seguendo i vostri consigli migliorerò sicuramente) grazie!

    18 Luglio 2011 at 17:21
  • Antonio says:

    Ottimo! 96/100
    Siete Grandi!

    20 Marzo 2013 at 22:34

Lascia un commento

*
*