Saiba como identificar e como resolver os principais obstáculos técnicos relacionados aos Core Web Vitals e atinja nota máxima nas avaliações de velocidade, interatividade e estabilidade visual!
Nos últimos meses, a comunidade de SEO têm fervilhado com o surgimento de atualizações, discussões, recursos e novas maneiras de enxergar o trabalho de otimização de sites, principalmente no que diz respeito a aspectos relacionadas a experiência do usuário, intenção de busca e a ascensão da visibilidade de novos formatos de conteúdos, como os vídeos, por exemplo.
À parte disso, o que existe de mais básico em SEO, ou seus elementos técnicos mais elementares, pode ter ficado ligeiramente ofuscado diante de tanta inovação, especialmente no horizonte daqueles que ainda são iniciantes no mercado.
Para estes profissionais, é importante dizer que o grande segredo para construir uma estratégia de otimização genuinamente eficiente depende, de modo fundamental, de um equilíbrio saudável entre o que conhecemos como noções voltadas ao usuário, ou SEO Experience, e noções voltadas ao robô, ou SEO Técnico.
Com a chegada do Google Page Experience, nova atualização de algoritmo que chega em maio, as novas métricas de avaliação do maior buscador do mundo trouxeram uma justa evidência a um dos mais importantes aspectos técnicos de um site: sua velocidade.
Os Core Web Vitals, ou Principais Métricas da Web, vieram para elevar o padrão de qualidade da SERP e das páginas que desejam alcançar suas melhores posições.
Estas três novas métricas, chamadas de Largest Contentful Paint, First Input Delay e Cumulative Layout Shift, dizem respeito a fatores que recebem, agora, uma nova camada de relevância, sendo eles a velocidade de carregamento de um site, sua interatividade e sua estabilidade visual.
Se você tem o propósito de otimizar o seu site para obter as melhores notas nestas avaliações, trazemos hoje um Guia Técnico com todos os passos básicos para você resolver os problemas mais comuns que impedem tanto os crawlers quanto os usuários de fazer uma leitura fluida do seu site.
Vamos lá?
Velocidade do site como o centro das atenções
Todas as práticas descritas nos próximos tópicos deste conteúdo se baseiam nos novos padrões de qualidade exigidos pelo Google para acompanhar o Page Experience: os Core Web Vitals.
Vale lembrar, antes de continuarmos, que ainda não foi encontrado um site que alcançou 100% de aproveitamento em todas estas métricas – nem mesmo o Google, que as criou!
Por serem comportamentos que necessitam de constante manutenção, os Core Web Vitals possuem metas mínimas e máximas. Em outras palavras, cada métrica possui um valor mínimo a ser alcançado para ter uma performance considerada boa, o que não significa que este valor também não possa melhorar.
No próximo tópico deste conteúdo, você verá quais são os valores mínimos de cada um destes critérios para se considerar seu bom aproveitamento.
Abaixo, um exemplo de avaliação de um site que foi extraordinariamente bem em todas as notas.
Estes padrões medem o desempenho dos três principais componentes de uma página relacionados à experiência do usuário, sendo eles a sua velocidade de carregamento, quanto tempo um usuário demora para poder executar sua primeira ação e o quanto o layout desta página faz-se estável enquanto seus elementos são carregados.
Em conjunto, estas três métricas possuem um elemento basilar em comum: a velocidade.
Sem uma boa performance de velocidade do site, nenhuma destas métricas alcançará notas muito significativas, o que nos leva a concluir que as correções voltadas a velocidade de carregamento devem ser a primeira preocupação de qualquer webmaster.
Para trabalhar cada uma destas métricas — LCP, FID e CLS —, trarei seus principais impedimentos e explicarei, em seguida, como resolvê-los.
Largest Contentful Paint (LCP)
O LCP avalia o tempo de carregamento de uma página e deve ter, no máximo, 2,5 segundos para que tenha uma execução satisfatória, tanto para o algoritmo quanto para o usuário.
Para otimizar a velocidade de carregamento do seu site, deve-se atentar e corrigir os seguintes elementos:
Otimização do servidor
Um dos principais obstáculos para a velocidade de carregamento de um site ocorrem devido a lentidão de seu servidor.
Para reduzir a velocidade de resposta do servidor, no entanto, é necessário verificar a eficiência das operações realizadas por ele para entregar a página carregada.
Muitas vezes, para realizar a construção destas páginas, os servidores rodam queries e operações desnecessárias que prejudicam a velocidade deste carregamento.
Para corrigir esse problema, verifique quais as operações fundamentais para o funcionamento das páginas e retire todas aquelas que se mostram dispensáveis.
Com a ferramenta Pingdom, que mede a velocidade das requisições de uma página, podemos saber quais delas estão com um tempo de resposta mais elevado, conforme exemplo abaixo, onde estão na categoria “Wait”.
Cache
Uma outra boa maneira de melhorar o tempo de resposta do servidor é a configuração de cache.
Com ele, ao invés de realizarmos ações para a construção da página na íntegra, podemos, antes, servir um arquivo html estático para a visualização dos usuários, evitando que seja feita uma nova consulta ao banco de dados, ou dispensando operações complexas para cada requisição que o usuário fizer.
Utilização de CDN
A utilização de CDNs é uma boa estratégia para facilitar o acesso ao conteúdo disponível para diferentes regiões.
Os CDNs são servidores distribuídos em diferentes localidades que servem para encurtar o caminho das requisições feitas pelos usuários. Com isso, o usuário pode receber o conteúdo de um servidor próximo a ele ao invés de aguardar a informação vinda de um servidor longíquo.
Alguns exemplos eficientes de CDNs são GoCache, CloudFlare e CloudFront.
Pré carregue solicitações críticas
Utilize o atributo rel=”preconnect” para carregar as solicitações essenciais à página. Com ele, informamos ao navegador que será necessário se conectar a um servidor de terceiros e que isso deve ser feito o mais rápido possível.
Exemplo de aplicação do atributo:
<link rel=”preconnect” href=”https://example.com”>
Bloqueio de renderização JS e CSS
Quando os navegadores se deparam com arquivos JS e CSS, a renderização da página é pausada para que eles possam interpretar esses arquivos.
Para evitarmos este hiato, é necessário que apenas o essencial para o funcionamento das páginas seja carregado — como o primeiro pageview, por exemplo —, “atrasando” o restante dos códigos.
Estes códigos deixados para depois podem ser carregados no footer, ou até mesmo de maneira assíncrona.
Isto pode ser feito com a utilização do atributo async, conforme exemplo abaixo:
Minificar arquivos CSS e JS
Todos os arquivos do site devem ser minificados. Ou seja, tudo o que não for estritamente essencial em seu código-fonte, deve ser eliminado a fim de deixar este código mais leve.
Dessa forma, retiramos dos arquivos todas as informações desnecessárias para o navegador, como espaços e formatação equívoca de texto.
Esta ação diminui consideravelmente o tempo que o navegador leva para interpretar esses arquivos e, consequentemente, o tempo necessário para requisitá-los.
Imagens desnecessárias
Um dos principais pontos de reprovação no PageSpeed Insights são as imagens. Evite utilizar imagens desnecessárias para o conteúdo.
Compressão de imagens
Garanta que todas as imagens do site sejam comprimidas através de ferramentas como imagemim ou tinypng.
Este é um pré-requisito básico para eliminar o peso delas na hora de carregar uma página.
Utilize imagens nos formatos mais recentes
Imagens em formatos ultra modernos, como JPEG 2000, WEBP e JPEG XR, são muito menores que aquelas salvas em formatos tradicionais. Utilizá-las pode representar um grande aumento de performance.
Obs.:esses formatos, infelizmente, ainda não estão disponíveis para todos os navegadores. Sendo assim, é importante também apresentar a opção de carregar as imagens em formatos tradicionais para alguns softwares.
Utilizar imagens responsivas
Certifique-se de que todas as imagens sejam requisitadas no tamanho exato, ou pelo menos muito próximo, daquele que serão utilizadas.
Procure carregar imagens de diferentes tamanhos dependendo dos dispositivos disponíveis.
Dica: Caso utilize o WordPress, configure o tamanho das thumbnails no functions.php e utilize um plugin, como o Advanced Regerete thumbnails, por exemplo, para gerar novas imagens em diferentes tamanhos. Isso pode ser feito através do atributo srcet.
Compressão de texto
Procure garantir que todos os recursos carregados no site utilizem compressão GZIP e Brotli.
A utilização desses métodos para a compactação de texto pode reduzir significativamente o tamanho dos arquivos requisitados.
Obs.: embora a compressão Brotli seja mais eficiente que GZIP, esse formato ainda não é suportado por todos os navegadores.
First Input Delay (FID)
O FID mede o tempo de interatividade da página, ou seja, quanto tempo um usuário leva para poder realizar sua primeira interação dentro dela.
Também diretamente conectado com velocidade, idealmente este tempo deve ser menor que 100 milissegundos.
Para melhorar este tempo, utilize os seguintes recursos:
Lazy loading
Adie o carregamento das imagens que não são exibidas na primeira rolagem através da utilização do lazy loading, recurso que só permite que uma mídia seja carregada quando o usuário estiver rolando a página para alcançá-la.
Se um visitante não chegar ao rodapé do seu site, por exemplo, as imagens que estariam lá nem chegarão a impactar o carregamento da página.
Veja, abaixo, como executar o lazy loading em diferentes plataformas:
WordPress: isso pode ser realizado através de plugins como Smush, por exemplo.
Vtex: é possível utilizar lazy loading na vitrine da Vtex através da tag noscript.
Long Tasks
As long tasks se referem a qualquer período de execução JS que exceda 50ms.
Para otimizar este tempo, divida o JS necessário para o primeiro pageview para que não haja nenhum bloqueio de renderização em um primeiro momento.
Você pode verificar a existência de long tasks atráves da aba Performance no devTools, ferramenta nativa no Google Chrome.
Defer JavaScript
Outra ação relativa ao JavaScript que pode garantir uma melhor performance de carregamento é adiar a execução de scripts que não são utilizados no primeiro pageview, ou rodá-los de forma assíncrona.
Isso pode ser feito atráves dos atributos defer e async, conforme os exemplos abaixo:
Cumulative Layout Shift (CLS)
O CLS é a métrica que mensura a estabilidade visual da página.
Quando uma página web é carregado, é comum que certos elementos visuais, como determinadas imagens e vídeos, sejam carregadas somente após os recursos mais essenciais a ela.
Entretanto, é importante que, ao carregar esses elementos “adiado”, as página não sofram alterações bruscas de layout, como um botão sendo empurrado para baixo ou um conteúdo mudando de posição de repente.
Para que isso não aconteça, o espaço para os recursos adiados deve ser demarcado previamente, evitando que o usuário seja induzido ao erro ao, por exemplo, executar uma ação indesejada ao clicar por engano em um banner que surgiu abruptamente.
O CLS também possui relação com a velocidade de carregamento de uma página, e deve ter uma pontuação menor que 0.1.
Contudo, uma página pode ser considerada aprovada se atingir a pontuação de 75% em cada uma das métricas.
Para assegurar a estabilidade visual da sua página, as seguintes ações podem ser úteis:
Declare explicitamente o tamanho da imagem e iframes
Utilize os atributos width and height para declarar, previamente, o tamanho das imagens que serão carregadas nesta página.
Dessa forma, quando os navegadores interpretarem a tag img, eles saberão exatamente o espaço que deverá ser reservado para elas.
Font-display
Utilize a propriedade font-display: swap para garantir que o texto possa ser visualizado durante o carregamento das fontes.
Carregue uma imagem genérica enquanto aguarda as outras
Uma terceira alternativa para lidar com o carregamento de uma imagem adiada é estipular, em seu lugar, o carregamento de uma imagem genérica de mesmo tamanho que a original, mas cujo arquivo seja menor.
Com isso, essa imagem reservará o espaço da imagem definitiva, evitando a instabilidade da interface.
Ferramentas para identificação de erros
Atualmente, o Google fornece três ferramentas diferentes para avaliar e mensurar a performance de uma página com relação aos Core Web Vitals: o Chrome User Experience Report, o PageSpeed Insights e o Search Console (Core Web Vitals report).
De modo prático, porém, independentemente da ferramenta utilizada, o primeiro e mais importante passo é o diagnóstico.
Não será possível estipular um plano de correção de erros se, antes, não conhecermos exatamente quais são estes erros.
Utilize o lighthouse, no devTools, para rodar uma primeira investigação em seu site e identificar os principais pontos de atenção.
O lighthouse gera um relatório no qual podemos identificar quais são os principais problemas do site com uma visualização muito prática, além de uma pequena descrição de como resolvê-los.
No exemplo acima, podemos ver que a utilização de lazy loading (deffer offscreen images) foi apontada pelo lighthouse como uma oportunidade para melhorar o carregamento.
Para executar esta ação, utilize o atributo data-src com o endereço da imagem e carregue a imagem definitiva conforme a necessidade do usuário.
Além disso, abaixo podemos notar a recomendação de remoção de JavaScript não utilizado, conforme descrito nas dicas algumas linhas acima.
Outra questão que merece ser lembrada é que, hoje em sua, é muito comum utilizarmos aplicações de terceiros em nosso site, como scripts de Facebook, Google Tag Manager e Hotjar, por exemplo.
Para manter o seu site sempre leve, verifique a real necessidade de utilização dessas ferramentas.
No caso do Google Tag Manager, especificamente, garanta que todas as tags que estão ativas estão sendo realmente utilizadas em seus relatórios, e não estão somente fazendo requisições inúteis dentro desta página, o que pode degradar seu desempenho.
Além disso, evite usar muitas bibliotecas em seu site. Ao utilizá-las em excesso, fazemos a requisição de muitos códigos desnecessários; no mais, também garanta que os arquivos sejam requisitados apenas nos lugares em que serão utilizados.
Para quem utiliza WordPress, bloqueie a requisição dos arquivos dos plugins nas páginas nas quais eles não estão sendo utilizados. A utilização excessiva de plugins também é um dos principais responsáveis pelo mau desempenho desta plataforma.
