minificare css html

Come minimizzare: ridurre CSS, HTML e JavaScript

La riduzione di HTML, CSS e JavaScript è una delle tante piccole leve per ottimizzare la velocità di caricamento del vostro sito web. Se si osservano le varie pagine del web oggi, ci si rende 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, tuttavia, i siti web sono costituiti da un codice esteso, che spesso include HTML, CSS e JavaScript. Ciò è dovuto da un lato alla gamma di funzioni oggi disponibili per i siti web, ma anche ai design e ai modelli sempre più ampi 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 tuoi strumenti di ottimizzazione dei tempi di caricamento. Pertanto, dovresti controllare regolarmente le prestazioni del tuo sito WordPress.

Più "richieste" vengono inviate, più lungo è il tempo di caricamento. Per mantenere il numero di richieste il più basso possibile, e quindi anche il tempo di caricamento del sito web, è necessario 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 per ridurne le dimensioni. Questo include anche la conversione di 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%, 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 è compresso usando la codifica gzip sul lato server. 

gzip a Raidboxes

Su Raidboxes , Brotli è usato al posto di gzip. Spieghiamo qual è la differenza nel nostro articolo.

Qui, le stringhe che sono già apparse in anticipo sono sostituite da un puntatore. Questi puntatori sono costituiti da molto meno contenuto della stringa reale. 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; si può ridurre la dimensione del file a circa il 20% della sua dimensione originale.

Riduzione dei tempi di caricamento

Se hai mai usato uno strumento come PageSpeed Insights da Google, conoscerete certamente questo suggerimento di ottimizzazione: "Minify 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 possono essere trovate nell'articolo"Google Pagespeed - I messaggi di errore più importanti". 

Vorrei mostrarvi come la riduzione dei CSS può influenzare il tempo di caricamento del vostro sito web usando un diagramma a cascata dal mio bloggiraffe.de. Gli esempi sono solo piccole sezioni, ma mostrano chiaramente come il tempo di caricamento può essere ridotto.

Esempio 1 - Non compresso:

Come minimizzare: ridurre CSS, HTML e JavaScript

Esempio 2 - Compresso (ridotto):

Come minimizzare: ridurre CSS, HTML 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 i file CSS e JavaScript vengono uniti? 

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

Questo significa che il browser - attraverso il quale si richiama un determinato sito web - deve inviare meno richieste al server per poter visualizzare il sito e caricare gli script necessari.

Unire i file

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

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 hai bisogno. Il supermercato ti fornisce i prodotti su uno scaffale in modo che tu debba solo metterli nel carrello della spesa e pagare alla cassa. 

Risultato: raggruppando tutti i prodotti all'interno di un unico scaffale, si deve 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 vostro sito web. Per farvi capire come funziona in pratica, vorrei mostrarvi alcuni piccoli esempi. 

Il salvataggio dei dati non solo aiuta a ottimizzare le prestazioni.
Un uso consapevole delle risorse contribuisce anche 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 plug-in e temi, l'unione dei file CSS e soprattutto dei file JavaScript può purtroppo causare problemi. Anche il valore LCP o altri valori Web Vitals possono essere influenzati negativamente. Se l'unione ha un effetto positivo sul vostro sito o porta a dei problemi, è qualcosa che dovete semplicemente testare. Non preoccupatevi, potete 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. 

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>

Minato:

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

Minato:

 /* 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ì, 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);

Minato:

 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 chiaramente come funziona la minificazione del codice HTML, CSS e JavaScript. Gli utenti avanzati e professionali possono anche effettuare questa compressione manualmente utilizzando uno strumento come linkcode-generator.de. Speciali "minify plugins" o minificatori possono fare questo lavoro per voi. 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 prendono il lavoro di compressione di HTML, CSS e JavaScript. 

Plugin e cache

È necessario cancellare la cache del sito dopo aver installato nuovi plugin o aver apportato modifiche alle impostazioni.

#1 Ottimizzazione automatica

Autoptimize

Il plugin WordPress Ottimizza automaticamente ti offre la semplice ottimizzazione del tuo sito web. Con pochi semplici passi, è possibile comprimere i file HTML, CSS e JavaScript e quindi accelerare il tempo di caricamento del vostro sito web. 

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

Ottimizzazione automatica per Raidboxes

Per molto tempo, Autoptimize non era compatibile con altre cache, compresa la cache del server Raidboxes . Questo problema è stato ora risolto - Autoptimize può ancora una volta essere usato insieme a Raidboxes senza esitazione.

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.

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

Sotto la voce di menu "Extras", si possono fare ulteriori auto-ottimizzazioni, per esempio per Google Fonts, per gli emoji 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

#2 WP Super Minify

WP Super Minify

Con il plugin WP Super Minify I file CSS e JavaScript possono essere ridotti nelle dimensioni e memorizzati nella cache. Il caricamento accelerato di questi file è poi reso possibile tramite il framework Minify PHP

La cosa speciale 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. Si possono vedere solo le impostazioni per la compressione di JavaScript e CSS.

WP Super Minify WordPress

Caratteristiche principali di WP Super Minify Plugins: 

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

#3 Fast Velocity Minify

Velocity Minify veloce

Il plugin Velocity Minify veloce permette l'ottimizzazione del tempo di caricamento per 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. 

Dopo aver installato il plugin Minify, troverete numerose opzioni di impostazione nel backend di WordPress, che può essere un po' opprimente per alcuni. La cosa buona è 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.

Fast Velocity 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. 

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

WP Velocità della luce

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

Nella versione gratuita di WP Speed of Light, sono disponibili tutte le funzioni standard per ottimizzare il tuo sito web. Nelle impostazioni del plugin, potete selezionare i singoli gruppi (HTML, CSS, JavaScript) che volete 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

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.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.