Come minimizzare CSS, HTML e JavaScript del tuo sito WordPress

La minimizzazione è un concetto semplice che viene spesso raccomandato come un passo verso l’accelerazione del tuo sito web. Ma la realtà è che frustra molti proprietari di siti senza fine quando tentano di minimizzare i loro file e finiscono per rompere il loro sito.

Quindi cosa dà?

La minificazione richiede spesso molta sperimentazione. Mentre ci sono molte soluzioni disponibili, come si comportano varierà da sito a sito a seconda di quale tema e plugin si sta utilizzando.

In questo post, esploreremo cos’è la minificazione, i suoi vantaggi e alcune delle soluzioni di minificazione più popolari disponibili, sia manuali che plug – in, per aiutarti a individuare la soluzione giusta per il tuo sito.

Che cos’è la minificazione?

I siti Web sono costituiti da molti file diversi. Se provi la velocità del tuo sito con Google PageSpeed Insights, potresti ricevere la raccomandazione di ridurre al minimo i file HTML, CSS e JavaScript.

Il problema? Come esseri umani, scriviamo il codice contenuto in questi file in modo da poterli leggere, ma i computer non si preoccupano di caratteri come commenti, formattazione, spazi bianchi e nuove linee. Quindi, quando si imbattono in questi caratteri non necessari nei file del sito Web, li ignorano.

Ecco dove entra in scena la minificazione. Minification è un termine di programmazione che significa fondamentalmente rimuovere tutti i caratteri non necessari che non sono necessari per l’esecuzione del codice. Minification funziona analizzando e riscrivendo il codice per ridurre la dimensione complessiva dei file, riducendo così la dimensione totale del tuo sito in modo che carichi più velocemente nel browser dell’utente.

Ad esempio, ecco alcuni CSS che potresti trovare in un foglio di stile:

a:link { color: gray;}a:visited { color: green;}a:hover { color: rebeccapurple;}a:active { color: teal;}

Ed ecco la versione minificata dell’esempio CSS sopra:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

Vedi quanto è più compresso il codice?

La minificazione viene eseguita su un server Web prima che venga inviata una risposta. Dopo la minificazione, il server Web utilizza i file minificati più piccoli e molto più veloci al posto di quelli originali, con conseguente riduzione della larghezza di banda senza sacrificare la funzionalità.

Come spiega l’esperto SEO Yoast, la minimizzazione dei file può salvare fino al 30-40%, o anche il 50% delle dimensioni del file in alcuni casi.

Perché dovresti minimizzare i tuoi file HTML, CSS e JavaScript

Avere un sito Web veloce non solo rende felice Google – e aiuta il tuo sito Web a classificarsi più in alto nella ricerca – ma offre un’esperienza utente migliore per i visitatori del tuo sito.

Ci sono molte statistiche che chiariscono perché la velocità del sito è fondamentale: il 40% delle persone non aspetterà 3 secondi per il caricamento della tua home page e Google consiglia di caricare i siti entro 2-3 secondi.

Minification ha molti vantaggi:

• file più Piccoli significa che la dimensione totale del download del sito è ridotta,
• visitatori del Sito saranno in grado di caricare e accedere le pagine più velocemente,
• i visitatori avranno un’identica esperienza utente senza dover scaricare files di grandi dimensioni, e
• i proprietari del Sito saranno mostrati inferiori costi di larghezza di banda come in meno di dati trasmessi in rete.

Come minimizzare i file HTML, CSS e JavaScript

Prima di minimizzare i file del tuo sito, è una buona idea eseguire un backup. Meglio ancora, minimizza i tuoi file su un sito di staging in modo da poter controllare che tutto funzioni prima di apportare modifiche al tuo sito live.

È anche importante confrontare la velocità della pagina prima e dopo la minimizzazione dei file in modo da poter confrontare i risultati e vedere se la minimizzazione ha avuto alcun impatto.

Il mio sito di test di velocità preferito è GTmetrix. Analizza le prestazioni della velocità della pagina utilizzando Google PageSpeed Insights e YSlow, uno strumento di test delle prestazioni open source. Quindi genera punteggi e fornisce consigli per i miglioramenti di ottimizzazione del sito.

Altri grandi strumenti di test di velocità che posso consigliare includono Pingdom Test di velocità del sito Web e WebPageTest e Prova la tua velocità mobile.

Riduzione manuale dei file

