Passe em todos os testes de CWV e PageSpeed ​​Insights com essas técnicas de desenvolvimento do WordPress

Em 2021, na StrategiQ, uma agência digital full stack sediada no Reino Unido, estabelecemos como meta começar a desenvolver todos os sites que desenvolvemos e lançamos para passar no desempenho Core Web Vitals (CWV) e PageSpeed ​​Insights (PSI) do Google relatório.

Os Core Web Vitals mostram o desempenho do seu site de várias maneiras. Isso inclui a velocidade de carregamento do primeiro conteúdo em uma página (primeira e maior pintura de conteúdo), a velocidade de quanto tempo um usuário precisa esperar antes de poder interagir com ele (tempo para interação) e mudanças de layout (mudança de layout cumulativa) .

Testar seu CWV é tão fácil quanto torta - basta acessar https://pagespeed.web.dev/ e inserir seu endereço. A área superior exibe os dados mais recentes do mundo real dos últimos 28 dias, enquanto a seção inferior (uma pontuação de 100, tanto para dispositivos móveis quanto para computadores) são dados gerados em laboratório.

Por que isso importa? Bem, porque o Google diz isso.

Em julho de 2018, o Google anunciou que a velocidade é um fator de como um site aparece nos resultados da pesquisa, especialmente em dispositivos móveis. Fonte.

Em 2020, eles também anunciaram que as métricas de experiência do usuário (que compõem o Core Web Vitals/CVW) agora são usadas na forma como classificam os sites. Fonte.

É simples: quanto mais rápido e com melhor desempenho um site, melhor será sua classificação.

Então, a equipe de desenvolvimento da StrategiQ decidiu que era nossa vez de ajudar o departamento de SEO. Os especialistas em SEO podem trabalhar seus pequenos vagabundos o máximo que puderem, mas um site com um desempenho terrível pode fazer muito mais mal do que bem. Um site que passa CWV e PSI, no entanto, garantirá que seu excelente trabalho tenha um trampolim brilhante.

O que vale a pena notar é que CWV e PSI são notoriamente difíceis de passar. A grande maioria dos sites não, mesmo muitos dos sites mais famosos do mundo . Pense no YouTube, BBC e até o próprio WP Engine lutam para obter um passe no celular e no desktop ( desculpe pessoal ).

Então, o que fizemos para garantir que vimos aqueles deliciosos donuts de delícias verdes?

Retiramos tudo e trabalhamos em um mantra simples:

Carregue o mínimo possível, o mais rápido possível.

Embora eu não vá entrar nos mínimos detalhes, vou passar por nossos métodos principais para manter nossos temas WordPress personalizados o mais simplificados possível.

Em primeiro lugar, vamos falar de hardware. Não podemos continuar sem antes falar sobre o WP Engine. Sem dúvida, eles são um dos melhores fornecedores de hospedagem específicos para WordPress, se não os melhores. Ficamos muito satisfeitos com o suporte impressionante, o tempo de atividade, os ambientes para cada instalação, backups e a facilidade de gerenciamento de certificados e domínios SSL, entre muitos outros recursos. Além disso, seu cache e otimização de velocidade hard-baked garantem que o site funcione o mais rápido possível no nível do servidor.

Com um servidor de alto desempenho em seu núcleo, sabemos que agora cabe a nós fazer um site funcionar o mais rápido possível.

Como a maioria das agências, temos nosso próprio modelo base feito à mão que usamos como ponto de partida para todos os nossos sites personalizados. Cada site que criamos é projetado e codificado internamente – não um tema pré-construído à vista.

Nosso modelo base tem nossos métodos de otimização de velocidade embutidos, bem como uma série de funções inteligentes e componentes reutilizáveis ​​que precisamos em todos os projetos. Ter esse ponto de partida nos economiza tempo a longo prazo e garante que cada site tenha o melhor desempenho possível com pouca sobrecarga exigida pelo desenvolvedor.

Eu sei o que você está pensando - vá para as coisas boas!

