Ridurre HTML, CSS e JavaScript: è semplicissimo in WordPress

Sven Scheuerle Ultimo aggiornamento 21.10.2020
9 Min.
minificazione css
Ultimo aggiornamento 21.10.2020

La minimizzazione dei file HTML, CSS e JavaScript è uno dei tanti piccoli aggiustamenti per ottimizzare la velocità di caricamento del tuo sito web. In questo articolo Sven spiegherà in cosa consiste la minimizzazione di CSS, HTML e Co., quanto tempo di caricamento si risparmia utilizzando un codice snello e quali plugin di WordPress ti aiuteranno nell'attuazione.

Se guardi i siti web sul World Wide Web oggi, ti renderai subito conto che non sono in alcun modo paragonabili ai siti di 10 anni fa. All'inizio bastava un semplice codice HTML e un po' di testo. Al giorno d'oggi, tuttavia, i siti web sono costituiti da un'ampia gamma di codici, spesso composti da HTML, CSS e JavaScript. Ciò è dovuto in parte alla gamma di funzioni che sono ora disponibili per i siti web, ma anche ai sempre più diversi design e template che vengono utilizzati nel web design. 

Quindi non è raro che i file HTML, CSS o JavaScript crescano rapidamente fino a centinaia di kilobyte. Per elaborare tutti questi codici nei file e poter visualizzare il sito web, il browser web invia al server numerose richieste (le cosiddette richieste HTTP). 

Più richieste vengono inviate, più lungo è il tempo di caricamento. Per mantenere il numero di richieste il più basso possibile, e quindi il tempo di caricamento del sito web, è necessario unire e comprimere i file.  

Cosa significa minimizzazione di HTML, CSS e JavaScript?

La minimizzazione - cioè riduzione delle dimensioni dei file HTML, CSS, ecc. il più possibile - fa parte di ogni buona ottimizzazione OnPage. Anche se rappresenta solo una piccola parte dei tempi di caricamento, può essere decisivo anche per il tuo ranking nei motori di ricerca. 

WordPress non è famoso per avere dei tool per l'ottimizzazione del tempo di caricamento. Pertanto si dovrebbero controllare regolarmente le prestazioni del tuo sito WordPress.

Riduzione dei tempi di caricamento

Qualsiasi proprietario di un sito web che ha usato uno strumento come PageSeepd Insights di Google è quasi certamente familiare con questo suggerimento di ottimizzazione: "Riduci i CSS".

Questa misura è raccomandata da PageSpeed Insights se le richieste di recuperare i file CSS influenzano fortemente il tempo di caricamento del sito web. Una spiegazione dettagliata e le spiegazioni di altri messaggi nello strumento, è possibile trovare nell'articolo"Google Pagespeed - I messaggi di errore più importanti". 

Come la riduzione dei CSS può influenzare il tempo di caricamento del tuo sito web, vorrei mostrarti con un diagramma a cascata dal mio blog bloggiraffe.de. Gli esempi sono solo piccole sezioni, ma mostrano chiaramente come il tempo di caricamento può essere ridotto.

Esempio 1 - Non compresso (non ridotto):

css ricompresso
Grafico a cascata - senza compressione di file HTML, CSS e JavaScript

Esempio 2 - Compresso (ridotto):

css compresso
Diagramma a cascata - con compressione dei file HTML, CSS e JavaScript

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 si comprimono i file HTML, CSS e JavaScript? 

Come menzionato brevemente nell'articolo, la compressione di file come HTML, CSS e JavaScript, combina i singoli file in un unico file. 

Di conseguenza, il browser che si utilizza per accedere ad un determinato sito web deve inviare meno richieste al server per visualizzare il sito web 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: dite in anticipo al supermercato di quali prodotti avete bisogno. Il supermercato ti fornisce i prodotti su uno scaffale in modo che tu debba solo metterli nel carrello e pagare alla cassa. 

Risultato: Compilando tutti i prodotti all'interno di un solo scaffale, si deve percorrere una sola strada attraverso il supermercato e quindi si risparmia un'incredibile quantità di tempo. Questo funziona allo stesso modo con la minificazione dei singoli codici e script del tuo sito web. Affinché possiate vedere come funziona il tutto nella pratica, vorrei mostrarvelo con piccoli esempi. 

L'economia dei dati non aiuta solo l'ottimizzazione delle prestazioni.
Perché un uso consapevole delle risorse contribuisce anche a rendere il tuo sito web più sostenibile. Leggi gli articoli sugli argomenti Quanto è verde WordPress ? e Green Hosting.

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. 

Per esempio, un codice HTML standard assomiglia a questo: 

 <!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>

Compresso: 

 <!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. 

Per esempio, un codice CSS standard assomiglia a 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;
}

