Ottimizzazioni comuni per ridurre le dimensioni della pagina HTML o XHTML?

Quali sono alcune ottimizzazioni comuni eseguite per ridurre le dimensioni della pagina HTML o XHTML? Alcuni che vengono in mente sono:

• rimozione di commenti,
• rimozione di spazi bianchi estranei,
• spostare gli stili in linea ripetitivi in ​​un foglio di stile CSS,
• eccetera.

Quali sono alcuni altri? Quale offerta offre il miglior rapporto qualità-prezzo o potrebbe essere eseguita automaticamente da uno strumento o un modulo?

Google ha delineato e spiegato i loro consigli per ridurre al minimo le dimensioni del carico utile . Includono le seguenti tecniche:

1. Abilita la compressione
2. Rimuovi CSS inutilizzati
3. Minimizza JavaScript
4. Minimizza CSS
5. Minimizza HTML
6. Rinvia il caricamento di JavaScript
7. Ottimizza le immagini
8. Servi immagini in scala
9. Servi risorse da un URL coerente

Questi suggerimenti fanno parte del loro progetto open source Firefox / Firebug chiamato Page Speed . Simile al plugin YSlow di Yahoo! L'attuale componente aggiuntivo Velocità pagina verificherà molte più ottimizzazioni di quelle spiegate in dettaglio nell'elenco. Vengono inoltre presentate le istruzioni per l'utilizzo di Page Speed.

Le migliori pratiche di Yahoo! per accelerare il tuo sito web identificano un insieme simile di migliori pratiche:

1. Riduci a icona le richieste HTTP
2. Utilizzare una rete di distribuzione dei contenuti
3. Aggiungi un'intestazione Expires o Cache-Control
4. Componenti Gzip
5. Metti i fogli di stile in cima
6. Metti gli script in fondo
7. Evita le espressioni CSS
8. Rendi JavaScript e CSS esterni
9. Ridurre le ricerche DNS
10. ...

(L'elenco di Yahoo! È lungo ~ 35 articoli, non c'è bisogno di citarlo nella sua interezza.)

Sia YSlow (collegamento immagine) che Velocità pagina (collegamento immagine) ti permetteranno di eseguire test sulle tue pagine, suggerendo cose che puoi fare e mostrandoti cosa, dei loro consigli, è già implementato.

Qualcuno dirà che il markup dovrebbe essere Gzipped, quindi potrei anche essere quello.

Ecco una lunga spiegazione di cosa sia Gzip con collegamenti su come configurarlo su Apache e IIS .

Un articolo su WebReference afferma che troverai i seguenti miglioramenti delle prestazioni quando usi il modulo Apache mod_gzip.

I webmaster in genere vedono un aumento del 150-160% nelle prestazioni del server Web e una riduzione del 70% - 80% della larghezza di banda HTML / XML / JavaScript utilizzata, usando questo modulo. Complessivamente i risparmi di larghezza di banda sono circa dal 30 al 60%

Probabilmente non ne vale la pena.

Io ho giocato un po ' con la rimozione di spazi bianchi in HTML e ho visto solo una riduzione delle dimensioni del 10% nel carico utile dopo il gzip.

Realisticamente, la rimozione di spazi bianchi e avanzamento riga sta facendo il lavoro che la compressione farebbe per noi. Stiamo solo aggiungendo un tocco di efficienza assistita dall'uomo:

                  Compressa grezza
CSS non ottimizzati 2.299 byte 671 byte
CSS ottimizzato 1.758 byte 615 byte

