Impostazioni del plugin W3 Total Cache Minify: come scegliere il tipo di incorporamento? La mia esperienza di risoluzione dei problemi e consigli salvavita

Hai difficoltà a scegliere il tipo di incorporamento giusto per W3 Total Cache Minify? Questo articolo condivide l'esperienza reale di un webmaster e fornisce una guida passo passo per selezionare con precisione il tipo di incorporamento Minify corretto, evitando incongruenze di stile del sito web e blocchi durante il caricamento. Include anche una soluzione di configurazione infallibile che anche i principianti possono applicare facilmente.WordPress Accelera senza schiantarti!

Stavo ottimizzando un sito web e quando ho aperto le impostazioni di Minify in W3 Total Cache, sono rimasto completamente sbalordito. Il menu a tendina per il tipo di contenuto incorporato aveva quattro opzioni: Predefinito (Blocca), Usa JS per non bloccante, Usa "Asincrono" per non bloccante e Usa "Ritardato" per non bloccante.

Ci ho pensato un attimo, di cosa si tratta?

Fidati, non sei solo. Queste quattro opzioni probabilmente lasceranno perplesso anche un principiante, figuriamoci chi usa WordPress da anni. Questo articolo presenta le insidie ​​in cui mi sono imbattuto e le lezioni che ho imparato direttamente. Non è necessario consultare la documentazione; basta seguire le mie istruzioni.

Che cosa sono esattamente questi quattro tipi di incorporamento?

Innanzitutto, parliamo del tipo di personaggio che rappresentano queste quattro opzioni.

Predefinito (Bloccato)Questo metodo si chiama blocco predefinito. È l'approccio più semplice: il browser si ferma quando incontra uno script, lo scarica ed esegue completamente, quindi continua a visualizzare la pagina. Sembra affidabile, vero? Il rovescio della medaglia è che il caricamento iniziale della pagina verrà bloccato; gli utenti dovranno attendere che lo script termini l'esecuzione prima di poter visualizzare qualsiasi contenuto.

Utilizzo di JS per applicazioni non bloccantiQuesto è piuttosto interessante. Invece di scrivere direttamente i tag `<script>` sulla pagina, prima genera un piccolo script e poi inietta dinamicamente gli script che devono essere caricati nella pagina tramite JavaScript dopo che la pagina è in esecuzione. In questo modo, la pagina può essere renderizzata per prima e gli script possono essere caricati gradualmente. Sembra fantastico, vero? Tuttavia, il problema è che questo processo di iniezione dinamica potrebbe alterare l'ordine di esecuzione originale degli script. Se alcuni script nella tua pagina dipendono fortemente dall'ordine di esecuzione, potrebbero sorgere problemi.

Utilizzare "asincrono" per non bloccanteQuesto metodo prevede l'aggiunta dell'attributo `async` al tag `<script>`. Lo script verrà scaricato in modo asincrono in background ed eseguito immediatamente dopo il download, senza che la pagina debba attendere. Tuttavia, lo svantaggio è che l'ordine di esecuzione è completamente incontrollabile: lo script che termina per primo il download verrà eseguito per primo, indipendentemente dall'ordine specificato nel codice.

Utilizzo del "ritardo" per il non bloccanteEcco cosa significa aggiungere l'attributo `defer`. Lo script attenderà che l'intera pagina sia stata analizzata prima di essere eseguito e, cosa importante, manterrà l'ordine originale in cui è stato scritto. Questo è molto intuitivo per l'utente, poiché non blocca la prima schermata né interrompe l'ordine.

Quale dovrei scegliere?

In parole semplici, queste quattro opzioni sono come una domanda a risposta multipla:Preferisci la velocità o l'ordine?

Il mio suggerimento è il seguente:

Se il tuo sito web è piccolo, contiene pochi script e non hai esigenze di velocità di caricamento particolarmente elevate, l'opzione più semplice è utilizzare l'impostazione predefinita (bloccata). Sebbene sia leggermente più lenta, non causerà alcun problema.

Se vuoi migliorare la velocità della prima schermata e i tuoi script non hanno forti dipendenze come "A deve essere eseguito prima di B", dai la priorità a...Utilizzo del "ritardo" per il non bloccante(rimandare). Questa è quasi la soluzione ideale al momento, poiché non blocca il rendering né interrompe l'ordine.

Se provi a rimandare e riscontri ancora problemi con alcune funzioni, considera...Utilizzo di JS per applicazioni non bloccantiQuesta soluzione è più radicale, ma la sua compatibilità è leggermente inferiore.

Utilizzare "asincrono" per non bloccante(asincrono) è l'opzione che consiglio meno. Poiché l'ordine di esecuzione è completamente sballato, è facile che si verifichi un crash a meno che non siate assolutamente certi che tutti i vostri script vengano eseguiti in modo indipendente.

