Home Blogs Como os desenvolvedores Frontend podem corrigir a mudança de layout cumulativa
Applications

Como os desenvolvedores Frontend podem corrigir a mudança de layout cumulativa

About The Author

Outline

O Google está mais uma vez atualizando seu algoritmo – e é grande. A atualização do Core Web Vitals é realizada em maio, e é tudo sobre velocidade e experiência do usuário. Mais especificamente, o Google começará a medir tudo o seguinte: Maior dor Contentful (LCP), Primeiro Atraso de Entrada (FID) e Mudança de Layout Cumulativa (CLS).

Para este post do blog, vamos nos concentrar em apenas um desses elementos: Mudança de Layout Cumulativa e o que você pode fazer como desenvolvedor frontend para corrigi-lo.

Como você sabe se você tem mudanças de layout cumulativas

Use o Page Speed Insights para ver quantitativamente a mudança de conteúdo do seu site (juntamente com outras métricas, como LCP e FID).

Como o Core Web Vitals é sobre a experiência do usuário, pode ser útil ter uma ferramenta como o Airbrake Performance Monitoring. Com uma ferramenta de monitoramento de desempenho projetada para desenvolvedores, você obterá insights instantâneos sobre o UX de seu aplicativo com recursos que medem o Apdex Score, latência, informações de consulta e rota e muito mais.

Combine isso com o Moovweb, que otimiza totalmente a velocidade do seu site, e você estará em um excelente lugar para não apenas medir a UX de seu aplicativo, mas ficar cinco passos à frente.

Depois de saber onde seu site está tão longe quanto seu UX e CLS, é hora de corrigi-lo.

Como os desenvolvedores frontend podem corrigir mudanças cumulativas de layout

Você já tentou clicar em um artigo em um site, apenas para tê-lo de repente se mover, e você acaba clicando em outra coisa? Ou, talvez, você esteja no meio da leitura de um artigo, e tudo muda para baixo. Sim, esses são exemplos de mudanças cumulativas de layout. Uma mudança de layout cumulativa ocorre quando um elemento no seu site é carregado depois que tudo o resto foi carregado. Pode ser altamente irritante para os usuários. Não só o Google vai te dar conta disso, mas você vai perder potenciais usuários que preferem ir a um site diferente do que esperar o seu carregamento. Evite isso demorando para corrigir problemas do CLS antes que eles afetem seus usuários.

Como desenvolvedor Frontend, aqui estão quatro ações que você pode tomar para reduzir a mudança cumulativa de layout em seu site:

Atualizar fontes

Fontes adicionam caráter e personalidade a um site, mas essas fontes especializadas têm um custo. Devido à grande natureza dos arquivos de fonte, os navegadores tendem a compensar usando FOIT, também conhecido como flash de texto invisível. O FOIT pode diminuir drasticamente os tempos de carregamento de páginas web.

Em vez de confiar no FOIT, você deve usar o método “flash de texto sem estilo” (FOUT). A maneira mais fácil de mudar o texto do site para o FOUT é com o seguinte método:

Tradicionalmente, você codif

Em vez disso, você deve usar o seguinte bit de código

O “Font-display” informa a fonte de exibição da API t0 imediatamente usando uma fonte do sistema. Uma vez que seu arquivo de fonte tenha sido carregado, ele irá trocá-lo com a fonte que você quer em seu site.

Infelizmente, o método FOUT pode não funcionar com todos os navegadores. Se isso não acontecer, o navegador reverterá para seus comportamentos padrão para carregar fontes. Você pode ver uma descrição detalhada desses comportamentos usando esta ferramenta .

O segundo método que você pode usar para eliminar longos tempos de carregamento para arquivos de fonte funciona com todos os navegadores, mas não é tão simples quanto atualizar uma linha de código.

Assim como com o método anterior, você vai esperar até que a fonte padrão esteja totalmente carregada e, em seguida, mudá-la para uma fonte personalizada. A diferença é que você precisará mergulhar no código CSS e JavaScript do seu site.

Primeiro, você vai querer evitar usar fontes personalizadas após o carregamento inicial da página, atualizando seu CSS. Use uma fonte do sistema para baixar o texto da sua página o mais rápido possível.

Usando o código JavaScript, você pode implementar o Font Face Observer. Este código irá monitorar e notificá-lo quando uma fonte da Web for carregada. Usando eventos de rolagem, o observador de rosto de fonte pode carregar fontes rapidamente. Para o guia completo, confira a página fontfaceobserver GitHub.