Não vou me incomodar em listar as coisas chatas que você vê em todos os posts de blog por aí, como “imagens de carregamento lento”. Mas se você não fizer isso, isso é realmente uma obrigação – temos uma função de imagem que imprime nossas imagens carregadas com srcset e tags de tamanhos (conhecidas como imagens responsivas).

Vamos direto ao assunto.

Método 1: bloco e enfileiramento

Acontece muito: um projeto tem apenas um arquivo css e um arquivo js, ​​e eles acabam inchando do tamanho de um pequeno planeta. Qual o proximo? O Google pergunta “por que você está carregando estilos e javascript não sendo usados ​​nesta página?”. Por quê? Por que?!

É um ponto válido. Por que você deve carregar massas de css e javascript para um site inteiro quando você precisa apenas de uma fração disso por página?

Todos os nossos sites são inteiramente construídos com blocos Gutenberg. Isso significa que, para cada bloco, você pode utilizar o brilhante poder de enfileirar seus arquivos css e js.

Para cada bloco, criamos um arquivo css e js separado apenas para esse arquivo (se necessário). Estes são então reduzidos (veja o próximo ponto para mais informações) e enfileirados bloco a bloco.

O resultado? Carregamos apenas o que está realmente lá em cada página.

Método 2: use um executor de tarefas como gulp para combinar e minimizar seus ativos

Todos os ativos gerados são minificados por uma função gulp (outras estão disponíveis, como grunt). Vale a pena notar que muitas luas atrás, o Google teria preferido a concatenação à minificação (uma solicitação grande teria sido preferível a 5 solicitações pequenas), mas desde o surgimento do HTTP/2 (que multiplexa várias solicitações ao mesmo tempo), isso não é mais uma questão.

Novamente, fazemos isso para manter os arquivos tão pequenos quanto possível. Portanto, agora não estamos apenas carregando ativos que estão na página, eles também são minúsculos em tamanho.

Método 3: pare de renderizar recursos de bloqueio

Garantimos que todos esses ativos enfileirados estejam na parte inferior da página e, portanto, não bloqueiem a renderização.

Até retiramos da fila o jQuery que vem com o WordPress e enfileiramos uma nova versão (uma que não tenha vulnerabilidades de segurança), também na parte inferior da página.

Mas e um FOUC (Flash of Unstyled Content) ouço você dizer?

Método 4: acima da dobra css

Um Flash de conteúdo sem estilo ocorre quando uma página é carregada inicialmente sem nenhum estilo, pois a folha de estilo está na parte inferior da página. Uma vez que a folha de estilo é carregada, os estilos são aplicados, o site pisca e finalmente parece correto.

Para corrigir isso, dividimos os estilos de dobra acima e adicionamos como uma tag <style> inline no cabeçalho. Não é um recurso de bloqueio de renderização e não recebemos um FOUC.

Método 5: WP Rocket

A peça final do quebra-cabeça é o melhor plug-in de desempenho WP Rocket da categoria. Construído em conjunto com os engenheiros do WP Engine, é o único plug-in de cache permitido em sua plataforma de hospedagem.

Os resultados?

Bem, as pontuações falam por si.

SportsAidEastern é uma instituição de caridade que apoia atletas britânicos. De acordo com a PSI, o site que desenvolvemos para eles pontua impressionantes 97/100 no celular e 100/100 no desktop.

A Calligo oferece serviços de dados transformadores, e suas pontuações no site são ainda melhores do que na SportsAid; chegando a um quase perfeito 99/100 no celular e 100/100 no desktop.

Conclusão

Espero que isso tenha sido uma lufada de ar fresco de todas as outras postagens do site “como acelerar seu WordPress” lá fora, e se você está lutando para obter um passe, talvez tenhamos destacado algo que você pode experimentar.

A StrategiQ é a agência de marketing que prioriza a estratégia. Ao descobrir insights valiosos de mercado, revelando oportunidades de concorrentes, definindo e fornecendo estratégias de marketing eficazes, nossa equipe ajuda marcas ambiciosas a superar seus objetivos por meio de consultoria, criatividade, marketing e tecnologia.
Se você precisa de estratégia, aconselhamento, recursos ou experiência, dê o primeiro passo. Conte-nos sobre você e veremos como podemos ajudar.