Due grandi trappole in cui sono caduto

Le parole non costano nulla. Ho annotato due errori che ho commesso; puoi confrontarli con la tua esperienza per vedere se riesci a evitarli.

Il primo inconveniente: i temi WordPress personalizzati non possono essere visualizzati in anteprima in tempo reale.

Per un certo periodo, quando personalizzavo un tema, dopo aver cliccato su "Salva", l'anteprima non si aggiornava. Apportavo delle modifiche, aggiornavo la pagina, ma il risultato era sempre lo stesso.

Dopo alcune indagini, ho scoperto che la causa era la funzione di compressione di Minify. La soluzione è semplice:

Accedi al plugin W3 Total CacheImpostazioni generali,uscir fuori"compressione"Deseleziona quell'opzione. Quindi fai clic sulla piccola freccia sotto "Salva impostazioni" nell'angolo in alto a destra e seleziona "..."Salva le impostazioni e cancella la cacheQuesto passaggio è fondamentale; se non si svuota la cache, si continuerà a visualizzare la vecchia versione.

Una volta terminato, torna alla personalizzazione del tema e l'anteprima live tornerà alla normalità.

Secondo problema: la casella di ricerca del tema Astra non risponde al clic.

Ho riscontrato questo problema parecchio tempo fa. Stavo usando il tema Astra e un giorno all'improvviso ho notato che la casella di ricerca non rispondeva più, indipendentemente da come ci cliccassi sopra. Inizialmente ho pensato che fosse un problema del tema stesso, ma in seguito ho scoperto che era causato dalle impostazioni di Minify di W3TC.

La soluzione è la seguente:

Vai su W3 Total Cache → Impostazioni generali → Impostazioni di compressione avanzate → JS → Impostazioni del motore di minimizzazione → Impostazioni locali e cambia il tipo di incorporamento in uno di questi due:

1. In precedenza, la modalità non bloccante veniva ottenuta tramite JavaScript.
2. Successivamente, usa JS per la modalità non bloccante

Analogamente, svuotare la cache e aggiornare la pagina consentirà al campo di ricerca di funzionare correttamente.

Per quanto riguarda il motivo per cui sono state scelte queste due opzioni anziché altre, ho fatto delle ricerche. In poche parole, i componenti front-end del tema Astra sono piuttosto sensibili ai tempi di esecuzione degli script e alcuni metodi non bloccanti possono causare errori nel binding degli eventi. L'utilizzo della modalità "non bloccante con JS" garantisce che lo script venga eseguito solo dopo che la pagina ha terminato il caricamento, evitando l'esecuzione disordinata che si verifica con l'asincrono.

Elenco dei luoghi da visitare

Infine, ecco una lista di controllo che puoi seguire direttamente:

Il primo passo è definire il proprio obiettivo. Si desidera ottenere il caricamento iniziale della pagina più rapido possibile, oppure si dà priorità alla stabilità e al funzionamento senza errori? Questo determinerà il tipo di incorporamento da utilizzare.

Il secondo passo è non cambiare tutto in una volta. Innanzitutto, trova una pagina meno importante su cui fare una prova, osservala per un giorno o due e promuovila sull'intero sito solo se sei sicuro che non ci siano problemi.

In terzo luogo, svuotate sempre la cache dopo ogni modifica. Il meccanismo di caching del W3TC vi impedirà di visualizzare le modifiche più recenti, quindi il passaggio "svuota la cache e riprova" è assolutamente essenziale.

Quarto, utilizza gli strumenti per sviluppatori del tuo browser o strumenti come PageSpeed ​​Insights per confrontare la velocità di caricamento prima e dopo. Lascia che siano i dati a parlare, non solo le tue sensazioni.

Scrivi alla fine

A dire il vero, quando ho visto per la prima volta questa impostazione di tipo incorporato, sono rimasto sbalordito per un bel po'. La modalità bloccante predefinita sembrava troppo lenta, mentre la modalità asincrona non garantiva l'ordine e il differimento poteva causare problemi di compatibilità. Non sapevo quale opzione scegliere.

Ma in seguito ho capito che si tratta di un compromesso. Non si possono avere contemporaneamente la velocità e la stabilità migliori; bisogna sempre sacrificare una delle due. La mia esperienza mi suggerisce di usare prima `defer`, che al momento è la soluzione non bloccante più sicura, e poi di ricorrere a una funzione di callback in caso di problemi.

Se riscontri problemi simili, o se hai ancora difficoltà dopo aver seguito il mio metodo, non esitare a parlarne. Lo sviluppo di siti web si basa su tentativi ed errori; nessuno fa eccezione.

Grazie per aver letto il mio articolo. Alla prossima.