Annuncio pubblicitario

Se gestisci un sito Web, dovresti già sapere come usa i giusti formati di immagine e ottimizza le tue immagini per il web 10 strumenti di immagini batch online gratuiti per ridimensionare, convertire e ottimizzareHai bisogno di strumenti di modifica in gruppo quando hai molte foto da elaborare e pochissimo tempo. Ti presentiamo i migliori ridimensionatori, ottimizzatori o convertitori batch 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 ne valgono la pena.

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

Compressione vs. minification

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

minification

Puoi pensare alla minificazione come alla rimozione di caratteri e righe 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:

Questa è un'intestazione
Inviami una mail a [email protected].
Questo è un nuovo paragrafo!
Questo è un nuovo paragrafo in grassetto e corsivo.

Pagina HTML di esempio, minimizzata:

Questa è un'intestazione
Inviami una mail a [email protected].
Questo è un nuovo paragrafo!
Questo è un nuovo paragrafo in grassetto e corsivo.

Dimensioni originali: 354. Dimensione minima: 272. Risparmi: 82 (23,16%).

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

Negli anni 2000, gli strumenti di minificazione erano rari. Hai dovuto minimizzare manualmente i file ogni volta che qualcosa è cambiato. Poiché i file HTML cambiano più frequentemente dei file JS e CSS, era semplicemente troppo noioso minimizzare ogni volta. 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 i contenuti 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 la compressione è abilitata nelle impostazioni del tuo server), quindi il browser del visitatore può decomprimere la pagina allo stato originale.

Lo schema di compressione più comune è GZIP, che è un formato di file che utilizza a algoritmo di compressione senza perdita Come funziona la compressione dei file?Come funziona la compressione dei file? Impara le basi della compressione dei file e la differenza tra compressione lossy e lossless. Leggi di più chiamato DEFLATE.

L'algoritmo cerca ricorrenze ripetute di testo nel file HTML, quindi sostituisce quelle ricorrenze ripetute con riferimenti a un'occorrenza precedente. Ogni riferimento è semplicemente due numeri: quanto è lontano il riferimento e quanti caratteri stiamo facendo riferimento.

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.

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 ha cinque caratteri dietro e cinque caratteri:

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

Ma in questo caso, l'algoritmo riconosce che la ricorrenza 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 rendersi conto che i prossimi tre caratteri sono i primi tre caratteri nel riferimento, quindi si estende per tre:

Blah b [5,18].

Ora pensa a un tipico file HTML e a quanta ripetizione esiste all'interno. Quasi ogni tag, come ad esempio, ha un tag di chiusura corrispondente, come. Inoltre, molti tag sono ripetuti ovunque, come ad esempio, , ,, eccetera. Anche gli attributi vengono ripetuti spesso, incluso classe, href, e src. È facile capire perché la compressione GZIP è così efficace con HTML.

L'unico aspetto negativo è 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 è molto preoccupante al giorno d'oggi, è quasi sempre meglio abilitare GZIP che andare senza, anche se hai un web hosting entry-level I migliori servizi di web hosting: condivisi, VPS e dedicatiCerchi il miglior servizio di web hosting per le tue esigenze? Ecco i nostri migliori consigli per il tuo blog o sito Web. Leggi di più .

Perché dovresti comprimere e minimizzare

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

Carichi di pagina più rapidi

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 percento, per una potenziale riduzione fino al 10 percento. Ciò si traduce direttamente in tempi di caricamento della pagina più rapidi.

Meno larghezza di banda utilizzata

Supponiamo che tu abbia 10 file, ognuno ridotto da 50 KB a 45 KB per un restringimento totale di 50 KB. Supponiamo che il tuo sito web offra una media di 1.000 visitatori ogni giorno, dove 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, la minificazione HTML è utile da sola, specialmente quando il tuo sito cresce, i file diventano più grandi e il traffico aumenta. Nota che Linee guida di Google Page Speed consiglia di minimizzare l'HTML, quindi se sei scettico, lascia che ti convinca altrimenti.

Ma la cosa grandiosa dell'ottimizzazione HTML è che non devi scegliere minimizzazione o compressione. Puoi fare entrambe le cose! In effetti tu dovrebbero Fai entrambi.

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

Oltre ai risparmi sulla larghezza di banda, ogni pagina si carica molto più velocemente perché il browser dell'utente finale deve scaricare solo 13,5 KB contro 50 KB per pagina.

Come comprimere e minimizzare HTML

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

Plugin di WordPress

Se gestisci un sito WordPress, tutto ciò che devi fare è installare un plug-in e puoi trarre vantaggio sia dalla compressione che dalla minimizzazione.

La maggior parte dei plug-in di cache fanno molto di più che semplicemente memorizzare nella cache le pagine. Per esempio, WP Cache più veloce e W3 cache totale entrambi hanno impostazioni con un clic che consentono di attivare la minificazione 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 solo vuoi minificazione, ti consigliamo il Minimizza HTML collegare. È semplice, supporta HTML / CSS / JS e ti consente di modificare un po 'il metodo di minificazione (ad es. Se rimuovere http: e https: dagli URL).

Minificatori HTML statici

Se i tuoi file HTML sono statici (ovvero non generati dinamicamente da un CMS o da un framework Web), puoi mantenere due set di file HTML: un set "sorgente", che non è minificato per una facile modifica, e un set "minimizzato", che si crea ogni volta che si modifica un file sorgente.

Per minimizzare, utilizzare uno di questi strumenti:

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

Questa è una tecnica praticabile se ti sei allontanato da CMS come WordPress e ora lo usi generatori di siti statici 7 motivi per abbandonare il tuo CMS e considerare un generatore di sito staticoPer molti anni, pubblicare un sito Web è stato difficile per molti utenti. CMS come WordPress lo hanno cambiato, ma possono ancora essere fonte di confusione. Un'altra alternativa è un generatore di sito statico. Leggi di più .

Abilita compressione GZIP

I passaggi per abilitare la compressione GZIP possono variare in base al software del server web che stai utilizzando. Poiché Apache è l'opzione più popolare, tratteremo 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 Sì mod_gzip_dechunk Sì file mod_gzip_item_include. (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 11 Strumenti utili per controllare, pulire e ottimizzare i file CSSVuoi migliorare il tuo codice CSS? Questi correttori e ottimizzatori CSS aiuteranno a migliorare il codice CSS, la sintassi e minimizzare le tue pagine web. Leggi di più .