O Google ajusta seu algoritmo de pesquisa central continuamente e, em breve, o desempenho geral da web terá um fator importante na classificação das páginas. O Google avaliará as três métricas a seguir coletadas de usuários reais ao determinar as classificações:
- Pintura de maior conteúdo (LCP)
- Atraso na primeira entrada (FID)
- Mudança cumulativa de layout (CLS)
Essas métricas juntas constituem a iniciativa Web Vitals do Google. Nesta postagem, discutiremos o CLS especificamente, com foco especial em como evitar mudanças de layout em aplicativos Next.js.
O que é CLS?
O Google define a mudança cumulativa de layout da seguinte maneira:
O CLS mede a soma total de todas as pontuações de mudança de layout individual para cada mudança de layout inesperada que ocorre durante toda a vida útil da página. Uma mudança de layout ocorre sempre que um elemento visível muda sua posição de um quadro renderizado para o outro.
Em termos mais simples, CLS é uma medida das mudanças entre os componentes quando uma página é carregada. Em última análise, é representado por uma pontuação de mudança de layout, calculada conforme abaixo:
pontuação de mudança de layout=fração de impacto * fração de distância
Onde a fração de impacto é a soma da área de impacto de todos os elementos instáveis entre dois quadros, e a fração de distância é a distância do movimento de um elemento ou componente entre dois quadros.
Mudanças de layout são comumente causadas por anúncios/incorporações, conteúdo injetado dinamicamente e imagens sem dimensões. Vamos explorar como lidar com o CLS para cada um desses casos.
Como corrigir CLS
Anúncios/incorporações
Os anúncios são uma importante fonte de receita para muitas páginas da web e não podem ser ignorados. Quando um novo contêiner de anúncio é inserido no DOM, no entanto, ele pode causar um sério refluxo ou mudança de layout; pode mover partes de toda a página da web. Além dos problemas de inserção, se o contêiner do anúncio for redimensionado devido ao seu conteúdo ou à biblioteca de anúncios, isso também criará atrito adicional.
Podemos consertar isso seguindo as técnicas abaixo:
- Crie um contêiner vazio como um marcador de posição para o anúncio, de modo que, quando um anúncio for inserido, não mova outros elementos na página e reduza o CLS
- Indique as dimensões máximas do anúncio para que ele não redimensione e acione mudanças de layout. Se o anúncio for um banner ou no topo da janela de visualização, preste ainda mais atenção
- Caso nenhum anúncio seja retornado, evite remover o marcador, pois isso também acionará uma mudança de layout
Conteúdo injetado dinamicamente
O conteúdo dinâmico é outra causa importante de mudanças de layout. Sem espaços reservados, esse conteúdo ou componentes (por exemplo, um contêiner de”aceitar cookies”) pode causar uma séria mudança de layout. Mesmo com contêineres de espaço reservado, um aumento ou diminuição no tamanho do conteúdo esperado causará uma mudança de layout.
O conteúdo dinâmico também pode ser o resultado de uma chamada de rede/resposta de API bem-sucedida. Esses dados serão inicialmente vazios e carregados após uma chamada de rede bem-sucedida, causando mudanças de layout.
Além de um contêiner de espaço reservado otimizado, uma interface do usuário esqueleto é uma excelente correção para conteúdo dinâmico. Considere uma página de produto de comércio eletrônico como exemplo. Um componente de esqueleto de cada item de produto criará um layout limpo e, após uma resposta de API bem-sucedida, esses componentes de esqueleto são atualizados sem grandes mudanças de layout.
Imagens sem dimensões
Imagens sem dimensões são uma das causas de CLS mais comuns, mas facilmente corrigíveis. Uma imagem sem dimensões predefinidas não ocupará nenhum espaço na tela até que seja carregada. Assim, quando é carregado, ele muda todos os elementos ao seu redor, causando um efeito dominó de mudanças de layout.
Podemos corrigir isso adicionando os atributos height e width às tags de imagem:
Essa é uma altura e largura fixas, no entanto, o que ainda causaria uma mudança de layout em um design responsivo. Portanto, em um design responsivo, as dimensões fixas não ajudam muito. Além disso, como CSS se tornou uma forma muito mais desejável de dimensionar imagens, precisamos de uma solução melhor.
Aqui é onde a CSS proporção propriedade entra em cena. Ainda passamos os atributos altura e largura , mas usamos proporção para manter a proporção entre esses atributos.
Aqui, mantemos a proporção da imagem como um valor constante, independentemente do tamanho real da imagem, o que nos ajuda a combater melhor o CLS. Infelizmente, com muita frequência, os desenvolvedores ignoram ou diminuem a prioridade dessa otimização relativamente simples.
Correção de CLS em Next.js
Next.js é uma estrutura progressiva construída no React que visa implementar padrões e restrições para corrigir os problemas que discutimos acima. Vamos ver como aproveitar as técnicas acima com Next.js e como elas são suportadas desde o início.
Imagens e Next.js
Conforme discutido acima, imagens sem dimensões são uma das principais causas de mudanças de layout. Para combater isso, Next.js tem um componente Image , que é um invólucro sobre o elemento img .
O que esse componente faz exatamente?
-
As propriedades
-
heightelargurasão opcionais na tagimg. Como resultado, muitos desenvolvedores tendem a ignorá-lo, causando uma pontuação CLS ruim. O componente Next.jsImagetornaheightewidthos adereços necessários, mantendo o desenvolvedor honesto. Ele também mantém aproporção da imagempronta para uso - O componente
Imagetem suporte mágico parasrcsets, permitindo assim uma experiência suave em dispositivos e janelas de visualização de diferentes tamanhos - Também suporta pré-carregamento de imagens quando necessário. No entanto, por padrão, as imagens são carregadas lentamente para melhorar o desempenho
Aqui está um exemplo de sintaxe:
Anúncios e Next.js
Embora Next.js não tenha suporte pronto para uso para anúncios, podemos aproveitar o componente Layout para lidar melhor com as mudanças de layout. Next.js nos permite criar um componente Layout que pode ser usado como um layout/estrutura básica para todas as páginas do aplicativo.
Os anúncios geralmente são colocados no mesmo local em todas as páginas de um determinado aplicativo da web. Podemos criar um componente Layout com contêineres de espaço reservado para anúncios e incluí-lo no arquivo _app.js . Isso ativa contêineres de anúncios em todas as páginas e, quando o anúncio for carregado, deve haver um mínimo ou nenhuma mudança de layout.
Também podemos aproveitar isso para um esqueleto da interface do usuário, dependendo do tipo de aplicativo da web. Veja a sintaxe abaixo:
# Layout.jsx export const Layout=()=> () # _app.js importar {Layout} de'../components/Layout' função padrão de exportação MyApp ({Component, pageProps}) { Retorna () }
Dessa forma, podemos lidar com mudanças de layout para todo o aplicativo em um único ponto.
Dica bônus: CLS e componentes estilizados com Next.js
Se você está usando componentes estilizados com Next.js e não prestou atenção o suficiente, haverá grandes mudanças de layout. Isso ocorre porque Next.js é SSR por padrão e, portanto, carrega JavaScript para o cliente com estilos básicos. os componentes estilizados, por outro lado, são executados em tempo de execução no navegador.
Isso força novos estilos na página da web, causando redesenho e refluxo. Para evitar isso, use babel-plugin-styled-components e use os componentes estilizados ServerStyleSheet no _document.js para aplicar estilos no lado do servidor, evitando refluxos após renderizar no navegador.
Conclusão
Seguindo as técnicas acima, podemos reduzir drasticamente as mudanças de layout em aplicativos Next.js. Isso é necessário para manter um bom SEO, mas, mais do que isso, cria uma experiência de usuário mais suave e agradável em nossos aplicativos da web.
A postagem Como corrigir mudanças de layout para melhorar o SEO em Os aplicativos Next.js apareceram primeiro no LogRocket Blog .
