Core Web Vitals: o que são e como melhorá-los de 5 maneiras simples

Os Core Web Vitals são marcadores de interação de páginas que quantificam a experiência do utilizador de um sítio Web. Resumidamente, estas indicações indicam a rapidez com que os consumidores poderão interagir com o seu sítio Web e o tipo de resultado que obterão. Estas métricas indicam igualmente a facilidade de navegação dos utilizadores no sítio Web.

As pontuações da experiência da página melhorarão se melhorar a sua experiência do utilizador e melhorar o seu sítio Web em geral.

Quais são as três principais métricas do Core Web Vitals?

Existem três parâmetros no conjunto Core Web Vitals:

1. Maior tinta de conteúdo (LCP)

O tempo de processamento das maiores partes apresentadas a uma população é uma medida Core Web Vitals que os gestores de sítios podem utilizar para avaliar a experiência do utilizador e determinar se este considera uma página benéfica.

Para proporcionar uma experiência de utilizador agradável, os proprietários de sítios Web necessitam que as suas páginas sejam carregadas rapidamente. Não só o tempo de carregamento da página é importante para uma excelente experiência do utilizador, como uma página que responde rapidamente também tem mais hipóteses de obter uma classificação mais elevada no Google. Além disso, quando comparada com uma página com tempos de carregamento fracos, foi demonstrado que os tempos de carregamento rápidos afectam a notoriedade e o envolvimento.

Como melhorar o LCP no Core Web Vitals?

• Comece por remover quaisquer scripts de terceiros desnecessários: De acordo com o nosso recente estudo sobre a velocidade das páginas, cada script de terceiros torna uma página mais lenta em 34 milissegundos.
• Actualize o seu serviço de alojamento web: Em geral, um melhor alojamento equivale a tempos de carregamento mais rápidos (incluindo LCP).
• Estabelecer carregamento preguiçoso: O carregamento lento impede que as imagens sejam carregadas até que o utilizador percorra a página. Como resultado, será capaz de atingir o LCP muito mais rapidamente.
• Considere a possibilidade de remover os grandes elementos da página: O Google PageSpeed Insights pode dizer-lhe se um elemento da sua página está a tornar o LCP mais lento.

2. Deslocação cumulativa da estrutura (CLS)

Para aumentar o envolvimento e as vendas, os operadores de sítios Web devem facilitar ao máximo a interação dos visitantes com hiperligações e ícones nas suas páginas. O deslocamento cumulativo do layout é uma estatística que reconhece as hiperligações ou os botões que se deslocam depois de uma página Web ter sido carregada e indica até que ponto será difícil para as pessoas interagirem com os itens do seu sítio depois de a página ter sido apresentada.

Uma forte experiência do utilizador requer uma boa experiência do utilizador e um bom design, e um cliente ficará agitado se o sítio Web de uma empresa mudar de elementos durante a leitura. A CLS ajuda os programadores a determinar se as imagens ou hiperligações de um sítio Web mudam, permitindo que os detentores de direitos de autor melhorem a acessibilidade, aumentem as taxas de cliques e aumentem as vendas online.

O CLS compara os pontos de partida dos componentes na janela de visualização em duas molduras apresentadas. Este indicador, em termos simples, ajuda os proprietários do sítio a determinar se materiais como texto, ícones e anúncios são deslocados enquanto uma pessoa lê o conteúdo de uma determinada página.

Como melhorar o FID no Core Web Vitals?

• O JavaScript deve ser mínimo: É quase difícil para os visitantes interagirem com uma página enquanto o navegador está a carregar JS. Consequentemente, para a FID, é fundamental minimizar ou adiar o JS no seu sítio Web.
• Elimine quaisquer scripts de terceiros que não sejam absolutamente necessários: Os scripts de terceiros (como o Google Analytics, heatmaps, etc.) podem ter um impacto negativo no FID, tal como no FCP.
• Utilize o stock do seu browser: Isto acelera o carregamento do conteúdo da sua página. Isto permite que o browser do utilizador complete as tarefas de carregamento JS ainda mais rapidamente.

3. Atraso da primeira entrada (FID)

Os consumidores desejam páginas que sejam rápidas de carregar e fáceis de interagir na Internet. O atraso na primeira entrada é uma métrica que analisa as latências de interação (o tempo necessário para que um componente do sítio Web reaja à entrada de um utilizador), a fim de descobrir páginas que possam frustrar o seu público.

Para oferecer material aos seus espectadores, os sítios Web modernos utilizam uma variedade de soluções emergentes e widgets de atribuição dinâmica. Embora esta forma de material possa aumentar a entrega de conteúdos, também pode causar atrasos, obrigando os utilizadores a esperar que o browser responda aos seus pedidos.

Para aumentar o envolvimento e a usabilidade em todo o sítio, os programadores devem limitar o tempo que os clientes passam à espera que um sítio Web responda à sua atividade.

Como minimizar o FID no Core Web Vitals?

