WP Rocket 3.11 – Lançando um novo CSS não usado para remover

Na WP Rocket, estamos comprometidos em tornar consistentemente nosso produto mais poderoso e simples. Queremos oferecer aos nossos Rocketeers o melhor plugin de sempre para desempenho e simplicidade - e nunca parar de melhorá-lo.

Também sabemos quais otimizações podem fazer a diferença no desempenho do seu site e quais são difíceis de resolver. A remoção de CSS não utilizado é uma delas. O CSS não usado pode afetar enormemente o tempo de carregamento e as métricas cruciais de desempenho, incluindo a maior pintura de conteúdo e a primeira pintura de conteúdo. Ao remover ou reduzir o CSS, você terá a oportunidade de melhorar drasticamente sua pontuação no PageSpeed ​​Insights e tornar seu site mais rápido.

É por isso que o WP Rocket 3.11 se concentra em um novo recurso Remover CSS não usado que ajudará você a atingir suas metas de desempenho com mais facilidade.

Continue lendo e descubra o que o recurso aprimorado significa para seus resultados de desempenho. Você aprenderá como o WP Rocket 3.11 dará um impulso extra à velocidade do seu site – e há mais por vir!

O que há de novo no WP Rocket 3.11

O WP Rocket 3.11 se concentra na reformulação Remove Unused CSS de três ângulos: disponibilidade, desempenho e compatibilidade. O novo Remove Unused CSS permanece em beta por enquanto, mas já temos um cronograma para ele – leia até o final do artigo para saber mais sobre ele.

Ao baixar nossa nova versão principal, você se beneficiará dos seguintes aspectos:

• Melhor disponibilidade – Remove Unused CSS vem com a metodologia assíncrona para evitar que o serviço fique inativo ao otimizar sua entrega de CSS. Como consequência, você também encontrará algo um pouco diferente na interface do usuário.
  
• Melhor desempenho – Esta nova versão apresenta uma mudança significativa na maneira como lidamos com o recurso Preload Font ao remover CSS não utilizado. Você deve ver um impacto positivo em suas pontuações se você estava ou não usando Remover CSS não usado antes!

• Melhor compatibilidade – Se você está preocupado com possíveis erros de remoção de CSS não usados ​​e quanto tempo levaria para corrigi-los, isso é para você.

Você pode assistir ao nosso vídeo ou pular para a próxima seção para saber mais sobre as alterações e como aproveitar cada uma delas para otimizar o desempenho do seu site.

O que significa melhor disponibilidade

O WP Rocket 3.11 vem com o Remove Unused CSS construído novamente do zero. Por quê? Porque a empatia e a humildade são dois dos nossos valores fundamentais – e nós os mantemos.

Desde que lançamos o Remove Unused CSS com o WP Rocket 3.9, ainda não conseguimos nos livrar do modo beta. Não estávamos satisfeitos com o recurso em si e como estava funcionando. A disponibilidade não era boa, e o serviço estava frequentemente inoperante. Portanto, decidimos reconstruir o recurso e mudar do método síncrono para o assíncrono. O modo assíncrono armazenará a página em cache, fará uma chamada de API e gerará o CSS usado após 60 segundos.

Essa mudança de metodologia é um divisor de águas por dois motivos:

1. Você se beneficiará de uma melhor disponibilidade. Em outras palavras, você não ficará mais preso quando o WP Rocket tentar gerar o CSS usado. Você gerará CSS usado para 100 URLs a cada 60 segundos.

2. O método assíncrono abre a possibilidade de muitos novos aprimoramentos que nunca poderíamos imaginar ao usar a metodologia síncrona. Agora poderemos trabalhar em novos recursos poderosos acontecendo ao mesmo tempo em que processamos o CSS usado, contando com chamadas de API. Considere o novo Remove Unused CSS uma prévia do futuro do WP Rocket!

A mudança na metodologia também tem impacto na forma como o processo de otimização CSS é apresentado na interface do usuário.

Até o WP Rocket 3.10, a opção Remove Unused CSS mostrava como estava o processo de CSS:

Durante o processo de CSS, não foi possível rastrear possíveis melhorias no PageSpeed ​​Insights até que o processo de CSS estivesse completamente concluído. Além disso, a otimização do CSS pode levar várias horas e ainda não funcionar devido ao servidor sobrecarregado. Esses eram problemas críticos que não apenas impediam os clientes de melhorar seu desempenho, mas também não eram dignos do produto que queríamos oferecer. É por isso que trabalhamos duro para abordá-los.

Em primeiro lugar, a metodologia assíncrona e a nova infraestrutura de servidor evitarão sobrecargas e reduzirão drasticamente os problemas enfrentados no passado. Depois que a página inicial for processada (contagem de 90 segundos), o processo de otimização de CSS será feito em lotes para o restante de suas páginas – a cada 60 segundos. Isso significa que você não precisa esperar até que o processo esteja totalmente concluído para medir suas melhorias de desempenho. A cada 60 segundos, você se beneficiará da otimização contínua de CSS e verá isso refletido na auditoria do PageSpeed ​​Insights imediatamente.

