Ridurre HTML, CSS e JavaScript è una delle tante piccole leve per ottimizzare la velocità di caricamento del tuo sito web. Se guardi le varie pagine del web oggi, ti rendi subito conto che non sono in alcun modo paragonabili ai siti web di 10 anni fa. All'inizio bastava un semplice codice HTML e un po' di testo. Oggi, invece, i siti web sono costituiti da un codice esteso, che spesso include HTML, CSS e JavaScript. Questo è dovuto da un lato alla gamma di funzioni disponibili per i siti web, ma anche ai design e ai modelli sempre più ampi che vengono utilizzati nel web design. 

Non è raro che i file HTML, CSS o JavaScript abbiano dimensioni di centinaia di kilobyte. Per elaborare tutto questo codice nei file e visualizzare il sito web, il browser web invia numerose richieste (le cosiddette richieste HTTP) al server. 

WordPress in particolare non è noto per i suoi strumenti di ottimizzazione dei tempi di caricamento. Per questo motivo, dovresti controllare regolarmente le prestazioni del tuo sito web WordPress.

Più "richieste" vengono inviate, più lungo sarà il tempo di caricamento. Per mantenere il numero di richieste il più basso possibile, e quindi anche il tempo di caricamento del sito web, dovresti comprimere i file e unirli se necessario.

Cosa significa minificare?

Minificazione significa che tutti gli elementi creati per la leggibilità del codice (ad esempio interruzioni di riga, spazi, rientri, punti e virgole non necessari e commenti) vengono rimossi dal file al fine di ridurne le dimensioni. Questo include anche la conversione delle espressioni più complesse in espressioni più semplici. Anche gli identificatori delle variabili possono essere abbreviati, ad esempio sostituendo la variabile numberOfButtons con n.

L'effetto della minificazione varia molto, ovviamente, a seconda di quanti di questi elementi sono stati inclusi nella stesura del codice, ma la dimensione del file viene solitamente ridotta di un valore compreso tra il 20 e il 40%, il che può essere comunque rilevante per il posizionamento sui motori di ricerca. La minimizzazione ha sempre senso e raramente porta a problemi.

Cosa significa comprimere?

Il codice viene compresso utilizzando la codifica gzip sul lato server. 

In questo caso, le stringhe che sono già apparse in precedenza vengono sostituite da un puntatore. Questi puntatori hanno un contenuto molto più ridotto rispetto alla stringa vera e propria. Questo perché non è più una stringa per il browser, ma un riferimento alla stringa precedente. L'intestazione della risposta HTTP conterrà quindi "content-encoding: gzip". L'effetto della compressione è estremo: puoi ridurre le dimensioni del file a circa il 20% delle dimensioni originali.

Riduzione dei tempi di caricamento

Se hai mai usato uno strumento come PageSpeed Insights Se sei un utente di Google, conoscerai sicuramente questo suggerimento per l'ottimizzazione: "Minify CSS".

Questa misura è consigliata da PageSpeed Insights se le richieste di recupero dei file CSS influenzano fortemente il tempo di caricamento del sito web. Una spiegazione dettagliata e le spiegazioni di altri messaggi dello strumento sono disponibili nell'articolo"Google Pagespeed - I messaggi di errore più importanti". 

Vorrei mostrarti come la riduzione dei CSS può influenzare il tempo di caricamento del tuo sito web utilizzando un diagramma a cascata tratto dal mio blog bloggiraffe.de. Gli esempi sono solo piccole sezioni, ma mostrano chiaramente come sia possibile ridurre i tempi di caricamento.

Esempio 1 - Non compresso:

Esempio 2 - Compresso (ridotto):

Già quando si recupera il dominio principale, si può vedere che sono stato in grado di ridurre il tempo di caricamento da 1233 millisecondi a 860 millisecondi. Anche i tempi di caricamento dei singoli file potrebbero essere ridotti al minimo in alcuni casi.

Cosa succede quando i file CSS e JavaScript vengono uniti? 

Come accennato brevemente nell'articolo, quando si uniscono i file CSS e JS, i singoli file vengono uniti in un unico file. 

Ciò significa che il browser, attraverso il quale richiami un determinato sito web, deve inviare meno richieste al server per poter visualizzare il sito e caricare gli script necessari.

