Principais Web Vitais: Definição, Introdução ao LCP, FID e CLS e Dicas de Otimização dos Principais Web Vitais

O ano de 2021 é notável em mais de uma maneira. Os motores de busca evoluíram e tornaram-se mais competitivos do que nunca. O Google planeja lançar uma nova métrica revolucionária para classificar sites em seu mecanismo de pesquisa. Uma boa experiência de UX e página se tornará um fator crucial de classificação - tudo graças aos recém-introduzidos e em breve lançamentos da Web vitals principais.

Com o lançamento antecipado dos principais elementos vitais da web do Google ainda este ano, tornou-se cada vez mais crítico para as empresas acompanhar e otimizar seus sites de acordo com esse fator de classificação.

Se você não sabe o que são os principais elementos vitais da web, em que consistem e o que você pode fazer para otimizar os principais elementos vitais da web do seu site, continue lendo. Este blog é para você.

Neste blog, abordaremos o AZ dos principais elementos vitais da Web e ajudaremos você a otimizar sua página da Web para o mesmo. Vamos começar.

O que é o Core Web Vitals?

Fonte da imagem: web.dev

Os principais sinais vitais da web são sinais de classificação ou um conjunto de critérios e métricas que o Google usa para avaliar a experiência geral do usuário do seu site. Os principais web vitals do Google avaliam a velocidade, a capacidade de resposta e a estabilidade visual do seu site juntamente com os sinais de experiência do usuário existentes para avaliar a experiência geral da página e a facilidade de uso.

O Google planeja lançar esse novo sinal de classificação na tentativa de melhorar a maneira como estuda a experiência geral fornecida pela sua página. A culminação desses dados será reunida por esse mecanismo de pesquisa para classificar seu site em seus SERPS.

Quanto maior a classificação do seu site, maior será sua visibilidade. Como a experiência da página se torna um importante elemento de classificação, é inevitável que você preste atenção a ela. Para verificar os dados do Core Web Vitals do seu site, procure a seção "aprimoramentos" da sua conta do Google Search Console.

Por que o Core Web Vitals é importante?

Core Web Vitals são sinais de classificação que fazem parte da pontuação de “experiência de página” do Google. É importante porque o Google está tornando a experiência da página um fator de classificação oficial no Google.
Fonte da imagem: backlinko.com

Aqui estão alguns motivos pelos quais os principais elementos vitais da web são importantes e por que eles devem ser importantes para você:

• É uma enorme oportunidade de classificação para futuros sites que podem aproveitar ao máximo essa nova mudança na avaliação de classificação do Google desde o início.
• Na guerra entre dois sites com qualidade de conteúdo e classificação semelhantes, a experiência da página pode fazer toda a diferença.
• Os principais elementos vitais da web estão se tornando mais críticos agora porque os sites que tiveram classificações incomparáveis ​​nos SERPs do Google agora correm o risco de perder sua classificação atual para sites igualmente competitivos se não atenderem aos novos padrões de experiência de página.

Tudo considerado, é essencial lembrar que a pontuação de experiência da sua página é apenas um dos aproximadamente 200 fatores de classificação que o Google usa para classificar sites.

Para ficar à frente e desfrutar de uma vantagem de classificação competitiva sobre os outros, você deve continuar otimizando sua estratégia de SEO existente na página e fora da página, otimizando simultaneamente os principais elementos vitais da web do seu site. Embora você não perca sua classificação da noite para o dia, você certamente pode melhorar suas chances de classificação otimizando seus pontos vitais do núcleo da web com antecedência.

Três Sinais de Principais Web Vitais:

Fonte da imagem: web.dev

As três principais medidas de velocidade de página e interação do usuário consideradas pelo Google em sua avaliação principal de web vitals incluem:

• Maior pintura de conteúdo (LCP)
• Atraso da primeira entrada (FID)
• Mudança de layout cumulativa (CLS)

Sinal 1: maior pintura de conteúdo (LCP): verifica o desempenho de carregamento

O LCP é a primeira métrica vital principal da Web que o Google usa para calcular a pontuação de experiência da sua página. Ele mede o desempenho de carregamento da sua página da web.

