Vediamo alcuni pratici e semplici consigli per rendere il tuo sito più veloce.
-
Utilizzare Cookie senza domini per i componenti
Quando il browser effettua una richiesta di un'immagine statica e invia i cookie insieme alla richiesta, il server non ha alcun uso per i cookies. Così crea solo traffico di rete inutile. È necessario assicurarsi quali componenti statici richiedono cookie inutili. Il consiglio è quello di creare un sottodominio e ospitare tutti i componenti statici.
Se il vostro dominio è www.miosito.it, è possibile ospitare i componenti statici su static.miosito.it. E' possibile anche ospitare i componenti stati su un altro dominio e uno dei vantaggi è che alcuni proxy potrebbe rifiutarsi di memorizzare nella cache i componenti che sono richiesti con i cookie.
-
Ottimizzare le immagini
È possibile controllare le GIF e vedere se si utilizza una dimensione di palette corrispondente al numero di colori nell'immagine. Utilizzando imagemagick è facile da controllare con identify -verbose image.gif
Quando si vede un'immagine useing 4 colori e 256 colori "slot" nella palette, c'è spazio per migliorare. Prova a convertire un'immagine GIF a una in formato PNG e vedere se vi è un risparmio. Gli sviluppatori spesso esitano a usare i file PNG a causa del limitato supporto nei browser, ma questo è ormai un ricordo del passato.
-
Ottimizza CSS Sprites
Organizzare le immagini nella sprite orizzontalmente anziché verticalmente di solito si traduce in un file di dimensioni più piccole. "Siate mobile-friendly" e non lasciare spazi vuoti tra le grandi immagini in una sprite. Ciò non pregiudica la dimensione del file, ma richiede meno memoria all'user agent per decomprimere l'immagine in una mappa di pixel.
-
Non scalare le immagini in HTML
Non usare una immagine più grande del necessario solo perché è possibile impostare la larghezza e l'altezza in HTML. Se avete bisogno di <img width="100" height="100" src="/ilmiocane.jpg" alt="MIl mio fantastico cane" /> allora l'immagine (ilmiocane) dovrebbe essere 100x100px piuttosto che una immagine in scala 500x500px.
-
Fai favicon.ico piccole e Cacheabili
La favicon.ico è un'immagine che rimane nella root del vostro server. Dal momento che è sullo stesso server, i cookie vengono inviati ogni volta che viene richiesta. Questa immagine interferisce anche con la sequenza di download, per esempio in IE quando si richiede componenti aggiuntivi in onload, la favicon sarà scaricata prima di questi componenti aggiuntivi.
-
Tenere i componenti sotto i 25K
Questa limitazione è dovuta al fatto che iPhone non cache componenti più grandi di 25K. Si noti che questa è la dimensione decompressa.
-
Aggiungere un Scade o un header Cache-Control
Ci sono due aspetti a questa regola:
1) Per i componenti statici: attuare una politica impostando una scadenza a un futuro lontano
2) Per i componenti dinamici: usare un appropriata intestazione della Cache-Control per aiutare il browser con richieste condizionali
Le pagina Web sono sempre più ricche di script, fogli di stile, immagini e flash nella pagina. Il neo-visitatore alla pagina potrebbe essere necessario fare diverse richieste HTTP, ma utilizzando l'intestazione di scadenza di effettuare tali componenti potrebbe avere dei vantaggi. Questo evita inutili richieste HTTP alla visualizzazione delle pagine successive. La scadenza delle intestazioni sono molto utilizzate con le immagini, ma deve essere utilizzato su tutti i componenti compresi gli script, fogli di stile e componenti Flash.
I browser utilizzano una cache per ridurre il numero e le dimensioni di richieste HTTP, rendendo più veloce il caricamento delle pagine web. Un server web utilizza l'intestazione di scadenza nella risposta HTTP per dire al cliente quanto tempo un componente può essere memorizzata nella cache. Se il server è Apache, utilizzare la direttiva ExpiresDefault per impostare una data di scadenza relativa alla data corrente.
Ricordarsi che questa impostazione non ha alcun effetto sul numero di richieste HTTP quando un utente visita il tuo sito per la prima volta e la cache del browser è vuota. Pertanto l'impatto di questo miglioramento delle prestazioni dipende da quanto spesso gli utenti visitano le pagine del tuo sito con la cache attiva.
-
Ridurre il numero di elementi DOM
Una pagina complessa significa più byte da scaricare e significa anche più lento l'accesso DOM in JavaScript. Fa una differenza se si esegue un ciclo di 500 o 5000 elementi DOM della pagina quando si desidera aggiungere un gestore eventi, per esempio.
Un elevato numero di elementi DOM può essere un sintomo che c'è qualcosa che dovrebbe essere migliorato con il markup della pagina senza necessariamente la rimozione del contenuto. Stai usando tabelle nidificate a scopo di impaginazione? Forse c'è un modo migliore e più semanticamente corretto per fare la tua markup.
Il numero di elementi DOM è facile da testare, basta digitare in console di Firebug:
document.getElementsByTagName('*').length
E quando gli elementi DOM sono troppi? Controllate altre pagine simili che hanno una buona markup. Ad esempio, la home page di Yahoo! è una pagina piuttosto trafficata e ha meno di 700 elementi (tag HTML).
-
Remove Duplicate Scripts
Fa male alle prestazioni di includere lo stesso file JavaScript due volte in una sola pagina. Questo non è tanto inusuale quanto si potrebbe pensare. Una revisione dei dieci migliori siti Web statunitensi dimostra che due di essi contengono uno script duplicato. Due fattori principali aumentano le probabilità di uno script che viene duplicato in una sola pagina web: dimensioni del team e il numero di script.
In Internet Explorer, se uno script esterno è incluso due volte e non è memorizzabile nella cache, e genera due richieste HTTP durante il caricamento della pagina. Oltre a generare inutili richieste HTTP, si perde tempo valutando lo script più volte. Questa esecuzione ridondante JavaScript avviene sia in Firefox e Internet Explorer, indipendentemente dal fatto che lo script è cacheable.
Conoscete qualche altro piccolo consiglio da dare per velocizzare il caricamento delle pagine web?