Un esempio quotidiano per capire

Immagina di andare al supermercato e di avere 10 prodotti sulla tua lista della spesa. Ma si trovano in corridoi e scaffali diversi. 

Conseguenza: ci vuole una quantità incredibile di tempo per trovare ogni singolo prodotto e metterlo nel carrello. 

Soluzione: comunica in anticipo al supermercato i prodotti di cui hai bisogno. Il supermercato ti fornisce i prodotti su uno scaffale in modo che tu debba solo metterli nel carrello e pagare alla cassa. 

Risultato: raggruppando tutti i prodotti all'interno di un unico scaffale, dovrai percorrere un solo percorso all'interno del supermercato, risparmiando così un'incredibile quantità di tempo. Funziona in modo simile alla combinazione di singoli codici e script sul tuo sito web. Per farti capire come funziona nella pratica, vorrei mostrarti alcuni piccoli esempi. 

Il salvataggio dei dati non solo aiuta a ottimizzare le prestazioni.
Anche un uso consapevole delle risorse contribuisce a rendere il tuo sito web più sostenibile. Leggi gli articoli sugli argomenti Quanto è verde WordPress? e Web design sostenibile.

Con alcune configurazioni, ad esempio combinazioni di plugin e temi, l'unione dei file CSS e soprattutto dei file JavaScript può purtroppo causare problemi. Anche il valore LCP o altri valori di Web Vitals possono essere influenzati negativamente.

Se l'unione ha un effetto positivo sul tuo sito o se comporta dei problemi è una cosa che dovrai semplicemente testare alla fine. Non preoccuparti, puoi invertire l'impostazione in qualsiasi momento.

HTML

L'HTML (Hypertext Markup Language) è necessario per la struttura di base di un sito web. CosÌ vengono emessi i testi, i link o anche le immagini. 

Ad esempio, un codice HTML standard si presenta così: 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Minificato:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

Il CSS (Cascading Style Sheets) non è un vero e proprio linguaggio di programmazione. Tuttavia, il cosiddetto style sheet language viene utilizzato per modificare l'aspetto dei singoli elementi del sito web. 

Ad esempio, un codice CSS standard si presenta come questo: 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Minificato:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript è un linguaggio di scripting puro originariamente sviluppato per l'output di HTML dinamico nei browser web(wikipedia.org).

Un codice JavaScript standard (wiki.selfhtml.org) si presenta così, ad esempio:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Minificato:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Con l'aiuto degli esempi precedenti, puoi vedere chiaramente come funziona la minificazione del codice HTML, CSS e JavaScript. Gli utenti più esperti e professionali possono anche effettuare questa compressione manualmente utilizzando uno strumento come linkcode-generator.de. Speciali "plugin di minificazione" o minificatori possono fare questo lavoro per te. Questo non solo fa risparmiare tempo, ma funziona anche in modo completamente automatico.

4 Plugin Minify per WordPress

Nella seguente lista ho elencato cinque popolari plugin di minificazione che eliminano il lavoro di compressione di HTML, CSS e JavaScript. 

#1 Ottimizzazione automatica

Il plugin di WordPress Ottimizzazione automatica ti offre una semplice ottimizzazione del tuo sito web. Con pochi semplici passaggi, puoi comprimere i file HTML, CSS e JavaScript e accelerare così i tempi di caricamento del tuo sito web. 

Autoptimize sposta gli script nel footer, ad esempio, e ritarda il caricamento di file come HTML, CSS e JavaScript, o di molti altri file come i Google Fonts.

Una volta che hai installato il plugin in WordPress, troverai diverse schede nelle impostazioni come "JS, CSS, HTML", "Immagini" e "Extra". Qui le singole possibilità e opzioni sono descritte molto bene e sono anche molto facili da capire per tutti.

Nella scheda "JS, CSS & HTML" si possono scegliere diverse opzioni di ottimizzazione per i file JavaScript, CSS e HTML. La scheda "Immagini" consente di ottimizzare automaticamente le immagini e di ritardare il caricamento dei file immagine. 

Alla voce di menù "Extra" è possibile effettuare ulteriori ottimizzazioni automatiche, ad esempio per Google Fonts, per le emoji e per il caricamento di file tramite domini di terze parti. 

