Programmazione

Come funziona l'HTML compresso e perché potrebbe aver bisogno di esso

Come funziona l'HTML compresso e perché potrebbe aver bisogno di esso / Programmazione

Se gestisci un sito web, dovresti già sapere come utilizzare i giusti formati di immagine e ottimizzare le tue immagini per il Web 10 Strumenti gratuiti per le immagini in lotti online per ridimensionare, convertire e ottimizzare 10 strumenti gratuiti per le immagini batch online per ridimensionare, convertire e ottimizzare strumenti di modifica batch quando si elaborano molte foto e pochissimo tempo. Vi presentiamo i migliori batch resizer, ottimizzatori o convertitori disponibili online. Leggi di più . Tuttavia, mentre la compressione delle immagini è una pratica ben nota, la compressione HTML tende a essere trascurata, il che è un peccato perché i vantaggi sono utili.

In questo articolo, esamineremo i due metodi principali per ridurre i file HTML, perché i file HTML dovrebbero essere ridotti e come risolverli.

Compressione vs. Minificazione

Per quanto riguarda l'ottimizzazione dei file HTML, esistono due metodi principali: compressione e minification. Suonano simili sulla superficie, ma in realtà sono due tecniche distinte, quindi non farli confondere.

minification

Puoi pensare a minimizzare come la rimozione di caratteri e linee non necessarie nel codice sorgente. Pensa all'indentazione, ai commenti, alle linee vuote, ecc. Nessuno di questi è richiesto in HTML - esistono per rendere il file più facile da leggere. Ritagliare questi dettagli può ridurre le dimensioni del file senza influire su nulla.

Esempio di pagina HTML:

  Il tuo titolo qui   
 
Questa è un'intestazione
 
Mandami una mail a [email protected].
 
Questo è un nuovo paragrafo!
 
Questo è un nuovo paragrafo in grassetto e in corsivo.

Esempio di pagina HTML, minificata:

Il tuo titolo qui
Questa è un'intestazione
Mandami una mail a [email protected].
Questo è un nuovo paragrafo!
Questo è un nuovo paragrafo in grassetto e in corsivo.

Formato originale: 354. Dimensioni minime: 272. Risparmi: 82 (23,16%).

Molti sviluppatori web e proprietari di siti riservano il minisito solo per i file JS e CSS, ma questa pratica obsoleta è un errore. Anche la miniseria HTML è importante.

Negli anni 2000, gli strumenti di minificazione erano rari. Dovevi minimizzare manualmente i file ogni volta che qualcosa cambiava. Poiché i file HTML cambiano più frequentemente rispetto ai file JS e CSS, era semplicemente troppo noioso da minare ogni volta. Al giorno d'oggi, è un punto controverso.

Compressione

Quando gli utenti visitano il tuo sito Web, lo fanno utilizzando il protocollo HTTP. Il browser invia una richiesta al tuo server web per una pagina specifica, il tuo server web trova la pagina, quindi invia nuovamente il contenuto di quella pagina al browser del visitatore.

Ma poiché il protocollo HTTP supporta la compressione, il tuo server web può comprimere la pagina prima di inviarla al visitatore (supponendo che la compressione sia abilitata nelle impostazioni del tuo server), e quindi il browser del visitatore può decomprimere la pagina al suo stato originale.

Lo schema di compressione più comune è GZIP, che è un formato di file che utilizza un algoritmo di compressione senza perdita di dati. Come funziona la compressione dei file? Come funziona la compressione dei file? La compressione dei file è al centro di come funziona il Web moderno, si potrebbe obiettare, perché consente di condividere file che altrimenti richiederebbero troppo tempo per essere trasferiti. Ma come funziona? Leggi di più chiamato DEFLATE.

L'algoritmo cerca ripetizioni occorrenti di testo nel file HTML, quindi sostituisce quelle ricorrenze ripetute con riferimenti a una ricorrenza precedente. Ogni riferimento è semplicemente due numeri: quanto indietro è il riferimento e quanti caratteri ci stiamo riferendo.

Considera una stringa di testo come questa (esempio tratto dal sito web GZIP):

Blah blah blah blah blah.

L'algoritmo riconosce la seguente ripetizione:

B lah b lah b lah b lah b lah.

Il primo caso è il nostro riferimento, quindi lascia che sia:

Blah b lah b lah b lah b lah.

La seconda occorrenza si riferisce alla prima occorrenza, che è cinque caratteri dietro e cinque caratteri:

Blah b [5,5] lah b lah b lah.

Ma in questo caso, l'algoritmo riconosce che l'occorrenza successiva è la stessa sequenza di caratteri, quindi estende la lunghezza di riferimento di altri cinque:

Blah b [5,10] lah b lah.

E di nuovo:

Blah b [5,15] lah.

E l'algoritmo è abbastanza intelligente da comprendere che i tre caratteri successivi sono i primi tre caratteri del riferimento, quindi si estende per tre:

Blah b [5,18].

Ora pensa a un tipico file HTML e quanta ripetizione esiste all'interno. Quasi ogni tag, come , ha un tag di chiusura corrispondente, come . Inoltre, molti tag sono ripetuti in tutto, come ad esempio

,