(sì, questo dice CSS ma le stesse regole di base si applicano anche all'HTML)

Il problema è,

1. GZIP sta facendo il 90% del lavoro per te, quindi questa è una pazza ottimizzazione. Voglio dire, forse se sei Google o Yahoo.
2. Tale riduzione aggiuntiva del 10% comporta un costo piuttosto elevato di HTML completamente illeggibile in "visualizza sorgente"

ok, piccolo: mantieni i nomi dei tag e gli attributi in minuscolo e coerenti (come i mandati standard, comunque). Aumenterà il rapporto di compressione di una percentuale o due.

Se sei un sito a volume estremamente elevato, potresti prendere in considerazione l'utilizzo di nomi di entità e ID entità super-brevi, in quanto riducono le dimensioni della pagina HTML e della pagina CSS utilizzate per modellarlo.

Inoltre, fai attenzione alla composizione del sito troppo strutturata; è facile aggiungere sezioni div e span quando non sono realmente necessarie. Potresti anche prendere in considerazione strategie come il paging per grandi set di risultati e output simili.

In realtà, queste ottimizzazioni hanno un rimborso estremamente limitato (e per la strategia di paging, i potenziali svantaggi di SEO) per valere la pena per i siti che non rientrano nella stessa categoria di traffico di Google. Basta seguire le raccomandazioni di jessegavin per abilitare la compressione GZip / Deflate ed eseguire l'operazione.

Combina css, immagini e javascript comuni in un unico file. Ciò non riduce le dimensioni del file ma ridurrà il numero di richieste http. Per file più piccoli, l'overhead http supera di gran lunga il tempo di download. È facile scrivere uno script per combinare file css e javascript in modo da poterli gestire più facilmente durante lo sviluppo ma distribuirli in un singolo file.

Vedi http://css-tricks.com/css-sprites per maggiori informazioni sulla combinazione di immagini.

Inoltre, controlla il compilatore di chiusura di Google. Non l'ho usato, ma afferma di rendere il download di javascript ed eseguire più velocemente.

Come altri hanno già detto, il principale vantaggio deriva dal gzipping.

Assicurarsi di utilizzare elementi HTML appropriati. Invece di <div class="page-title">Hello World</div>, utilizzare <h1>Hello World</h1>.

E quello ovvio: non usare le tabelle per il layout! Usa un semplice sistema a griglia come 960.gs (o crea la tua versione leggera). Può esserci una grande differenza tra le dimensioni HTML, specialmente con le tabelle nidificate. Confrontare:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

e

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Se si utilizza un sito Web ASP.NET, fare attenzione a ViewState . Può generare campi nascosti molto grandi nella pagina, sovraccaricandoli spesso mentre non è necessario (mi è già venuto in mente che ViewState è più pesante del resto della pagina).
È particolarmente vero se si utilizza AJAX, poiché ViewState verrà inviato avanti e indietro con ogni richiesta, rallentando il sito Web e aumentando il volume del traffico.

La soluzione è nel codice .net però.

Esistono numerosi strumenti gratuiti di analisi e ottimizzazione delle prestazioni web . È possibile compilare la propria grande lista di controllo dai report che generano.

Ecco un paio di punti parafrasati da una valutazione delle prestazioni Zoompf -

• Evita contenuti generati dinamicamente (immagine). Prendi invece in considerazione l'idea di disegnare o ridimensionare un'immagine offline come file di immagine statica.
• Evitare l'uso di tag immagine senza dimensioni.
• Google Analytics (& Ads) supporta il caricamento asincrono del suo file JavaScript. Nel caso in cui li usi, potresti scegliere di caricarli in modo asincrono.

Una strategia comunemente trascurata è quella di rimuovere tutto il codice HTML non necessario dalla pagina.

Per ogni dato progetto, dovrai decidere quale di queste strategie utilizzare in base alla versione (X) HTML che stai utilizzando e in che modo verrà utilizzato il sito Web.

(Apparentemente, non posso pubblicare più di un collegamento ipertestuale per risposta poiché sono un nuovo utente, quindi questi URL dovranno essere copiati e incollati ... Spero sia kosher.)

• In HTML4 e HTML5, per molti elementi, il tag di chiusura non è richiesto. Anche il tag di apertura per l'elemento body non è richiesto. Vedere:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• Il protocollo (parte http :) degli URL HTTP può essere omesso.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• Con tag come <br>, puoi semplicemente tralasciare la barra utilizzata nella sintassi XHTML (<br />) a meno che non sia effettivamente necessario utilizzare XHTML.

• Ecco alcuni esempi di piccole strutture di documenti HTML:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Altri l'hanno detto, ma non hanno risolto abbastanza il punto: gzip.

1. Praticamente nessuno sforzo o svantaggi.
2. Nella mia esperienza limitata, riduce le dimensioni dell'HTML tra il 60% e il 90%.

Tutte le altre modifiche che puoi apportare all'HTML richiedono più sforzo / manutenzione e difficilmente hanno alcun effetto rispetto al solo gzip e dimenticare. Semplicemente non valgono il tempo a meno che tu non sia Google. Non sei Google.

(Come altri hanno già detto, più coerente è il tuo HTML, maggiore sarà l'effetto del gzipping, poiché - secondo la mia comprensione limitata - il gzipping cerca stringhe identiche nel tuo file e sostituisce ogni istanza ripetuta con un piccolo codice che si riferisce al originale. Quindi pratiche di authoring come mantenere i tuoi attributi nello stesso ordine e mantenere tutti gli involucri uguali, possono aiutare a fare il gzip nel suo lavoro.)

Oh, e se stai minimizzando automaticamente il tuo HTML ad un certo punto del tuo processo di compilazione / pubblicazione, ciò non richiede molto più sforzo / manutenzione. Alcuni minificatori HTML sono elencati qui:

/programming/728260/html-minification