Le funzioni più importanti di Autoptimize: 

• Minimizzazione / cache di file HTML, CSS e JavaScript
• Ottimizzazione delle immagini
• Rimozione di Google Fonts
• Rimozione di Emojis
• Sincronizzazione di JavaScript
• Compatibilità con una varietà di plugin di cache

#2 WP Super Minify

Con il plugin WP Super Minify I file CSS e JavaScript possono essere ridotti di dimensioni e messi in cache. Il caricamento accelerato di questi file è reso possibile dal framework PHP Minify. 

La particolarità di questo plugin è che è un software open source. Il codice sorgente dello strumento è quindi aperto e può essere ulteriormente sviluppato da tutti.

Non ci sono molte opzioni nelle impostazioni di WP Super Minify. Puoi vedere solo le impostazioni per la compressione di JavaScript e CSS.

Caratteristiche principali di WP Super Minify plugin: 

• Compressione/riduzione dei file CSS e JavaScript
• Quadro PHP Minify

#3 Velocity Minify veloce

Il plugin Velocità veloce Minify consente di ottimizzare i tempi di caricamento per gli utenti avanzati. Da un lato riduce le richieste HTTP unendo i file CSS e JavaScript, dall'altro minimizza i file con PHP Minify. 

Dopo aver installato il plugin Minify, troverai numerose opzioni di impostazione nel back end di WordPress, che per alcuni potrebbero essere un po' eccessive. L'aspetto positivo è che molte impostazioni predefinite sono già predefinite, in modo che sia sufficiente per i non professionisti attivare il plugin. 

Per gli utenti avanzati, il plugin Fast Velocity Minify offre molti espedienti e opzioni di ottimizzazione.

Inoltre, questo plugin offre anche una versione Pro. In questa versione sono disponibili funzioni per l'esclusione di vari file CSS e JavaScript. 

Le caratteristiche principali di Fast Velocity Minify: 

• Compressione / riduzione di file HTML, CSS e JavaScript
• PHP Minify
• Esclusione di file e script
• File di cache statici
• WP-CLI Supporto
• Compatibilità con una varietà di plugin di cache

#4 WP Velocità della luce

Il plugin WP Velocità della luce è un plugin per WordPress che combina file HTML, CSS e JavaScript. Il potente plugin dispone anche di cache e compressione Gzip, di un sistema di pulizia del database e dell'ottimizzazione di htacces. 

Nella versione gratuita di WP Speed of Light sono disponibili tutte le funzioni standard per l'ottimizzazione del tuo sito web. Nelle impostazioni del plugin, puoi selezionare i singoli gruppi (HTML, CSS, JavaScript) che vuoi minimizzare e combinare.

Inoltre, la versione Pro del plugin ha alcune funzioni in più, come l'esclusione o lo spostamento di script. 

WP Speed of Light offre oltre alla pura compressione dei file molte altre funzioni, che puoi usare in modo semplice attraverso il back end chiaramente organizzato. 

Ecco le funzioni più importanti del plugin: 

• Compressione di file HTML, CSS e JavaScript
• Cache e compressione gzip
• Tool di gruppo
• Pulizia del database
• Ottimizzazione delle immagini

I plugin a diretto confronto

	Unisci + Riduci + Aggiorna	WP Super Minify	Velocità veloce Minify	Autoptimize	WP Velocità di luce
Gratuito	Sì	Sì	Sì	Sì	Sì
Adatto per	Principiante	Principiante	avanzatI + professionisti	principianti + avanzati	principianti + avanzati
Compressione HTML	no	no	Sì	Sì	Sì
Compressione CSS	Sì	Sì	Sì	Sì	Sì
Compressione JavaScript	Sì	Sì	Sì	Sì	Sì
Valutazione	4/5	3/5	4/5	5/5	4/5

Conclusione

Ridurre i file HTML, CSS o JavaScript può aumentare il tempo di caricamento del tuo sito web di qualche millisecondo. WordPress offre una serie di plugin molto utili e gratuiti per questo scopo. 

Anche se si tratta di una piccola parte dell'ottimizzazione OnPage, dovrebbe sempre essere ricontrollata. In questo modo sarai sicuro che il tempo di caricamento del tuo sito web non sia influenzato negativamente dai suddetti file.