O maior Contentful Paint ou LCP pode ser definido como a duração que leva para uma página em seu site carregar da perspectiva de um usuário real. Em palavras simples, o tempo que leva para o usuário clicar em um link para ver a maior parte do conteúdo do seu site na tela é chamado de LCP.

O LCP se concentra no que realmente importa em termos de velocidade da página, ou seja, a capacidade do usuário de ver e interagir com sua página sem obstrução.

Para verificar sua pontuação de LCP, use o Page Speed ​​Insights do Google. Tudo que você tem a fazer é:

• Visite a ferramenta Page Speed ​​Insights do Google .
• Digite seu site na caixa de pesquisa.
• Clique em Analisar.

Depois de clicar em 'analisar', o Google mostrará um relatório abrangente da sua página atual. Passe por ele para aprender sobre as lacunas em seu site. Os resultados também fornecerão uma visão do desempenho da sua página da web no mundo real com base nos dados do navegador Chrome.

Você também pode ver diretamente seus dados de LCP no Search Console (GSC) do Google. Recomendamos usar o Page Speed ​​Insights do Google pelos seguintes motivos:

• No PageSpeed ​​Insights, você obterá um relatório de uma única página da Web inserida na barra de pesquisa para análise. No console de pesquisa, você verá os dados do LCP de todo o seu site.
• Por meio do Search Console do Google, você obterá uma lista completa de URLs em seu site que são boas, ruins ou algo intermediário.
• As diretrizes de LCP do Google categorizam o LCP do seu site como 'bom', 'ruim' e 'precisa de melhorias'.

A medição LCP ideal é de 2,5 segundos ou mais rápida. Quanto mais rápido o conteúdo principal da sua página for carregado, melhor será sua pontuação no LCP. Isso pode ser um desafio para você se você tiver um site grande com páginas grandes e vários recursos.

Sinal 2: Atraso da primeira entrada (FID): verifica a interatividade / capacidade de resposta

O primeiro atraso de entrada é o segundo núcleo vital da web do Google. Ele mede a interatividade.

Em termos simples, o First Input Delay (FID) refere-se ao tempo que leva para uma página se tornar interativa. Você pode dizer que mede a duração que leva para uma atividade acontecer em uma página. Mais especificamente, ele mede o tempo que leva para os usuários realmente fazerem algo em sua página.

A medição FID ideal é inferior a 100 ms.

Aqui estão alguns exemplos de interações na página que são calculadas para pontuação FID:

• O tempo que leva para um usuário escolher uma opção no menu.
• O tempo que leva para um usuário inserir seu e-mail em um campo.
• O tempo que leva para um usuário clicar em um link na navegação do site.

Para sites de negócios que coletam dados de usuários ou solicitam detalhes de login, a pontuação do FID é incrivelmente crucial.

Sinal 3: Mudança de layout cumulativa (CLS): verifica a estabilidade visual

Um deslocamento de layout cumulativo (CLS) é um componente essencial da web que mede a estabilidade visual. É uma métrica que calcula todas as alterações de layout que não são causadas pela interação do usuário. Em outras palavras, podemos dizer que essa métrica leva em consideração a estabilidade visual de uma página enquanto ela carrega.

Se mais elementos em sua página se moverem enquanto a página estiver carregando, maior será seu CLS. Se menos elementos se moverem enquanto sua página da Web for carregada, menor será seu CLS.

Quanto menor o seu CLS, melhor o desempenho da pontuação da sua página.

Uma pontuação CLS inferior a 0,1 é considerada ideal para uma página da Web, portanto, segmente isso enquanto otimiza seu site para uma experiência de página ideal.

Como otimizar os três elementos vitais da Web (LCP, FID, CLS)

A otimização dos três principais elementos vitais da web é importante para melhorar o desempenho da página e a experiência geral da página da web. Aqui estão algumas maneiras de melhorá-los.
Como otimizar a maior pintura de conteúdo (LCP):

Aqui está uma lista do que você pode fazer para melhorar o LCP do seu site:

