Configurações do plugin W3 Total Cache Minify: Como escolher o tipo de incorporação? Minha experiência em solução de problemas e dicas essenciais.

Está com dificuldades para escolher o tipo de incorporação correto para o W3 Total Cache Minify? Este artigo compartilha a experiência prática de um webmaster e fornece um guia passo a passo para selecionar com precisão o tipo de incorporação correto do Minify, evitando problemas de estilo no site e travamentos no carregamento. Também inclui uma solução de configuração infalível que até mesmo iniciantes podem aplicar facilmente.WordPress Acelere sem bater!

Eu estava otimizando um site e, ao abrir as configurações de minificação no W3 Total Cache, fiquei completamente perplexo. O menu suspenso para o tipo incorporado tinha quatro opções: Padrão (Bloquear), Usar JS para Não Bloquear, Usar "Assíncrono" para Não Bloquear e Usar "Atrasado" para Não Bloquear.

Refleti sobre isso por um momento: do que se trata tudo isso?

Acredite, você não está sozinho. Essas quatro opções provavelmente deixarão até mesmo um novato perplexo, quanto mais alguém que usa o WordPress há anos. Este artigo apresenta as dificuldades que encontrei e as lições que aprendi na prática. Você não precisa consultar a documentação; basta seguir minhas instruções.

O que são exatamente esses quatro tipos de incorporação?

Vamos começar falando sobre que tipo de personagem são essas quatro opções.

Padrão (Bloqueado)Isso se chama bloqueio padrão. É a abordagem mais simples: o navegador para quando encontra um script, baixa e executa-o completamente e, em seguida, continua a renderizar a página. Parece confiável, certo? Mas a desvantagem é que o carregamento inicial da página será bloqueado; os usuários terão que esperar o script terminar de ser executado antes de poderem ver qualquer coisa.

Utilizando JS para não-bloqueioIsso é bem interessante. Em vez de escrever tags `<script>` diretamente na página, primeiro ele gera um pequeno script e, em seguida, injeta dinamicamente os scripts que precisam ser carregados na página usando JavaScript, após a página estar em execução. Dessa forma, a página pode ser renderizada primeiro e os scripts podem ser carregados gradualmente. Parece ótimo, não é? No entanto, o problema é que esse processo de injeção dinâmica pode interromper a ordem de execução original dos scripts. Se alguns scripts na sua página dependem muito da ordem de execução, podem surgir problemas.

Use "assíncrono" para não bloqueante.Isso envolve adicionar o atributo `async` à tag `<script>`. O script será baixado de forma assíncrona em segundo plano e executado imediatamente após o download, sem que a página precise esperar. No entanto, a desvantagem é que a ordem de execução fica completamente incontrolável; o script que terminar de baixar primeiro será executado primeiro, independentemente da ordem especificada no código.

Usando "delay" para não bloqueanteÉ isso que significa adicionar o atributo `defer`. O script aguardará até que toda a página seja analisada antes de ser executado e, o mais importante, manterá a ordem original em que você o escreveu. Isso é bastante amigável ao usuário, pois não bloqueia a primeira tela nem interrompe a ordem.

Qual devo escolher?

Simplificando, essas quatro opções são como uma questão de múltipla escolha:Você prefere velocidade ou ordem?

Minha sugestão é a seguinte:

Se o seu site for pequeno, tiver poucos scripts e você não tiver requisitos extremamente altos de velocidade de carregamento, usar a configuração padrão (bloqueada) é a opção mais fácil. Embora seja um pouco mais lenta, não causará nenhum problema.

Se você deseja melhorar a velocidade de carregamento da primeira tela e seus scripts não possuem dependências fortes, como "A deve ser executado antes de B", priorize...Usando "delay" para não bloqueante(adiar). Esta é quase a solução ideal no momento, pois não bloqueia a renderização nem interrompe a ordem.

Se você tentar adiar e ainda assim algumas funções apresentarem problemas, considere...Utilizando JS para não-bloqueioEssa solução é mais radical, mas sua compatibilidade é ligeiramente pior.

Use "assíncrono" para não bloqueante.(async) é a opção que menos recomendo. Como a ordem de execução fica completamente bagunçada, é fácil ocorrer uma falha, a menos que você tenha certeza absoluta de que seus scripts estão sendo executados de forma independente.

