Passa al contenuto principale
Tempo di lettura di 6 minuti (1143 parole)

Come raggruppare e minimizzare le risorse in WordPress

file-group-e-minimizza

Avere le migliori prestazioni possibili è il sogno di tutti coloro che gestiscono un sito web, raggruppare e minimizzare 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 eseguire il tuo sito wordpress perché ha molte opzioni per caricare velocemente il tuo sito con una dashboard davvero amichevole e sì, una di queste opzioni è raggruppare e minimizzare le risorse. Il processo di inclusione/esclusione del singolo file dal gruppo e minimizzazione è una chiave per un'ottimizzazione personalizzata senza conflitti.

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

 

Come eseguire una minimizzazione JS e CSS di WordPress

Impariamo come eseguire una minimizzazione di wordpress js e CSS ma prima dobbiamo sapere cosa significa la minimizzazione “La minimizzazione 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 sul codice e formattazione, rimozione del codice inutilizzato, utilizzo di nomi di variabili e funzioni più brevi e così via”.

Ora quello che faremo è un test di velocità sulla nostra pagina per vedere le modifiche, per questo esempio stiamo utilizzando un sito con woocommerce e alcuni prodotti quindi la prima volta si caricherà un po' lentamente.

 

prima della prova

 

Sì, 2,79 secondi per caricare la pagina, non male ma potrebbe essere migliore, minimizziamo semplicemente js e CSS e vediamo la differenza, vai su WP Speed of light > SpeedUp > Group & Minify , sarai in grado per vedere il menu con tutte le opzioni da minimizzare. La versione gratuita del plugin include l'opzione di raggruppamento e minimizzazione, ma l'esclusione dei file visivi è disponibile solo nella versione PRO Addon.

 

gruppo-e-minify-cruscotto

 

Le opzioni del componente aggiuntivo PRO sono: Escludi script in linea (Escludi script in linea dalla minimizzazione), sposta gli script nel piè di pagina (ti consente di velocizzare il tuo sito spostando tutti gli script minimizzati nel piè di pagina), Raggruppa carattere e Google Fonts (Raggruppa caratteri locali e caratteri Google in un unico file per essere servito più velocemente) ed Esclusione avanzata di file.
 
Hai la possibilità di minimizzare, come puoi vedere, JS, CSS e anche l'HTML ora basta attivare queste opzioni, fare clic su salva e tutte le tue risorse verranno minimizzate subito, potrebbe avere problemi dato che è una configurazione avanzata ma tutto può essere risolto con l'esclusione di alcuni codici e file (con il componente aggiuntivo Pro).

 

minimizzare le risorse

 

 

Ora tutto il lavoro dello sviluppatore che potrebbe richiedere ore viene svolto in pochi secondi.

 

Il prossimo passo, WordPress ottimizza CSS e JS

Con questo plugin permetteremo a WordPress di ottimizzare CSS e js semplicemente abilitando le opzioni di gruppo sulla dashboard, vai su WP Speed of Light > SpeedUp > Group & Minify , sarai in grado di vedere una dashboard con le opzioni per raggruppare CSS e js.

Queste opzioni ti consentono di:

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

Richieste HTTP: sono richieste che vengono fatte al server ogni volta che selezioniamo qualcosa o andiamo in un'altra pagina dello stesso sito quindi se potessimo 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 browser (tasto destro > Ispeziona o F12) e apri il pannello di rete .

 

list-script-chrome

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

Ora che siamo su queste impostazioni, abilita semplicemente le opzioni del gruppo (Gruppo CSS e Gruppo JS) e fai clic su Salva, tieni presente che queste opzioni devono essere utilizzate con cautela e dovrai testare la tua pagina perché potrebbe causare conflitti .

 

Facciamo sul serio e ottimizziamo il peso dei caratteri

Che cosa? Altra ottimizzazione? SÌ! sarai in grado di ottimizzare il peso del carattere e sarà facile come abilitare l'opzione nelle impostazioni, basta andare su WP Speed of Light opzione
Google Fonts L'opzione Raggruppa caratteri e caratteri Google ti consentirà di raggrupparli in un unico file per essere serviti più velocemente, questo è molto utile poiché la maggior parte dei temi e layout di WordPress vengono forniti con 2 o più caratteri per impostazione predefinita con tutte le declinazioni (normale, grassetto, corsivo ...)

Basta abilitare questa opzione, fare clic su Salva e tutti i caratteri verranno raggruppati.

 

carattere di gruppo

 


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

 

test-dopo

 

Che differenza, da 2,8 a 0,56 secondi! Come ti 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, accade principalmente quando raggruppi determinati file che contengono errori nell'errore di sintassi o variabili simili, nome della classe. Ecco perché con l'opzione "Esclusione minimizzazione file", sarai in grado di escludere file dal processo di minimizzazione e raggruppamento, vai su WP Speed of Light > SpeedUp > Raggruppa e minimizza , sarai in grado di vedere l' opzione di esclusione avanzata dei file

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

 

avviso-conflitto-risorsa-gruppo


 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 plugin e i temi. Seleziona quella cartella (almeno) e fai clic su "Scansiona ora"

 

selezionare cartelle-to-scan

 

Eseguirà una scansione, infine, fai clic su Visualizza risultati una volta completata la scansione.

 

scansionato

 

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 .

 

file-escludi

 

Questo ti aiuterà a escludere file e, in questo modo, a risolvere facilmente qualsiasi problema che potrebbe esistere durante la minimizzazione delle risorse… Il processo di gruppo e minimizzazione richiede ancora un po' di lavoro, soprattutto nei test, ma ne vale sicuramente la pena, e lo farai. potrai sempre testare come funziona eseguendo lo speed test direttamente da WP Speed of Light .
 
Vai avanti e prova WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light

5
Rimani informato

Quando ti iscrivi al blog, ti invieremo un'e-mail quando ci saranno nuovi aggiornamenti sul sito, così non te li perderai.

Post correlati

 

Commenti

Nessun commento ancora fatto. Sii il primo a inviare un commento
Già registrato? Accedi qui
Giovedì 26 dicembre 2024

Immagine captcha