, ,
  • , ecc. Anche gli attributi vengono ripetuti spesso, inclusi classe, href, e src. È facile capire perché la compressione GZIP sia così efficace con HTML.

    L'unico svantaggio è che il server Web ha bisogno di un po 'più di CPU per eseguire la compressione ogni volta che viene richiesta una pagina. Ma dal momento che la CPU non è più una preoccupazione al giorno d'oggi, è quasi sempre meglio abilitare GZIP piuttosto che senza, anche se si dispone di hosting Web entry-level I migliori servizi di hosting Web I migliori servizi di hosting Web Alla ricerca del miglior servizio di web hosting per le tue esigenze? Che si tratti di un piccolo blog o di un importante sito web aziendale, ecco i nostri migliori consigli. Leggi di più .

    Perché dovresti comprimere e minimizzare

    Ci sono due vantaggi principali, entrambi cruciali nel panorama web di oggi.

    Carichi più veloci della pagina

    In media, un minificatore HTML può ridurre le dimensioni di un file di circa il 3 percento con le impostazioni di base. Con le impostazioni avanzate opzionali, un file HTML può essere ridotto di un altro 3-7%, per una potenziale riduzione fino al 10%. Questo si traduce direttamente in tempi di caricamento delle pagine più veloci.

    Meno larghezza di banda utilizzata

    Supponiamo che tu abbia 10 file, ognuno dei quali è stato ridotto da 50 KB a 45 KB per una riduzione totale di 50 KB. Supponiamo che il tuo sito web abbia una media di 1.000 visitatori al giorno, in cui ogni visita ha una media di dieci pagine. La minificazione HTML da sola riduce l'utilizzo della larghezza di banda di 50 MB al giorno (1,5 GB al mese).

    Compressione + minificazione

    Come puoi vedere, il minification HTML è utile da solo, specialmente se il tuo sito cresce, i file si ingrandiscono e il traffico aumenta. Nota che le linee guida di Google PageSpeed ​​consigliano di minimizzare l'HTML, quindi se sei scettico, lascia che questo ti convinca diversamente.

    Ma la cosa fantastica dell'ottimizzazione dell'HTML è che non devi scegliere né minification né compressione. Puoi fare entrambe le cose! In effetti, tu dovrebbero Fai entrambi.

    In media, puoi aspettarti che la compressione GZIP riduca un file HTML del 70-90 percento. Utilizzando l'esempio precedente con una stima di compressione conservativa, i file HTML minificati andrebbero da 45 KB a 13,5 KB ciascuno, per una riduzione totale di 365 KB. Rispetto a unminified / uncompressed, la larghezza di banda del tuo sito è ora ridotta di 365 MB al giorno (11 GB al mese).

    Oltre ai risparmi in termini di larghezza di banda, ogni pagina viene caricata molto più velocemente perché il browser dell'utente finale deve scaricare solo 13,5 KB rispetto a 50 KB per pagina.

    Come comprimere e minimizzare HTML

    Fortunatamente, non sono molto difficili in questi giorni e non hai bisogno di molto know-how tecnico per installarle.

    Plugin di WordPress

    Se esegui un sito WordPress, tutto ciò che devi fare è installare un plug-in e puoi sfruttare i vantaggi sia della compressione che della minimizzazione.

    La maggior parte dei plug-in di memorizzazione nella cache fa molto di più della semplice memorizzazione nella cache delle pagine. Ad esempio, WP Fastest Cache e W3 Total Cache dispongono entrambi di impostazioni con un clic che consentono di attivare la minificazione HTML e la compressione GZIP, tra le altre caratteristiche che accelerano ulteriormente il caricamento delle pagine e riducono l'utilizzo della larghezza di banda.

    Se tu solo vuoi la minificazione, ti consigliamo il plugin Minify HTML. È semplice, supporta HTML / CSS / JS e ti consente di modificare leggermente il metodo di minificazione (ad es. Se rimuovere http: e https: dagli URL).

    Ministri HTML statici

    Se i file HTML sono statici, ovvero non generati dinamicamente da un CMS o da un framework Web, è possibile mantenere due set di file HTML: a “fonte” impostato, che non è stato modificato per una facile modifica e a “minified” set, che si crea ogni volta che si modifica un file sorgente.

    Per ridurre, utilizzare uno di questi strumenti:

    • HTMLCompressor
    • HTML Minifier
    • HTML Minifier (diverso da quello sopra)

    Questa è una tecnica valida se ti sei allontanato da CMS come WordPress e ora usi generatori di siti statici 7 motivi per abbandonare il tuo CMS e consideri un generatore di siti statico 7 motivi per abbandonare il tuo CMS e prendere in considerazione un generatore di siti statico Per molti anni, pubblicazione un sito Web è stato difficile per molti utenti. CMS come WordPress lo hanno cambiato, ma possono ancora essere confusi. Un'altra alternativa è un generatore di siti statici. Leggi di più .

    Abilita compressione GZIP

    I passaggi per abilitare la compressione GZIP possono variare a seconda del software del server Web che stai utilizzando. Poiché Apache è l'opzione più popolare, vedremo come abilitarlo usando .htaccess.

    Connettiti al tuo server web usando FTP, quindi crea un file chiamato .htaccess nella directory principale. Modifica il file .htaccess per avere le seguenti impostazioni:

     mod_gzip_on Sì mod_gzip_dechunk Sì mod_gzip_item_include file. (html? | txt | css | js | php | pl) $ mod_gzip_item_include gestore ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *   SetOutputFilter DEFLATE

    Non sei sicuro che la compressione funzioni sul tuo sito web? Provalo con questo strumento.

    questo articolo è stato utile? Ora che stai comprimendo e minificando, le tue pagine web dovrebbero caricarsi più velocemente e usare meno larghezza di banda. Se hai qualche domanda, sentiti libero di chiedere loro di seguito!

    Scopri di più su: HTML, sviluppo Web.