Saiba como tomadores de decisões de negócios e pessoas sem experiência em desenvolvimento 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. O Core Web Vitals é 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 é voltada para desenvolvedores web, com conhecimento técnico profundo e controle total sobre o código. Muitos sites são criados por não desenvolvedores usando uma plataforma de criação de sites, como WordPress, Shopify, Wix ou outras soluções semelhantes, geralmente sem uma equipe de desenvolvimento web.
Mesmo quando há uma equipe dedicada ou desenvolvedores web, eles não são os únicos responsáveis pelo desempenho da Web. Os tomadores de decisões de negócios têm uma enorme influência na performance do site, desde a escolha do conteúdo e do design até o desenvolvimento de estratégias de publicidade para gerar mais tráfego. Essas decisões costumam ter um impacto significativo no desempenho do site.
Este guia tem como objetivo fornecer algumas informações relevantes para que os criadores e proprietários de sites entendam e melhorem a experiência do usuário o máximo possível, sem precisar de conhecimento técnico profundo sobre desenvolvimento web.
Ao mesmo tempo, muitos problemas de desempenho exigem que os desenvolvedores implementem correções técnicas, e nossos guias voltados para desenvolvedores podem ajudar com isso. Este não é um guia completo, mas sim uma introdução à iniciativa Core Web Vitals para tomadores de decisões de negócios, com algumas causas raiz comuns de baixo desempenho da página que não estão relacionadas ao desenvolvimento. Além disso, é provável que um desenvolvedor Web precise ser contratado para fazer mais progressos.
O que são as Core Web Vitals?
As Core Web Vitals são um conjunto de três métricas criadas para medir a experiência do usuário em uma página, principalmente a velocidade que ela oferece. Cada um deles tem uma abreviação de três letras:
- A Largest Contentful Paint (LCP) mede o desempenho de carregamento: quanto tempo, em segundos, leva para o conteúdo mais importante da página aparecer depois que ela começa a carregar.
- A Cumulative Layout Shift (CLS) mede a estabilidade visual de uma página: o quanto o conteúdo se move durante o carregamento.
- Interaction to Next Paint (INP): a rapidez com que a página responde a cliques, toques e interações do teclado.
Cada métrica mede uma faceta diferente da experiência do usuário. O Google também fornece limites recomendados para cada métrica. As experiências do usuário abaixo do limite inferior são consideradas boas, e as experiências acima do limite superior são consideradas ruins. Entre esses limites, uma página é considerada na faixa precisa de melhorias. Lembre-se de 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 seu site, e usuários diferentes terão resultados diferentes. Eles não são "o que o Google acha" nem "o que o Googlebot acha", mas sim o que os usuários reais do seu site vivenciaram.
Alguns usuários vão estar em dispositivos e redes mais rápidos. Alguns vão usar dispositivos ou redes mais lentos. Alguns usuários vão visitar páginas mais simples e rápidas no seu site, enquanto outros vão acessar páginas mais complexas e 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 aceitaram participar no Chrome User Experience Report (CrUX), 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 estão incluídos. 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 encontrar as Core Web Vitals do meu site?
Há muitas ferramentas que mostram as métricas do Core Web Vitals fornecidas pelo Google e por terceiros. Nesta postagem, apresentamos duas ferramentas que permitem conferir rapidamente as Core Web Vitals do seu site. Para uma análise mais detalhada das outras ferramentas do Google, incluindo um fluxo de trabalho para usá-las para abordar as Core Web Vitals, consulte a postagem Fluxos de trabalho das Core Web Vitals com as ferramentas do Google.
Se a plataforma oferece uma solução integrada de RUM, ela pode fornecer informações muito mais detalhadas sobre as páginas do seu site ou permitir que você analise páginas específicas ou segmente os usuários para 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". Se o site estiver incluído no CrUX, você verá rapidamente uma seção "Descubra o que seus usuários reais estão experimentando":
Isso mostra como usuários reais do Chrome interagiram com seu site nos últimos 28 dias. Você vai encontrar as três Core Web Vitals na parte de cima, com outras métricas de suporte abaixo (incluindo a métrica INP pendente). Somente as Core Web Vitals são consideradas na avaliação geral de aprovação ou reprovação na parte de cima da página, mas as outras métricas podem ser úteis para resolver problemas com as Core Web Vitals, como será mostrado na próxima seção.
Você pode alternar entre as visualizações para dispositivos móveis e computadores usando os botões na parte de cima 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 dão uma ideia geral do desempenho do seu site e de quais métricas podem ser melhoradas, além de em quais tipos de dispositivo.
Google Search Console
O Google Search Console (GSC) é exclusivo para proprietários de sites. Por isso, é necessário registrar e verificar a propriedade do site para usá-lo. Ele mostra como a Pesquisa Google visualiza seu site.
Ao contrário do PageSpeed Insights, o GSC lista todas as páginas do seu site que a Pesquisa Google conhece e fornece detalhes das Core Web Vitals para todas elas:
As páginas são reunidas em grupos de URLs para que você possa ver se determinadas categorias de páginas (por exemplo, páginas de detalhes do produto, páginas de blog etc.) têm problemas com as Core Web Vitals. Como elas geralmente são criadas com tecnologias ou modelos semelhantes, pode haver uma causa comum para os problemas 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 voltados para desenvolvedores podem ajudar com isso. Nesta seção, discutimos alguns dos problemas comuns não relacionados a desenvolvedores que os tomadores de decisões de negócios podem ajudar a resolver para melhorar essas métricas.
Quando dizemos "não desenvolvedores", estamos nos referindo a quem usa plataformas de criação de sites em que há controle limitado sobre como o site é codificado ou a tomadores de decisões de negócios que podem decidir sobre o design do site ou ajudar a priorizar orçamentos.
Problemas com a Largest Contentful Paint (LCP)
A LCP mede a velocidade de carregamento das páginas da Web, calculando o tempo entre o clique em um link e o momento em que o maior conteúdo (geralmente uma imagem de banner ou um título) aparece no navegador.
Para uma boa experiência na página, 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 podem ser influenciados pelos tomadores de decisões de negócios são apresentados nas próximas seções.
Atrasos no início do carregamento da página
Muitas vezes, pensamos em melhorar o tempo de carregamento da página em si, mas geralmente há um atraso antes mesmo de começar. É impossível ter uma LCP abaixo do limite de 2,5 segundos se o site não for baixado em alguns segundos.
O Time to First Byte (TTFB) é o tempo que leva para a primeira parte da sua página da Web ser baixada. Se o PageSpeed Insights estiver mostrando uma métrica de diagnóstico de TTFB grande em vermelho ou âmbar, é fundamental resolver isso, o que deve ter um efeito direto no LCP.
Conheça seu público
Para problemas de TTFB, é importante entender seu público. Se o site for 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 se tornará 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 em todo o mundo e, portanto, mais próximas 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 onde seu site está hospedado. Algumas plataformas oferecem diferentes níveis de serviço com mais locais de CDN para níveis mais altos. As 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, por sua vez, redireciona para https://www.example.com/blog, aumenta o TTFB de uma página. Verifique se as campanhas de marketing usam o menor número possível de redirecionamentos.
Garantir que as campanhas publicitárias sejam direcionadas ao público-alvo correto
Além disso, verifique se as campanhas publicitárias estão segmentando seu público-alvo de forma eficaz. Receber muito tráfego novo de usuários que estão do outro lado do mundo, mas para quem você não pode entregar seu produto, é um desperdício de gastos com publicidade e afeta negativamente o desempenho do seu site.
Os parâmetros de URL podem afetar a performance na Web
Os parâmetros de URL, como os parâmetros UTM, costumam ser 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 única, mesmo que a mesma página seja exibida todas as vezes. Se você usa parâmetros UTM, fale com seu provedor de CDN ou com as equipes de infraestrutura para garantir que esses parâmetros de URL sejam ignorados pela infraestrutura de armazenamento em cache. Assim, as campanhas podem se beneficiar das páginas que já estão armazenadas em cache.
A mídia pode prejudicar o desempenho
Considere o impacto da mídia nas suas páginas. Mídias como imagens e vídeos costumam ser muito maiores e, por isso, levam mais tempo para serem baixadas do que textos. Isso também pode deixar o restante do carregamento da página mais lento. Isso é especialmente importante quando o elemento LCP é uma mídia, e não um texto. O elemento LCP é uma imagem em aproximadamente 80% das páginas da Web. Por isso, é importante considerar 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, que é muito mais envolvente do que um site com muito texto. Portanto, remover mídia raramente é uma opção, mas estar ciente do custo da mídia e de como reduzi-lo pode minimizar os problemas de desempenho.
Evite carrosséis
Carrosséis feitos com várias imagens podem afetar o tempo de carregamento total de uma página, já que eles podem exigir o download de várias imagens ao mesmo tempo se não forem implementados de maneira ideal. Além disso, apesar de serem comuns, os carrosséis geralmente não oferecem uma boa experiência do usuário. Por isso, pense bem antes de usá-los no seu site.
Usar imagens otimizadas para a Web
Depois, há o tamanho dos recursos de mídia. Muitas imagens na Web são veiculadas em 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 em tamanho original com qualidade de impressão que eles 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 as imagens automaticamente no upload, mas, como elas não sabem as dimensões em que as imagens serão exibidas no dispositivo do usuário, fornecer imagens menores para começar pode gerar ganhos significativos.
Tenha cuidado redobrado com vídeos
Tenha cuidado especial ao usar vídeos. Os vídeos são um dos conteúdos maiores e, portanto, mais lentos para um site baixar e exibir. Por isso, tente não usá-los em excesso. Evite usá-los na parte de cima das páginas da Web. Deixe-os para o fim da página. Isso permite que o conteúdo mais leve seja carregado rapidamente, o que melhora a experiência de carregamento para os usuários e garante que a LCP não seja afetada.
Testes A/B
Muitas empresas realizam testes A/B para testar mudanças no site. A forma como eles são implementados pode ter um grande impacto na LCP.
Muitas soluções de teste A/B atrasam a exibição inicial de um site para o usuário até que as mudanças em todos os testes sejam aplicadas. Isso evita que a versão original do site seja mostrada, mas atrasa a visibilidade do site para o usuário. Outras soluções são aplicadas no lado do servidor para evitar esse atraso. Entenda como o teste A/B é realizado e se ele está sujeito a esses atrasos. Além disso, considere usar soluções de teste A/B do lado do servidor, quando possível.
Os testes A/B podem fornecer feedback valioso antes de lançar novas mudanças, mas o custo para o desempenho da página precisa ser comparado com os possíveis benefícios que elas trazem.
Independentemente da infraestrutura, qualquer pessoa que faça testes A/B precisa sempre seguir estas práticas recomendadas:
- Limite as ferramentas de teste A/B apenas às páginas que fazem parte do teste, em vez de atrasar todas as páginas, já que a maioria delas pode não estar executando um teste A/B em um determinado momento.
- Limite o teste A/B a um subconjunto de usuários para evitar impactos na maioria deles.
- Limite os testes A/B ao tempo mínimo necessário para fornecer resultados conclusivos. Quanto mais tempo os testes A/B durarem, mais tempo os usuários poderão ter uma experiência ruim com o desempenho da página.
- O mais importante é não se esquecer de remover os experimentos de teste A/B quando eles não forem mais necessários.
Problemas de Cumulative Layout Shift (CLS)
A CLS mede a estabilidade visual de uma página, ou seja, o quanto o conteúdo se move enquanto é carregado. Isso pode ser uma distração se um usuário começar a ler uma página da Web, mas perder o lugar à medida que mais conteúdo ou anúncios forem carregados. Isso também pode fazer com que os usuários cliquem sem querer no conteúdo errado se o layout da página mudar excessivamente. Tenha muito cuidado com o conteúdo dinâmico que é carregado mais tarde e pode mover parte do conteúdo inicial da página.
Isso é medido com uma fórmula matemática que calcula quanto conteúdo é deslocado e em que medida. Ele é expresso como uma fração sem unidade, em que um valor de 0,1 ou menos é considerado bom, e um valor de 0,25 ou mais é considerado ruim.
Alguns dos problemas comuns que afetam a CLS e que podem ser influenciados pelos tomadores de decisões de negócios são apresentados nas próximas seções.
Verificar como as imagens são carregadas ao rolar uma página
Muitos modelos evitam carregar imagens mais abaixo na página para dar mais recursos às imagens que estão na tela durante o carregamento de página inicial. As imagens são carregadas conforme o usuário rola a página para baixo. Essa técnica de carregamento de imagens é conhecida como carregamento lento.
Os modelos de página precisam reservar espaço para imagens de carregamento lento. Assim, se um usuário rolar a página muito rápido antes que a imagem seja carregada, o conteúdo ao redor dela não vai se deslocar. Se o modelo ou a plataforma não fizer isso, considere mudar para um que faça.
Cuidado com anúncios no meio do conteúdo
Os anúncios inseridos no meio do conteúdo correm o risco de empurrar o conteúdo para baixo, já que costumam demorar um pouco mais para carregar, muitas vezes mais do que as imagens descritas na seção anterior. Colocar esses elementos ao lado do conteúdo principal da página é um padrão comum que reduz esse risco. Como isso é feito na prática depende da sua plataforma específica e dos modelos que você usa para criar o site.
Evite adicionar conteúdo dinâmico ao topo das páginas
Evite adicionar alertas e banners na parte de cima da página após o carregamento de página, como banners de cookie ou ofertas especiais. Se você optar por sobrepor alertas e banners ao conteúdo principal, o conteúdo da página não vai mudar de lugar. Assim como na seção anterior, as opções aqui dependem da plataforma e dos modelos usados nas suas páginas.
Problemas de Interaction to Next Paint (INP)
A 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 de teclado. As páginas que não respondem rapidamente à entrada do usuário geralmente parecem lentas e podem ser frustrantes para os usuários.
A INP mede todas as interações qualificadas durante a vida útil de uma página e informa a pior delas. A INP tem um limite bom de 200 milissegundos e um limite ruim de 500 milissegundos.
As métricas de responsividade, em especial a INP, são difíceis de otimizar. Quando essas métricas estão no limite ruim, geralmente é porque as interações estão atrasadas pela página da Web que tenta fazer muitas coisas. Portanto, as principais soluções aqui envolvem a remoção de código desnecessário para tornar as páginas mais leves.
Alguns dos problemas comuns que afetam a INP e que os tomadores de decisões de negócios podem influenciar são apresentados nas próximas seções.
Faça uma faxina geral!
Analise os plug-ins e widgets adicionados ao seu site e remova-os se não forem mais usados. É mais fácil adicionar plug-ins para testar algo do que lembrar de removê-los depois, caso não sejam úteis. Essa é uma das causas de interações lentas, mas é uma otimização relativamente mais simples do que muitas outras.
Da mesma forma, se você estiver usando um gerenciador de tags para campanhas de marketing, remova as campanhas antigas. Mesmo que não sejam mais disparados, o código das campanhas de marketing expiradas ainda precisa ser baixado e compilado em cada página, o que pode desacelerar as interações do usuário durante o carregamento de página inicial.
Evite widgets e plug-ins caros
Widgets e plug-ins computacionalmente caros podem parecer bons, mas será que eles melhoram a experiência do usuário ou, na verdade, a pioram? O relatório "Diagnosticar problemas de desempenho" no PageSpeed Insights é fornecido pelo Lighthouse e pode ajudar a identificar o JavaScript que está afetando o desempenho do seu site.
O ideal é limitar os widgets apenas às páginas em que eles são necessários. Se você estiver usando apenas um mapa do Google incorporado na página de contato, não será necessário carregá-lo em todas as páginas, o que 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 exigir muitos recursos. Quanto mais anúncios você tiver, mais recursos eles vão consumir, o que pode interferir na velocidade da página. Isso é especialmente verdadeiro em dispositivos móveis, em que a memória de processamento geralmente não é tão grande quanto em computadores ou laptops.
Pese o equilíbrio entre monetização e performance. Se os usuários estiverem saindo mais cedo devido a uma experiência ruim, esses anúncios extras podem estar custando mais receita do que estão gerando.
Evite páginas muito grandes
Páginas grandes e complexas exigem mais tempo de processamento para serem exibidas. Por exemplo, se você tiver uma galeria com 1.000 produtos diferentes, vai levar um tempo para que ela seja exibida na janela do navegador do usuário. Considere quando paginar as páginas para reduzir esse tempo.
Como posso receber mais ajuda?
Este post lista algumas das considerações gerais que os proprietários de empresas podem fazer e que podem afetar o desempenho. Além disso, talvez seja necessário consultar desenvolvedores web para receber mais insights sobre o que fazer para melhorar a performance do seu site.
Informações específicas da plataforma
A maioria das plataformas se preocupa muito com o desempenho na Web e pode ter conselhos dedicados e específicos para melhorar isso. Ao usar essa plataforma, você também pode ter acesso a equipes dedicadas ao desempenho na Web que podem dar mais orientações sobre como melhorar seu site.
O Lighthouse também mostra informações específicas da plataforma usando a funcionalidade Stack Pack, que pode orientar os usuários de plataformas compatíveis com as recomendações adequadas.
As plataformas estão sempre melhorando, e muitas estão se concentrando na performance e nas Core Web Vitals no momento. Mantenha sua plataforma atualizada para aproveitar as melhorias mais recentes feitas pelos desenvolvedores.
Isso é mais fácil quando você está em uma plataforma hospedada em que o provedor gerencia automaticamente a plataforma, incluindo as atualizações. Se você hospedar a plataforma, por exemplo, uma instalação local do WordPress no seu próprio servidor, garantir que ela seja atualizada rotineiramente vai permitir que seu site se beneficie de todas as melhorias implementadas pelos desenvolvedores da plataforma. As empresas precisam priorizar essa manutenção ou escolher um serviço que faça isso por elas.
Contratar um desenvolvedor web
Um desenvolvedor web com experiência em desempenho na Web provavelmente poderá resolver muito mais problemas do que o proprietário de uma empresa. Talvez você já tenha contratado um desenvolvedor web para criar seu site inicialmente ou para fazer mudanças periódicas, ou talvez tenha uma equipe de desenvolvimento dedicada ou precise encontrar um desenvolvedor para contratar (o ideal é que tenha experiência em performance na Web).
Se as sugestões fornecidas aqui não forem suficientes para resolver os problemas de desempenho do seu site, procure desenvolvedores. No entanto, esperamos que os exemplos anteriores também mostrem que é importante trabalhar com desenvolvedores para equilibrar as prioridades de negócios com as decisões de desenvolvimento e chegar à solução certa para seu site.
O desempenho na Web raramente é um trabalho único. Para manter um bom desempenho, é preciso monitorar e fazer manutenção regularmente para garantir que o site não regrida após as melhorias.
Conclusão
Um site costuma ser o primeiro ponto de entrada de uma empresa com os clientes, e você quer que eles tenham uma ótima experiência. Isso se aplica tanto aos visitantes novos, que estão tendo a primeira impressão da sua empresa, quanto aos visitantes recorrentes e clientes fiéis, que devem ter uma experiência o mais integrada possível, de preferência 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, os usuários podem (e vão!) tentar outros sites se ficarem frustrados com o seu.
Ao mesmo tempo, as Core Web Vitals são apenas uma medida do seu site. As empresas precisam decidir quanto investir nos sites e qual será o retorno desse investimento.