Duas grandes armadilhas em que caí

Falar é fácil. Anotei dois erros que cometi; você pode compará-los com sua própria experiência para ver se consegue evitá-los.

O primeiro problema: os temas personalizados do WordPress não podem ser visualizados em tempo real.

Por um tempo, ao personalizar um tema, depois de clicar em salvar, a pré-visualização não atualizava. Eu fazia algumas alterações, atualizava a página e continuava igual.

Após alguma investigação, descobri que a função de compressão do Minify era a culpada. A solução é simples:

Acesse o plugin W3 Total Cache.常规设置,virar para cima"compressão"Desmarque essa opção. Em seguida, clique na pequena seta abaixo de "Salvar configurações" no canto superior direito e selecione "..."Salve as configurações e limpe o cache.Este passo é crucial; se você não limpar o cache, continuará vendo a versão antiga.

Após concluir, volte à personalização do tema e a pré-visualização ao vivo voltará ao normal.

O segundo problema: a caixa de pesquisa do tema Astra não responde ao clique.

Encontrei esse problema há algum tempo. Eu estava usando o tema Astra e, de repente, percebi que a caixa de pesquisa não respondia, independentemente de como eu clicasse nela. A princípio, pensei que fosse um problema com o próprio tema, mas depois descobri que era causado pelas configurações de minificação do W3TC.

A solução é a seguinte:

Acesse W3 Total Cache → Configurações Gerais → Configurações Avançadas de Compressão → JS → Configurações do Mecanismo de Minificação → Configurações de Localidade e altere o tipo de incorporação para um destes dois:

1. Anteriormente, o comportamento não bloqueante era obtido usando JavaScript.
2. Em seguida, use JS para não bloquear o processo.

Da mesma forma, limpar o cache e atualizar a página permitirá que a caixa de pesquisa funcione corretamente.

Quanto ao motivo da escolha dessas duas opções em vez de outras, fiz algumas pesquisas. Simplificando, os componentes front-end do tema Astra são bastante sensíveis ao momento da execução do script, e certos métodos não bloqueantes podem causar falhas na vinculação de eventos. Usar o modo "não bloqueante com JS" garante que o script seja executado somente após o carregamento completo da página, evitando a execução desordenada observada com o modo assíncrono.

落地清单

Por fim, aqui está uma lista de verificação que você pode seguir diretamente:

O primeiro passo é esclarecer seu objetivo. Você deseja o carregamento inicial mais rápido da página ou prioriza a estabilidade e o funcionamento sem erros? Isso determinará qual tipo de incorporação você deve usar.

O segundo passo é não mudar tudo de uma vez. Primeiro, encontre uma página menos importante para testar, observe-a por um ou dois dias e só promova a alteração para todo o site se tiver certeza de que não há problemas.

Terceiro, limpe sempre o cache após cada modificação. O mecanismo de cache do W3TC impede que você veja as alterações mais recentes, portanto, a etapa de "limpar o cache e testar novamente" é absolutamente essencial.

Em quarto lugar, use as ferramentas de desenvolvedor do seu navegador ou ferramentas como o PageSpeed ​​Insights para comparar a velocidade de carregamento antes e depois. Deixe os dados falarem por si, e não apenas sua intuição.

Escreva no final

Para ser sincero, quando vi essa configuração de tipo embutido pela primeira vez, fiquei perplexo por um bom tempo. O modo de bloqueio padrão parecia muito lento, enquanto o modo assíncrono não garantia a ordem e o adiamento poderia causar problemas de compatibilidade. Eu estava indeciso sobre qual opção escolher.

Mas depois percebi que é uma questão de equilíbrio. Não dá para ter o mais rápido e o mais estável ao mesmo tempo; sempre é preciso sacrificar um dos dois. Minha experiência é usar `defer` primeiro, que atualmente é a solução não bloqueante mais segura, e depois usar um callback caso surjam problemas.

Se você se deparar com problemas semelhantes ou se ainda tiver outras dificuldades após seguir meu método, fique à vontade para discutir o assunto. O desenvolvimento de sites é uma questão de tentativa e erro; ninguém está isento.

Obrigado por ler meu artigo. Até a próxima!