Ottenere le migliori prestazioni possibili è il sogno di chiunque gestisca un sito web. Raggruppare e minimizzare le risorse su WordPress è una delle cose migliori che possiamo fare per raggiungere questo obiettivo, ma potrebbe essere davvero difficile. Raggruppare tutte le risorse (principalmente file CSS e JS) potrebbe esporre il tuo sito web a rischi se non sei uno sviluppatore, perché potrebbe generare conflitti.

WP Speed of Light è la soluzione migliore per gestire il tuo sito WordPress perché offre numerose opzioni per velocizzare il caricamento del sito con una dashboard davvero intuitiva. Tra queste, una è il raggruppamento e la minimizzazione delle risorse. L'inclusione/esclusione di singoli file dal processo di raggruppamento e minimizzazione è fondamentale per un'ottimizzazione personalizzata senza conflitti.

Per questo post del blog utilizzeremo un sito WordPress di esempio e impareremo come farlo in modo che il processo di configurazione del tutto sia più semplice.

Come eseguire una minimizzazione di JS e CSS in WordPress

Impariamo come eseguire una minificazione di WordPress js e CSS, ma prima dobbiamo sapere cosa significa minificazione. "La minificazione si riferisce al processo di rimozione di dati non necessari o ridondanti senza influenzare il modo in cui la risorsa viene elaborata dal browser, ad esempio commenti e formattazione del codice, rimozione del codice non utilizzato, utilizzo di nomi di variabili e funzioni più brevi e così via".

Adesso quello che faremo è un test di velocità sulla nostra pagina per vedere i cambiamenti. Per questo esempio, stiamo utilizzando un sito con WooCommerce e alcuni prodotti, quindi la prima volta il caricamento sarà un po' lento.

Sì, 2,79 secondi per caricare la pagina, non male ma potrebbe essere migliore, proviamo a minimizzare il codice js e il CSS e vediamo la differenza. Vai su WP Speed of light > SpeedUp > Group & Minify , vedrai il menu con tutte le opzioni per minimizzare. 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 del componente aggiuntivo PRO sono: Escludi script in linea (escludi script in linea dalla minimizzazione), Sposta script nel footer (ti consente di velocizzare il tuo sito spostando tutti gli script minimizzati nel footer), Raggruppa font e Google Font (raggruppa font locali e Google Font in un unico file per essere serviti più velocemente) ed Esclusione file avanzata.
 
Hai la possibilità di minimizzare, come puoi vedere, JS, CSS e anche l'HTML ora basta attivare queste opzioni, cliccare su Salva e tutte le tue risorse saranno minimizzate immediatamente. Potrebbero esserci dei problemi poiché è una configurazione avanzata, ma tutto può essere risolto escludendo parte del codice e dei file (con il componente aggiuntivo Pro).

Ora tutto il lavoro di sviluppo che prima richiedeva ore viene svolto in pochi secondi.

Passo successivo, WordPress ottimizza CSS e JS

Con questo plugin consentiremo a WordPress di ottimizzare CSS e js semplicemente abilitando le opzioni di gruppo nella dashboard. Vai su WP Speed of Light > SpeedUp > Group & Minify e vedrai una dashboard con le opzioni per raggruppare CSS e js.

Queste opzioni consentono di:

• Gruppo JS: raggruppare più file Javascript in un unico file ridurrà al minimo il numero di richieste HTTP
• Raggruppa CSS: raggruppare più file CSS in un unico file ridurrà al minimo il numero di richieste HTTP.

Richieste HTTP: sono richieste che vengono inviate al server ogni volta che selezioniamo qualcosa o andiamo su un'altra pagina dello stesso sito. Se riuscissimo a ridurre queste richieste, il tempo di caricamento si ridurrebbe.

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

È quindi possibile elencare tutti i file caricati in base al tipo; in questo esempio ho cliccato solo sull'elenco dei file JS.

Ora che abbiamo queste impostazioni, abilita semplicemente le opzioni di gruppo (Gruppo CSS e Gruppo JS) e clicca su Salva. Tieni presente che queste opzioni devono essere utilizzate con cautela e dovrai testare la tua pagina perché potrebbero causare conflitti.

Facciamo sul serio e ottimizziamo il peso del carattere

Cosa? Altre ottimizzazioni? Sì! Potrai ottimizzare il peso del font e sarà facile come abilitare l'opzione nelle impostazioni, basta andare su WP Speed of Light > SpeedUp > Raggruppa e minimizza > Raggruppa font e Google Font . L'opzione
Raggruppa font e Google Font ti permetterà di raggrupparli in un unico file per una distribuzione più rapida, il che è molto utile dato che la maggior parte dei temi e dei layout di WordPress include 2 font di default con tutte le declinazioni (normale, grassetto, corsivo...).

Basta abilitare questa opzione, cliccare su Salva e tutti i font verranno raggruppati.

Ora che abbiamo attivato tutte le opzioni per minimizzare e raggruppare le risorse, dovremmo notare 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 minificazione potrebbe causare problemi al tuo sito, soprattutto quando raggruppi determinati file che contengono errori di sintassi o variabili simili, come il nome della classe. Ecco perché con l'opzione "Esclusione file minificazione", potrai escludere i file dal processo di minificazione e raggruppamento. Vai su WP Speed of Light > SpeedUp > Raggruppa e Minifica , e troverai l' Esclusione file avanzata .

Per utilizzare l'esclusione avanzata dei file, è necessario prima eseguire una scansione, abilitare l'opzione e fare clic su Esegui scansione.

 Per poter elencare gli script caricati sul tuo sito web, WP Speed of Light deve scansionare la tua cartella per elencarli. Di solito sono tutti contenuti nella cartella /wp-content, che raggruppa tutti i tuoi plugin e temi. Seleziona quella cartella (almeno) e clicca su "Scansiona ora".

Verrà eseguita una scansione, al termine della quale cliccare su Visualizza risultati.

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 raggruppamento e la minimizzazione dei file, 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 potrebbe sorgere durante la minimizzazione delle risorse... Il processo di raggruppamento e minimizzazione richiede ancora un po' di lavoro, soprattutto in fase di test, ma ne vale sicuramente la pena e potrai sempre testarne il funzionamento eseguendo lo speed test direttamente da WP Speed of Light .
 
Prova WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light