• Minimize seu CSS: quanto menor o CSS, mais rápido seu LCP.
• Remova elementos de página grandes: Felizmente, o Page Speed ​​Insights do Google mostrará se há um elemento em seu site que está diminuindo o LCP de sua página. Depois de identificar o que é, você pode resolvê-lo rapidamente. Por exemplo, uma análise da pontuação LCP da Techmagnate no Page Speed ​​Insights do Google mostra este elemento como defeituoso:
• Atualize seu host: com uma hospedagem melhor, vem velocidades de carregamento mais rápidas (incluindo LCP).
• Remova scripts de terceiros desnecessários: Evite scripts de terceiros o máximo que puder.
• Configure o carregamento lento: o carregamento lento significa que as imagens são carregadas apenas quando um usuário atinge o ponto em sua página da Web que apresenta uma imagem. Ao configurar o carregamento lento, você pode obter o LCP mais rapidamente.

A execução das dicas mencionadas acima pode ajudá-lo a aprimorar a perfeição do LCP necessária para obter uma boa pontuação no LCP. Quanto melhor sua pontuação no LCP, melhor sua pontuação de experiência na página e chances de classificação. Portanto, otimize seu LCP agora, se ainda não o fez.

Como otimizar o atraso da primeira entrada (FID):

Aqui estão algumas etapas que você pode fazer para melhorar as pontuações de FID do seu site:

• Minimize (ou adie) Javascript: Minimizar ou adiar JS em sua página pode ajudá-lo a aumentar a velocidade de FID de sua página da web, pois a necessidade de seu navegador carregar JS é reduzida ou eliminada.
• Remova scripts de terceiros não críticos: scripts de terceiros, como Google Analytics e mapas de calor, podem afetar negativamente o FID e a velocidade de carregamento do conteúdo. Identifique os que não são cruciais para o seu site e remova-os se não forem essenciais para a sua página da web.
• Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos: otimize o código para restringir as contagens de solicitações e minimizar os tamanhos de transferência de arquivos HTML, mídia, imagens etc.

Como otimizar o deslocamento de layout cumulativo (CLS):

Aqui estão algumas ações simples que você pode tomar para melhorar seu CLS:

• Atribua aos elementos do anúncio um espaço reservado em sua página da Web: essa tarefa simples garantirá que seu conteúdo permaneça onde deveria estar. As páginas da Web que não têm um espaço de anúncio designado tendem a atrapalhar a estrutura e o posicionamento do conteúdo, às vezes empurrando-o para cima e para baixo na página, resultando em um CLS alto e uma pontuação de experiência de página ruim.
• Adicione novos elementos de interface do usuário abaixo da dobra: quando um usuário navega por uma página em seu site, ele espera que os elementos permaneçam onde estão. Ao adicionar elementos de interface do usuário, você pode garantir que isso aconteça e que a estrutura do conteúdo da página permaneça inalterada.
• Usar dimensões de atributo de tamanho definido para mídia: é importante usar uma dimensão de atributo de tamanho definido para mídia, como vídeos, imagens, GIFs, infográficos ou outros elementos de mídia. Isso mostrará quanto espaço esse elemento ocupará nessa página, ajudando você a proteger sua página da Web contra o extravio de conteúdo sem precedentes.

Nossos serviços de design e desenvolvimento de sites ajudam a otimizar o Core Web Vitals Score.

Como medir a pontuação do Web Vitals:

Agora que você sabe quais são os três principais elementos vitais da web, aqui estão algumas ferramentas para ajudá-lo a medi-lo.

