O Google está mais uma vez a atualizar o seu algoritmo e é grande. A atualização do Core Web Vitals é lançado 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 Contentosa (LCP), Primeiro Atraso de Entrada (FID) e Mudança de Layout Cumulativa (CLS).
Para este post no blog, vamos focar apenas em um destes elementos: Mudança de layout cumulativa e o que você pode fazer como desenvolvedor frontend para corrigi-lo.
Como se sabe se tem turnos de layout cumulativos
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 PerformanceMonitoring . Com uma ferramenta de monitoramento de desempenho projetada para desenvolvedores, você terá uma visão instantânea do UX do seu aplicativo com recursos que medem o Apdex Score, a latência, as informações de consulta e rota e muito mais.
Combinem isto com o Moovweb, que otimiza totalmente a velocidade do vosso website, e estarão num excelente local para não só medir a experiência de utilização da vossa aplicação, mas para ficar cinco passos à frente.
Depois de saber onde está o seu website até ao seu UX e CLS, é hora de o corrigir.
Como os desenvolvedores frontend podem corrigir mudanças cumulativas de layout
Já alguma vez tentaram clicar num artigo num website, apenas para o mover de repente, e acabam por clicar noutra 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 cumulativa de layout ocorre quando um elemento no seu site é carregado depois de tudo o resto ser carregado. Pode ser altamente irritante para os utilizadores. Não só o Google vai te dar conta disso, mas você vai perder potenciais utilizadores que preferem ir a um site diferente do que esperar o seu carregamento. Evite isso, demorando para corrigir problemas do CLS antes que eles tenham impactos nos seus utilizadores.
Como desenvolvedor Frontend, aqui estão quatro ações que você pode tomar para reduzir a mudança cumulativa de layout no seu site:
Atualizar fontes
As fontes adicionam personalidade 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 abrandar 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ê codifique fontes como tais
Em vez disso, você deve usar o seguinte bit de código
O “Tipo de letra” diz à fonte de exibição da API t0 imediatamente usando uma fonte do sistema. Uma vez carregado o arquivo de fonte, ele irá então trocá-lo com a fonte que você quer no seu site.
Infelizmente, o método FOUT pode não funcionar com todos os navegadores. Se isso não acontecer, então o navegador irá reverter para os seus comportamentos padrão para carregar fontes. Pode ver uma descrição detalhada destes comportamentos utilizando 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 como atualizar uma linha de código.
Assim como com o método anterior, você esperará até que a fonte padrão esteja totalmente carregada e depois a mude 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 código JavaScript, você pode então implementar o observador de rosto de fonte. Este código irá monitorizar e notificar quando uma fonte web é carregada. Usando eventos de rolagem, o observador de rosto de fonte pode carregar fontes rapidamente. Para o guia completo, veja a página do fontfaceobserver no GitHub.
Como desenvolvedor frontend, estas são algumas mudanças simples que você pode fazer para melhorar o tempo de carregamento de fontes.
Corrigir imagens no seu site
A forma como as imagens são carregadas no seu website 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 na classificação do seu site no Google. Agora, com a atualização do Core Vitals, vai fazer uma diferença significativa. Você vai querer aproveitar o tempo extra para incluir atributos às suas imagens a partir daqui.
Quando carrega uma imagem como tal:
Ex: <>O monitoramento de erros do h1 é< ótimo /h1>
<p> Encontrar e corrigir código quebrado< rapidamente /p>
<Img src Erron_image.jpg” alt>
<p>Com o software correto de monitorização de erros, pode manter o seu código livre de erros.</p>
Acontece o seguinte: O navegador do utilizador irá ler e descarregar primeiro o HTML. Uma vez feito isso, ele finalmente baixará a imagem. O que acaba por acontecer é uma mudança de conteúdo na página da web à medida que o navegador dá espaço para a imagem.
Corrigir este problema CLS é simples: Basta adicionar as etiquetas de atributo altura e largura à sua imagem.
Ex: <>O monitoramento de erros do h1 é< ótimo /h1>
<p> Encontrar e corrigir código quebrado< rapidamente /p>
largura: 450 cm de altura: 450 cm>
<p>Com o software correto de monitorização de erros, pode manter o seu código livre de erros.</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 das abordagens está incorreta, mas é imperativo que você use uma ou outra para evitar mudanças cumulativas de layout no 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 o seu conteúdo a passar por todo o lado se não tiverem cuidado com eles.
Ao colocar anúncios no 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 no 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 web.
Estas são as melhores práticas quando se trata de anúncios dinâmicos. Não só melhorarão drasticamente a experiência do utilizador, mas também mudanças cumulativas de disposição.
Tenha cuidado com os widgets embutidos
Os widgets incorporados são um fator decisivo para os websites. 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 um desafio reservar espaço no seu website para um widget.
Digamos que você tem 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 as suas incorporações reservando espaço no seu site. Mas como fazer isso?
Você precisará criar uma “GlobalKey” e atribuí-la ao seu widget. Uma vez que você tenha uma chave, você será capaz de encontrar o tamanho do seu widget e reservar a quantidade apropriada de espaço no seu site para os seus widgets.
Conclusão
Existem apenas alguns métodos que você pode usar para reduzir as mudanças cumulativas de layout no seu site. Muitas questões relacionadas com CLS envolvem espaço e reservar espaço suficiente no seu website para imagens, anúncios e widgets. A forma como você carrega fontes também afetará significativamente a velocidade do seu site.
Lembre-se que com a implementação do Core Web Vitals em maio, você deve começar a fazer essas mudanças agora para evitar cair no ranking do Google.
