Come comprimere HTML e altri codici di siti Web

Gli utenti del sito Web si aspettano che i contenuti siano di alta qualità e accessibili rapidamente. Questo è importante per un'esperienza utente ottimale. La buona notizia è che con poche righe di codice e alcuni piccoli trucchi, è perfettamente possibile comprimere HTML e altro codice del sito Web dal 40% al 70% (e in alcuni casi anche di più). In questo articolo, ti mostrerò come farlo.

>> Ottimizzazione della velocità della pagina: come migliorare i tempi di caricamento <<

Perché comprimere il codice del sito web?

Ora puoi farti la domanda: perché dovrei comprimere il codice sorgente del mio sito web? Non compresso, dopotutto ha una dimensione di poche centinaia di kilobyte.

La risposta è molto semplice: perché un caricamento più rapido dei siti Web offre una migliore esperienza utente, che a sua volta ha un effetto positivo sul tasso di conversione, sul tempo trascorso sulla pagina, sulle visualizzazioni di pagina e sulla frequenza di rimbalzo. Il tasso di conversione è particolarmente importante, poiché ha un impatto diretto sul successo in settori come l'e-commerce.

Ad esempio, per il gigante dell'e-commerce Amazon, un ritardo di caricamento di 100 ms costa circa l'1% nelle vendite. Proiettato su un intero anno fiscale, ciò comporterebbe costi di circa $ 245 milioni. Questi numeri mostrano l'impatto drastico che può avere la velocità di caricamento di un sito web.

Dovresti anche prendere in considerazione la percentuale di utenti che navigano in Internet da dispositivi mobili. La copertura delle reti wireless LTE e 4G ha ancora molto margine di miglioramento qui. Ciò significa che Internet mobile è spesso piuttosto lento, il che rende ancora più importanti velocità di pagina più elevate.

Un significativo miglioramento del tempo di caricamento può essere ottenuto, ad esempio, utilizzando le tecnologie di compressione Gzip o Deflate. Ciò consente di risparmiare denaro e larghezza di banda.

È possibile comprimere HTML, CSS e JavaScript?

La compressione condensa i dati richiesti al cliente al fine di ridurre i tempi di trasferimento. I due metodi di compressione più comuni sul web sono Gzip e Deflate. Il processo di compressione individua stringhe simili all'interno di un documento e le sostituisce con stringhe temporanee con lo stesso segnaposto.

Pertanto, i due metodi sono ideali per la compressione di file HTML, CSS e JavaScript, poiché spesso contengono molte stringhe identiche e di solito molte righe e spazi vuoti. Entrambi i metodi possono essere implementati o attivati ​​con relativamente poco sforzo.

Come funziona la compressione del codice del sito web

Affinché i dati compressi possano essere trasferiti, il browser del cliente deve prima richiedere la trasmissione compressa dei dati. Questo viene fatto tramite una richiesta HTTP con la specifica "Accetta-Encoding: gzip, deflate". È possibile specificare uno solo o più metodi di compressione e l'esempio accetta sia gzip che sgonfia i dati compressi.

È importante che si tratti solo di una richiesta e non di una richiesta: di conseguenza, il server non deve rispondere con dati compressi. Se i dati non sono disponibili in forma compressa, verranno semplicemente inviati non compressi al cliente richiedente.

Circa il 90% di tutti i browser supporta la compressione. L'influenza sull'impostazione "Accetta codifica" o sui metodi di compressione consentiti del browser di solito non esiste. O il browser supporta la compressione dei dati, oppure no.

Il server risponde alla richiesta HTTP del client con una cosiddetta "risposta HTTP". Se il server supporta la compressione, i dati vengono quindi trasferiti compressi al client. Nell'intestazione della risposta HTTP, il server riporta, ad esempio, "Content-Encoding: gzip". In caso contrario, la risorsa richiesta viene inviata non compressa al client.

Come viene attivata la compressione del codice del sito Web?

A seconda del server, la compressione del codice può essere attivata tramite un apposito file di configurazione.

Figura 1: diagramma della compressione Gzip

Attivazione della compressione del codice tramite .htaccess

Sui server Web conformi a NCSA (ad esempio Apache, che è il server Web più utilizzato), la compressione Gzip può essere installata utilizzando il file di configurazione .htaccess. Per fare ciò, è necessario inserire il seguente codice nel file .htaccess:

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
ImpostaFiltroUscita Sgonfia
</FilesMatch>
</IfModulo>