La riduzione manuale dei file richiede molto tempo e fatica. Voglio dire, chi ha il tempo di rimuovere singoli spazi bianchi, linee e codice non necessario dai file? Noioso! Inoltre, consente più spazio per l’errore umano. Quindi non consiglierei questo metodo per la minimizzazione dei file.

Fortunatamente, ci sono molti strumenti di minificazione online gratuiti disponibili che consentono di copiare e incollare il codice da e verso il tuo sito. Ecco un breve elenco di strumenti e vi incoraggio a ricercare altre opzioni che potrebbero funzionare meglio per il tuo sito.

1. Il Minifier HTML di Will Peavy

Il Minifier HTML è uno strumento online gratuito per la minificazione HTML costruito con PHP. Per utilizzare lo strumento, è sufficiente incollare il codice HTML nell’area di testo, incluso qualsiasi CSS di JavaScript nel markup, e fare clic sul pulsante “Minimizza”. Per garantire che gli script funzionino dopo la minimizzazione, si consiglia di terminare le istruzioni JavaScript con un punto e virgola e utilizzare la sintassi * * per i commenti.

2. CSS Minifier

Un altro strumento gratuito, CSS Minifier funziona minimizzando CSS che si copia e incolla nell’area di testo “Input CSS”. Ci sono opzioni per scaricare l’output minificato come file. Per gli sviluppatori, questo strumento fornisce anche un’API.

3. JSCompress

JSCompress è un compressore JavaScript online che consente di comprimere e minimizzare i file JS fino all ‘ 80% della loro dimensione originale. Per usarlo, copiare e incollare il codice o caricare e combinare più file e quindi fare clic su “Comprimi JavaScript”. Questo strumento è basato su UglifyJS 3 e babili-standalone.

Strumenti di minificazione manuale per sviluppatori

Per gli sviluppatori che cercano opzioni più avanzate, Google consiglia queste risorse di minificazione HTML, CSS e JavaScript:

• HTMLMinifier – Un compressore HTML basato su Javascript / minifier (con Nodo.supporto js).
• CSSNano-Un minificatore modulare, costruito in cima all’ecosistema PostCSS.
• csso-Un minificatore CSS con ottimizzazioni strutturali.
• UglifyJS – Un parser JavaScript, mangler, compressore e toolkit “beautifier”.

Il compilatore di chiusura di Google è uno strumento di ottimizzazione per JavaScript. Invece di compilare da una lingua di origine al codice macchina, compila da JavaScript per rendere migliore JavaScript. Analizza il codice, lo analizza, rimuove il codice morto e riscrive e riduce al minimo ciò che rimane. Questo strumento controlla anche la sintassi, riferimenti alle variabili, e tipi, e mette in guardia sulle insidie comuni JavaScript.

File Minifying con plugin

Ci sono alcuni plugin formidabili disponibili, sia gratuiti che premium, che possono minificare i file senza dover eseguire passaggi manuali.

Nota: Per questo elenco, ho incluso solo plugin gratuiti disponibili nel repository dei plugin di WordPress aggiornati e testaticompatibili con le ultime versioni di WordPress. Per le opzioni premium, scorrere verso il basso./

1. HTML Minify

Questo plugin semplice, leggero e senza problemi ti consente di ridurre al minimo l’output HTML del tuo sito. Per usarlo, tutto ciò che devi fare è installare e attivare il plugin e ridurrà automaticamente il tuo markup senza la necessità di configurare alcuna impostazione.

2. Minify HTML

Amo il WordPress.org descrizione per questo plugin: “Mai guardare il markup HTML del tuo sito web e notare come sciatta e amatoriale sembra?”Questo plugin pulisce e minimizza il markup sciatto.

A differenza del plugin HTML Minify, questo strumento fornisce più opzioni. Include la minificazione opzionale per JavaScript e CSS, anche se non si scherza con le aree di testo o il testo preformattato. Ci sono anche opzioni per rimuovere i commenti HTML, CSS e JavaScript (lasciando i commenti condizionali MSIE), rimuovendo i tag di chiusura XHTML non necessari dagli elementi void HTML5 e rimuovendo schemi e domini relativi non necessari dai collegamenti.

3. Merge + Minify + Refresh-Plugin WordPress

Questo plugin non solo minimizza il tuo codice. Combina i tuoi file CSS e JavaScript e quindi minimizza i file generati utilizzando Minify (per CSS) e Google Closure (per JavaScript). La minimizzazione viene eseguita tramite WP-Cron in modo che non influisca sulla velocità del sito.

