Come funziona HTML compresso e perché potresti averne bisogno

Come funziona HTML compresso e perché potresti averne bisogno

Se gestisci un sito web, dovresti già sapere come farlo usa i giusti formati di immagine e ottimizza le tue immagini per il web. 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 procedere.



Compressione contro minimizzazione

Per quanto riguarda l'ottimizzazione dei file HTML, esistono due metodi principali: compressione e minificazione . Sembrano simili in superficie, ma in realtà sono due tecniche distinte, quindi non confonderle.





minificazione

Puoi pensare alla minificazione come alla rimozione di caratteri e linee non necessari nel codice sorgente. Pensa a rientri, commenti, righe vuote, ecc. Nessuno di questi è richiesto in HTML: esistono per rendere il file più facile da leggere. Il taglio di questi dettagli può ridurre le dimensioni del file senza influire su nulla.

Pagina HTML di esempio:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Formato originale: 354. Formato ridotto: 272. Risparmio: 82 (23,16%).

Molti sviluppatori web e proprietari di siti riservano la minimizzazione solo per i file JS e CSS, ma questa pratica obsoleta è un errore. Anche la minimizzazione dell'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 dei file JS e CSS, era semplicemente troppo noioso minimizzare 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 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 a Algoritmo di compressione senza perdita di dati chiamato DEFLATE.

L'algoritmo cerca le occorrenze ripetute del testo nel file HTML, quindi le sostituisce con i riferimenti a un'occorrenza precedente. Ogni riferimento è semplicemente due numeri: quanto indietro è il riferimento e quanti caratteri stiamo facendo riferimento.

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

Blah blah blah blah blah.

L'algoritmo riconosce la seguente ripetizione:

B{lah b}{lah b}{lah b}{lah b}lah.

La prima occorrenza è 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 lunga:

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 del 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 rendersi conto che i successivi tre caratteri sono i primi tre caratteri nel riferimento, quindi si estende di tre:

Blah b[5,18].

Ora pensa a un tipico file HTML e a quanta ripetizione esiste all'interno. Quasi tutti i tag, come

, ha un tag di chiusura corrispondente, come

. Inoltre, molti tag vengono ripetuti ovunque, come ad esempio

,

,

,

  • , ecc. Anche gli attributi vengono ripetuti spesso, tra cui

    class

    ,

    href

    , e

    src

    . È facile capire perché la compressione GZIP è così efficace con l'HTML.

    L'unico inconveniente è 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 è un grosso problema al giorno d'oggi, è quasi sempre meglio abilitare GZIP piuttosto che farne a meno, anche se si dispone di un web hosting entry-level.

    Perché dovresti comprimere e minimizzare

    Ci sono due vantaggi principali, entrambi cruciali nell'odierno panorama del Web mobile-heavy.

    Caricamenti di pagine più veloci

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

    Minore larghezza di banda utilizzata

    Supponiamo che tu abbia 10 file, ciascuno minimizzato da 50 KB a 45 KB per un restringimento totale di 50 KB. E supponiamo che il tuo sito web serva una media di 1.000 visitatori ogni giorno, dove ogni visita ha una media di dieci pagine. La minimizzazione HTML da sola riduce l'utilizzo della larghezza di banda di 50 MB al giorno (1,5 GB al mese).

    Compressione + Minimizzazione

    Come puoi vedere, la minimizzazione HTML è utile da sola, soprattutto quando il tuo sito diventa più grande, i file diventano più grandi e il traffico aumenta. Notare che Linee guida PageSpeed ​​di Google consiglia di minimizzare l'HTML, quindi se sei scettico, lascia che ti convinca del contrario.

    come estrarre i file dal vecchio disco rigido

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

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

    E oltre al risparmio di larghezza di banda, ogni pagina viene caricata notevolmente più velocemente perché il browser dell'utente finale deve scaricare solo 13,5 KB rispetto a 50 KB per pagina.

    Come comprimere e minimizzare l'HTML

    Fortunatamente, nessuno dei due è molto difficile in questi giorni e non hai bisogno di molto know-how tecnico per configurarli.

    Plugin WordPress

    Se gestisci 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. Per esempio, WP Cache più veloce e Cache totale W3 entrambi hanno impostazioni con un clic che ti consentono di attivare la minimizzazione HTML e la compressione GZIP, tra le altre funzionalità che accelerano ulteriormente il caricamento delle pagine e riducono l'utilizzo della larghezza di banda.

    Se tu soltanto vuoi la minimizzazione, ti consigliamo il Minimizza HTML collegare. È semplice, supporta HTML/CSS/JS e consente di modificare leggermente il metodo di minificazione (ad esempio se rimuovere

    http:

    e

    https:

    dagli URL).

    Minificatori HTML statici

    Se i tuoi file HTML sono statici, (cioè non generati dinamicamente da un CMS o da un framework web), allora puoi mantenere due insiemi di file HTML: un set 'sorgente', che non è minimizzato per una facile modifica, e un set 'minificato', che crei ogni volta che apporti una modifica a un file sorgente.

    Per minimizzare, usa uno di questi strumenti:

    Questa è una tecnica praticabile se ti sei allontanato da CMS come WordPress e ora utilizzi generatori di siti statici.

    Abilita la compressione GZIP

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

    Connettiti al tuo server web tramite FTP, quindi crea un file chiamato

    .htaccess

    nella directory principale. Modifica il file .htaccess per avere le seguenti impostazioni:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^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 .

    Per la massima efficienza, dovresti anche scopri come controllare, pulire e ottimizzare il tuo CSS .

    Condividere Condividere Tweet E-mail Dovresti eseguire l'aggiornamento a Windows 11 immediatamente?

    Windows 11 arriverà presto, ma dovresti aggiornare il prima possibile o aspettare qualche settimana? Scopriamolo.

    Leggi Avanti     Argomenti correlati
    • Programmazione
    • HTML
    • Sviluppo web
    Circa l'autore Joel Lee(1524 Articoli Pubblicati)

    Joel Lee è l'editore capo di MakeUseOf dal 2018. Ha un B.S. in Informatica e oltre nove anni di esperienza professionale di scrittura e modifica.

    Altro da Joel Lee

    Iscriviti alla nostra Newsletter

    Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

    Clicca qui per iscriverti