Core web vitals será um fator de classificação em breve em maio de 2021.
Mas muitos usuários do WordPress lutam para corrigir problemas porque não sabem como aplicar as soluções ao WordPress.
- Existe um plugin para isso?
- Como faço para corrigir isso sem um plug-in?
- Mostre-me o código e onde colocá-lo!
- Em quais grupos do Facebook posso encontrar respostas?
Este guia cobre quase todas as recomendações encontradas na seção de oportunidades e diagnósticos do PageSpeed Insights. Claro, se você deseja uma medição mais precisa dos sinais vitais da web, deve usar Lighthouse ou o núcleo relatório do Web vitals no Search Console. Você desejará visualizar o relatório de sinais vitais da web central para celular, pois o Google usa mobile-first indexing .
O Search Console informa se o seu site WordPress tem problemas com os três princípios vitais da web:
Pintura com maior conteúdo (LCP)
LCP é o maior elemento na janela de visualização.
O maior elemento geralmente é uma imagem, imagem de plano de fundo ou tag H1, mas pode ser qualquer um destes:
- Imagem
- Imagem de fundo
- Vídeo ou animação
- Elemento de nível de bloco
Seu maior elemento de pintura com conteúdo pode ser visto no relatório PageSpeed Insights. Nesse caso específico, o elemento LCP é uma imagem de plano de fundo que aparece em todo o site.
Otimizando LCP
- Pré-carregue a imagem LCP
- Comprima a imagem LCP (tente 85%)
- Veicule a imagem LCP de seu CDN
- Reduza o tamanho da imagem LCP usando WebP ou SVG
- Exclua a imagem LCP (e outras imagens na janela de visualização) do carregamento lento
- Use plug-ins de descarregamento de ativos para remover JavaScript e CSS não usados
- Elimine recursos de bloqueio de renderização com Autoptimize + Async JavaScript
- Reduza o TTFB (saia da hospedagem compartilhada e experimente um provedor de hospedagem em nuvem mais rápido)
- Evite carregar JavaScript pesado de terceiros (por exemplo, anúncios) acima da dobra
- Atrasar JavaScript usando Flying Scripts ou “atrasar a execução de JavaScript” no WP Rocket
- Otimize as fontes (hospedar localmente, pré-carregar, usar exibição de fontes: trocar, reduzir pesos/ícones)
- Pré-conecte CDNs e fontes de terceiros se estiver usando-os (ou seja,//fonts.gstatic.com)
- Minimize o CSS e use CSS crítico (certifique-se de otimizar a entrega de CSS no plug-in de cache)
- Leia mais sobre como corrigir o LCP
Mudança cumulativa de layout (CLS)
CLS significa que os elementos do seu site estão mudando.
Você pode encontrá-los em Google’s Layout Shift Debugger .
Eles também são mostrados em seu relatório de diagnóstico do PageSpeed Insights em “evitar grandes mudanças de layout”. Ao visualizar o relatório, você verá quais elementos têm a maior contribuição do CLS.
Otimizando CLS
- Especifique dimensões para imagens, vídeos, iframes
- Especifique dimensões de anúncio comuns em contêineres div
- Tente evitar mostrar anúncios na janela de visualização
- Corrija o FOIT adicionando “display de fonte: troca” ao CSS da sua fonte
- Hospede fontes localmente em seu servidor e teste o pré-carregamento
- Evite o formato de fonte TTF (geralmente é muito mais lento do que WOFF)
- Use a transformação CSS em animações em vez de atributos de largura/altura
- Certifique-se de que a entrega de CSS otimizada esteja funcionando (ou seja, no WP Rocket) para evitar FOUC
- Atrase o JavaScript para evitar novo conteúdo, a menos que seja acionado pela interação do usuário
- Ao mover elementos, use transform: translate () em vez de top, bottom, left, right
- Leia mais sobre como corrigir CLS
Primeiro Atraso de Entrada (FID)
FID é o momento em que um usuário interage com o página (ou seja, clicar em um link ou botão) para o momento em que a página realmente responde. Isso não inclui rolagem ou zoom. O FID requer um usuário real e não pode ser medido no laboratório, então Google sugere o uso do tempo total de bloqueio ( TBT ) em vez disso.
O atraso de entrada geralmente acontece quando o thread principal do navegador está ocupado fazendo outra coisa. Tarefas de thread principal longas podem ser causadas por seu website (verifique seu relatório de tarefas de thread principal longo) ou causadas por um website de terceiros (verifique sua redução de impacto de terceiros-relatório de código da festa).
Otimizando FID e TBT
- Adiar, atrasar, reduzir o JavaScript
- Use GZIP ou Brotli (de preferência Brotli, que é mais rápido)
- Teste se a combinação de CSS/JS tem um impacto positivo
- Corrija os erros 4xx e 5xx em seu gráfico em cascata GTmetrix
- Remova o JavaScript não utilizado com um plug-in de descarregamento de ativos
- Remova criadores de páginas pesados que adicionam muito CSS/JS extra
- Tente usar plug-ins livres de jQuery e evite plug-ins de carregamento lento
- Verifique se há problemas com “otimizar entrega CSS” nos plug-ins de cache
- Reduza o impacto do código de terceiros (fontes, análises, GTM, anúncios, vídeos)
- Considere dividir arquivos CSS/JS grandes em vários arquivos menores (divisão de código)
- Otimize imagens e animações, especialmente se elas causarem longas tarefas de discussão principal
- Se estiver usando um construtor de páginas pesado, considere codificar o cabeçalho, o menu, a barra lateral e o rodapé
- Leia mais sobre como corrigir TBT
1. Evite um tamanho excessivo de DOM
tamanho do DOM pode ser reduzido simplificando seu design.
Construtores de páginas como Elementor e Divi tinham wrappers div extras, CSS e JavaScript em seu site. Uma coisa simples que você pode fazer é reduzir o número de colunas/widgets em seu design. Este vídeo mostra como reduzir os elementos DOM no Elementor, mas os conceitos podem ser usados em outro lugar.
Pode ser entediante replicar seu design enquanto tenta reduzir elementos DOM, JS, CSS e fontes criadas por construtores de páginas. Se você planeja usar um construtor de páginas, isso pode exigir mais trabalho.
É por isso que você verá muitas pessoas nos grupos do Facebook mudando do Elementor/Divi para construtores mais leves, como Gutenberg, Oxygen Builder, GeneratePress e Kadence.
Grandes payloads de rede significa que você precisa reduzir o tamanho da página. O PageSpeed Insights informa quais arquivos têm um tamanho de transferência grande. Pode ser qualquer coisa, desde uma única imagem até JavaScript (ou seja, JS de terceiros), fontes ou CSS. Otimize arquivos com o maior tamanho. Seu gráfico em cascata GTmetrix pode classificar arquivos JavaScript pelo maior tamanho: As mudanças de layout foram abordadas brevemente na seção CLS , mas vamos nos aprofundar. O Layout Shift Debugger do Google e até mesmo as recomendações de”evitar grandes mudanças de layout”no PSI podem não ser úteis porque não dizem como realmente melhorar o CLS. Pode ser causado por fontes (FOIT) que podem afetar a página inteira. Também pode ser por não especificar as dimensões das imagens, iframes e anúncios. Estas são maneiras comuns de realmente melhorar a pontuação CLS. Corrigir FOIT, FOUT, FOUC -são um flash de texto invisível, texto sem estilo ou conteúdo sem estilo. Usar font-display: swap (para garantir que o texto permaneça visível durante o carregamento da webfont) e otimizar a entrega de CSS (feito no WP Rocket e na maioria dos plug-ins de cache) pode corrigir o CLS causado por fontes e CSS. Especifique as dimensões de imagens, vídeos, iframes -refere-se a “usar largura e altura explícitas nos elementos da imagem” e significa que você precisa adicionar largura + altura do elemento no HTML ou CSS. Reserve espaço para anúncios e conteúdo dinâmico – anúncios sem dimensões também podem causar mudanças de layout. Dentro do código div do anúncio, inclua o tamanho mais comumente usado do anúncio (ou o maior).
2. Evite enormes cargas de rede
3. Evite grandes mudanças de layout
width="680"height="250"/>