O que torna essa mudança mais direta do que nunca é o cronômetro de contagem regressiva que você encontrará no WP Rocket 3.11.

Ao ativar a opção Remover CSS não utilizado, na parte superior da página, você encontrará um cronômetro informando quanto tempo leva para o recurso processar sua página inicial.

Assim que a página inicial estiver concluída, você receberá uma nova mensagem sobre o processo Remover CSS não utilizado em todo o site:

Se você ainda não ativou o Cache Preload, verá uma mensagem recomendando que você ative a opção.

Assim como na versão anterior, ao marcar as opções “Ativar pré-carregamento” e “Ativar pré-carregamento de cache baseado em mapa do site”, você evita esperar que um usuário visite uma página para gerar o CSS usado.

Isso irá acelerar a criação do CSS usado para todo o site.

É altamente recomendável usar Remover CSS não usado e pré-carregar em cache juntos, pois você obterá dois benefícios correlacionados:

1. Você reduzirá drasticamente o tamanho do CSS.
2. Como resultado, você melhorará sua pontuação no PageSpeed ​​Insights, bem como suas notas no Core Web Vitals.

Executamos vários testes com alguns dos construtores de páginas mais populares. Habilitamos o novo recurso Remover CSS não utilizado e acompanhamos as melhorias. Como você pode ver, a economia de CSS é enorme e terá um impacto no desempenho geral:

A economia de CSS não é apenas por causa disso. Podemos ver como tais melhorias podem trazer melhores resultados de desempenho.

Construímos um site de testes usando Elementor e Astra. Ativamos o WP Rocket e ativamos o LazyLoad. Fizemos um teste inicial do PageSpeed ​​Insights e obtivemos uma nota 67.

Em seguida, executamos outro teste após habilitar o recurso Delay JS. A nota geral de desempenho melhorou muito, mas a pontuação não ficou verde, nem algumas das métricas do Lighthouse:

Finalmente ativamos Remover CSS não utilizado e executamos um terceiro teste. Nossa pontuação no PageSpeed ​​Insights obteve uma nota 94, e a primeira pintura de conteúdo e a maior pintura de conteúdo também receberam uma pontuação verde.

O que há de novo para o desempenho

Esta nova versão principal também altera o funcionamento do recurso de fontes de pré-carregamento. Até o WP Rocket 3.10, quando o Remove Unused CSS estava ativado, o plug-in ignorava as informações incluídas na guia Preload Fonts.

Agora, há uma mudança importante. Ao ativar a opção Remover CSS não utilizado e gerar o CSS usado, o WP Rocket identifica automaticamente todas as fontes e as pré-carrega automaticamente. Por quê? Porque, de acordo com nossos testes, os sites podem obter melhores pontuações no PageSpeed ​​Insights.

Dê uma olhada nos resultados de nossos testes e veja como a nota geral de desempenho e as métricas específicas melhoram graças à opção Preload Fonts:

Cenário #1 – Remover CSS não usado ativado sem fontes pré-carregadas

Cenário #2 – Remover CSS não utilizado ativado com fontes pré-carregadas

O que vem com uma melhor compatibilidade

Esta versão principal não se trata apenas de fornecer uma nova interface do usuário e melhor disponibilidade para Remover CSS não utilizado. Se você experimentou o recurso anterior Remover CSS não usado e encontrou algum problema ou bug, deve saber que o WP Rocket 3.11 tem melhor compatibilidade e precisão.

Em inglês simples, o WP Rocket 3.11 corrige automaticamente 90% dos problemas conhecidos de Remove Unused CSS . Os restantes e os novos podem ser corrigidos facilmente sem exigir uma versão menor do WP Rocket. Isso é um grande passo à frente, certo?

Quanto tempo durará a versão beta?

Apostamos que você está se perguntando como será a versão beta do Remove Unused CSS. Logo disse: vamos mantê-lo por 3 ou 4 semanas para verificar nosso servidor em escala real. Nosso objetivo é que a opção Remover CSS não utilizado funcione sem problemas em 95% dos casos. Como é um recurso tão poderoso, nosso objetivo é ativar Remover CSS não utilizado por padrão em um futuro próximo.

Claro, nós temos você coberto. Sendo um Rocketeer, você receberá um e-mail quando removermos a versão beta.

Empacotando

O WP Rocket 3.11 vem com um novo e poderoso recurso Remove Unused CSS que permite otimizar a entrega de CSS sem se preocupar com bugs ou problemas que levam tempo para serem corrigidos.

Graças ao novo Remove Unused CSS e Font Preload, você aumentará a velocidade do seu site e otimizará as métricas de desempenho do Lighthouse – não precisa se preocupar com nada!

Graças às mudanças feitas nesta grande versão, será possível desenvolver novos recursos incríveis que tornarão a otimização de desempenho mais fácil e rápida. Pronto para ver o que o futuro reserva para o WP Rocket?