Saiba como os tomadores de decisões empresariais e não desenvolvedores podem melhorar as Core Web Vitals.
Introdução
A experiência do usuário no site tem demonstrado um impacto direto nos resultados dos negócios. Oferecer uma experiência melhor, em que os sites carregam e respondem aos usuários com mais rapidez, geralmente resulta em aumento do engajamento e das conversões. As Core Web Vitals são uma iniciativa para quantificar a experiência do usuário em sites para identificar áreas de melhorias.
No entanto, grande parte da documentação das Core Web Vitals é destinada a desenvolvedores da Web, com profundo conhecimento técnico e controle total sobre o código. Muitos sites são criados por não desenvolvedores usando uma plataforma de "criador de sites", como WordPress, Shopify, Wix ou outras soluções semelhantes, geralmente sem uma equipe de desenvolvimento da Web.
Mesmo quando há uma equipe dedicada ou desenvolvedores web, eles não são os únicos responsáveis pelo desempenho na Web. Os tomadores de decisões de negócios têm uma enorme influência sobre o desempenho do site, desde a decisão de conteúdo e designs até o desenvolvimento de estratégias de publicidade em um esforço para gerar mais tráfego para os sites. Essas decisões geralmente têm um impacto significativo no desempenho do site.
Este guia tem como objetivo fornecer algumas informações relevantes para que criadores e proprietários de sites entendam e melhorem a experiência do usuário ao máximo, sem exigir um profundo conhecimento técnico de desenvolvimento da Web.
Ao mesmo tempo, muitos problemas de desempenho exigem que os desenvolvedores implementem correções técnicas, e nossos guias focados no desenvolvedor podem ajudar com esses esforços. Este não é um guia abrangente, mas uma introdução à iniciativa de Core Web Vitals para tomadores de decisões de negócios com algumas causas-raiz comuns não relacionadas ao desenvolvimento de páginas com desempenho ruim. Além disso, um desenvolvedor da Web provavelmente precisará estar envolvido para progredir.
Quais são as Core Web Vitals?
As Core Web Vitals são um conjunto de três métricas projetadas para avaliar a experiência do usuário em uma página e, especificamente, a velocidade da página para os usuários. Cada um tem uma abreviação de três letras:
- A Maior exibição de conteúdo (LCP, na sigla em inglês) mede a performance do carregamento: quanto tempo, em segundos, leva para que o conteúdo de mais destaque da página apareça depois que ela começa a ser carregada.
- A Mudança de layout cumulativa (CLS, na sigla em inglês) mede a estabilidade visual de uma página: quanto o conteúdo se move durante o carregamento.
- A Interação com a próxima exibição (INP, na sigla em inglês), que substituiu oficialmente a FID em 12 de março de 2024, mede a capacidade de resposta da página: a rapidez com que ela responde a cliques, toques e interações do teclado.
Cada métrica avalia um aspecto diferente da experiência do usuário. O Google também fornece limites recomendados para cada métrica, abaixo dos quais a experiência do usuário é considerada boa e acima dela como ruim. Entre esses limites, uma página é considerada no intervalo precisa de melhorias. Tenha em mente que, com essas métricas, números mais baixos são melhores.
Como as Core Web Vitals são medidas?
As Core Web Vitals são medidas pelos usuários reais do site, e usuários diferentes têm resultados distintos. Elas não são "o que o Google pensa" nem "o que o Googlebot pensa", e sim a experiência dos usuários reais do seu site.
Alguns usuários estarão em dispositivos e redes mais rápidos. Alguns estarão em dispositivos ou redes mais lentos. Alguns usuários visitam páginas mais simples e rápidas do site, outros mais complexas e mais lentas. Os resultados de todas essas experiências do usuário são agregados para fornecer uma medida geral de todo o site.
O Google disponibiliza os dados dos usuários do Chrome que ativaram essa opção no Chrome User Experience Report (CrUX, na sigla em inglês), que alimenta muitas ferramentas do Google, como o PageSpeed Insights e o Google Search Console.
O CrUX está disponível em milhões de sites conhecidos, mas nem todos os sites usam esse recurso. Outras ferramentas de monitoramento de usuários reais (RUM, na sigla em inglês) também podem coletar essas métricas para seu site.
Como encontro as Core Web Vitals do meu site?
Existem muitas ferramentas que mostram as métricas do Core Web Vitals fornecidas pelo Google e por terceiros. Esta postagem apresenta duas ferramentas que permitem visualizar rapidamente as Core Web Vitals do seu site. Consulte a postagem Fluxos de trabalho das Core Web Vitals com as ferramentas do Google para saber mais sobre as outras ferramentas do Google, incluindo um fluxo de trabalho para usá-las na solução das Core Web Vitals.
Se sua plataforma oferece uma solução RUM integrada, ela pode fornecer informações muito mais detalhadas para as páginas do seu site ou permitir que você detalhe páginas específicas ou segmente seus usuários para ajudar a entender e identificar problemas.
PageSpeed Insights
Para uma visualização rápida que não requer configuração, use o PageSpeed Insights (PSI). Digite o URL e clique em "Analisar". Caso seu site esteja incluído no CrUX, a seção "Descubra a experiência dos seus usuários reais" será exibida rapidamente:
Isso mostra como foi a experiência de usuários reais do Chrome no seu site nos últimos 28 dias. Você verá as três Core Web Vitals na parte de cima, além de outras métricas de suporte abaixo, incluindo a métrica de INP pendente. Somente as Core Web Vitals são contabilizadas na avaliação geral de aprovação/reprovação no topo da página, mas as outras métricas podem ser úteis para resolver problemas com as Core Web Vitals, conforme mostrado na próxima seção.
É possível alternar entre as visualizações para dispositivos móveis e computadores usando os botões na parte superior desta seção. Também é possível alternar entre Este URL e todos os dados dessa Origem usando o botão no canto superior direito, onde há dados para ambos.
Esses números indicam um indicador amplo do desempenho do site, das métricas que podem ser melhoradas e de quais tipos de dispositivo.
Google Search Console
O Google Search Console (GSC) é destinado somente a proprietários de sites. Por isso, para ser usado, é necessário registro e verificação da propriedade do site. Ela fornece detalhes sobre como a Pesquisa Google visualiza seu site.
Ao contrário do PageSpeed Insights, o GSC lista todas as páginas que a Pesquisa Google reconhece no site e mostra detalhes das Core Web Vitals:
As páginas são agrupadas em grupos de URLs para que você saiba facilmente se determinadas categorias de páginas (por exemplo, páginas de detalhes do produto, páginas de blogs etc.) têm problemas com as Core Web Vitals. Como eles geralmente são criados com tecnologias ou modelos semelhantes, pode haver uma causa comum para qualquer problema nessas páginas.
Problemas comuns das Core Web Vitals para criadores de sites
Muitos problemas de desempenho exigem que os desenvolvedores implementem correções técnicas, e nossos guias focados no desenvolvedor podem ajudar com isso. Nesta seção, vamos discutir alguns dos problemas comuns não relacionados aos desenvolvedores com os quais os tomadores de decisões comerciais podem ajudar a melhorar essas métricas.
Quando dizemos "não desenvolvedores", estamos nos referindo aos usuários que usam plataformas de criação de sites nas quais têm controle limitado sobre como o site é realmente codificado ou aos tomadores de decisões de negócios que podem decidir sobre o design do site ou ajudar a priorizar orçamentos.
Maior exibição de conteúdo (LCP, na sigla em inglês)
O objetivo da LCP é medir a velocidade de carregamento de páginas da Web medindo o tempo entre o clique em um link e o momento em que a maior parte do conteúdo (geralmente uma imagem de banner ou título) aparece no navegador.
Para uma boa experiência, a página da Web precisa exibir esse conteúdo em até 2,5 segundos após o clique no link. Se o processo levar mais de quatro segundos, a experiência será considerada ruim.
Alguns dos problemas comuns que afetam a LCP e que os tomadores de decisões de negócios podem influenciar são apresentados nas próximas seções.
Atraso no início do carregamento da página
Muitas vezes, pensamos em melhorar o tempo de carregamento da própria página, mas geralmente há um atraso antes mesmo de começar isso. É impossível ter uma LCP abaixo do limite de 2,5 segundos se o site não for baixado por alguns segundos.
Tempo para primeiro byte (TTFB, na sigla em inglês) é o tempo que leva para o download da primeira parte da sua página da Web. Se o PageSpeed Insights mostrar uma grande métrica de diagnóstico TTFB em vermelho ou âmbar, a resolução disso é fundamental e deve ter um efeito direto na LCP.
Conheça seu público
Para problemas de TTFB, é importante entender seu público. Se seu site estiver hospedado em um país, mas atender a um público global, a proximidade geográfica entre os usuários do site e o servidor da Web será um fator no TTFB de uma página. Uma rede de fornecimento de conteúdo (CDN) permite que cópias do seu site sejam armazenadas em cache no mundo todo e, portanto, mais perto dos usuários. Muitos provedores de hospedagem incluem uma CDN como parte dos serviços e cuidam disso automaticamente. Verifique se esse é o caso do local em que seu site está hospedado. Algumas plataformas oferecem níveis diferentes de serviço, com mais locais de CDN para níveis pagos mais altos. Empresas globais devem considerar níveis mais altos nesses casos.
Minimizar redirecionamentos
Os redirecionamentos são outra causa comum de TTFBs lentos. Ao veicular campanhas publicitárias ou enviar comunicações por e-mail, tente minimizar o número de redirecionamentos, evitando o uso de vários encurtadores de links ou incluindo URLs que precisam ser redirecionados. Por exemplo, usar example.com/blog em uma campanha que precisa redirecionar para www.example.com/blog, que depois redireciona para https://www.example.com/blog adiciona tempo ao TTFB de uma página. Verifique se as campanhas de marketing usam o número mínimo de redirecionamentos possível.
Verifique se as campanhas publicitárias estão voltadas para o público-alvo correto
Verifique também se as campanhas publicitárias estão segmentando o público-alvo de maneira eficaz. Receber muito tráfego novo de usuários que estão do outro lado do mundo, mas para os quais você não pode entregar seu produto, é desperdiçado com os gastos com publicidade e afeta negativamente o desempenho do seu site.
Os parâmetros de URL podem afetar o desempenho na Web
Os parâmetros de URL, como parâmetros de UTM, geralmente são usados para campanhas de marketing. Isso pode reduzir a eficácia do armazenamento em cache na sua infraestrutura, já que cada URL pode parecer uma página exclusiva, mesmo que a mesma página seja veiculada todas as vezes. Se você usar parâmetros UTM, fale com o provedor de CDN ou as equipes de infraestrutura para garantir que esses parâmetros de URL sejam ignorados pela infraestrutura de armazenamento em cache para permitir que as campanhas se beneficiem das páginas que já estão em cache.
A mídia pode ser cara para o desempenho
Considere o impacto da mídia nas suas páginas. Mídias como imagens e vídeos normalmente são muito maiores e, portanto, o download demora mais do que texto. Isso também pode diminuir a velocidade do restante do carregamento de página. Isso é especialmente importante quando o elemento da LCP é mídia em vez de texto. O elemento da LCP é uma imagem em aproximadamente 80% das páginas da Web, por isso é importante que você considere o impacto da mídia no seu site.
Ao mesmo tempo, os recursos de mídia podem contribuir para uma experiência visual rica para o usuário, muito envolvente do que um site com muito texto. Portanto, a remoção de mídia raramente é uma opção, mas estar ciente do custo da mídia e de como reduzir isso pode minimizar problemas de desempenho.
Evitar carrosséis
Os carrosséis feitos com várias imagens podem afetar o tempo total de carregamento de uma página, já que podem exigir o download de várias imagens ao mesmo tempo se não forem implementados de maneira ideal. Além disso, apesar da sua onipresença, os carrosséis geralmente não oferecem uma boa experiência do usuário. Por isso, pense com cuidado antes de usá-los no seu site.
Use imagens otimizadas para a Web
Também há o tamanho dos recursos de mídia. Muitas imagens na Web são veiculadas com uma resolução muito alta. Verifique se os parceiros de mídia ou agências de design fornecem imagens otimizadas para a Web em vez das imagens com qualidade de impressão em tamanho original que costumam fornecer. É possível usar um serviço como o TinyJPG para remover rapidamente dados desnecessários das imagens antes de fazer o upload. Muitas plataformas da Web tentam otimizar automaticamente as imagens no upload, mas como não sabem as dimensões em que elas vão aparecer no dispositivo do usuário, fornecer imagens menores no início pode gerar ganhos significativos.
Tenha muito cuidado com vídeos
Pense um pouco mais ao usar vídeos. Os vídeos são alguns dos maiores conteúdos (e, portanto, os mais lentos) para download e exibição de um site, portanto, tente não usá-los em excesso. Evite usá-los na parte superior das páginas da Web e deixe-os para o fim da página. Isso permite que o conteúdo mais barato carregue rapidamente para oferecer uma melhor experiência de carregamento aos usuários e garantir que sua LCP não seja afetada.
Testes A/B
Muitas empresas realizam testes A/B para testar mudanças no site. A forma como elas são implementadas pode ter um grande impacto na LCP.
Muitas soluções de testes A/B atrasam quando um site é exibido pela primeira vez ao usuário até que as alterações em todos os testes sejam aplicadas. Assim, você evita exibir a versão original, mas pode atrasar a visibilidade dele para o usuário. Outras soluções são aplicadas no lado do servidor para evitar esse atraso. Reserve um tempo para entender como o teste A/B é executado e se ele está sujeito a esses atrasos. Além disso, considere soluções de teste A/B do lado do servidor sempre que possível.
O teste A/B pode fornecer feedback inestimável antes de lançar novas mudanças, mas o custo da página de desempenho deve ser avaliado em relação aos possíveis benefícios que eles oferecem.
Independentemente da infraestrutura, qualquer pessoa que executa testes A/B deve sempre ter em mente as seguintes práticas recomendadas:
- Limite as ferramentas de teste A/B somente às páginas que fazem parte do teste em vez de atrasar todas as páginas, quando a maioria delas não está realizando um teste A/B em nenhum momento específico.
- Limite o teste A/B a um subconjunto de usuários para evitar que a maioria deles seja afetada.
- Limite os testes A/B ao tempo mínimo necessário para fornecer resultados conclusivos. Quanto maior o tempo de execução dos testes A/B, mais os usuários podem ter um desempenho insatisfatório da página.
- E o mais importante: não se esqueça de remover os experimentos de teste A/B quando eles não forem mais necessários.
Problemas de Mudança de layout cumulativa (CLS)
A CLS mede a estabilidade visual de uma página, ou seja, quanto o conteúdo da página muda conforme ele é carregado. Isso pode ser uma distração se um usuário começar a ler uma página da Web, mas perder o lugar porque tem mais conteúdo ou espaço de anúncios. Isso também pode fazer com que os usuários cliquem acidentalmente no conteúdo errado se o layout da página mudar excessivamente. Tenha muito cuidado com conteúdos dinâmicos que são carregados posteriormente e podem mover parte do conteúdo da página inicial.
Isso é medido com uma fórmula matemática que calcula a quantidade e o nível de deslocamento do conteúdo. Ela é expressa como uma fração sem unidade com um valor de 0,1 ou menos considerado bom e acima de 0,25 como ruim.
Alguns dos problemas comuns que afetam a CLS e que os tomadores de decisões de negócios podem influenciar são apresentados nas próximas seções.
Conferir o carregamento das imagens ao rolar a página para baixo
Muitos modelos evitam carregar imagens mais abaixo na página para oferecer mais recursos às imagens que aparecem na tela durante o carregamento inicial da página. Em seguida, as imagens são carregadas conforme o usuário rola a tela para baixo. Essa técnica de carregamento de imagens é conhecida como carregamento lento.
Os modelos de página precisam reservar espaço para imagens com carregamento lento, de modo que, se um usuário rolar muito rápido antes que a imagem seja carregada, o conteúdo ao redor dela não se mova. Se o seu modelo ou plataforma não faz isso, considere mudar para um que faça isso.
Cuidado com anúncios posicionados no meio do conteúdo
Anúncios inseridos no meio do conteúdo correm o risco de empurrá-los para baixo, já que eles costumam demorar um pouco mais para carregar e, geralmente, mais do que as imagens descritas na seção anterior. Ter esses elementos na lateral do conteúdo da página principal é um padrão comum que reduz esse risco. A forma como isso é alcançado na prática depende da sua plataforma específica e dos modelos que você usa para criar seu site.
Evite adicionar conteúdo dinâmico à parte superior das páginas
Evite adicionar alertas e banners na parte superior da página após o carregamento (por exemplo, banners de cookies ou ofertas especiais). Se você optar por sobrepor alertas e banners acima do conteúdo principal, isso impedirá que o conteúdo da página mude. Assim como na seção anterior, as opções aqui dependerão da plataforma e dos modelos usados para suas páginas.
Problemas de interação com a próxima exibição (INP)
O INP mede a capacidade de resposta de uma página, que avalia se as páginas respondem rapidamente a interações como cliques, toques e entradas do teclado. As páginas que não respondem rapidamente à entrada do usuário geralmente parecem lentas e podem ser frustrantes para os usuários.
O INP mede a totalidade de cada interação qualificada durante a vida útil de uma página e informa a pior interação. O INP tem um limite bom de 200 milissegundos e um limite insatisfatório de 500 milissegundos. A INP é uma melhoria da FID e mede melhor a capacidade de resposta. Por isso, ela substituiu a FID como Core Web Vitals para medir essa capacidade.
As métricas de capacidade de resposta e, em especial, o INP, são métricas difíceis de otimizar. Quando essas métricas estão no limite insatisfatório, geralmente é porque as interações são atrasadas em decorrência de tentativas excessivas da página da Web. Portanto, as principais soluções aqui envolvem a remoção de código desnecessário para criar páginas mais leves.
As próximas seções apresentam alguns dos problemas comuns que afetam o INP que os tomadores de decisões de negócios podem influenciar.
Faça uma limpeza!
Revise os plug-ins e os widgets adicionados ao seu site e remova-os se não forem mais usados. Muitas vezes, é fácil adicionar plug-ins para testar algo, mas pode ser fácil esquecer de removê-los mais tarde se você não os considerar úteis. Essa é uma das causas por trás das interações lentas, mas é uma otimização relativamente mais simples do que muitas outras.
Da mesma forma, se você utiliza um gerenciador de tags para campanhas de marketing, verifique se as campanhas antigas foram removidas. Mesmo que não sejam mais disparados, o código das campanhas de marketing expiradas ainda precisará ser baixado e compilado em cada página, o que pode atrasar as interações do usuário durante o carregamento inicial da página.
Evite widgets e plug-ins caros
Widgets e plug-ins com custo computacional podem parecer bons, mas melhoram ou pioram a experiência do usuário? O relatório "Diagnosticar problemas de desempenho/Lighthouse" no PageSpeed Insights pode ajudar a identificar o JavaScript que tem um impacto significativo no desempenho do seu site.
O ideal é limitar os widgets apenas às páginas em que são necessários. Se você só estiver usando uma incorporação do Google Maps na página de contato, não será necessário carregá-lo em todas as páginas, porque isso pode causar problemas de responsividade.
Considere o número de anúncios, especialmente em dispositivos móveis
Os anúncios são uma boa estratégia de monetização para muitas empresas, mas costumam ser complexos e consomem muitos recursos. Quanto mais anúncios você tiver, mais recursos consomem, o que pode interferir na velocidade da página. Isso é especialmente verdadeiro em dispositivos móveis, onde a memória de capacidade de processamento muitas vezes não é tão boa quanto em computadores ou laptops.
Avalie o equilíbrio entre monetização e desempenho. Se os usuários estão saindo mais cedo devido a uma experiência ruim, esses anúncios extras podem estar custando mais receita do que estão adicionando.
Evitar o tamanho excessivo da página
Páginas grandes e complexas exigem mais tempo de processamento para serem exibidas. Por exemplo, se você tiver uma galeria de produtos com 1.000 produtos diferentes, a exibição levará algum tempo na janela do navegador do usuário. Considere quando paginar páginas para reduzir esse tempo.
Como posso receber mais ajuda?
Esta postagem traz considerações gerais que os proprietários de empresas podem fazer e que podem afetar a performance. Além disso, talvez seja necessário consultar os desenvolvedores da Web para saber mais sobre o que você pode fazer para melhorar o desempenho do site.
Informações específicas da plataforma
A maioria das plataformas se preocupa muito com seu desempenho na Web e pode ter conselhos dedicados e específicos da plataforma sobre como melhorar isso. Você também pode ter acesso a equipes dedicadas de desempenho na Web como parte do uso dessa plataforma, que podem orientar melhor como melhorar seu site.
O Lighthouse também apresenta informações específicas da plataforma usando a funcionalidade Stack Pack, que pode orientar os usuários de plataformas compatíveis para o conselho adequado.
As plataformas estão sempre melhorando ao longo do tempo, e muitas delas estão se concentrando no desempenho e nas Core Web Vitals no momento. Mantenha sua plataforma atualizada para aproveitar as melhorias mais recentes que os desenvolvedores fizeram.
Isso é mais fácil quando você está em uma plataforma hospedada em que o provedor a gerencia automaticamente, incluindo as atualizações. Se você estiver hospedando a plataforma por conta própria, por exemplo, uma instalação local do WordPress no seu servidor, garantir que a plataforma seja atualizada regularmente vai permitir que seu site se beneficie das melhorias implementadas pelos desenvolvedores da plataforma. As empresas precisam priorizar essa manutenção ou escolher um serviço que faça isso.
Como engajar um desenvolvedor da Web
Um desenvolvedor da Web com experiência em desempenho da Web provavelmente será capaz de resolver muito mais problemas do que um proprietário de empresa. Talvez você já tenha contratado um desenvolvedor da Web para criar o site inicialmente ou para fazer alterações periódicas, ou pode ter uma equipe de desenvolvimento dedicada ou ter que encontrar um desenvolvedor para se envolver (preferencialmente um com experiência em desempenho na Web).
Fale com os desenvolvedores se as sugestões acima não forem suficientes para resolver os problemas de desempenho que você está enfrentando com seu site. No entanto, os exemplos anteriores também devem mostrar que é importante trabalhar com eles para equilibrar as prioridades de negócios e as decisões de desenvolvimento para chegar à solução certa para seu site.
Esteja ciente de que o desempenho na Web raramente é um trabalho único. Manter um bom desempenho do site geralmente requer monitoramento e manutenção regulares para garantir que ele não volte a funcionar depois que melhorias forem feitas.
Conclusão
Um site geralmente é o primeiro ponto de entrada de uma empresa para os clientes, e você quer que ele seja uma ótima experiência para eles. Isso se aplica tanto aos visitantes novos que recebem a primeira impressão da sua empresa quanto aos visitantes recorrentes e clientes fiéis, que devem ter a melhor experiência possível, sem frustrações que possam deixar uma impressão negativa. As Core Web Vitals são uma medida da experiência do usuário que o Google recomenda que os sites considerem. Com tudo o que a Web oferece, é muito fácil para os usuários experimentarem outros sites se ficarem frustrados com o seu.
Ao mesmo tempo, as Core Web Vitals são apenas uma das métricas do seu site. As empresas precisam decidir por quanto tempo investir nos sites e qual será o retorno do investimento.
Agradecimentos
Imagem em miniatura de Carlos Muza no Unsplash (em inglês)