Compresso:

 /* 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 che è stato originariamente sviluppato per l'output di HTML dinamico nei browser web(wikipedia.org). Con questo, i gestori di siti web oggi hanno la possibilità di utilizzare HTML e CSS in modo esteso. 

Un codice JavaScript standard (wiki.selfhtml.org) si presenta così, per 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);

Compresso: 

 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 potete vedere molto bene come funziona la minificazione del codice HTML, CSS e JavaScript. Come utente avanzato e professionale, puoi anche eseguire questa compressione manualmente e usare uno strumento come linkcode-generator.de. Come utente di WordPress , lo speciale "Minify Plugins" può fare questo lavoro per voi. Questo non solo fa risparmiare tempo, ma funziona anche in modo completamente automatico.

5 plugin Minify per WordPress

Nella seguente lista, ho elencato cinque popolari plugin di minimizzazione che fanno il lavoro di compressione di HTML, CSS e JavaScript per te 

#1 Merge + Minify + Refresh

unire minificare aggiornare

Come il nome del Plugins Unisci + Minify + Refresh (Merge + Minify + Refresh) dice, il focus di questo strumento è interamente sulla compressione dei CSS e del codice JavaScript. 

Questo plugin combina i Cascading Style Sheets (CSS) e i file Javascript in singoli gruppi. Questi a loro volta vengono minimizzati con Minify per CSS e Google Closure per JavaScript. 

Dopo l'installazione in WordPress il Plugin Merge + Minify + Refresh ti offre alcune impostazioni per ottimizzare il tempo di caricamento del tuo sito web.

unire minify refresh wordpresspng

Tra le altre cose, qui si può scegliere se i file CSS e i file JS debbano essere uniti o meno. Inoltre, se la compressione debba essere effettuata da WP-Cron e se i dati debbano essere memorizzati in cache all'esterno o compressi all'interno di un file gzip. 

Una funzione molto utile è il cosiddetto "HTTP2 Server Push". Qui il server invia diverse risposte per una sola query al browser corrispondente. 

Le 3 funzioni più importanti di Merge + Minify + Refresh Plugins: 

  • unione / compressione di CSS e JavaScript
  • HTTP2 Server Push
  • capacità di multisite

#2 WP Super Minify

wp super minify

Con il Plugin WP Super Minify può essere usato per ridurre e mettere in cache i file CSS e JavaScript. Il caricamento accelerato di questi file è successivamente abilitato tramite Minify PHP Framework. 

La cosa speciale di questo plugin è che è un software open source. Il codice sorgente del tool è quindi aperto e può essere ulteriormente sviluppato da qualsiasi utente.

Nelle impostazioni di WP Super Minify non c'è molta scelta per gli utenti. Si possono vedere solo le impostazioni per la compressione di JavaScript e CSS.

wp super minif wordpress

Caratteristiche principali di WP Super Minify Plugins: 

  • Compressione / riduzione dei file CSS e Javascript
  • Minify PHP Framework

#3 Fast Velocity Minify

velocità veloce minify

Il Plugin Velocity Minify veloce permette l'ottimizzazione del tempo di caricamento per gli sviluppatori e gli utenti avanzati. Riduce le richieste HTTP unendo i file CSS e javascript da una parte, e minimizza i file con PHP Minify dall'altra. 

Nel backend di WordPress, dopo l'installazione del plugin Minify, troverai numerose opzioni di impostazione, che possono essere un po' impegnative per alcuni utenti. La cosa buona è che molte impostazioni di default sono già predefinite, quindi per i principianti basta attivare il plugin. 

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

velocità veloce minificare wordpress

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
  • Supporto WP CLI
  • Compatibilità con una varietà di plugin di cache

#4 Autoptimize

autoptimize

Il WordPress -Plugin Autoptimize vi offre la semplice ottimizzazione del vostro sito web. Con pochi semplici passi potete comprimere i file HTML, CSS e JavaScript e quindi accelerare il tempo di caricamento della vostra pagina. 

In questo modo il Autoptimize-Plugin sposta gli script nel footer, per esempio, e ritarda il caricamento di file come HTML, CSS e JavaScript, o molti altri file come Google Fonts.

Importante per i clienti di RAIDBOXES

Autoptimize non è compatibile con altre cache, ad esempio con la cache del server RAIDBOXES . Sconsigliamo quindi vivamente l'uso di Autoptimize sul nostro sistema!

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.

autoptimize wordpress

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 del menu "Extra" è possibile effettuare ulteriori ottimizzazioni automatiche, ad es. per Google Fonts, per Emojis e per il caricamento di file tramite domini di terzi. 

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

#5 WP Speed of Light

wp velocità della luce

Il Plugin WP Velocità della luce è anche un WordPress -Plugin, che combina file HTML, CSS e JavaScript. Il potente Plugin ha anche cache e compressione gzip, sistema di pulizia del database e anche ottimizzazione htacces. 

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

wp velocità della luce wordpress

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 backend 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

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
AutoptimizeWP Velocità
di luce
Gratuito
Adatto perPrincipiantePrincipianteavanzatI + professionistiprincipianti + avanzatiprincipianti + avanzati
Compressione HTMLnono
Compressione CSS
Compressione JavaScript
Valutazione4/53/54/55/54/5

Conclusione

La riduzione dei file HTML, CSS o JavaScript può aumentare il tempo di caricamento del tuo sito web di alcuni millisecondi. È possibile scegliere tra una serie di plugin di WordPress gratuiti e molto utili. 

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.

Immagine contribuita: Paula Schmidt | Unsplash

Libero professionista e affiliato marketing per passione, è attivo nel marketing online da molti anni. Inoltre, è un blogger e scrive regolarmente sul suo blog BLOGGGiraffe.de, sul lavoro autonomo nel business online e dà ai suoi lettori consigli e suggerimenti.

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.