• Google Search Console: Outra ferramenta poderosa e extremamente conveniente para analisar seus principais elementos vitais da web é o Google Search Console. Ele vem com um relatório exclusivo do núcleo da web na seção de aprimoramentos que você pode verificar sempre que realizar uma auditoria do site. A melhor parte: em vez de mostrar o desempenho da página de uma única página da Web, o console de pesquisa mostra todos os dados de desempenho da página da Web de uma só vez.
• PageSpeed ​​Insight: O PageSpeed ​​Insight do Google é uma ferramenta poderosa que mostra os principais pontos vitais da web da sua página da web, juntamente com conselhos valiosos sobre melhorias que você pode fazer.
• Lighthouse: Lighthouse é outra ferramenta do Google que você pode usar para medir seus principais sinais vitais da web. Anteriormente projetado para auditar PWAs, agora se transformou em uma ferramenta potente para monitorar o desempenho. Armado com recursos extras e verificações de SEO, o lighthouse pode ser adequadamente descrito como uma ferramenta potente para analisar a velocidade da sua página da web e os dados de experiência da página.
• GT Metrix: GT Metrix é um site de teste e monitoramento de desempenho de sites. É uma ferramenta gratuita que você pode usar para avaliar seu desempenho LCP, TBT e CLS.

Como auditar o Core Web Vitals usando o Screaming Frog:

O conceito de auditoria dos principais elementos vitais da web é relativamente novo. Para aqueles que desejam se manter preparados e otimizar os principais elementos vitais da web do seu site, usar uma ferramenta como o Screaming Frog pode ajudar, especialmente se você já tiver uma assinatura da assinatura premium.

Aqui está o que você vai precisar:

• Uma versão paga do Screaming Frog.
• Uma chave de API do PageSpeed ​​Insights.
• O domínio dos sites que você deseja auditar.

Vamos começar.

Etapa 1: conectar a chave da API PageSpeed ​​Insights ao Screaming Frog

A etapa 1 para usar o Screaming Frog para otimizar seus principais elementos vitais da web inclui conectar sua chave de API do PageSpeed ​​Insights a ele. Ao conectá-los, você pode acessar os dados e recomendações do PageSpeed ​​Insights página por página no painel do Screaming Frog.

Aqui estão os passos que você deve seguir:

• Abra o Screaming Frog → Configuração → Acesso à API → PageSpeed ​​Insights.
• Página sua chave de API do PageSpeed ​​Insights na caixa 'Chave secreta'.
• Clique em ' Conectar '.
• Após clicar em 'Conectar', clique em ' Métricas '.
• Escolha as métricas que deseja auditar e clique em ' Ok '.

Etapa 2: rastrear o site.

A próxima etapa inclui o rastreamento do seu site.

Tudo o que você precisa fazer é inserir o nome de domínio do site que deseja rastrear na caixa que diz: 'Digite o URL para o spider'. Depois de fazer a entrada, aguarde o carregamento da barra de progresso 'Crawl' e 'API'.

Uma vez que eles carregam para 100%, você pode analisar seus dados.

Etapa 3: Relate o problema às autoridades competentes.

Depois que a ferramenta carregar seus dados, você receberá uma compilação de todas as páginas da web em seu site. Aqui, você precisa analisar o número de páginas da Web que falham nos limites mínimos do Core Web Vitals em termos de números percentuais.

Aqui estão alguns passos que você pode seguir:

• Clique na barra de navegação superior.
• Clique em Paginação .
• Clique em Velocidade da página no menu suspenso.
• Clique em Exportar .

Depois de exportar os dados, preencha as seguintes colunas:

• Maior tempo de pintura de conteúdo (ms): Coloque um filtro para encontrar páginas com LCP de 4000ms ou mais.
• Tempo Total de Bloqueio (ms): Coloque um filtro para encontrar páginas com TBT de 300ms ou mais.
• Mudança de layout cumulativa: coloque um filtro para encontrar páginas com 0,25 CLS ou mais.

Com base nesses dados, você pode criar um relatório e enviá-lo a um cliente. Se você estiver realizando essa auditoria para seus requisitos de otimização de experiência de página interna, poderá enviar esses dados para a equipe relevante e ela poderá executar as otimizações de página de acordo.

Etapa 4: relatar problemas de página com recomendações.

Agora, este é o passo onde fica interessante. Agora você está ciente da porcentagem de páginas em seu site que não atendem aos padrões mínimos do Core Google Web Vitals. Qual o proximo?

Faça uma compilação organizada dos problemas relevantes com base na métrica que você deseja segmentar. Aqui está o que você pode fazer:

