Configuración do plugin W3 Total Cache Minify: como elixir o tipo de incrustación? A miña experiencia na resolución de problemas e consellos para salvar vidas

Tes dificultades para escoller o tipo de incrustación axeitado para W3 Total Cache Minify? Este artigo comparte a experiencia real dun webmaster e ofrece unha guía paso a paso para seleccionar con precisión o tipo de incrustación de Minify correcto, evitando inconsistencias no estilo do sitio web e fallos de carga. Tamén inclúe unha solución de configuración infalible que mesmo os principiantes poden aplicar facilmente.WordPress Acelera sen chocar!

Estaba optimizando un sitio web e, cando abrín a configuración de Minify en W3 Total Cache, quedei completamente abraiado. O menú despregable para o tipo incrustado tiña catro opcións: Predeterminado (Bloquear), Usar JS para non bloquear, Usar "Asincrónico" para non bloquear e Usar "Retrasado" para non bloquear.

Penseino un intre, de que vai todo isto?

Créeme, non estás só. Estas catro opcións probablemente deixarán perplexo incluso a un novato, e moito menos a alguén que leva anos usando WordPress. Este artigo presenta os erros cos que me atopei e as leccións que aprendín directamente. Non necesitas consultar a documentación; só tes que seguir as miñas instrucións.

Cales son exactamente estes catro tipos de incrustación?

Falemos primeiro de que tipo de personaxe son estas catro opcións.

Predeterminado (Bloqueado)Isto chámase bloqueo predeterminado. É o enfoque máis sinxelo: o navegador detense cando atopa un script, descárgao e execútao completamente e, a continuación, continúa renderizando a páxina. Parece fiable, non si? Pero a contrapartida é que a carga inicial da páxina bloquearase; os usuarios terán que esperar a que o script remate de executarse antes de poder ver nada.

Usando JS para non bloquearIsto é bastante interesante. En lugar de escribir directamente as etiquetas `<script>` na páxina, primeiro xera un pequeno script e, a seguir, inxecta dinamicamente os scripts que deben cargarse na páxina mediante JavaScript despois de que esta se execute. Deste xeito, a páxina pódese renderizar primeiro e os scripts poden cargarse gradualmente. Parece xenial, non si? Non obstante, o problema é que este proceso de inxección dinámica pode interromper a orde de execución orixinal dos scripts. Se algúns scripts da túa páxina dependen en gran medida da orde de execución, poden xurdir problemas.

Usar "asíncrono" para non bloquearIsto implica engadir o atributo `async` á etiqueta `<script>`. O script descargarase de forma asíncrona en segundo plano e executarase inmediatamente despois da descarga, sen que a páxina teña que esperar por el. Non obstante, a desvantaxe é que a orde de execución é completamente incontrolable; o script que remate de descargarse primeiro execútase primeiro, independentemente da orde que especificaches no código.

Usando "atraso" para non bloquearIsto é o que significa engadir o atributo `defer`. O script agardará ata que se analize toda a páxina antes de executarse e, o que é máis importante, manterá a orde orixinal na que o escribiches. Isto é bastante doado de usar, xa que non bloquea a primeira pantalla nin interrompe a orde.

Cal debería escoller?

En poucas palabras, estas catro opcións son como unha pregunta de opción múltiple:Queres rapidez ou orde?

A miña suxestión é a seguinte:

Se o teu sitio web é pequeno, ten poucos scripts e non tes uns requisitos de velocidade de carga extremadamente altos, usar a configuración predeterminada (bloqueada) é a opción máis sinxela. Aínda que é un pouco máis lenta, non causará ningún problema.

Se queres mellorar a velocidade na primeira pantalla e os teus scripts non teñen dependencias fortes como "A debe executarse antes de B", prioriza...Usando "atraso" para non bloquear(aprazar). Esta é case a solución máis ideal na actualidade, xa que non bloquea a renderización nin interrompe a orde.

Se intentas aprazar e aínda atopas problemas con algunhas funcións, entón considera...Usando JS para non bloquearEsta solución é máis radical, pero a súa compatibilidade é lixeiramente peor.

Usar "asíncrono" para non bloquear(async) é a opción que menos recomendo. Debido a que a orde de execución está completamente desordenada, é doado que se bloquee a menos que esteas absolutamente seguro de que os teus scripts se executan de forma independente.

