Hot News
Esta postagem foi patrocinada pela DebugBear. As opiniões expressas neste artigo são de responsabilidade do patrocinador.
Quer tornar seu site rápido?
Felizmente, existem muitas técnicas e guias para ajudá-lo a acelerar o seu site.
Na verdade, apenas no ano passado, foram lançados vários novos recursos de navegador que oferecem:
- Novas maneiras de otimizar seu site.
- Novas maneiras de identificar as causas do desempenho lento.
Tudo dentro do seu navegador.
Portanto, este artigo analisa esses novos recursos de SEO do navegador e como você pode usá-los para passar na avaliação Core Web Vitals do Google.
Por que o desempenho do site é fundamental para a experiência do usuário e SEO
Ter um site rápido deixará seus usuários mais felizes e aumentará as taxas de conversão.
Mas o desempenho também é um fator de classificação do Google.
O Google definiu três métricas de experiência do usuário, chamadas Core Web Vitals:
- Maior pintura com conteúdo: com que rapidez o conteúdo da página aparece?
- Mudança cumulativa de layout: o conteúdo se move após o carregamento?
- Interação com o Next Paint: quão responsiva é a página à entrada do usuário?
Para cada uma dessas métricas há um limite máximo que não deve ser excedido para passar na avaliação do Web Vitals.
-
Limites de métricas para Google Core Web Vitals, outubro de 2024
1. Adicione navegação instantânea com “regras de especulação”
Novas definições principais:
Quando os sites demoram para carregar, geralmente é porque vários recursos precisam ser carregados do servidor do site. Mas e se houvesse uma maneira de conseguir navegações instantâneas, onde os visitantes não precisassem esperar?
Este ano, o Chrome lançou um novo recurso chamado regras de especulação, que pode conseguir exatamente isso. Depois de carregar a página inicial de um site, outras páginas podem ser pré-carregadas em segundo plano. Então, quando o visitante clica em um link, a nova página aparece instantaneamente.
O melhor de tudo é que esse recurso é fácil de implementar apenas adicionando um tag para o site. Você pode então:
- Pré-renderizar automaticamente páginas inteiras que o usuário provavelmente visitará em seguida
- Pré-carregar o conteúdo da página quando um usuário passa o mouse sobre um link
- Pré-carregar parcialmente uma página, para equilibrar o consumo de recursos e a velocidade de navegação
A próxima página será carregada muito mais rapidamente, resultando em uma ótima experiência do usuário e uma pontuação baixa no Largest Contentful Paint.
2. Otimize a interação para a próxima pintura com a nova API de quadros de animação longos
Nova definição de chave:
A interação com o próximo Paint (INP) tornou-se uma métrica Core Web Vitals em março de 2024. As interações lentas geralmente são causadas pelo código JavaScript em execução na página. No entanto, muitas vezes pode ser difícil identificar quais interações estão lentas e quais scripts estão causando atrasos.
É por isso que o Google adicionou a API Long Animation Frames ao Chrome. Ele pode atribuir atrasos de renderização a scripts específicos em execução no seu site, informando o que você precisa corrigir para melhorar sua pontuação INP.
Usar a API diretamente é um pouco complicado, mas você pode usar a biblioteca web-vitals.js do Google ou uma ferramenta comercial como o DebugBear para coletar os dados.
-
Captura de tela do DebugBear mostrando scripts causando INP ruim, outubro de 2024
Com o recurso Long Animation Frames você pode descobrir:
- Quais scripts específicos estão deixando seu site lento
- Por que o código está em execução (por exemplo, em resposta a uma interação do usuário ou devido a uma tarefa em segundo plano em execução na página)
- Como o tempo de processamento é gasto (por exemplo, execução de código ou atualização do layout da página)
3. Visualize as principais métricas do Web Vitals na nova guia de desempenho do DevTools
Nova definição de chave:
O Chrome DevTools é há muito tempo uma ótima ferramenta para análises profundas de desempenho técnico. No entanto, nem sempre forneceu uma boa visão geral de alto nível dos dados do Core Web Vitals.
Isso mudou agora com a nova guia Desempenho do DevTools. Agora você pode ver facilmente:
- Uma visão geral do Core Web Vitals na página atual
- Uma lista de interações de página e mudanças de layout
- Dados reais do usuário do relatório de experiência do usuário do Chrome (CrUX) do Google
-
Captura de tela do Chrome DevTools, outubro de 2024
A lista de interações do usuário é especialmente útil para depurar pontuações baixas de INP, pois você não precisa mais registrar um perfil de desempenho completo para verificar a rapidez de uma interação.
4. Analise os componentes de pintura com maior conteúdo
Há muitos fatores que afetam sua pontuação no Largest Contentful Paint, seja o tempo de resposta do servidor, o tempo gasto no download de uma imagem ou na espera pelo conteúdo aparecer.
O Google publicou agora um novo artigo explicando quais desses componentes têm maior impacto com base em dados reais do usuário.
-
Gráfico mostrando os componentes da métrica Largest Contentful Paint, outubro de 2024
Curiosamente, embora muita ênfase tenha sido colocada na otimização de imagens para que carreguem mais rápido, o Google descobriu que o carregamento de uma imagem LCP, na verdade, representa apenas cerca de 10% do valor geral da métrica LCP. Estamos analisando sites com classificação LCP média aqui, mas essa descoberta é consistente com outras categorias de sites.
Em teoria, a imagem da página principal pode ser carregada imediatamente após o servidor fornecer o documento HTML ao navegador. Mas acontece que muitas vezes há um grande atraso até que a imagem realmente comece a carregar, conforme mostrado pelo componente “Image Load Delay”, que representa 27% da pontuação geral do LCP no gráfico acima.
Essas descobertas não podem ser generalizadas e aplicadas a nenhum site específico. Em vez disso, você pode executar um teste Lighthouse usando uma ferramenta como o PageSpeed Insights. A análise pode ser encontrada na auditoria do Maior Elemento de Pintura com Conteúdo.
-
Auditoria Lighthouse no PageSpeed Insights mostrando um detalhamento do componente LCP, outubro de 2024
Você também pode usar o teste de velocidade do site gratuito do DebugBear para visualizar o detalhamento dos componentes LCP e obter mais informações sobre o que você pode fazer para otimizar a métrica.
Clique na métrica Largest Contentful Paint para visualizar dados de depuração adicionais, como URL da imagem, duração do carregamento e prioridade da solicitação.
-
Resultado do teste DebugBear com dados de depuração LCP, outubro de 2024
Como passar na avaliação Core Web Vitals do Google
Neste artigo, examinamos algumas das novas ferramentas de diagnóstico que você pode usar para investigar problemas de velocidade da página em seu site, bem como novas tecnologias de navegador que podem ajudá-lo a obter um site mais rápido.
Para acompanhar suas otimizações e ficar por dentro das métricas do Core Web Vitals, você pode usar uma ferramenta de monitoramento de desempenho de site como o DebugBear. Identifique possíveis otimizações em seu próprio site e compare-o com a concorrência para oferecer a melhor experiência do setor.
-
Painel de desempenho do site DebugBear, outubro de 2024
As ferramentas de monitoramento ajudam a identificar tendências de longo prazo, verificar se as mudanças feitas têm um impacto positivo e garantir que você descubra rapidamente quando novos problemas são introduzidos.
O DebugBear fornece três tipos de dados de velocidade da página para ajudá-lo a realmente entender e otimizar a velocidade da sua página:
Inicie uma avaliação gratuita para ver o que você pode fazer para oferecer as melhores experiências em seu site.
Este artigo foi patrocinado pela DebugBear e as opiniões aqui apresentadas representam a perspectiva do patrocinador.
Pronto para começar a otimizar seu site? Inscreva-se no DebugBear e obtenha os dados necessários para oferecer ótimas experiências ao usuário.
Créditos da imagem
Imagem em destaque: Imagem de DebugBear. Usado com permissão.
Siga-nos nas redes sociais:
Hotnews.pt |
Facebook |
Instagram |
Telegram
#hotnews #noticias #tecnologia #AtualizaçõesDiárias #SigaHotnews #FiquePorDentro #ÚltimasNotícias #InformaçãoAtual