MasterNewMedia Italia
Scopri i migliori tool per comunicare,
collaborare e fare marketing
   
Curated by: Luigi Canali De Rossi
 


1 marzo 2010

Come Velocizzare Il Tuo Sito Web - Parte 2: Ottimizzare Il Codice Per Aumentare La Velocità

Conoscere cosa fare per rendere più veloce il tuo sito diventerà presto un requisito essenziale per ogni editore online che si rispetti. E' un dato di fatto, come ho già detto nella prima parte di questa guida, presto Google inizierà a considerare i tempi di risposta del tuo sito tra i fattori per determinarne il posizionamento nelle SERP. Sei preparato?

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_id12958351_size485.jpg
Photo credit: norebbo

Nella prima parte di questa guida hai trovato tutorial e strumenti per velocizzare il tuo sito, mentre in questa seconda parte avrai l'opportunità di imparare in modo approfondito, da Drazen Dobrovodski, l'uomo al timone della parte tecnica di MasterNewMedia, quello che dovrebbe essere un altro elemento cruciale della tua strategia di velocizzazione: come ottimizzare il codice del tuo sito.

Questa guida può essere letta e compresa da persone senza particolari competenze tecniche, ed è infatti dedicata sia a quelli che devono pianificare e coordinare il lavoro di ottimizzazione delle performance del loro sito, sia a quelli che effettivamente svolgeranno il lavoro.

Allo stesso tempo, sebbene non sia necessario essere un programmatore per capire la maggior parte delle cose scritte in questa guida, può esserti utile anche se hai competenze tecniche o se hai qualcuno che ti assiste nell'implementazione di queste tecniche di ottimizzazione.

In questa sezione della guida, troverai un manuale dettagliato per ottimizzare il codice del tuo sito allo scopo di renderlo significativamente più veloce di quanto non sia adesso.

Puoi infatti testare e misurare la velocità di caricamento delle tue pagine rispetto a quelle dei tuoi principali concorrenti, assicurandoti così di essere tanto veloce quanto loro, se non di più.

Ecco i punti chiave che vengono affrontati:

  • Quando utilizzare pagine statiche rispetto alle pagine dinamiche,
  • Come gestire in modo efficiente le richieste esterne,
  • Come sfruttare al meglio il tuo CSS,
  • A quali elementi dare priorità nel codice del tuo sito,
  • Come mettere a dieta il codice del tuo sito.

 

 

Come Ottimizzare Il Codice Per Aumentare La Velocità

di Drazen Dobrovodski



1. Evita La Creazione Di Pagine Dinamiche

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_avoid_dynamic_page_creation_id12686651.jpg

Se stai creando da solo le pagine HTML statiche puoi saltare questa parte. Comunque, questo probabilmente può essere il caso di persone che stanno realizzando alcune pagine per hobby o quello del sito di una piccola azienda che è poco più di un "biglietto da visita sul web".

Qualsiasi sito web con maggiori ambizioni, di solito viene fuori da piattaforme di pubblicazione come Movable Type, Wordpress, o da un content management system come Drupal.

La maggior parte di questi strumenti creeranno contenuti dinamici in automatico. Questo significa che per ogni visitatore di ognuna di queste pagine uno script CGI o PHP mette in moto una query nel database per ottenere il template (l'aspetto) della pagina, poi il contenuto della pagina (testo e immagini) ed infine li combina tra loro per servirli al visitatore.

Non ci vuole un fisico nucleare per capire che se hai 1000 visitatori, questo comporta almeno 2000 richieste nel database e molto tempo di elaborazione per inserire il contenuto della tua pagina nel template. Tutto questo oltre alle 1000 richieste HTTP che il server dovrà gestire.

Usare pagine HTML statiche è più veloce e più facile per il server, perciò dovresti farlo il più possibile.

E' un punto importante il fatto che tutte le principali piattaforme di pubblicazione e i sistemi di gestione dei contenuti che mi vengono in mente, offrono la possibilità di precaricare le pagine. Per questo, i visitatori possono ottenere pagine statiche predefinite invece di dover aspettare che il database elabori le stesse pagine per ogni visitatore.

Per usare pagine HTML statiche:

  • In Movable Type: nelle tue impostazioni di pubblicazione scegli l'opzione per creare tutti i template in modo statico.
  • In Wordpress: hai bisogno dei plugins WP-Cache o WP Super Cache.
  • In Drupal: i plugin Boost e Advanced Cache ti serviranno per questo.

 



2. Usa il Meno Possibile Include e Richieste HTTP

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_use_as_few_includes_and_http_requests_as_possible_id44371371.jpg

Quasi tutte le pagine e tutti i template utilizzano immagini, Javascripts, Flash e include. Per ognuno di questi, il server deve stabilire una connessione, controllare i permessi dei file, mandare header, ecc... Ognuno di questi fa aumentare i tempi di caricamento. Inoltre - tutte queste cose sono lì per un motivo. Sono necessarie.

Così come fai a conservare le tue immagini, i Javascript e gli include mantenendo basso il numero di elementi? Raggruppali il più possibile in un unico file.



2.1 Raggruppare le Immagini in un Unico File Usando i CSS Sprite

I CSS ti permettono di fondere diverse immagini nelle stesso file e poi posizionare quello stesso file in punti diversi così che solo una sezione di tuo gradimento viene visualizzata in un dato luogo nella pagina.

Questa è la tua immagine:



Questa è la tua immagine con le dimensioni in pixel.



Ora il tuo primo Div layer per il "SuperGreatLogo" sarebbe poi largo 194px, alto 33px e partirebbe in alto a sinistra dell'immagine (offset zero dall'alto, offset zero da sinistra).