Innanzitutto, utilizzando "<IfModule mod_deflate.c>" viene eseguito un test per verificare se il modulo di estensione mod_deflate è installato. In tal caso, l'utilizzo di "<FilesMatch"\\.(js|css|html|xml)$">" determinerà per quali tipi di file deve essere applicato il filtro.

L'esempio filtra i file JavaScript, CSS, HTML e XML. Con "SetOutputFilter DEFLATE", viene quindi determinato che tutti i file che corrispondono al modello specificato in precedenza vengono inviati con il filtro DEFLATE. Successivamente il matching e la query del modulo vengono nuovamente chiusi.

In teoria, questo filtro può essere applicato anche ad altri tipi di dati (ad esempio file di immagine .jpg, .gif o .png). La corrispondenza dei file dovrebbe essere adattata come segue:

“<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”

Tuttavia, va notato qui che questi formati sono solitamente già compressi e che la ricompressione spesso porta a una perdita di qualità dei file di immagine. Si consiglia quindi di comprimere i binari (come le immagini) prima di caricarli e di astenersi dal comprimerli usando gzip. Strumenti come JPEGmini o TinyPNG possono essere utilizzati per questo.

Attivazione della compressione del codice tramite PHP

Se non hai accesso al file .htaccess del server, o se vuoi trasferire solo singoli file compressi con gzip, hai la possibilità di abilitare la compressione utilizzando i seguenti codici:

<?php ob_start("ob_gzhandler"); ?>

Se possibile, questa funzione dovrebbe essere posizionata prima del primo codice HTML.

Esempio:

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<corpo>
<p>Questa dovrebbe essere una pagina compressa.</p>
</corpo>
</html>

5 insidie ​​della compressione del codice del sito web

Anche la compressione di codice HTML e altro sito Web può causare errori o rischi. Dovresti pensare ai seguenti punti:

1. Quando si utilizza Gzip tramite https, eventuali falle nella sicurezza possono essere sfruttate. Ciò può causare problemi per i file contenenti informazioni riservate. Non è quindi consigliabile comprimere i tipi di file che contengono informazioni sensibili con Gzip.

2. La compressione deve essere applicata solo a tipi di file o file che non sono già compressi. I file di immagine di solito sono già ridimensionati e quindi non dovrebbero essere ulteriormente compressi da gzip. La ricompressione può anche avere l'effetto opposto e puoi finire con un file di dimensioni maggiori, oppure il processo di compressione occuperà troppa memoria.

3. La compressione deve essere applicata solo a file di dimensioni adeguate. Per i file di dimensioni di pochi byte, la compressione può far sì che il file diventi ancora più grande del file originale.

4. Durante la fase di compressione fare attenzione a non comprimere troppo. Spesso c'è poca differenza nella dimensione del file tra file deboli, normali e fortemente compressi. La compressione media o pesante, tuttavia, richiede una potenza di calcolo notevolmente maggiore.

5. Poiché il processo di compressione sostituisce stringhe identiche o ripetitive, l'uso di variabili e nomi di classi (ad esempio, nei file CSS e HTML) si traduce in un successo di compressione maggiore rispetto a quando tutte le variabili e le classi hanno un nome diverso e quindi ha scarse possibilità di fornire compressione.

Ulteriori misure di ottimizzazione per codici slim

Minimizzare HTML e altre strategie

Per mantenere il codice sorgente chiaro e conciso, gli sviluppatori in genere lavorano con interruzioni di riga, spazi, rientri e altri caratteri che rendono il codice sorgente facile da leggere. Al fine di mantenere meglio il codice sorgente in un secondo momento, costrutti e sezioni particolarmente complicati sono spesso documentati con l'ausilio di commenti.

Ciò che è estremamente utile per lo sviluppatore non è necessario al crawler dei motori di ricerca e pertanto dovrebbe essere rimosso. Tagliare i caratteri non necessari è chiamato "minimizzare" e aiuta a risparmiare byte preziosi. La quantità di byte salvati minimizzando è dimostrata in modo impressionante nell'esempio seguente utilizzando la libreria JavaScript gratuita jQuery.