Dous grandes erros nos que caín

Falar é barato. Anotei dous erros que cometin; podes comparalos coa túa propia experiencia para ver se podes evitalos.

A primeira trampa: os temas personalizados de WordPress non se poden previsualizar en tempo real.

Durante un tempo, ao personalizar un tema, despois de premer en Gardar, a vista previa non se actualizaba. Facía algúns cambios, actualizaba a páxina e seguía igual.

Despois dalgunha investigación, descubrín que a función de compresión de Minify era a culpable. A solución é sinxela:

Acceder ao complemento W3 Total CacheConfiguración xeralaparecer"compresión"Desmarca esa opción. Despois, fai clic na pequena frecha debaixo de "Gardar configuración" na esquina superior dereita e selecciona "..."Gardar a configuración e limpar a cachéEste paso é crucial; se non borras a caché, seguirás vendo a versión antiga.

Unha vez que remates, volve á personalización do tema e a vista previa en directo volverá á normalidade.

O segundo problema: a caixa de busca do tema Astra non responde ao premer nela.

Atopei este problema hai bastante tempo. Estaba a usar o tema Astra e, de súpeto, decateime de que a caixa de busca non respondía por moito que premese nela. Ao principio, pensei que era un problema co propio tema, pero máis tarde descubrín que estaba causado pola configuración de Minify de W3TC.

A solución é a seguinte:

Vaia a W3 Total Cache → Configuración xeral → Configuración avanzada de compresión → JS → Configuración do motor Minify → Configuración rexional e cambie o tipo de incrustación a un destes dous:

1. Anteriormente, a non bloqueo conseguíase usando JavaScript.
2. Despois, usa JS para non bloquear

Do mesmo xeito, limpar a caché e actualizar a páxina permitirá que a caixa de busca funcione correctamente.

En canto a por que se escolleron estas dúas opcións en lugar doutras, investiguei un pouco. En poucas palabras, os compoñentes front-end do tema Astra son bastante sensibles ao tempo de execución do script e certos métodos non bloqueantes poden provocar que a vinculación de eventos falle. Usar o modo "non bloqueante con JS" garante que o script se execute só despois de que a páxina remate de cargar, evitando ao mesmo tempo a execución desordenada que se observa co modo asíncrono.

Lista de lugares para visitar

Finalmente, aquí tes unha lista de verificación que podes seguir directamente:

O primeiro paso é aclarar o teu obxectivo. Queres a carga inicial da páxina máis rápida ou priorizas a estabilidade e un funcionamento sen erros? Isto determinará que tipo de incrustación debes usar.

O segundo paso é non cambialo todo á vez. Primeiro, busca unha páxina menos importante para probala, obsérvaa durante un día ou dous e só a promociona a todo o sitio se estás seguro de que non hai problemas.

En terceiro lugar, limpa sempre a caché despois de cada modificación. O mecanismo de caché do W3TC evitará que vexas os últimos cambios, polo que o paso "limpa a caché e proba de novo" é absolutamente esencial.

En cuarto lugar, usa as ferramentas de desenvolvemento do teu navegador ou ferramentas como PageSpeed ​​​​Insights para comparar a velocidade de carga antes e despois. Deixa que os datos falen por si mesmos, non só a túa intuición.

Escribe ao final

Para ser sincero, cando vin por primeira vez esta configuración de tipo incrustado, quedei abraiado durante moito tempo. O modo de bloqueo predeterminado parecía demasiado lento, mentres que o modo asíncrono non garantía a orde e o adiamento podía causar problemas de compatibilidade. Non estaba seguro de que opción escoller.

Pero máis tarde decateime de que é unha contrapartida. Non podes ter o máis rápido e o máis estable ao mesmo tempo; sempre tes que sacrificar un. A miña experiencia é usar primeiro defer, que actualmente é a solución sen bloqueos máis segura, e despois usar unha devolución de chamada se xorden problemas.

Se te atopas con problemas semellantes ou se aínda tes outros problemas despois de seguir o meu método, non dubides en falalo. O desenvolvemento web baséase en probas e erros; ninguén é unha excepción.

Grazas por ler o meu artigo. Ata a próxima.