#supergreatlogo {
width:194px;
height:33px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px 0px;
}

In HTML lo scrivi con una semplice linea:





E così è come appare:

Il tuo "Menu Item" così come lo vediamo è alto 43px e largo 194. Parte da offset zero a sinistra e 33px offset in alto. Così il CSS per il nostro "Menu item" apparirebbe come questo:


#ourmenuitem {
width:194px;
height:43px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px -33px;
}

In HTML lo scrivi con una semplice linea:





E così è come appare:

La parte dell'immagine "Icon1" è alta 36px e larga 89. Parte da offset zero a sinistra e offset 76px in alto. Perciò il relativo CSS è:


#ourIcon1 {
width:89px;
height:36px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat 0px -76px;
}

In HTML lo scrivi con una semplice linea:





E così è come appare:

Infine, "Icon2" è alta 36px e larga 105. Parte da offset 89px a sinistra e offset 76px in alto. Perciò il relativo CSS è:


#ourIcon2 {
width:105px;
height:36px;
background: url(http://www.mysiteurl.org/images/image.jpg) no-repeat -89px -76px;
}

In HTML lo scrivi con una semplice linea:





E così è come appare:

Utilizzando i CSS sprite puoi fondere tutte le immagini dell'interfaccia del tuo sito in un unica immagine, riducendo perciò drasticamente il numero di richieste HTTP. A seconda della complessità dell'interfaccia del tuo sito questo può rappresentare uno dei principali fattori di velocizzazione.

 

2.2. Raggruppare i JavaScript e Gli Include PHP/ASP/JSP

Se hai già scritto qualcosa in JavaScript, PHP o qualsiasi altro linguaggio, allora saprai che non è molto complicato unire il codice. Il problema sorge se quello script deve mostrare qualcosa in un punto esatto della pagina.

Come puoi fondere dei JavaScript se uno di questi trascrive qualcosa nell'header, il secondo qualcosa nella colonna laterale e il terzo qualcosa nel footer?

La risposta è: utilizzando la proprietà JaveScript innerHTML. Questo ti permette di cambiare l'HTML interno di qualsiasi elemento che specifichi.

Dai un'occhiata a questo semplice layout:



var myTopText="Text for the header";
var mySideText="Text for the side div";
var mySideText="Text for the footer";

document.getElementById('topdiv').innerHTML=myTopText;
document.getElementById('sidediv').innerHTML=mySideText;
document.getElementById('footerdiv').innerHTML=mySideText;

Usando questo metodo, puoi fondere insieme diversi JavaScript, o diversi include lato-server (come PHP) e inoltre indirizzare i loro output in qualsiasi punto della pagina.

 

2.3 Utilizza Percorsi Relativi Invece di Percorsi Assoluti

Invece di richiamare le tue immagini usando:

img src="http://www.mysite.com/images/extra-pretty-images/image.jpg"

utilizza un percorso relativo come questo verso il file sul server:

img src="../images/extra-pretty-images/image.jpg"

Ovviamente questi cambiamenti nel codice dipendono dalla posizione dei tuoi file HTML, ma una volta che hai sostituito tutti i percorsi assoluti verso le immagini con percorsi relativi, il tuo server non dovrà più ristabilire una connessione per ogni immagine presente nella pagina.

 



