Il più grande e più popolare sito Web diventa, più è probabile che lo troverete rallentando. Pagine Web hanno bisogno di caricare rapidamente, però, per timore che i visitatori decidono pochi secondi non è valsa la pena aspettare. Tecniche di ottimizzazione del tempo di carico per siti Web includono la scrittura di codice più pulito, rendendo (HTTP) hyper-text transfer protocol meno richieste, utilizzando a cascata (CSS) del foglio codice per sostituire immagini ingombranti e comprimere i file CSS e JavaScript di stile. È possibile utilizzare tutte queste tecniche insieme per ridurre i tempi di caricamento pagina Web e mantenere visitatori impazienti di ritorno al tuo sito.

Istruzioni

1

Consolidare il tuo CSS in un unico file CSS esterno. Facendo questo tagli sulle richieste HTTP, che sono le richieste effettuate al server ogni volta che un browser carica un nuovo file. Aprire ogni file CSS--ad eccezione di quelli specifici per Internet Explorer (IE)..--e poi copiare e incollarli in un singolo file. Salvare il nuovo file CSS e quindi modificare il tag < link > per riflettere le modifiche. Si dovrebbe finire con un tag singolo < link > come questo e gli eventuali necessari per IE:

< link rel = "stylesheet" type = "text/css" href="path/to/stylesheet.css" / >

2

Utilizzare condizionale JavaScript caricatori per caricare il tuo fallback di JavaScript. I fallback creano effetti su siti Web per browser meno recenti che non supportano nativamente CSS3 e HTML5. Alcuni caricatori di JavaScript buoni, liberi e open source includono YepNope.js, Head.js e Require.js. Scarica quello che ti piace di più e includerlo nel tuo codice HTML ovunque si preferisce mettere il vostro JavaScript, sia nella testa o sotto il piè di pagina.

3

Sostituire goffo angolo grafica e immagini sfumate con tecniche CSS3, come raggi di bordo e sfondi sfumati. "Smashing Magazine" ha fatto uno studio di benchmark sulla velocità e l'efficienza di CSS2 e CSS3 tecniche nell'aprile 2011 e abbiamo trovato che la pagina Web di prova caricata 1,5 secondi più veloce quando codificato con CSS3 per sostituire la grafica. Forniscono i fallback per CSS3 effetti quando necessario, ma caricarli in modo condizionale per evitare di rallentare i browser moderni.

4

Minify file CSS e JavaScript dopo lo sviluppo. Quando si minimizza un file, si rimuove tutti gli spazi vuoti..--gli spazi e le interruzioni di riga..--dal codice, e questo riduce la dimensione del file. Scaricare e installare un minifier, ad esempio JSMin o YUI Compressor. È anche possibile scaricare HTML5 Boilerplate da Paul Irish, sviluppare il sito basato sui suoi file e utilizzare suo script di compilazione per minify automaticamente tutti i file.

5

Scrivere codice CSS più pulito. Selettori di catena per evitare di riscrivere il codice stesso più e più volte. Ecco un esempio di un selettore di concatenate:

H1, h2, h3, h4, h5, h6 {text-transform: maiuscolo;}

Il CSS sopra seleziona tutti i tag di intestazione sei e quindi imposta la proprietà "text-transform" in "maiuscolo".

Consigli & Avvertenze

• Progettare e sviluppare per i browser moderni prima e quindi testare e fornire correzioni per le versioni precedenti di Internet Explorer.
• Quando si forniscono i fallback, considerare se l'effetto che si desidera supportare in browser meno recenti è assolutamente necessario per l'esperienza utente. Non ogni visitatore ha bisogno di vedere angoli arrotondati.
• Eseguire il backup file del tuo sito Web prima di modificarli.