Mentre il file originale del framework nella versione 2.1.4 ha una dimensione di circa 242 kb (jQuery 2.1.4.js (non compresso)), la dimensione del file ridotta dopo aver rimosso i caratteri e i commenti non necessari è solo di circa 82 kb (jQuery 2.1.4. min.js (compresso)). Solo minimizzando, in altre parole riducendo i caratteri non necessari, la dimensione del file può essere ridotta di circa il 66%. Un risultato notevole.

Codice sorgente prima e dopo il processo di minimizzazione

La minimizzazione funziona per file HTML, CSS e JavaScript.

Inoltre, il file jQuery ridotto può essere ridotto di un ulteriore 65% utilizzando la compressione Gzip. Dai 242kb originali, alla fine ci sono solo 29,5kb incredibili.

Strumenti per la riduzione del codice CSS e JavaScript

Per ridurre il codice CSS, puoi utilizzare, ad esempio, YUI Compressor o cssmin.js. Esistono anche diversi strumenti che possono essere utilizzati per ridurre il codice JavaScript. Google PageSpeed ​​Insights consiglia Closure Compiler, JSMin o YUI Compressor.

Suggerimento: poiché le interruzioni di riga, gli spazi e i commenti utilizzati sono molto importanti per lo sviluppatore e per la manutenzione rapida e semplice, si consiglia di mantenere sia il file nello stato originale (con i caratteri non necessari) sia il file di stato ottimizzato/ridotto . Pertanto il codice può essere facilmente mantenuto, ma per i crawler è anche notevolmente più veloce da scaricare.

Combinazione di file CSS e JavaScript

Capita spesso che diversi file CSS e JavaScript vengano caricati nell'intestazione HTML di un sito web. Ogni volta che vengono richiamati, si tratta di una richiesta HTTP che deve essere elaborata dal browser. I browser moderni possono gestire solo 2-8 richieste HTTP dallo stesso dominio contemporaneamente: tutte le altre richieste dovranno attendere.

Poiché un singolo sito Web può richiedere fino a diverse centinaia di richieste HTTP, ciò crea un enorme collo di bottiglia. Ciò può essere evitato, ad esempio, combinando tutti i file CSS in un unico file e rappresentando così solo una richiesta HTTP.

Lo stesso vale per i file JavaScript caricati tramite l'elemento <script>. Anche in questo caso, dovresti assicurarti che, se tecnicamente possibile, tutti i file JavaScript siano combinati in un unico file.

Va notato che spesso ogni tipo di pagina (ad esempio la parte inferiore di una rivista rispetto alla pagina dei dettagli del prodotto) richiede diverse funzioni JavaScript e quindi diversi file JavaScript. In questo caso, ha senso caricare solo i file JavaScript e CSS effettivamente necessari per tipo di pagina. Raggruppare tutti i file JavaScript in uno solo può avere degli svantaggi in questo caso.

Inoltre, l'uso di sottodomini o di una rete di distribuzione dei contenuti (CDN) può avere senso. Gli script e le risorse che non sono necessari immediatamente possono essere ricaricati con AJAX.

Riepilogo sulla compressione del codice del sito web

Fornendo i dati del sito Web utilizzando Gzip o Deflate, è possibile ottenere un significativo miglioramento del tempo di caricamento. Entrambi i metodi sono ottimi per comprimere file HTML, CSS e JavaScript. Inoltre, la minimizzazione è un altro modo utile per mantenere il codice snello.

Poiché i crawler dei motori di ricerca non hanno bisogno delle utili interruzioni di riga, dei rientri e così via dello sviluppatore nel codice sorgente, puoi ridurre questi caratteri non necessari. Ci sono anche strumenti utili che riducono CSS e codice JavaScript. Questo può anche salvare molti byte.

Per evitare che un sito Web necessiti di troppe richieste HTTP, i file CSS e JavaScript possono essere raggruppati insieme. Questi costituiscono solo una richiesta HTTP, che consente di risparmiare risorse aggiuntive.

Di conseguenza, anche con poche righe di codice e piccoli interventi sul sito web, si può ottenere un ottimale snellimento del codice. Poiché il tempo di caricamento del sito Web è un importante fattore SEO e di ranking, ogni webmaster dovrebbe affrontare questo problema nel tempo.

La compressione del codice del sito Web garantisce una migliore esperienza utente che ha un impatto positivo su altre metriche, come il tasso di conversione o la durata del soggiorno. Questo a sua volta rappresenta un aspetto importante per il successo dell'intera azienda e porta a utenti soddisfatti.