3. Sfrutta i Componenti Gzip

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_take_advantage_of_gzip_components_id30693381.jpg

Tutte le versioni recenti dei browser hanno la capacità di accettare i contenuti Gzipped (andando indietro fino alle versione IE4 e Netscape /Mozilla 6 e 7). Ciò significa che puoi comprimere tutti i tuoi CSS e JavaScript con Gzip e i browser li mostreranno normalmente.

La pagina che stai leggendo utilizza Gzip per CSS e diversi JavaScript. Le immagini in JPEG sono già compresse perciò puoi lasciarle così come sono, ma se pre-comprimi il tuo CSS e i JavaScript puoi ridurre in modo significativo le dimensioni dei file che vengono trasferiti. Questo velocizza il caricamento della pagina e riduce anche il consumo di banda.

Vediamolo in un file CSS..

Per prima cosa comprimi con Gzip il tuo file e caricalo su un server. Poi modifica il richiamo del CSS nella tua pagina in modo che corrisponda alla nuova estensione GZ. Per esempio:



Ora nella tua cartella /css crea un file .htaccess con il seguente codice:

AddEncoding x-gzip gz
AddType 'text/css; charset=UTF-8' .gz

La prima linea dichiara che i file con estensione"gz" sono codificati in "x-gzip". La seconda spiega che devono essere inviati con l'intestazione "text/css" in modo che il browser sappia come utilizzarli.

Per fare lo stesso con i Javascript, crea una cartella separata (per esempio /js) e aggiungi le stesse linee .htaccess soltanto usando "text/javascript" invece di "text/css".
.

 



4. Riduci il Numero Dei DNS Lookups

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_reduce_the_number_of_dns_lookups_id51050161.jpg

Nella sezione 2.3 ho già parlato della possibilità di sostituire i percorsi assoluti con quelli relativi. Comunque, se le tue immagini (o altri componenti) si trovano su un server separato, allora utilizzare un codice come questo:

img src="http://www.mysite.com/images/extra-pretty-images/image.jpg"

costringe il browser dell'utente ad effettuare un DNS lookup.

Considera che l'indirizzo reale del tuo sito non è "www.ilmiosito.com" (o quello che è). Il suo indirizzo vero è un numero IP. L'indirizzo IP consiste di quattro numeri, divisi per punti ogni 1-3 cifre di lunghezza. Per esempio: IP 69.147.76.15 è quello di Yahoo!, 216.92.198.27 è MasterNewMedia e così via.

Ogni volta che utilizzi un indirizzo come "ilmiosito.com" nel codice della tua pagina, il browser per prima cosa deve effettuare un DNS (Domain Name Service) lookup per vedere quale Ip sia associato con il nome di dominio "ilmiosito.com". Non c'è bisogno di dire che questa cosa richiede (fa perdere) tempo.

Per evitare questo (e il contenuto si trova su un server separato e perciò non puoi usare un percorso relativo), usa l'indirizzo IP invece del nome di dominio come "www.ilmiosito.com" .

 



5. Utilizza Più Che Puoi il Caching

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_use_caching_as_much_as_you_can_id30411311.jpg

Alcuni tutorial pongono molta enfasi su qualsiasi cosa sia collegata alla cache come gli expiration header. L'importanza di questo dipende dal tipo di traffico sul tuo sito.

Devi conoscere il tuo sito. Non è raro per i siti avere l'80% di nuovi visitatori che arrivano da qualche motore di ricerca.

  • Se il tuo pubblico è formato sopratutto da visitatori occasionali, allora la memorizzazione dei file non velocizzerà più di tanto il caricamento.
  • <Se il tuo pubblico è composto sopratutto da visitatori che ritornano, allora il caching è un fattore fondamentale.



5.1 Inserisci CSS e JavaScript in File Esterni

Il browser memorizzerà i CSS e i JavaScript e li riutilizzerà quando il visitatore va in altre pagine. In questo modo non devi caricare lo stesso codice CSS e JavaScript in ogni pagina.

 

5.2 Aggiungi un "Expire" Header Con Una Data Lontana Nel Futuro

Puoi farloper ogni tipo di file in .htaccess come questo:



Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"

L'esempio sopra è per le immagini e i file Flash, ma puoi farlo anche per i CSS e i JavaScript.

 

5.3 Configura Gli Etags

