É impossível manter o Google completamente feliz. Eu desisti há muito tempo, embora haja questões a resolver, tais como a CLS (Turno de Layout Acumulado).
Deslocamento Acumulado de Layout
O Deslocamento Acumulado de Layout é a mudança cumulativa no layout. Esta métrica é importante porque analisa estabilidade visual e a frequência com que os visitantes experimentam mudanças inesperadas de layout
Em resumo, isto mede qualquer deslocamento dos elementos no topo da página durante o carregamento.
Alcançar um CLS baixo ajuda a assegurar que a página é agradável aos olhos e evita movimentos irritantes que podem resultar na perda de visão e/ou posição de elementos de navegação importantes.
É considerada uma boa experiência de utilização se o CLS não exceder 0,1, até 0,25 precisa de melhorar e a partir daí é considerada uma má pontuação. Isto, como eu acho que você sabe, pode ser medido de várias maneiras. O mais comummente utilizado é PáginaSpeed Insights.
Como referido na documentação do Vitais Centrais da Web documentação, um mau CLS pode ser causado por vários elementos tais como uma imagem ou vídeo com dimensões desconhecidas, uma fonte que é exibida maior ou menor do que a sua alternativa, ou um anúncio ou widget de terceiros que muda de tamanho de forma dinâmica
Paradoxalmente, alguns dos elementos que tendem a escovar os CLS são os anúncios do Google Adsense. Especialmente se usar o anúncios automáticos opção (não recomendada). Há casos em que eles até arruínam completamente a velocidade de carregamento.
Como detectar a rolagem
Agora que estamos no meio da tentativa de resolver a questão do Adsense, podemos dar uma vista de olhos ao resto dos elementos que podem estar a engordar o CLS. Existem diferentes maneiras de o fazer, aqui estão algumas.
Olhando para
O método mais rústico é a simples observação, a olho nu. Se o movimento for perceptível, você vai vê-lo imediatamente, mas há movimentos menos perceptíveis que requerem uma inspecção mais atenta.
Na Consola de Pesquisa
Em GSC, em "Top web metrics", pode obter a lista de URLs com problemas de CLS e LCP para os ver mais de perto um a um.
Com uma extensão de browser
Você pode instalar a extensão Chrome CLS Checker - Viagem Mais Além e testar todos aqueles URLs, s que estão cheios de pontuação. Além disso, a extensão dá pistas sob a forma de etiquetas vermelhas e mostra-lhe a lista de elementos e o CLS que eles consomem. Clicando em "Toogle" realça o elemento em questão. No meu caso, como a questão do anúncio do Adsense já estava resolvida, apenas um aparece.
Vídeo
Depois de fazer um teste em webpagetest.org você pode ver os vídeos que ele gera.
Pausar o vídeo facilita a procura de pequenas deslocações.
Também gera um gif animado como este. Se olhar atentamente, tanto os itens do menu como o título e o texto rolam um pouco devido ao que parece ser uma mudança no tamanho da fonte e/ou colocação, mas o espaço de anúncio acima do título já está reservado, por isso não rolam para baixo.
Mas isso é outra cápsula, agora vamos lidar com o comportamento dos anúncios.
Soluções para reservar espaços de blocos de anúncios
Ao procurar a melhor e mais rápida solução, descobri que adicionar um valor mínimo de altura a um invólucro (div) em torno de cada um dos blocos de anúncios para reservar esse espaço e evitar a rolagem após o carregamento era o caminho a seguir
Contudo, parece que não é suficiente usar apenas uma classe para apontar para esta propriedade CSS, mas também para usar uma identificação para o invólucro. Parece que, por alguma razão desconhecida, o Google AdSense JavaScript remove as directivas de altura mínima de qualquer objecto pai. No entanto, eles não são removidos se você usar uma identificação para o CSS targeting.
Isto é explicado aqui resumido e de certa forma mais detalhada na documentação do Google. Como esta solução parecia ser uma dor, como eu tinha de verificar todos os blocos, continuei à procura de uma alternativa até encontrar o que funcionava para mim Inseridor de anúncios. Estes foram os passos.
Mudança de anúncios adaptativos para tamanho fixo
A primeira coisa foi parar de usar blocos de anúncios adaptativos. Eu mudei todos os blocos para tamanhos fixos
Sobre esta decisão você tem de estudar e avaliar o seu caso específico.
Embora o Google afirme que os adaptativos geram mais receitas (obviamente por causa da possibilidade de poder mostrar tamanhos diferentes), isto é bastante elástico e pode variar de acordo com cenários diferentes. Se optar pelos tamanhos mais populares, estará sempre a mostrar anúncios.
Optimização do tamanho de desactivação
Embora os blocos já devam ter um tamanho fixo, é melhor desactivar a opção que permite ao Google decidir por si próprio o tamanho dos anúncios móveis. Esta opção pode ser encontrada na administração do Adsense em Ads/Global Settings.
Desta forma evitamos surpresas no caso de termos perdido um anúncio que tenhamos colocado à mão. Em qualquer caso, só porque têm um tamanho fixo, não significa que já não respondam.
Reservar espaço para anúncios com Inseridor de Anúncios
O Inseridor de anúncios é, penso eu, o melhor plugin para a gestão de anúncios, que pode até ser usado para adicionar outros conteúdos
Para reservar espaço para cada anúncio, basta ir a "Mostrar" e definir a largura e altura de cada bloco.
Se você usar o su versão PROtambém pode verificar a Carga Preguiçosa, que também tende a ajudar a aliviar um pouco mais o CLS.
E já agora, pode certificar-se de que não tem dimensões em falta nas imagens, isto também pode ser corrigido de várias maneiras. Algumas rápidas e fáceis são para usar Perfmatters o WP Foguete (ambos por uma taxa).
Ou o plugin Litespeed Cache se você hospedar o seu blog num servidor Litespeed.
Se tudo correr bem, verá o CLS cair nos relatórios de campo em poucas horas e em poucos dias nos relatórios de laboratório de PáginaSpeed Insights.
