October 8
Il più grande e più popolare il vostro sito web diventa, più è probabile che lo troverà rallentamento. Le pagine Web hanno bisogno di caricare rapidamente, anche se, per timore che i visitatori decidono qualche secondo in più non è valsa la pena aspettare. tempo di caricamento tecniche di ottimizzazione per i siti web includono la scrittura di codice più pulito, rendendo le richieste meno protocollo di trasferimento ipertestuale (HTTP), utilizzando fogli di stile CSS codice (CSS) per sostituire le immagini ingombranti e comprimere il vostro file CSS e JavaScript. È possibile utilizzare tutte queste tecniche insieme per diminuire i tempi di caricamento delle pagine Web e mantenere i visitatori impazienti di tornare al tuo sito.
1 Consolidare il tuo CSS in un unico file CSS esterno,. In questo modo si riduce il richieste HTTP, che sono le richieste effettuate al server ogni volta che un browser carica un nuovo file. Aperto tutti i file CSS - ad eccezione di quelli specifici per Internet Explorer (IE) - e quindi copiare e incollarli in un unico file. Salvare il nuovo file CSS e quindi modificare i tag <link> per riflettere i cambiamenti. Si dovrebbe finire con un tag singolo <link> in questo modo, oltre a qualsiasi necessaria per IE:
<Link rel = "stylesheet" type = "text / css" href = "path / to / stylesheet.css" />
2 Utilizzare condizionali caricatori JavaScript per caricare i fallback JavaScript. Fallback creano effetti sui siti web per i vecchi browser che non supportano nativamente HTML5 e CSS3. Alcune buone, gratuito e open-source caricatori JavaScript includono YepNope.js, Head.js e Require.js. Scarica quello che ti piace di più e di includere nel codice HTML, ovunque si preferisce mettere il JavaScript, sia nella testa o sotto il piè di pagina.
3 Sostituire goffo grafica angolari e immagini pendenza con tecniche CSS3, come i raggi di confine e sfondi sfumati. "Smashing Magazine" ha fatto uno studio di riferimento sulla velocità e l'efficienza del CSS2 contro tecniche CSS3 nel mese di aprile 2011 e ha scoperto che la pagina di prova Web caricata 1.5 secondi più velocemente quando codificati con CSS3 per sostituire la grafica. Fornire fallback per gli effetti CSS3 quando necessario, ma caricarli condizionalmente per evitare di rallentare i browser moderni.
4 Minify i file CSS e JavaScript dopo lo sviluppo. Quando la minimizzazione di un file, si rimuove tutti gli spazi bianchi - gli spazi e le interruzioni di riga - dal codice, e questo riduce la dimensione del file. Scaricare e installare un minifier, come ad esempio JSMin o YUI Compressor. È anche possibile scaricare la Boilerplate HTML5 da Paul irlandese, sviluppare il vostro sito in base alle sue file e utilizzare il suo script di build per minify automaticamente tutti i file.
5 Scrivere codice CSS più pulito. selettori a catena per evitare di riscrivere lo stesso codice più e più volte. Ecco un esempio di un selettore incatenato:
h1, h2, h3, h4, h5, h6 {text-transform: uppercase;}
Quanto sopra CSS seleziona tutti e sei i tag intestazione e quindi imposta la proprietà "text-transform" a "maiuscola."