• Para qualquer suporte (vídeo, fotografias, GIFs, infográficos, etc.), utilize as seguintes dimensões de propriedade de tamanho definido: Desta forma, o browser do utilizador saberá exatamente quanto espaço o componente ocupará na página. Não será alterado em tempo real até que a página esteja completamente carregada.
• Certifique-se de que todos os elementos do anúncio têm um espaço dedicado: Caso contrário, podem aparecer inesperadamente no sítio Web, empurrando a informação para a esquerda, para a direita ou para os lados.
• Abaixo da dobra, adicione novos elementos de IU: Desta forma, não empurram para baixo o conteúdo que o utilizador "espera" que se mantenha.

Formas de melhorar o Core Web Vitals

Deve fazer uma breve avaliação da monitorização do desempenho da Internet para ver como o seu sítio Web funciona em termos dos principais sinais vitais da Web. Pode fazê-lo com as ferramentas do Google, como a Consola de Pesquisa e o Page Speed Insights, bem como com ferramentas independentes como GTmetrix.

Além disso, a implementação de testes de garantia de qualidade de ponta a ponta ajuda a validar que as optimizações de desempenho são eficazes em diferentes dispositivos e browsers, garantindo que as melhorias do Core Web Vitals se traduzem em ganhos reais na experiência do utilizador.

Vale a pena comparar dados e atualizar a sua página de forma mais económica se fizer relatórios de desempenho com várias ferramentas.

1. Aumentar a produtividade com que o seu servidor responde

"Quanto mais tempo o browser demorar a obter informações do controlador de domínio, mais tempo demorará a gerar tudo o que aparece no ecrã", acrescenta a Google. Cada métrica de página separada, incluindo o LCP, é diretamente melhorada por um tempo de resposta do servidor mais rápido."

Mais importante ainda, um tempo de resposta prolongado do servidor pode prejudicar não só a sua SEO como também a experiência do utilizador.

Para além de melhorar a resposta do servidor, é crucial abranger as práticas fundamentais de SEO. Garantir a estrutura adequada do site, tempos de carregamento rápidos e conteúdo optimizado irá melhorar a experiência do utilizador e as classificações de pesquisa. Juntamente com estas tarefas obrigatórias, a utilização das ferramentas de SEO corretas pode tornar o processo muito mais fácil - ferramentas como Ahrefs, Manngools e Semush são excelentes opções. Para quem procura alternativas, existem várias Ferramentas de SEO semelhantes à Semrush que podem ajudar a acompanhar o desempenho e a melhorar as classificações de forma eficaz.

Utilize o Tempo até ao primeiro byte (TTFB) para determinar o tempo de resposta do servidor. Esta métrica determina quando o navegador Web do utilizador obtém o primeiro byte do resultado da sua publicação.

No entanto, reúna estatísticas sobre o desempenho atual do seu servidor antes de começar a perceber qual é o seu desempenho. Aqui estão algumas dicas para considerar quando tiver concluído o relatório:

• Examine a velocidade do alojamento do seu sítio.
• Utilizar um rede de distribuição de conteúdos (CDN) para o seu sítio Web.
• Examine os seus plug-ins. Porquê? Porque cada extensão acrescenta mais peso à sua página, o que pode diminuir a velocidade do seu sítio Web. Resta apenas o essencial.

O tempo de resposta de um servidor deve ser inferior a 600 milissegundos, de acordo com o Google.

A ler: Como o Web design pode impulsionar as suas vendas

2. Otimização e compressão de imagens

Não acha que é evidente? As imagens, por outro lado, são as características mais importantes em muitos sítios Web. Por conseguinte, a sua otimização é fundamental, embora possa tornar a sua página substancialmente mais leve, aumentando o tempo de carregamento, a classificação LCP, a experiência do utilizador e a classificação nos motores de busca.

Ao reduzir as fotografias com micro jpg e aumentar o desempenho do LCP, pode minimizar o tamanho total da página. Talvez possa pensar que a compressão de imagens reduz a qualidade da imagem ou reduz a resolução. Aparentemente, a diferença só é visível quando se espreita ou se a fotografia for guardada no formato incorreto. De preferência, tente guardar fotografias de paisagens em formato jpg e gráficos em formato png. Os formatos da próxima geração, como o JPEG 2000, JPEG XR e WebP, também podem ser utilizados, no entanto, recomendamos que faça alguma pesquisa primeiro.

Para além da compressão, também é fundamental ativar a Rede de distribuição de conteúdos (CDN) para fotografias. Uma rede de distribuição de conteúdos (CDN) é uma rede global de servidores que coloca o seu material em cache. Como os servidores estão espalhados por todo o mundo, as fotografias podem ser processadas mais rapidamente a partir do anfitrião mais próximo dos utilizadores.

3. Implementar o carregamento lento

Se utiliza fotografias no seu site, é imperativo utilizar o carregamento lento para proteger a experiência do utilizador e a pontuação vital da Web do seu site. O empilhamento preguiçoso permite-lhe fornecer imagens no momento exato em que os espectadores percorrem a página, preservando a velocidade de carregamento do site e garantindo uma pontuação LCP de topo.

