Introdução
Desde a sua introdução em maio de 2020, o pacote Core Web Vitals (CWVs) do Google tornou-se uma métrica importante para medir o desempenho do site. Dado que o Google considera esses valores como parte do algoritmo de classificação de páginas, maximizar o desempenho do seu site em termos de CWVs não só melhora a experiência dos seus usuários, mas também melhora a classificação do seu motor de busca. este artigo irá explorar dicas e técnicas para ajudar a melhorar a pontuação da sua página, aumentar a satisfação do utilizador e aumentar os seus resultados.
O que são os Core Web Vitals?
Como tantas outras coisas na tecnologia, os Web Vitals do Google são um enxame de siglas de três letras, cada uma representando algum aspeto mensurável do desempenho de um site. Para definir o palco, vamos definir as três principais métricas que definem os Core Web Vitals:
A maior pintura Contentful
Maior tinta Contentful (LCP): Mede a velocidade de carga percebida ao focar a quantidade de tempo que leva para o conteúdo visível acima da dobra para carregar. Para proporcionar uma experiência de utilizador ideal, o LCP deve ser acionado dentro de 2,5 segundos na linha do tempo de carregamento da página.
Primeiro atraso de entrada
First Input Delay (DIF): Mede a capacidade de resposta da página medindo o atraso entre as ações do utilizador e a resposta da página. Para proporcionar uma experiência de utilizador ideal, as páginas devem ter um ID de 100 milissegundos ou menos.
Mudança de esquema cumulativa
Deslocamento de disposição cumulativa (CLS): Mede a estabilidade visual usando uma medição composta de turnos de layout na página à medida que ela é renderizada. Para proporcionar uma experiência de utilizador ideal, as páginas devem manter um CLS de 0,1 ou menos; tudo entre 0,1 e 0,25 é considerado moderado e maior que 0,25 é pobre.
… e porque é que são importantes?
Para muitos negócios, o desempenho do site tem uma correlação direta com o sucesso do negócio. A pesquisa indica que os sites com pontuação de VOC aprovada podem ter até 37% mais visibilidade nos resultados de pesquisa em comparação com páginas que não são (Beus); e que as pontuações de VOC melhoradas podem aumentar tanto a receita por visitante como a taxa de conversão (Duong et al.).
Enquanto trabalha com Akira, Uma boutique de moda feminina, Edgio foi capaz de melhorar os CWVs do site, trazendo o tempo de carregamento da primeira página de 5 segundos para 1 segundo, melhorando as medições da VCCA e, finalmente, proporcionando um aumento de 30% no tráfego orgânico, uma melhoria de 61% nas iniciações de check-out e um aumento de 37% na taxa de conversão.
Simplificando, sites mais rápidos tornam melhores classificações de SEO e utilizadores mais felizes – especificamente no contexto de sites de comércio eletrónico; estes combinam-se para diminuir as taxas de rejeição e aumentar as conversões.
Então, como podemos melhorá-los?
Primeiro atraso de entrada
Vamos começar com a fruta baixa: Primeiro atraso de entrada. A boa notícia é que os sites têm a pontuação de identificação do utilizador mais frequentemente do que não, o que é ótimo de ver! Se, no entanto, não for esse o caso, muitas vezes, o culpado são os scripts de terceiros carregados no início do ciclo de vida do site, o que pode bloquear a execução do encadeamento principal necessária para receber a entrada do usuário. As ferramentas que capturam erros e executam a gravação de tela são candidatos privilegiados para escrutínio adicional.
Na verdade, qualquer coisa que bloqueia a linha de execução principal pode contribuir para um fraco desempenho do DIF. Fique de olho nas tarefas de JavaScript que consomem muitos recursos ou que consomem muito tempo e considere refatorar códigos não relacionados à interface do usuário para um web worker, bem como usar técnicas de carregamento lento e separação de códigos para garantir que apenas o JavaScript necessário seja carregado e somente quando for necessário.
Além disso, embora tecnicamente não seja um elemento central dos VCP, vale a pena mencionar outra métrica relacionada: Interaction to Next Paint (INP). O INP mede o tempo entre interagir com uma página e a atualização subsequente da página refletindo essa interação. Enquanto o INP e o FID medem a resposta geral da página, o INP preocupa-se com todas as interações da página em vez da primeira interação, com o objetivo de garantir que a página permaneça responsiva durante toda a sessão, não apenas com as interações iniciais. O INP rastreia o pior desempenho de interação na experiência de um usuário e relata isso para se tornar mais grave. É muito provável que em breve o INP substituirá o DIF como uma medida de resposta da página, por isso vale a pena ficar de olho.
A maior pintura Contentful
Indiscutivelmente, a métrica mais importante e impactante para o desempenho da página é o LCP. Um pouco previsivelmente, o exemplo mais comum do maior Contentful Paint é uma imagem de “herói” – uma imagem ou vídeo grande, geralmente ocupando toda a largura da janela de visualização acima da “dobra”. Embora as técnicas para otimizar este elemento sejam as mesmas que qualquer outro recurso de página, o tempo necessário para que esse recurso seja renderizado é de extrema importância porque este é o primeiro elemento principal que um usuário experimentará.
A aguardar na fila
Quebrar o tempo de solicitação para o elemento LCP é tremendamente útil na otimização do seu desempenho. Qualquer pedido feito por um navegador começa com a fila. Cada pedido LCP gasto na fila é de um milissegundo que contribuirá para a pontuação LCP, por isso, se descobrir que estes elementos estão a gastar uma quantidade desproporcional de tempo a definhar na fila do navegador, investigue o que está a ser pedido à frente e porquê, e tome medidas para dar prioridade aos recursos LCP. Talvez os recursos estejam abaixo da dobra, ou outros scripts que podem ser carregados com preguiça ou adiados. A ordem das operações é fundamental.
A aguardar no servidor
Depois de iniciar a solicitação de rede, o cliente do navegador tem que esperar que o servidor receba, processe e responda a essa solicitação. Esta métrica é chamada de tempo até o primeiro byte (TTFB). Se o servidor for lento para responder ao pedido, a sua pontuação LCP vai sofrer. Esta é uma das áreas em que ter uma CDN pode ter um impactos significativo na melhoria da velocidade, uma vez que os CDNs podem manter uma cópia armazenada em cache do recurso em um local geograficamente próximo dos seus usuários finais e responder com esse recurso mais rapidamente do que um único servidor de aplicativos. Outros grandes aspetos do uso de uma CDN incluem o WAFS de segurança incorporado e a capacidade de responder a grandes picos de tráfego. Se você está indo para a velocidade, você deve estar usando uma CDN.
Larga no fio
Neste ponto, espero que o navegador esteja a solicitar os recursos LCP no início do ciclo de vida da página, e o servidor deve estar a responder a eles rapidamente. O próximo elemento a considerar é o tamanho total do recurso solicitado. Cada byte que tem que viajar “pelo fio” para o navegador levará algum tempo, e quanto mais esses bytes houver, mais tempo levará para que o pedido seja concluído. Portanto, deve-se tomar cuidado para garantir que os recursos sejam tão pequenos quanto razoavelmente possível para minimizar o tempo gasto a transferi-los. Isso pode incluir o uso de serviços de otimização de imagem e hospedagem de terceiros, como kraken.io ou imgix.com, que podem tanto otimizar e servir arquivos de mídia em formatos “NextGen” como o WebP, reduzindo ainda mais o tamanho.
Ajude o navegador a sair
Além das otimizações de tamanho, considere usar <tags de imagem>, o que permitirá que o navegador escolha o recurso certo para solicitar o dispositivo de forma mais inteligente. Um navegador de desktop pode ter grandes faixas de propriedades de tela para exibir imagens de alta resolução; no entanto, esses mesmos recursos vão barrar um dispositivo móvel com uma tela menor. Usando recursos otimizados e consultas de mídia CSS, você pode garantir que o navegador peça o recurso certo para o tipo de dispositivo e reduza o tempo gasto na transferência de bytes do servidor para o cliente.
Além disso, você pode dar ao navegador uma ajuda pedindo-lhe para pré-carregar recursos LCP e especificar uma prioridade de busca. Isso dará ao navegador pistas para dar prioridade aos principais recursos à frente dos menos críticos. Quanto mais depressa as coisas se tornam no navegador, mais rapidamente elas podem ser renderizadas, e quanto mais rápido o LCP acontece, melhor.
Mudança de esquema cumulativa
Vemos isso o tempo todo. Depois de enviar o seu navegador para buscar um site, a página começa a carregar; enquanto a página se desenvolve, você vê a peça em que está interessado e move-se para clicar nela quando de repente a página inteira muda e o link que você pensou que estava prestes a clicar é de repente em outro lugar! Este fenómeno chama-se mudança de esquema. É irritante para todos, geralmente auto-infligido, e devemos esforçar-nos por minimizá-lo para o bem da humanidade.
Os suspeitos habituais
Os culpados típicos para pontuações CLS mais altas são:
- Colhedores pegajosos
- Banners promocionais ou “Herói” que são carregados e renderizados no lado do cliente
- Avisos de boletim informativo, Cupom e GPDR
- Outras integrações de terceiros que são injetadas dinamicamente na página
Defina alguns limites
Lembram-se do <elemento da imagem> que referimos ao discutir o LCP? Não se esqueçam de adicionar dimensões aos vários elementos neles contidos. Omitir estes valores leva-o para fora do banco do condutor ao dirigir o navegador sobre como renderizar esses elementos. Ao definir as dimensões, o navegador pode reservar a quantidade correta de espaço em que a imagem será pintada, reduzindo a mudança.
O mesmo é verdade para qualquer conteúdo que possa ser dinamicamente adicionado à página. Anúncios, <iframe> ou outros conteúdos adicionados dinamicamente podem contribuir para o CLS. O conteúdo da página mudará menos reservando espaço para esses itens com antecedência. Além disso, evite adicionar o conteúdo acima do conteúdo da página existente, pois isso fará com que a página inteira se mova para baixo.
Ajudar o navegador a esculpir o espaço com antecedência irá reduzir o CLS, mas pode vir à custa da experiência geral do utilizador, à medida que o utilizador espera que estas partes da página em branco se tornem preenchidas com conteúdo útil. Como meio-termo, implementar esqueletos de carregamento de elementos pode ser uma técnica útil para comunicar ao utilizador que há mais por vir, dando a impressão de uma experiência mais rápida enquanto o navegador faz o resto do trabalho pesado para coordenar o conteúdo adicional da página. O que é mais é que estes podem e devem ser implementados usando animações CSS em vez de GIFs animados, o que significa que apenas algumas linhas de CSS podem ser usadas para implementar esta técnica em todo o seu site.
Embrulhar
Na superfície, o Core Web Vitas pode parecer as últimas peças do algoritmo lendário e sombrio do Google para determinar a classificação da página dentro dos seus resultados de pesquisa – e, em certa medida, isso pode estar correto. No entanto, mais do que isso, os Core Web Vitals representam uma estrutura mais concreta para medir o desempenho da página e estabelecer uma linha de base para descrever coisas que importam em termos de experiência do utilizador. Embora não sejam exaustivas, as técnicas acima mencionadas devem ajudar a dar uma vantagem na resolução de problemas e na otimização do desempenho do seu website, resultando em melhorias na experiência do utilizador, classificação de páginas e receitas.
