Cumulative Layout Shift (CLS) é um dos Core Web Vitals que mede a estabilidade visual de uma página da web. Uma pontuação alta de CLS indica que os usuários estão enfrentando mudanças inesperadas no conteúdo da página durante sua visita. Para os proprietários de lojas WooCommerce, isso pode ser particularmente problemático, pois afeta as páginas de produtos, potencialmente levando a uma experiência ruim para o usuário. Este tutorial o guiará pela correção de problemas de CLS nas páginas de produtos WooCommerce.
Identificando problemas de CLS
Primeiro, é importante identificar onde os problemas de CLS estão ocorrendo. Use o Google PageSpeed Insights ou a ferramenta Lighthouse no Chrome DevTools para executar uma auditoria de site. Procure especificamente por valores de CLS.
O Google Web Console também pode ajudar:
Corrigindo CLS com ajustes CSS
Uma solução comum envolve fazer ajustes CSS para estabilizar o layout durante o carregamento. Aqui está um guia passo a passo:
- Identifique o elemento problemático: Procure elementos que causem mudanças de layout, como imagens ou conteúdo dinâmico. Em páginas de produtos do WooCommerce, geralmente é a galeria de produtos.
- Aplicar correções CSS – O código define uma altura fixa para a galeria de produtos para evitar mudanças inesperadas durante o carregamento das imagens.
Código da área de trabalho
@media screen e (largura mínima: 922px) { .woocommerce-product-gallery { altura mínima: 630px; altura máxima: 630px; } }Código Móvel
@media screen e (largura máxima: 921px) { .woocommerce-product-gallery > .flex-control-nav li { altura: calc(25vw - 1,5em) !importante; } } @media screen e (largura máxima: 500px) { .woocommerce-product-gallery { altura máxima: calc((25vw - 1,5em) + (100vw - 56px) + 1em); } } @media screen e (largura mínima: 545px) e (largura máxima: 921px) { .woocommerce-product-gallery { altura máxima: calc((25vw - 1,5em) + (100vw - 117px) + 1em); } }Recomendado: Usando um plugin de galeria
Se modificar CSS parecer muito complexo, usar um plugin WooCommerce de terceiros também pode resolver problemas de CLS:
Galeria de imagens de variações adicionais do WooCommerce
Este plugin ajuda a gerenciar diferentes imagens de produtos e mantém um layout consistente!
Resolver problemas de CLS em páginas de produtos do WooCommerce pode melhorar significativamente a experiência do usuário e melhorar as métricas de desempenho do seu site. Ao aplicar correções CSS direcionadas ou alavancar um plugin de qualidade, você pode mitigar mudanças de layout e fornecer uma apresentação de página mais estável.
Esta correção é baseada em uma solução que encontrei nos Fóruns do WordPress, que foi muito útil. Você pode encontrar a discussão original e a solução aqui: Problema de mudança de layout cumulativa (CLS) em páginas de produtos. – Obrigado a Vishal Lohar ❤️
Dicas adicionais:
- Sempre inspecione o DOM para adaptar as propriedades CSS ao seu tema específico.
- Atualize regularmente plugins e temas para se beneficiar das melhorias e correções contínuas oferecidas pelos desenvolvedores.
- Considere consultar a equipe de suporte do seu tema para obter insights adicionais relevantes à arquitetura específica caso você encontre problemas persistentes.
Portuguese 
English 
German