Avere la migliore performance possibile è il sogno di tutti coloro che gestiscono un sito web, raggruppare e minimizzare le risorse su WordPress è una delle cose migliori che possiamo fare per questo, ma potrebbe essere davvero difficile. Raggruppare tutte le tue risorse (principalmente file css e js) potrebbe esporre il tuo sito web se non sei uno sviluppatore perché potrebbe generare conflitti.

WP Speed of Light è la soluzione migliore per migliorare il tuo sito WordPress perché ha molte opzioni per fare in modo che il tuo sito si carichi velocemente con una dashboard molto intuitiva e sì, una di queste opzioni è quella di raggruppare e minimizzare le risorse. L'inclusione/esclusione di un singolo file dal processo di raggruppamento e minimizzazione è una chiave per un'ottimizzazione personalizzata senza conflitti.

Useremo un esempio di sito wordpress per questo post del blog e impareremo come fare in modo che il processo di configurazione di tutto sarà più facile.

Come fare una minimizzazione di JS e CSS in WordPress

Impariamo come fare una minificazione di JS e CSS di WordPress, ma prima dobbiamo sapere cosa significa la minificazione “La minificazione si riferisce al processo di rimozione di dati non necessari o ridondanti senza influire sul modo in cui la risorsa viene elaborata dal browser - ad esempio commenti e formattazione del codice, rimozione del codice inutilizzato, utilizzo di nomi di variabili e funzioni più brevi e così via”.

Ora quello che faremo è un test di velocità della nostra pagina per vedere i cambiamenti, per questo esempio, stiamo utilizzando un sito con woocommerce e alcuni prodotti, quindi la prima volta che verrà caricato un po' lentamente.

Sì, 2,79 secondi per caricare la pagina, non male ma si potrebbe fare di meglio. Proviamo a minimizzare i file js e CSS e vediamo la differenza. Vai su WP Speed of light > SpeedUp > Raggruppa e minimizza, e vedrai il menu con tutte le opzioni di minimizzazione. La versione gratuita del plugin include l'opzione di raggruppamento e minimizzazione, ma l'esclusione visiva dei file è disponibile solo nella versione PRO Addon.

Le opzioni dell'addon PRO sono: Escludi script inline (Escludi gli script inline dalla minificazione), Sposta script nel piè di pagina (Consente di velocizzare il sito spostando tutti gli script minificati nel piè di pagina), Raggruppa font e Google Fonts (Raggruppa font locali e Google Fonts in un unico file per una visualizzazione più rapida) ed Esclusione avanzata dei file.
 
Come puoi vedere, hai la possibilità di minificare JS, CSS e anche HTML. Attiva queste opzioni, clicca su Salva e tutte le tue risorse verranno minificate immediatamente. Potrebbero verificarsi problemi trattandosi di una configurazione avanzata, ma tutto può essere risolto escludendo alcuni codici e file (con l'addon Pro).

Ora tutto il lavoro dello sviluppatore che potrebbe richiedere ore è fatto in pochi secondi.

Prossimo passo, ottimizza CSS e JS di WordPress

Con questo plugin permetteremo a WordPress di ottimizzare CSS e JavaScript semplicemente abilitando le opzioni di raggruppamento nella dashboard. Vai su WP Speed of Light > SpeedUp > Raggruppa e minimizza, e vedrai una dashboard con le opzioni per raggruppare CSS e JavaScript.

Queste opzioni ti permettono di:

• Raggruppa JS: Raggruppare diversi file Javascript in un unico file minimizzerà il numero di richieste HTTP
• Raggruppa CSS: raggruppare più file CSS in un unico file minimizzerà il numero di richieste HTTP.

Richieste HTTP: queste sono richieste che vengono inviate al server ogni volta che selezioniamo qualcosa o andiamo a un'altra pagina nello stesso sito, quindi se possiamo ridurre queste richieste, il tempo di caricamento sarebbe ridotto.

Per verificare quanti file e script puoi raggruppare sul tuo sito web, apri la console del browser (clic destro > Ispeziona o F12) e apri il pannello di rete.

È possibile elencare tutti i file caricati per tipo, qui in questo esempio ho fatto clic solo sull'elenco dei file JS.

Ora che siamo in queste impostazioni, basta abilitare le opzioni di gruppo (Raggruppa CSS e Raggruppa JS) e cliccare su salva, tenete presente che queste opzioni devono essere utilizzate con cautela e dovrete testare la vostra pagina perché potrebbero causare conflitti.

Diciamo sul serio e ottimizziamo il peso dei caratteri

Cosa? Altre ottimizzazioni? Sì! Potrai ottimizzare il peso del carattere e sarà facilissimo: basterà attivare l'opzione nelle impostazioni. Vai su WP Speed of Light > SpeedUp > Raggruppa e minimizza > Raggruppa font e Google Fonts . L'opzione "
Raggruppa font e Google Fonts" ti permetterà di raggrupparli in un unico file per un caricamento più rapido. Questo è molto utile, dato che la maggior parte dei temi e dei layout di WordPress include di default 2 o 3 font con tutte le declinazioni (normale, grassetto, corsivo...). 

Abilita semplicemente quell'opzione, clicca su salva e tutti i font saranno raggruppati.

Ora che abbiamo attivato tutte le opzioni per minimizzare e raggruppare le risorse, dovremmo vedere una differenza nel tempo di caricamento del nostro sito, controlliamo la velocità.

Che differenza, da 2.8 a 0.56 secondi! Come vi abbiamo detto all'inizio di questo post, possiamo migliorare il tempo di caricamento ;)

Come utilizzare l'esclusione della minimizzazione dei file

La minimizzazione potrebbe causare problemi al tuo sito, soprattutto quando raggruppi determinati file che contengono errori di sintassi o simili, come ad esempio errori nel nome di una variabile o di una classe. Per questo motivo, con l'opzione "Esclusione dalla minimizzazione dei file", potrai escludere i file dal processo di minimizzazione e raggruppamento. Vai su WP Speed of Light > SpeedUp > Raggruppa e minimizza, dove troverai l' "Esclusione avanzata dei file" .

Per utilizzare l'esclusione avanzata dei file, dovrai eseguire una scansione, abilitare l'opzione e cliccare su Esegui Scansione.

 
Per poter elencare gli script caricati sul tuo sito web, WP Speed of Light deve scansionare le tue cartelle. Solitamente si trovano tutti nella cartella /wp-content, che raggruppa tutti i plugin e il tema. Seleziona almeno questa cartella e fai clic su "Scansiona ora".

Eseguirà una scansione, infine, clicca su Visualizza Risultati quando la scansione è completata.

Di seguito dovrebbe essere visualizzato un elenco di file classificati per tipo (Tutti, JS, CSS, Font). Se hai identificato un file che causa problemi quando attivi il gruppo di file e la minimizzazione, puoi escluderlo da qui utilizzando un semplice interruttore ON/OFF.

Questo ti aiuterà a escludere i file e, in questo modo, a risolvere facilmente qualsiasi problema che possa presentarsi durante la minimizzazione delle risorse... Il processo di raggruppamento e minimizzazione richiede ancora del lavoro, soprattutto in fase di test, ma ne vale sicuramente la pena e potrai sempre testarne il funzionamento eseguendo il test di velocità direttamente da WP Speed of Light.
 
Prova subito WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light