Velocizzare il tuo sito: Introduzione e strumenti


In questa serie di post  dedicata a Web master e developer andremo a vedere tecniche e metodi per rendere le pagine del un nostro sito web il più veloci possibili da scaricare e rendere da parte di un browser, la serie  si svilupperà in cinque appuntamenti, ognuno di questi tratterà di uno specifico argomento.

Perchè dovrei dare importanza al parametro velocità?

Per due motivi essenziali, il primo riguarda il tema dell’indicizzazione e del SEO, Google, per esempio, nel suo algoritmo di indicizzazione utilizza la velocità di caricamento di una pagina web come parametro per valutare un sito, non sappiamo con quale importanza ma sappiamo che ne tiene conto, il secondo è quello di fornire al visitatore un sito veloce da navigare, specialmente in in questo momento fornire al lettore la possibilità di consultare informazioni velocemente e senza intoppi può fare la differenza.

Come agisce un browser quando finisce sul tuo sito?

Molto sinteticamente, ogni volta che un URL è richiamato da un browser viene mandata una richiesta HTTP (Hypertext Transfer Protocol) al server remoto che ospita la pagina web, una volta eseguita questa richiesta, se tutto andrà bene, il browser riceverà risposte e comincerà a tradurre le istruzioni presenti nel documento che sian esse HTML, CSS, Javascript, PHP etc. e a renderizzare la pagina web nella maniera indicata dalla sintassi.

Un borwser legge il documento HTML esattamente come noi leggiamo una pagina di testo, da sinistra a destra e dall’alto verso il basso, traducendo il codice che trova sulla sua strada, i fogli di stile CSS invece vengono letti da destra a sinistra, quindi in un istruzione del genere:

#container ul li { proprietà }

la prima cosa che il browser legge è l’istruzione da assegnare al tag li, poi ul e infine #container.

Sapere queste nozioni di base tornerà utile nei prossimi capitoli.

Regole Generali

Prima di entrare nel particolare, ci sono alcune norme generali da avere bene in mente per una buona ottimizzazione:

1. La velocità e qualità del server e hosting che ospita le tue pagine web, e la sua posizione fisica rispetto al luogo dove si trova il visitatore sono due parametri fondamentali per la velocità ci caricamento da tenere in mente quando si eseguono test e nel momento di scegliere a quale azienda fornitrice del servizio affidarsi.

2. Comprimere il codice è un altro aspetto fondamentale che può incidere per oltre il 30% del peso in kb di una determinata pagina

3. Less is more, imparare a scrivere un codice essenziale e evitare sprechi è un altra regola importante da tenere in mente, non vuol dire che sia facile.

Strumenti utili

Per monitorare il caricamento e avere un report dettegliato di ogni elemento della tua pagina web per dedurre poi quali sono gli ambiti dove andare ad operare possono esserti d’aiuto strumenti e applicazioni facilmente reperibili su internet, di seguito alcuni dei più conosciuti.

Firebug
Nella sua versione per Firefox, ha una opzione presente nel menu che prende il nome di Net, attivandola comparirà un pannello che a cascata ti mostrerà gli elementi scaricati dal documento web, l’ordine in cui sono stati resi e il tempo impiegato per l’operazione.

YSlow
Add-on per Firefox sviluppato dai developer di Yahoo, da integrare con Firebug, con questa estensione potrai monitorare e scoprire suggerimenti su come ottimizzare il contenuto di una pagina web, catalogare i risultati e filtrare i parametri che ti interessano maggiormente.

Page-Speed
Altro utile add-on per Firefox prodotto questa volta dai developer di Google, anche questo strumento permette di eseguire analisi della velocità di caricamento di una pagina web.

Web page test:
Strumento molto utile, permette di eseguire test sulla tua pagina web da diversi hosting posizionati in diversi luoghi del mondo, e tramite alcune versioni del browser IE, fornendo dati molto dettagliati su tempo di caricamento di ogni elemento della pagina web, oltre a consigli su quali aree andare a migliorare.

Conclusioni

In questo primo capitolo della serie abbiamo visto quanto potrebbe essere utile ottimizzare un sito web, come agisce a grandi linee un browser che raggiunge la tua pagina web, alcune regole e strumenti utili da tenere in mente ai fini dell’ottimizzazione, i prossimi capitoli invece tratteranno dei seguenti temi:

  1. Introduzione e Strumenti utili.
  2. CSS e Javascript.
  3. Cache e Compressione delle pagine.
  4. Lavorare con le immagini.
  5. Articoli e risorse utili.
Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

Ancora nessuna risposta per Velocizzare il tuo sito: Introduzione e strumenti

Lascia un commento

Trackbacks