Come migliorare la velocità del sito con FireBug e PageSpeed : firebug

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

 

 

 

Google Chrome attualmente è il Browser preferito da utenti Mac e Windows, questo perchè ha un interfaccia minimale ed è molto pratico. Oggi per tutti gli utilizzatori di Chrome, abbiamo stilato una collezione di estensioni utili nello specifico per designer e sviluppatori.

Firebug Lite

Firebug Lite permette di visualizzare gli elementi HTML e DOM, ispezionare gli elementi HTML con il proprio mouse e consente il live editing delle proprietà CSS.

 

 Speed Tracer

Speed Tracer è uno strumento che aiuta a identificare e risolvere problemi di prestazioni nelle applicazioni web. Visualizza le metriche relative alle pagine web visualizzate andando a pescare i dati a livello di motore di rendering del browser e li analizza nello stesso istante in cui l’applicazione viene eseguita.

 

CSS Reloader

CSS Reloader è un’estensione di Chrome che consente di ricaricare i CSS senza ricaricare la pagina stessa. Basta premere un tasto di scelta rapida e la pagina verrà aggiornata con i cambiamenti di stile.

 

GrayScale 

Con questa estensione è possibile visualizzare le proprie pagine in scala di grigi, questo vi aiuterà a vedere i potenziali problemi con i colori e il contrasto. Il contrasto è un elemento molto importante nel design che migliora l’estetica e la fruibilità.

 

The Grid 

Questa estensione consente di creare una griglia personalizzata.

 

Pendule


Pendule è una grande collezione di strumenti di sviluppo per Chrome. È possibile visualizzare e validare il codice, disattivare gli stili, visualizzare i colori utilizzati, nascondere le immagini, le password e molto altro.

 

WhatFont

WhatFont è uno strumento che ti dice non solo il nome del font, ma anche l’altezza, le dimensioni ed il tipo di linea.

 

Window Resizer

Questa estensione è utilissima in quanto ridimensiona la finestra del browser al fine di emulare le varie risoluzioni.

 

Google Font Previewer for Chrome

Questa estensione permette di applicare rapidamente i font di Google a specifici selettori CSS in modo da poter avere un’anteprima veloce di quello che sarà il tipo di font nella progettazione prima che il file sia aggiornato.

 

Ruul

Ruul  è un semplice righello visualizzabile sullo schermo che permette di allineare e misurare qualsiasi cosa. Ideale per analizzare i progetti esistenti.

 

HTML Validation

Un modo semplice e veloce per validare la pagina corrente con w3.org.

 

Check My Links

Check My Links controlla rapidamente tutti i link su una pagina web mettendo in evidenza quali sono validi e quali sono rotti. Molto utile.

 

Neo Vision

Neo Vision evidenzia la sintassi durante la visualizzazione del file di origine.

 

Browser Compatibility Detector

La compatibilità tra i browser è un problema per chi sviluppa siti web. Questo strumento consente di identificare rapidamente potenziali aree problematiche nel codice.

 

SEO & Website Analysis

SEO & Website Analysis è un’estensione progettata da WooRank per Google Chrome che fornisce una profonda analisi SEO.

 

Alla Prossima.