Como desenvolvedor frontend, essas são algumas mudanças simples que você pode fazer para melhorar seus tempos de carregamento de fontes.

Corrigir imagens em seu site

A forma como as imagens são carregadas no seu site terá um impactos significativo e reduzirá as mudanças cumulativas de layout. Imagens carregadas sem atributos tendem a causar mudanças maciças. É por isso que é melhor usar as seguintes práticas ao adicionar imagens ao seu site:

Use atributos de tamanho em imagens e elementos de vídeo

Antes desta atualização, adicionar atributos de “largura” e “altura” às suas imagens fez pouco ou nenhum impactos sobre a classificação do seu site no Google. Agora, com a Atualização do Core Vitals, isso fará uma diferença significativa. Você vai querer aproveitar o tempo extra para incluir atributos às suas imagens a partir daqui.

Quando você carrega uma imagem como tal:

Ex: <h1>O monitoramento de erros é<incrível /h1>

<p>Encontre e corrija o código quebrado<rapidamente /p>

<Img src Erron_image.jpg” alt>

<p>Com o software correto de monitoramento de erros, você pode manter seu código livre de bugs.</p>

O seguinte acontece: O navegador do usuário irá ler e baixar o HTML primeiro. Uma vez feito isso, ele finalmente baixará a imagem. O que acaba acontecendo é uma mudança de conteúdo na página da web, pois o navegador dá espaço para a imagem.

Corrigir este problema CLS é simples: Tudo o que você precisa fazer é adicionar as tags de atributo de altura e largura à sua imagem.

Ex: <h1>O monitoramento de erros é<incrível /h1>

<p>Encontre e corrija o código quebrado<rapidamente /p>

largura: 450″ altura: 450″>

<p>Com o software correto de monitoramento de erros, você pode manter seu código livre de bugs.</p>

Quando você adiciona a largura e a altura à imagem, você está dizendo ao navegador para deixar espaço para ela na página da Web enquanto o resto do documento HTML é baixado.

Para uma abordagem menos rigorosa, você também pode usar caixas de proporção de aspeto CSS.

Nenhuma abordagem está incorreta, mas é imperativo que você use uma ou outra para evitar mudanças cumulativas de layout em seu site.

Coloque cuidadosamente anúncios dinâmicos

Os anúncios são terríveis quando se trata de mudanças de layout de conteúdo. Eles terão seu conteúdo indo por todo o lugar se você não tiver cuidado com eles.

Ao colocar anúncios em seu site, use estas dicas para evitar mudanças no seu conteúdo:

  • Assim como com as imagens, você precisa ter certeza de que os anúncios têm espaço reservado suficiente em seu site.

  • Não coloque anúncios no topo da sua página. Há uma chance de que isso cause uma mudança de conteúdo para todo o conteúdo abaixo dele.

  • Coloque anúncios perto do meio ou da parte inferior de uma página da Web.

Estas são as melhores práticas quando se trata de anúncios dinâmicos. Eles não só melhorarão drasticamente a experiência do usuário, mas também mudanças cumulativas de layout.

Tenha cuidado com widgets incorporados

Os widgets incorporados são um divisor de águas para sites. Eles permitem que você crie conteúdo interessante e portátil para o seu site, mas eles têm desvantagens significativas. Ao contrário de imagens e anúncios, pode ser desafiador reservar espaço em seu site para um widget.

Digamos que você tenha um widget para o Twitter. Às vezes, um tweet pode ter apenas alguns carateres; outras vezes, pode incluir imagens e links, então como você sabe quanto espaço você precisa reservar quando o espaço necessário está mudando continuamente?

Você pode corrigir isso enviando um espaço reservado para suas incorporações, reservando espaço em seu site. Mas como fazer isso?

Você precisará criar um “GlobalKey” e atribuí-lo ao seu widget. Uma vez que você tenha uma chave, você poderá encontrar o tamanho do seu widget e reservar a quantidade adequada de espaço no seu site para seus widgets.

Conclusão

Existem apenas alguns métodos que você pode usar para reduzir mudanças cumulativas de layout em seu site. Muitos problemas relacionados ao CLS envolvem espaço e reservar espaço suficiente no seu site para imagens, anúncios e widgets. Como você carrega fontes também afetará significativamente a velocidade do seu site.

Lembre-se de que com o lançamento do Core Web Vitals em maio, você deve começar a fazer essas alterações agora para evitar cair no ranking do Google.