Gli Etags vengono inviati nelle intestazioni HTTP per ogni file. Poi il browser può confrontare l'Etag del file che ha memorizzato con il file sul server e quindi se corrisponde, il browser usa il file memorizzato anziché scaricarlo di nuovo.

Gli Etags ti permettono una certa flessibilità con la cache. Se non hai bisogno di quella flessibilità (ad esempio per le immagini sulle tue pagine, CSS, ecc.), puoi togliere gli Etags e il browser userà altri metodi per decidere se utilizzare o meno la copia memorizzata. Così se hai già aggiunto le linee qui sopra dal punto 5.2 al tuo .htaccess, allora puoi usare questa linea:

FileETag none

 



6. Diminuisci il Tempo Del Browser su CSS e JavaScript

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_save_browser_s_time_on_css_and_javascript_id2294511.jpg



6.1 Evita le CSS Expressions

Le CSS expression sono una funzionalità di IE che non è supportata da altri browser. Ti permette di inserire value "non-fixed" nel CSS. Per esempio:


width:expression(document.body.clientWidth > 1024? "1024px": "auto" );

Questo richiede tempo ai browser per essere interpretato e solo IE lo supporta, perciò è meglio evitarlo.

 

6.2 Riduci il Numero Degli elementi DOM

Ogni layer DIV, ogni link o form di ogni pagina, tutti questi (e molti altri) sono elementi DOM (Document Object Model).

Se mantieni basso il numero degli elementi DOM, il browser spenderà meno tempo per appaiarli con il CSS e nella costruzione della pagina.

 

6.3 Metti i CSS in Cima e i JavaScript in Fondo

Se carichi il CSS in cima alla pagina (idealmente nella sezione ), quando la pagina viene caricata, verrà composta in modo corretto dal browser.

In caso contrario il browser dovrà scorrere il codice della pagina finché "arriverà" al CSS e poi tornare indietro per ricomporre le sezioni della pagina caricate prima del CSS. Ovviamente questo non è un modo di agire all'insegna dell'efficienza. Giusto per fare chiarezza - ovunque tu metta il CSS, il totale dei dati inviati dal server al computer del visitatore sarà sempre lo stesso. Comunque, tutti i contenuti della pagina che vengono caricati prima del CSS appariranno non formattati. Poi, quando il browser legge finalmente il CSS, tornerà indietro ed inizierà a sistemare i contenuti in modo corretto. Questo appare come porzioni di testo spostate e mostrate con font e colori diversi, ed il visitatore lo percepisce come tempo di caricamento della pagina.

I JavaScript bloccheranno i download paralleli. Questo significa che il tuo browser deve aspettare finché lo script non venga caricato ed eseguito prima di procedere col caricare qualsiasi cosa che sia posizionata dopo il codice JavaScript (immagini, Flash, perfino un CSS se lo piazzi sotto un JavaScript).

I JavaScript inoltre dipendono molto dagli elementi presenti nella pagina. Se fai riferimento alla sezione 2.2, puoi vedere un esempio di questo. Se sistemerai il JavaScript in cima alla pagina commetterai un errore. Il JavaScript verrà caricato prima che gli elementi ID vengano stabiliti e perciò non potrà trovare a quale ID ti stai riferendo.

Considerando tutte queste cose, è meglio sistemare i JavaScript in fondo al codice della pagina.

 

6.4 Minimizza il Numero di Linee Utilizzate Nei JavaScript e Nei CSS

In qualsiasi normale circostanza questo elemento non è uno dei fattori più importanti, ma merita il suo posto nella lista.

Tutti i commenti, gli a capo, gli spazi doppi, ecc. semplicemente aumentano le dimensioni del file del tuo CSS e JavaScript. Se ne hai molti, può avere senso.

Puoi farlo per conto tuo o puoi scaricarti YUI Compressor per eliminare i caratteri non necessari dal codice.

 



7. Mantieni i Cookies di Piccole Dimensioni

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_keep_your_cookies_small_id26395991.jpg

Se utilizzi i cookies, cerca di mantenerli di dimensioni il più ridotte possibile. I Cookies vengono caricati con l'header prima del contenuto perciò se sono di piccole dimensioni questo riduce per l'utente il tempo di caricamento della pagina.

 



8. Evita i Redirect

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_avoid_redirects_id842344.jpg

I redirect vengono utilizzati (sorpresa, sorpresa) per reindirizzare automaticamente gli utenti da un URL ad un altro. Questo può essere fatto perché un vecchio URL non viene più usato, per mandare l'utente ad un area riservata, ecc.