Quando il contenuto dei file CSS o JS cambia, vengono rielaborati, quindi non è necessario svuotare la cache. Gli utenti multisito saranno felici di sapere che questo plugin funziona bene sulle reti.

4. JCH Optimize

JCH Optimize ha un sacco di belle caratteristiche per un plugin gratuito: Combina e minimizza CSS e JavaScript, minimizza HTML, c’è la compressione GZip per combina i file, la generazione sprite per le immagini di sfondo, ed è possibile escludere alcuni file dalla combinazione per risolvere i conflitti.

È disponibile una versione pro con più funzioni di ottimizzazione, tra cui il caricamento di JavaScript in modo asincrono, l’ottimizzazione della distribuzione CSS per eliminare il blocco del rendering, il supporto del dominio CDN/cookie-less e il caricamento e l’ottimizzazione pigri per le immagini.

5. CSS Minify

Minificare il tuo CSS con questo plugin non potrebbe essere più semplice: basta installare, attivare, andare su Impostazioni > CSS Minify per abilitare una sola opzione: ottimizzare e minificare il codice CSS.

Il codice in questo plugin è stato biforcuto dal popolare plugin Autoptimize (più su questo plugin qui sotto). L’autore del plugin Peter Pfeiffer ha un plugin simile disponibile per JavaScript, Minify JavaScript.

6. Fast Velocity Minify

Con più di 20.000 installazioni attive e una valutazione a cinque stelle, questa è una delle opzioni più popolari disponibili per la minimizzazione dei file. Per usarlo, installare e attivare il plugin e andare su Impostazioni > Velocità veloce Minify. Lì, troverete una pila di opzioni per la configurazione del plugin, tra cui opzioni avanzate per gli sviluppatori JavaScript e CSS eccezioni, opzioni CDN, così come le informazioni del server. Tuttavia, le impostazioni predefinite funzionano bene per la maggior parte dei siti.

Il plugin esegue la minimizzazione in tempo reale sul front-end e solo durante la prima richiesta non collegata. Una volta elaborata la prima richiesta, tutte le altre pagine che richiedono lo stesso set di CSS e JavaScript verranno servite nello stesso file di cache statica.

7. Autoptimize

Con più di 400.000 installazioni attive, Autoptimize è facilmente lo strumento di minimizzazione più popolare nel repository dei plugin di WordPress.

Autoptimize può aggregare, minificare e memorizzare nella cache script e stili, iniettare CSS nell’intestazione della pagina per impostazione predefinita e anche spostare e rinviare gli script al piè di pagina. Ci sono molte opzioni avanzate per gli sviluppatori e un’ampia API disponibile in modo da poter personalizzare Autoptimize per soddisfare le esigenze specifiche del tuo sito.

8. Ottimizzazione della velocità della pagina di Hummingbird

Hummingbird è un plugin relativamente nuovo per il repository dei plugin di WordPress, avendo iniziato come plugin premium. La versione gratuita offre una grande collezione di strumenti di ottimizzazione del sito, tra cui minification, che consente di minify, posizione e combinare i file per le migliori prestazioni.

C’è anche una grande funzione di scansione che consente di testare le prestazioni del tuo sito e ottenere consigli utili per migliorare il tuo sito, direttamente dall’interno del plugin.

Minification come funzionalità nei plugin di caching di WordPress

La Minification è generalmente una funzionalità standard che troverai nei plugin di caching. Ecco i plugin che ho testato e posso consigliare:

• WP Rocket
• W3 Total Cache
• WP Super Cache

Conclusione

Spero che questo articolo abbia demistificato la minificazione per te e abbia fornito una solida comprensione di cosa sia e di come puoi applicarlo al tuo sito web.

È importante tenere a mente che la minimizzazione è più di un passo di messa a punto-potresti vedere un piccolo miglioramento nella velocità del tuo sito, ma non sarà significativo. Detto questo, è una best practice che vale la pena implementare in aggiunta ad altre tecniche di prestazioni e ottimizzazione, come la combinazione di file.

Inoltre, assicurati di configurare, testare, riconfigurare, ripetere il test, modificare e verificare cosa funziona meglio per il tuo sito Web quando minimizzi i tuoi file perché ogni sito Web è diverso.

Se ti è piaciuto questo post, controlla 6 Migliori plugin di caching WordPress rispetto per ulteriori consigli su come accelerare il tuo sito.