Come raggruppare e minimizzare le risorse in WordPress
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 potrebbe essere meglio, basta minimizzare js e CSS e vedere la differenza, vai su WP Speed of light > SpeedUp > Raggruppa e minimizza, sarai in grado di vedere 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.
Opzioni dell'addon PRO sono: Escludi script inline (Escludi script inline dalla minimizzazione), sposta script nel piè di pagina (consente di velocizzare il sito spostando tutti gli script minimizzati nel piè di pagina), Raggruppa caratteri e Google Fonts (Raggruppa caratteri locali e Google Fonts in un unico file per essere servito più velocemente) e esclusione avanzata dei file.
Hai la possibilità di minimizzare, come puoi vedere, JS, CSS e anche HTML ora basta attivare queste opzioni, clicca su salva e tutte le tue risorse saranno minimizzate subito, potrebbe avere problemi poiché è una configurazione avanzata, ma tutto può essere risolto con l'esclusione di 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 lasceremo che wordpress ottimizzi CSS e js semplicemente abilitando le opzioni di gruppo sulla dashboard, vai su WP Speed of Light > Velocità > Raggruppa & Minimizza, sarai in grado di vedere una dashboard con le opzioni per raggruppare CSS e js.
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, script puoi raggruppare sul tuo sito web, apri semplicemente la console del browser (tasto 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? Altra ottimizzazione? Sì! Sarai in grado di ottimizzare il peso del carattere e sarà facile come abilitare l'opzione nelle impostazioni, basta andare a WP Speed of Light > SpeedUp > Raggruppa e minimizza > Raggruppa caratteri e Google Fonts opzione.
L'opzione Raggruppa caratteri e Google Fonts ti permetterà di raggrupparli in un unico file da servire più velocemente, questo è abbastanza utile poiché la maggior parte dei temi e layout di WordPress vengono forniti con 2 o più caratteri predefiniti con tutte le declinazioni (regolare, 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 nel tuo sito, principalmente quando si raggruppano determinati file che contengono errori di sintassi o nomi di variabili o classi simili. Ecco perché con l'opzione "esclusione file dalla minimizzazione", potrai escludere i file dal processo di minimizzazione e raggruppamento, vai su WP Speed of Light > SpeedUp > Raggruppa e minimizza, potrai vedere l'opzione 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 la tua cartella per elencarli. Di solito sono tutti contenuti nella tua cartella /wp-content che raggruppa tutti i tuoi plugin e temi. Seleziona quella cartella (almeno) e clicca su “Scansiona ora”
Eseguirà una scansione, infine, clicca su Visualizza Risultati quando la scansione è completata.
Un elenco di file classificati per tipo (Tutti, JS, CSS, Caratteri) dovrebbe essere visualizzato di seguito. 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 possa esistere 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 testare come funziona eseguendo il test di velocità direttamente da WP Speed of Light.
Vai avanti e prova WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light
Quando ti iscrivi al blog, ti invieremo un'e-mail quando ci saranno nuovi aggiornamenti sul sito in modo che tu non li perda.










Commenti