{"id":2888,"date":"2023-11-23T19:00:00","date_gmt":"2023-11-23T22:00:00","guid":{"rendered":"https:\/\/liveseo.com.br\/cumulative-layout-shift-cls\/"},"modified":"2024-04-02T11:25:48","modified_gmt":"2024-04-02T14:25:48","slug":"cumulative-layout-shift-cls","status":"publish","type":"post","link":"https:\/\/liveseo.com.br\/seo\/cumulative-layout-shift-cls\/","title":{"rendered":"Cumulative Layout Shift (CLS): Saiba como melhorar a m\u00e9trica"},"content":{"rendered":"

Cumulative Layout Shift (CLS): entenda o que \u00e9 e como medir a m\u00e9trica<\/h2>\n

CLS \u00e9 uma m\u00e9trica que avalia o total de mudan\u00e7as inesperadas de layout que ocorrem durante e ap\u00f3s o carregamento da p\u00e1gina, sendo representada em forma de pontua\u00e7\u00e3o.<\/em><\/p>\n

Developers Google sobre CLS<\/a><\/p><\/blockquote>\n

A estabilidade visual de um site desempenha um papel fundamental na experi\u00eancia do usu\u00e1rio, influenciando diretamente a maneira como os visitantes percebem e interagem com o conte\u00fado. Um dos indicadores mais importantes para avaliar essa estabilidade \u00e9 o Cumulative Layout Shift (CLS), que mede as mudan\u00e7as inesperadas no layout da p\u00e1gina durante o carregamento e a intera\u00e7\u00e3o.<\/p>\n

Um CLS alto pode resultar em experi\u00eancias frustrantes para os usu\u00e1rios, levando a uma classifica\u00e7\u00e3o inferior nos mecanismos de busca e \u00e0 perda de visitantes. A boa not\u00edcia \u00e9 que \u00e9 poss\u00edvel melhorar o CLS do seu site por meio de pr\u00e1ticas recomendadas pelo pr\u00f3prio Google!<\/p>\n

Eu sou Sarah Anselmo, Head de Conhecimento na liveSEO e neste guia, exploraremos diversas estrat\u00e9gias para aprimorar a estabilidade visual do seu site, garantindo que os visitantes desfrutem de uma experi\u00eancia de usu\u00e1rio suave e sem distra\u00e7\u00f5es. Vem comigo para descobrirmos como voc\u00ea pode aperfei\u00e7oar o Cumulative Layout Shift e proporcionar uma experi\u00eancia web de alta qualidade.<\/p>\n

O que \u00e9 CLS ou Cumulative Layout Shift?<\/h2>\n

CLS, ou Cumulative Layout Shift, \u00e9 uma m\u00e9trica de desempenho de web design e usabilidade, que mede a estabilidade visual de uma p\u00e1gina da web. Ela faz parte do conjunto de m\u00e9tricas do Google Page Experience<\/strong> e \u00e9 uma das m\u00e9tricas essenciais para avaliar a qualidade de uma experi\u00eancia do usu\u00e1rio em um site.<\/p>\n

O CLS mede a quantidade de mudan\u00e7a de layout inesperada que ocorre em uma p\u00e1gina da web enquanto ela \u00e9 carregada e interagida pelo usu\u00e1rio. Isso pode ocorrer quando elementos como imagens, an\u00fancios, v\u00eddeos ou outros elementos din\u00e2micos n\u00e3o t\u00eam dimens\u00f5es definidas ou carregam lentamente.<\/p>\n

Essa m\u00e9trica ganhou ainda mais relev\u00e2ncia ap\u00f3s a atualiza\u00e7\u00e3o do Google de Fevereiro de 2022.<\/a><\/p>\n

Por que esses deslocamentos cumulativos de layout acontecem?<\/h2>\n

A mudan\u00e7a tardia do layout acontece principalmente pela falta de configura\u00e7\u00e3o pr\u00e9via do tamanho dos elementos visuais no CSS ou no HTML da p\u00e1gina. Ou seja, quando o c\u00f3digo daquele URL foi constru\u00eddo, n\u00e3o foi definido exatamente a largura e altura das imagens, bot\u00f5es, textos, etc. Ent\u00e3o, na hora do carregamento, os elementos que s\u00e3o mais leves acabam ocupando o espa\u00e7o dos demais que demoram para aparecer.<\/p>\n

Por que o CLS \u00e9 importante?<\/h2>\n

Nos mecanismos de busca, como o Google, a experi\u00eancia do usu\u00e1rio \u00e9 fundamental na classifica\u00e7\u00e3o de p\u00e1ginas nos resultados de pesquisa. Portanto, um baixo CLS contribui positivamente para o SEO, ajudando o site a ser mais bem classificado.<\/p>\n

O CLS est\u00e1 diretamente relacionado \u00e0 experi\u00eancia do usu\u00e1rio. Quando uma p\u00e1gina apresenta um baixo CLS, isso significa que a experi\u00eancia \u00e9 mais est\u00e1vel e previs\u00edvel<\/strong>, pois elementos da p\u00e1gina n\u00e3o se movem inesperadamente, o que evita erros de clique, especialmente em dispositivos m\u00f3veis.<\/p>\n

Al\u00e9m disso, o CLS est\u00e1 ligado \u00e0 usabilidade. Deslocamentos inesperados de layout podem prejudicar a experi\u00eancia do usu\u00e1rio, causando confus\u00e3o e tornando a navega\u00e7\u00e3o desconfort\u00e1vel.<\/p>\n

E devemos acrescentar que a instabilidade visual causada por um alto CLS pode afetar a percep\u00e7\u00e3o de confiabilidade e profissionalismo do site, afetando a imagem de marca e credibilidade.<\/p>\n

\"causa<\/h2>\n

O que causa uma m\u00e1 pontua\u00e7\u00e3o no CLS?<\/h2>\n

Alguns dos principais motivos que contribuem s\u00e3o:<\/p>\n

Carregamento ass\u00edncrono de recursos<\/h3>\n

Quando os recursos, como imagens, v\u00eddeos, scripts, folhas de estilo, ou outras m\u00eddias<\/strong>, s\u00e3o carregados de forma s\u00edncrona (ou seja, bloqueando a renderiza\u00e7\u00e3o), eles podem causar mudan\u00e7as inesperadas na disposi\u00e7\u00e3o dos elementos na p\u00e1gina. Isso pode resultar em uma m\u00e1 experi\u00eancia do usu\u00e1rio, especialmente se o conte\u00fado da p\u00e1gina se desloca ou salta enquanto o usu\u00e1rio a visualiza.<\/p>\n

Falta de dimens\u00f5es definidas<\/h3>\n

Se os elementos na p\u00e1gina n\u00e3o t\u00eam dimens\u00f5es (width<\/em> e height<\/em>) definidas no c\u00f3digo HTML ou CSS, o navegador n\u00e3o sabe quanto espa\u00e7o alocar para esses elementos antes que o conte\u00fado seja carregado, resultando em ajustes de layout \u00e0 medida que os elementos s\u00e3o renderizados.<\/p>\n

Inje\u00e7\u00e3o de conte\u00fado din\u00e2mico<\/h3>\n

Conte\u00fado din\u00e2mico, como an\u00fancios que s\u00e3o carregados ap\u00f3s a p\u00e1gina principal ou elementos gerados por JavaScript, pode causar deslocamentos de layout, pois o espa\u00e7o para esses elementos n\u00e3o \u00e9 reservado antecipadamente.<\/p>\n

Carregamento lento de fontes web<\/h3>\n

Se as fontes web usadas em uma p\u00e1gina demoram a carregar, os textos na p\u00e1gina podem ser inicialmente exibidos com uma fonte de fallback<\/strong>, e quando as fontes web forem carregadas, isso pode causar deslocamentos de layout.<\/p>\n

Imagens sem dimens\u00f5es especificadas<\/h3>\n

Aqui tamb\u00e9m o problema envolve width <\/em>e height. <\/em>Quando as imagens n\u00e3o t\u00eam largura e altura definidas em seu c\u00f3digo HTML ou CSS, o navegador n\u00e3o sabe o tamanho exato da imagem, o que pode resultar em ajustes no layout \u00e0 medida que as imagens s\u00e3o carregadas.<\/p>\n

Para saber mais sobre as m\u00e9tricas de experi\u00eancia do usu\u00e1rio, acesse nosso conte\u00fado sobre Core Web Vitals e UX<\/a>. L\u00e1 te explicamos sobre o LCP, FID e mais.<\/p>\n

\"boaO que \u00e9 uma boa pontua\u00e7\u00e3o CLS?<\/h2>\n

Uma boa pontua\u00e7\u00e3o CLS \u00e9 aquela que \u00e9 pr\u00f3xima de zero ou muito pr\u00f3xima de zero. Em outras palavras, uma boa pontua\u00e7\u00e3o indica que n\u00e3o houve ou houve apenas mudan\u00e7as m\u00ednimas de layout e n\u00e3o perturbadoras durante a intera\u00e7\u00e3o do usu\u00e1rio com a p\u00e1gina da web.<\/p>\n

Segundo o Developers Google:<\/p>\n

Ao contr\u00e1rio das outras Principais m\u00e9tricas da Web, que s\u00e3o valores baseados em tempo medidos em segundos ou milissegundos, a pontua\u00e7\u00e3o de CLS \u00e9 um valor sem unidade baseado em um c\u00e1lculo da quantidade de conte\u00fado que est\u00e1 mudando e em que ponto.<\/em><\/p>\n

Developers Google sobre Otimiza\u00e7\u00e3o CLS<\/a><\/p><\/blockquote>\n

De fato, uma pontua\u00e7\u00e3o CLS absolutamente zero pode ser dif\u00edcil de alcan\u00e7ar na pr\u00e1tica, especialmente em p\u00e1ginas complexas e din\u00e2micas. Ent\u00e3o, a defini\u00e7\u00e3o de uma “boa” pontua\u00e7\u00e3o CLS pode variar dependendo do contexto<\/strong>. Geralmente, o Google define as seguintes faixas de pontua\u00e7\u00e3o CLS:<\/p>\n