it-swarm.it

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?

15
Chris W. Rea

Google ha delineato e spiegato i loro consigli al meglio Riduci 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 aggiuntivo chiamato Velocità pagina . Simile al plug-in 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 della velocità della pagina.

Yahoo! ' Best Practices for Speeding Your Your Website identifica un insieme simile di best practice:

  1. Ridurre al minimo 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. ...

(La lista di Yahoo! È lunga ~ 35 articoli, non c'è bisogno di citarla 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 raccomandazioni, è già implementato.

5
Bryson

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

Ecco una lunga spiegazione di cosa Gzip contiene collegamenti su come impostarlo 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% delle 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 approssimativamente dal 30 al 60%

18
jessegavin

Probabilmente non ne vale la pena.

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

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

 Raw compresso 
 CSS non ottimizzato 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"
10
Jeff Atwood

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.

6
Thomas Bonini

Se sei un sito a volume estremamente elevato, potresti prendere in considerazione l'utilizzo di ID entità e nomi di classi super-corti, poiché riducono le dimensioni sia della pagina HTML che 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 valerne la pena per i siti che non rientrano nella stessa categoria di traffico di Google. Basta seguire raccomandazione di jessegavin per abilitare la compressione GZip/Deflate ed eseguire l'operazione.

4
JasonBirch

Combina css, immagini e javascript comuni in un unico file. Questo 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 Closure Compiler da Google. Non l'ho usato, ma afferma di rendere il download di javascript ed eseguire più velocemente.

3
mcrumley

Come altri hanno già detto, il più grande vantaggio deriva dal gzipping.

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

E quello ovvio: non usare le tabelle per il layout! Usa un semplice sistema a griglia come 960.gs (o lancia 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>
3
DisgruntledGoat

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ò.

2
Julien N

Altri l'hanno detto, ma non hanno sperato abbastanza sul punto a casa: 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 i tuoi case allo stesso modo, 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ù impegno/manutenzione. Alcuni minificatori HTML sono elencati qui:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

Ci sono un sacco di strumenti gratuiti di analisi e ottimizzazione delle prestazioni web . È possibile compilare la propria grande check-list 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.
1
mvark

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 al modo in cui 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/

1
dzollman