I redirect non sono utilizzati da tutti i siti, alcuni li usano ma non sono in grado di modificarli / rimuoverli.

Per esempio, se usi Wordpress come piattaforma di pubblicazione, allora non hai scelta. Wordpress aggiungerà un redirect nel tuo file .htaccess e se lo rimuovi, il sito diventa inattivo.

Pertanto, dovresti ricordarti di usare i redirect con parsimonia perché fanno aumentare il tempo di caricamento della pagina.

 



9. Usa un Content Delivery Network

how_to_make_your_website_faster_part_2_how_to_optimize_your_website_code_for_speed_use_a_content_delivery_network_id10072152.jpg

Questo è solo per soggetti di grandi dimensioni.

Abbiamo già detto nella prima parte che la velocità nell'invio dei contenuti dipende dalla vicinanza del pubblico al server.

Quando hai un sito internazionale puoi sistemare i tuoi contenuti (o almeno i componenti statici) su vari server in diversi luoghi geografici, rendendo così il caricamento delle tue pagine web più rapido per un grande numero di persone. Di nuovo, questo è utile soltanto per siti web di grandi dimensioni.

 



Conclusioni

Velocizzare il tuo sito dipende da un certo numero di fattori. Qui ho affrontato soltanto quelli più generali che molti utenti saranno in grado di gestire.

Per ottenere consigli più focalizzati sul tuo sito puoi scaricare Google Page Speed o Yahoo! Yslow.

Yslow assegnerà perfino un voto agli elementi che aumentano o diminuiscono la velocità del tuo sito. Realisticamente, se testi Yslow puntando a qualche pagina di Yahoo tipo questa: http://news.yahoo.com/?fr=404_news vedrai che ottiene solo la sufficienza. Il punto perciò è: non prendere troppo sul serio questi "voti".

Alcuni dei suggerimenti e degli step sono applicabili solo per siti di grandi dimensioni (i content delivery network rappresentano un ovvio esempio).
Tieni inoltre presente che aggiungere qualsiasi contenuto prodotto da terzi come un widget, annunci pubblicitari o bottoni significa che il numero degli elementi DOM aumenta e lo stesso avviene per le richieste HTTP, i DNS Lookup, i componenti non compressi, i cookies ecc. Più ne usi, più la velocità del tuo sito dipende dai componenti fuori dal tuo controllo.

Ogni sito è diverso e per ogni sito c'è qualche limite realistico fino al quale l'ottimizzazione è fattibile o significativa.

Infine, come nota a margine, sto tenendo d'occhio SPDY protocol. Google sta spingendo per questo al punto che potrebbe diventare presto un grosso problema.

Attualmente tutti gli indirizzi di Internet cominciano con "http://" perché tutte le pagine web usano il protocollo HTTP. HTTP è stato creato parecchio tempo fa quando ad Internet si accedeva con Modem da 9600 KB (e anche più lenti) e le pagine web erano solo testo accademico con al massimo uno o due grafici.

Questo nuovo mondo fatto di Flash, CSS, immagini rollover e tutto il resto sono tutte cose per le quali il protocollo HTTP non è stato concepito.

SPDY dovrebbe portare i protocolli di trasferimento a stare al passo con i contenuti del 21° secolo, ma la maggior parte, se non tutti i suggerimenti per velocizzare il sito indicati qua, ti aiuteranno a tagliare via quei pochi secondi in più dal tempo di caricamento della pagina.




Fine della seconda parte -- La prima parte si trova qui.




Photo credits:
Evita La Creazione Di Pagine Dinamiche - norebbo
Usa il Meno Possibile Include e Richieste HTTP - John Takai
Sfrutta i Componenti Gzip - Kirsty Pargeter
Riduci il Numero Dei DNS Lookups - pixbox
Utilizza Più Che Puoi il Caching - Stepan Popov
Diminuisci il Tempo Del Browser su CSS e JavaScript- mipan
Mantieni i Cookies di Piccole Dimensioni- superdumb
Evita i Redirect - hypermania
Usa un Content Delivery Network- adistock

 
 
 
 
 
Commenti    
blog comments powered by Disqus

 

 

 

 

15683
 




 

I Toolkit di Robin


 









 

 

 

 

  • RSS Feed

          Mail
    Nome:
    Email:
     



     
     

     

    Web Analytics