Outras vantagens do carregamento lento incluem:

• A funcionalidade do seu sítio Web será melhorada.
• Isto irá definir um limite para a largura de banda que pode ser utilizada.
• Isto pode ajudar na otimização do seu sítio para os motores de busca.
• Isto manterá os clientes no sítio Web durante mais tempo e reduzirá a taxa de rejeição.

O seu sítio Web vai beneficiar do carregamento lento? De acordo com o HubSpotO carregamento lento é uma necessidade para páginas com muitos gráficos, animações ou vídeos (chamados elementos pesados). No entanto, não existem critérios rígidos e rápidos para as páginas que devem utilizar o carregamento retardado. Se a pontuação LCP do seu site for baixa, pode considerar a implementação do carregamento lento e o relatório de desempenho antes e depois.

4. Reduzir a execução do JavaScript (JS)

Se o conteúdo do FID for baixo, isso sugere que a sua página interage com os utilizadores durante mais de 300 milissegundos. Pode ponderar a otimização e minimização da execução de JS. Isto reduz o tempo necessário para o seu browser executar o código JS e apresentar a página.

É também vital consumir a menor quantidade de memória possível. Porquê? Quando o código do seu site faz um pedido ao navegador, cria um novo bloco de memória, que desactiva o JavaScript e pode fazer com que a página carregue lentamente.

Atrasar JS supérfluo, de acordo com o Google, é um método para reduzir o tempo de processamento.

Siga os passos abaixo para verificar se o seu sítio Web tem algum JavaScript não utilizado:

• Para começar, vá ao seu sítio Web, clique com o botão direito do rato e seleccione "Inspecionar".
• Depois, vá a "Sources" (Fontes) e procure os três pontos na parte inferior. Deve incluir uma ferramenta chamada "Cobertura". Depois de a inserir, prima o botão "Carregar".
• Quando o carregamento estiver concluído, poderá verificar a quantidade de JavaScript que não é utilizada na sua página.

Quando descobrir quanto JS tem de sobra, deve começar a reduzi-lo. Pode fazer isso de várias maneiras, uma das quais é a divisão de código. Isto significa separar um pacote de JavaScript (ficheiros combinados num pacote) para evitar ter de fazer demasiados pedidos HTTP para carregar uma página.

5. Certifique-se de que as suas imagens e incorporações têm o tamanho correto

Uma pontuação CLS superior a 0,1 é considerada fraca e é frequentemente causada por elementos no ficheiro CSS que não têm dimensões, como fotografias, anúncios ou incorporações. As medidas são importantes se quiser aumentar a sua pontuação CLS. A possibilidade de definir a largura e a altura permite que o navegador deixe a quantidade adequada de espaço no site enquanto o conteúdo é carregado.

Por exemplo, se as proporções de uma imagem forem incorrectas, esta aparecerá normalmente mais tarde numa página. Quando um utilizador está a consumir o material, este pode cair subitamente devido ao carregamento demasiado lento de uma imagem que não foi corretamente dimensionada. Neste caso, o browser não conseguiu determinar o espaço necessário para essa imagem específica.

Para contornar esta mudança de imagem, pode reservar antecipadamente um local onde a imagem será apresentada. Se for carregado fora do ecrã, esta operação evitará a migração da disposição.

Certifique-se de que definiu as dimensões correctas para as incorporações, por exemplo, ao incorporar vídeos do YouTube no seu sítio. O vídeo pode parecer normal na parte de trás, mas pode parecer excessivamente grande ou totalmente confuso na parte da frente. Se for essa a circunstância, há um problema com as especificações e deve modificá-las com ferramentas como FlexClip.

Um guia passo a passo para descobrir uma incorporação para um vídeo do Youtube pode ser encontrado abaixo. Saiba como ajustar as dimensões para que o vídeo que escolheu fique fantástico no seu sítio Web.

• Abra o vídeo do YouTube que pretende inserir no seu sítio. 
• Em seguida, localize o botão Iniciar partilha e seleccione a opção Incorporar.
• Em seguida, todos os dados, incluindo as medidas, serão apresentados. Agora, deve colar o código no backend do seu sítio Web e ajustar a largura e a altura de acordo com as suas necessidades.

Conclusão

Embora os Core Web Vitals só sejam implementados daqui a três meses, é fundamental que comece a trabalhar neles agora. Como os dados vitais estão acessíveis, utilize as ferramentas listadas acima para avaliar os dados do seu site antes e depois de corrigir os erros.

Lembre-se de que o back-end do seu Web site interage com o front-end, por isso certifique-se de que o back-end está optimizado para proporcionar a melhor experiência de utilizador em termos de velocidade de processamento, estabilidade estética e envolvimento. Isto ajudaria se se lembrasse dos sinais de pesquisa existentes do Google, como a compatibilidade com dispositivos móveis, a navegação segura, HTTPS e normas intersticiais invasivas.