• No lado direito da guia 'Visão geral', role para baixo até o PageSpeed.
• Aqui você encontrará problemas e recomendações relacionados à velocidade da página do seu site, incluindo possíveis soluções para melhorar seus principais pontos vitais da web.
• A lista suspensa de velocidade da página incluirá várias métricas, como:
  • Elimine recursos de bloqueio de renderização (afeta o LCP)
  • Minimizar CSS (impacta o LCP)
  • Minimizar JavaScript (impacta o FID)
  • Remova o CSS não utilizado (afeta o LCP)
  • Javascript não utilizado removido (impacta o FID)
  • (e muitos mais)
• Clique em um problema para ver o número de páginas afetadas e exporte esses dados para sua planilha. Isso ajudará você a exportar todos os URLs com os problemas relevantes.
• Com base nos dados, você pode fazer um julgamento sobre a remoção ou adiamento desses elementos de sua página da web.

Leitura adicional: O que é SEO de velocidade de página

Etapa 5: pós-auditoria e otimização, rastreie o site novamente e compare.

Depois de identificar os fatores que afetam seus principais google web vitals, você pode fazer as otimizações. Após a otimização, seu trabalho é rastrear seu site novamente para avaliar os resultados.

Compare a porcentagem de páginas da web que não atendem aos requisitos mínimos do núcleo da web vitals pós-otimização com os números de pré-otimização.

Outros fatores de experiência de página que você deve considerar:

Aqui está uma lista dos principais fatores adicionais que o Google considera necessários para a experiência do usuário:

• Navegação segura: se o seu site não permitir a navegação segura, isso será visto como uma violação dos padrões de experiência da página e você obterá uma pontuação baixa na experiência da página. Portanto, certifique-se de que seu site não contenha conteúdo malicioso ou enganoso, como malware. Você pode verificar os padrões de conformidade de segurança do seu site no Relatório de problemas de segurança do Google.
• HTTPS: os sites que começam com HTTPS são mais propensos a ter uma conexão de site segura. Se você não tiver um site que comece com HTTPS, saiba como proteger seu site com HTTPS aqui.
• Otimização para dispositivos móveis: verifique se sua página da Web é compatível com dispositivos móveis usando o Teste de compatibilidade com dispositivos móveis do Google. Se sua página da web não estiver aparecendo como "compatível com dispositivos móveis" nesta avaliação rápida, execute estratégias para otimizar seu site para celulares e tablets. Entre outras coisas, melhorar o UX & UI e aperfeiçoar a navegação fora da tela podem ajudar.
• Sem intersticiais intrusivos: o conteúdo da sua página da Web deve ser facilmente acessível a um usuário. A falta disso pode levar você a uma pontuação baixa de experiência na página. Aqui estão as principais coisas que você deve evitar para tornar o conteúdo da página da web mais acessível para seus usuários:
  • Evite usar pop-ups que bloqueiam a maior parte do conteúdo do seu site.
  • Evite exibir um intersticial autônomo que cubra a tela inteira. Isso é intrusivo, pois o usuário precisa descartá-lo antes de poder acessar o conteúdo principal.

Conclusão:

O Google está pronto para lançar os principais sinais vitais da web como um importante sinal de classificação em maio de 2021. A necessidade do momento é que as empresas otimizem seus sites para esses principais critérios de classificação com antecedência.

Neste blog, ilustramos as etapas muito necessárias que você pode seguir para melhorar seus princípios vitais da web. Discutimos o que é um web vital central, as três principais métricas para web vitals centrais e o que você pode fazer para otimizar sua página da web para uma boa pontuação de SEO de vital web central.

Também descrevemos um truque rápido para analisar a experiência da página para aqueles que usam o Screaming Frog para auditoria de sites. Esperamos que as informações que fornecemos aqui tenham ajudado. Implemente-os em sua estratégia de otimização de sites para manter seus rankings no Google.

Deixe-nos saber na seção de comentários se você tiver alguma dúvida ou pergunta.

Gostaríamos muito de ouvir de você.