Ridurre HTML, CSS e JavaScript: è semplicissimo in WordPress

9 Min.
css minificazione
Ultimo aggiornamento il 02/09/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.

RB Performance E Book Newsletter 02

Riduzione dei tempi di caricamento

Ogni operatore di un sito web che ha già utilizzato un tool come PageSeepd Insights di Google, conosce con certezza questo suggerimento di ottimizzazione: "Ridurre i CSS

Questa misura è raccomandata da PageSpeed Insights quando le richieste (requests) per recuperare i file CSS hanno una forte influenza sul tempo di caricamento del sito web. Puoi trovare una spiegazione dettagliata e spiegazioni su ulteriori notifiche nel tool 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 mostrartelo con un diagramma a cascata del mio blog bloggiraffe.com Negli esempi si tratta solo di piccole sezioni, ma che mostrano chiaramente come il tempo di caricamento può essere ridotto.

Esempio 1 - Non compresso (non ridotto):

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

Esempio 2 - Compresso (ridotto):

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

Già durante il recupero del dominio principale si può vedere che sono riuscito a ridurre il tempo di caricamento da 1233 millisecondi a 860 millisecondi. Anche i tempi di caricamento dei singoli file potrebbero in alcuni casi essere ridotti al minimo.

Cosa succede quando si comprimono file HTML, CSS e JavaScript? 

Come accennato brevemente nell'articolo, quando file come HTML, CSS e JavaScript vengono compressi, i singoli file vengono combinati 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 molto tempo per trovare ogni singolo prodotto e metterlo nel carrello. 

Soluzione: dici in anticipo al supermercato di quali prodotti hai bisogno. Il supermercato ti fornirà i prodotti su uno scaffale, in modo da doverli mettere nel carrello e pagare alla cassa. 

Risultato: mettendo tutti i prodotti insieme su un unico scaffale, devi percorrere una sola via nel supermercato e risparmi una quantità incredibile di tempo. È simile alla minimizzazione di singoli codici e script sul tuo sito web. Affinché tu possa vedere come funziona tutto nella pratica, vorrei mostrartelo con piccoli esempi. 

Il risparmio dei dati non aiuta solo a ottimizzare le prestazioni.
Perché un uso consapevole delle risorse contribuisce anche a rendere il tuo sito web più sostenibile. Puoi leggere i contributi sui temi Quanto è verde WordPress ? e hosting verde attraverso.

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 ha questo aspetto:

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

Ad esempio, un codice CSS standard ha questo aspetto:

 /* 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 del dinamico HTML nei browser web (wikipedia.org). Con questo gli operatori dei siti hanno oggi la possibilità di utilizzare HTML e CSS estesi. 

Un codice JavaScript standard (wiki.selfhtml.org) si presenta come segue:

 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 sopra riportati si può vedere molto bene come funziona la minimizzazione del codice HTML, CSS e JavaScript. Se sei un utente avanzato e professionale, puoi anche fare questa compressione manualmente utilizzando un tool come linkcode-generator.com Come utente WordPress, i plugin specifici "Minify" possono fare il lavoro per te. 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

fondere minifare rinfrescare

Come dice già il nome del plugin Merge + Minify + Refresh (unire + minimizzare + attualizzare), il focus di questo tool è interamente sulla compressione del codice CSS e 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 una serie di impostazioni per ottimizzare il tempo di caricamento del tuo sito web.

fondere minifare rinfrescare 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. 

Ecco le 3 funzioni più importanti del plugin Merge + Minify + Refresh

  • 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 i file CSS e JavaScript possono essere rimpiccioliti e memorizzati in cache. Il caricamento accelerato di questi file viene 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. Qui si possono vedere solo le impostazioni per la compressione di JavaScript e CSS.

wp super minif WordPress

Ecco le funzioni più importanti del plugin WP Super Minify

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

#3 Fast Velocity Minify

velocità veloce minify

Il plugin Fast Velocity Minify consente di ottimizzare i tempi di caricamento per gli sviluppatori e gli utenti avanzati. Da un lato riduce le richieste HTTP unendo i file CSS e Javascript e dall'altro minimizza i file con PHP Minify. 

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 utenti e sviluppatori avanzati, il plugin Fast Velocity Minify offre molti gadget e possibilità di ottimizzazione.

velocità veloce minify WordPress

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

Ecco le funzioni più importanti 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 plugin di WordPress Autoptimize ti offre la facile ottimizzazione del tuo sito web. Con pochi passi è possibile comprimere i file HTML, CSS e JavaScript e quindi accelerare i tempi di caricamento della pagina. 

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

Importante per i clienti di RAIDBOXES

Autoptimize non è compatibile con altre cache, ad esempio la cache del server di RAIDBOXES . Pertanto sconsigliamo vivamente l'utilizzo 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. 

Ecco 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 Speed of Light è anche un plugin di WordPress che combina file HTML, CSS e JavaScript. Questo potente plugin ha anche una compressione cache e gzip, un sistema di pulizia del database e anche un'ottimizzazione degli htacces. 

Nella versione gratuita del plugin WP Speed of Light - sono disponibili tutte le funzioni standard per l'ottimizzazione del tuo sito web. Nelle impostazioni del plugin è possibile selezionare i singoli gruppi (HTML, CSS, JavaScript) che si desidera 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. 

Oltre alla pura compressione dei file, WP Speed of Light offre molte più funzioni, che si possono utilizzare facilmente tramite un backend ben comprensibile. 

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 Speed
of Light
Gratuito
Adatto perprincipiantiprincipiantiavanzatI + 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: 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.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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