core web vitals - thumb

Core Web Vitals: por que investir em experiência do usuário?

Core Web Vitals refere-se às métricas do Google que medem a experiência do usuário nas páginas.  Elas estão relacionadas à velocidade, interatividade e estabilidade visual, fatores que determinam se o usuário vai acessar o seu conteúdo ou desistir diante de um obstáculo.  Afinal, o que o usuário quer é ter uma boa experiência ao buscar a solução para um problema. Ou seja, ele espera encontrar respostas para as suas dúvidas de maneira rápida e prática. Se você ainda não está tão por dentro desse assunto, não se preocupe. Ao longo deste artigo falaremos mais sobre as Web Core Vitals e sobre as otimizações necessárias para o seu site oferecer uma experiência ainda melhor ao usuário.  Acompanhe! via GIPHY A princípio, o Google utiliza esses critérios em seu algoritmo para avaliar a usabilidade de uma página.  As Core Web Vitals abrangem os seguintes indicadores: Largest Contentful Paint (LCP) – calcula o tempo de carregamento da página;  First Input Delay (FID) – mede em quanto tempo o usuário consegue interagir com a sua página; Cumulative Layout Shift (CLS) – mensura a estabilidade do conteúdo enquanto a página carrega e o usuário interage com ela. O desenvolvimento desses indicadores foi anunciado pelo Google em maio de 2020.  A ideia era unificar as orientações dos fatores de qualidade de uma pagina.  Assim, não seria necessário lidar com diversas ferramentas e métricas. Já no fim do mesmo mês, o Google informou que incorporaria as Core Web Vitals ao seu algoritmo. Experiência do usuário: outros indicadores que o Google utiliza Além das Core Web Vitals, o Google usa outras métricas para saber sobre a experiência que a página entrega ao usuário.  Em outras palavras, elas passam a fazer parte de outros fatores de rankeamento, que o algoritmo já adotava, como: Mobile friendly Com a popularização dos dispositivos móveis, o Google passou a priorizar a experiência mobile dos usuários.  Desde 2018, o buscador classifica os sites usando apenas a versão para dispositivos móveis. Isso não significa que as versões de desktop perderam completamente a relevância, mas o movimento de mobile first (primeiro o móvel) também passou a ser parte das condições de avaliação do Google. Navegação segura Após analisar milhares de URLs e identificar os sites que possuem vulnerabilidades, o Google exibe avisos nos resultados de busca e no navegador.  Afinal, os sites não seguros são um risco para os usuários. HTTPS Já o protocolo HTTPS possui uma camada de proteção criptografada na transmissão de dados entre o computador e o servidor. Assim, ajuda a aumentar a segurança. Testando o seu site para as Core Web Vitals  Mais adiante você verá de que forma é possível testar sua página para as Core Web Vitals.  Mas antes é importante dizer que, para avaliar as métricas, o Google divide a origem dos dados em dois grupos: Field Data e Lab Test Data. Enquanto o primeiro se baseia nas experiências reais de usuários com o site e é utilizado para sua classificação no Google, o segundo refere-se a métricas aproximadas.  Ou seja, elas são criadas em um ambiente de teste que tenta reproduzir a experiência do usuário. As Core Web Vitals – chamadas também de “principais métricas da web” – podem ser testadas pelas principais ferramentas de SEO.  O Google Search Console, por exemplo, conta com relatórios dedicados para acompanhar essas métricas. A Semrush também pode fazer isso.  Além disso, você pode testar sua página com o Google PageSpeed Insights, que usa Field Data para seus resultados.  Assim, ele traz métricas conforme o que o Google está levando em consideração. Também é possível fazer teste usando o Lighthouse. Contudo, vale ressaltar que este utiliza Lab Test Data, e por isso não apresenta o First Input Delay (FID). Como otimizar o site com as “principais métricas da web”? LCP – Largest Contentful Paint Conforme, adiantamos, LCP é a métrica que representa a percepção de carregamento das páginas. Segundo o Google, 2,5 segundos ou menos  é considerado um bom tempo de LCP; entre 2,5 e 4 segundos é um tempo razoável, que ainda requer melhorias e acima de 4 segundos é um LCP ruim, que precisa de melhorias urgentes, como: Otimizar seu servidor; Utilizar CDN; Ativar o cache; Usar Service Worker para páginas HTML “cache-first”; Antecipar conexões de terceiros; Minificar e adiar JavaScript e CSS que não são críticos para a página. FID – First Input Delay De forma resumida, podemos dizer que o FID mensura a primeira impressão do usuário.  Como assim? Ele calcula o tempo entre a primeira interação do usuário com a página.  Mas ele não mede o carregamento em si, mas apenas o atraso causado entre a interação do usuário e o início do carregamento para cada acesso ao site. Para o Google, um FID abaixo de 100 milissegundos é bom, entre 100 e 300 milissegundos é um tempo razoável e acima de 300 milissegundos é um FID ruim, que precisa das melhorias abaixo: Dividir Javascript pesados em tarefas menores e assíncronas; Otimizar as página para interaction readiness; Usar um web worker; Reduzir o tempo de execução do JavaScript. CLS – Cumulative Layout Shift Já a CLS é a métrica das Core Web Vitals que mede as mudanças inesperadas nas páginas, isto é, sua estabilidade visual.  Essas mudanças ocorrem sempre que um elemento visível muda de um quadro renderizado para outro. Para chegar a uma pontuação, o navegador usa como base o tamanho da janela de visualização e o movimento dos elementos. Desse modo, um CLS abaixo de 0,1 é considerado bom, entre 0,1 e 0,25 é razoável, e acima de 0,25 é um CLS ruim, que precisa urgentemente de melhorias como: Incluir atributos de width e height para imagens e vídeos; Reservar espaços para anúncios e conteúdo dinâmico; Usar uma API de carregamento de fontes pode reduzir seu tempo de carregamento. Agora que você já sabe como otimizar as “principais métricas da web”, tenho uma pergunta: Por que melhorar a experiência do usuário? Em primeiro lugar, porque o Google vai classificar ou ranquear melhor a sua página nas buscas orgânicas.  Em segundo lugar, focar nessas otimizações de SEO impacta positivamente nos seus resultados de Marketing…

Google PageSpeed, o que é e como usar?

Aparecer na primeira posição do Google. Esse é um dos maiores sonhos de muitos empreendedores digitais. Se você tem um blog, site ou e-commerce, o topo do Google é sem dúvidas um objetivo a ser alcançado. Com a ajuda do Google PageSpeed essa missão se torna menos impossível já que a ferramenta foi desenvolvida para ajudar na otimização de páginas e websites. Fique comigo neste post e aprenda a usar a ferramenta a seu favor e saiba como interpretar os resultados que ela oferece sobre seu site. O que é Google Pagespeed? Vamos pensar um pouco? Estamos em 2021 onde o ritmo na vida de todos é insano. As informações chegam com rapidez e estamos 100% do tempo conectados. Dito isto, passemos ao ritual diário de bilhões de pessoas, buscar no google. Pense, quantas vezes você já fez isso hoje? Pense um pouco mais, quando você clicou em um site que levou mais de 3 segundos pra carregar, se sentiu impaciente ou talvez um pouco frustrado? Sim minha amiga e meu amigo, este fator passou a ser um dos principais levados em conta pelo Google na hora ranquear os resultados de busca. Sites lentos não ficarão muito tempo no top 10 do Google, simples assim. Aliás, como anda o tempo de carregamento do seu? Não sabe bem? O Google Pagespeed pode te ajudar. Trata-se de uma ferramenta lançada pelo Google para ajudar desenvolvedores a otimizar a velocidade de carregamento de seus sites e com isso, oferecer uma boa experiência de busca aos usuários. Como usar o Google Pagespeed? O primeiro passo é ter um website, e-commerce ou pelo menos uma landing page. Algo seu, da sua marca, não um perfil no instagram ou página do facebook pois neste caso você está “pegando emprestado” um espaço para sua marca, mas isso é assunto para outro post. Então você tem uma url própria, muito bem! O processo é tão simples quanto fazer uma busca no google. Passo 1: acesse o site Google Pagespeed; Passo 2: insira a sua url; Passo 3: clique em analisar e aguarde o relatório. Você deverá ver uma nota no topo da tela. Essa nota vai de 0 a 100 e leva em consideração vários pontos. Observe que há uma nota para o desempenho do seu website no desktop e outra para o mobile. Isso acontece porque há alguns anos o google vem priorizando o raqueamento de sites responsivos, isto é, sites que se adaptam bem às telas de smartphones e tablets. Algo bem óbvio hoje, que quase todo mundo ou pelo faz ideia, é que o mobile é mais usado do que desktops. Mas isso é algo que o Google já previu há pelo menos 7 anos quando passou a priorizar o ranqueamento de sites mobile. E é exatamente a partir disso que o Google Pagespeed se baseia. Essa nota atribuída ao desempenho de carregamento do site parte de uma simulação de acesso ao url fornecido.  E para trazer resultados mais reais o Google Pagespeed emula um acesso ao seu site com uma conexão 4g padrão do país onde o teste é solicitado. Então você já sabe que aquela nota representa uma visita ao seu site com o 4g padrão do Brasil. O Relatório do Google PageSpeed Teste concluído, hora avaliar os resultados. Ok, você agora tem uma nota atribuída à sua URL.  É bom saber que se ela está entre 0 e 49 você terá muito a otimizar. Se está entre 50 e 89, o arroz com feijão está feito, mesmo que precise de um pouco mais de tempero. Mas se sua nota está na casa dos 90, muito bem! Para se ter uma ideia, fizemos um teste com o site do próprio Google e pasme, nem mesmo eles conseguiram uma nota acima de 90 no mobile. Então não se sinta mal por não passar de ano no Google Pagespeed. FCP (First Contentful Paint) Começando a entrar em detalhes do relatório temos a primeira sigla FCP. Traduzindo livremente, trata-se da primeira renderização de conteúdo em sua página, isso é, a primeira mudança significativa na tela do usuário que o faz perceber que seu site está carregando. Isto está intimamente ligado à performance do site pois ajuda a evitar uma desistência antes mesmo de o site carregar, o que aumentaria sua taxa de rejeição dentro do Google analytics. FID (First Input Delay)  Para você que está acostumado com os partidos políticos, as siglas do Google Pagespeed serão fichinhas. Chegamos ao FID, segunda métrica trazida no relatório. Ela se baseia na interação do usuário. Como o google prioriza sites responsivos, essa métrica acaba por influenciar bastante na nota final. O FID ou atraso de primeira entrada se refere à experiência dos usuários ao interagir com sua página mobile, logo após o carregamento ser concluído. É importante ter um baixo delay, isto é, atraso na interatividade em seu site. Sabe quando o site carrega, mas os botões ainda não funcionam ou o player do vídeo ainda não está ativo? Isso acontece devido a um alto FID. LCP (Larges Contentful Paint) O LCP, ah que que coisa linda. Todo site tem! Talvez o principal item a ser validado no Google Pagespeed. Se você for guardar apenas um conteúdo desse artigo, que seja este! O LCP é a métrica que avalia o conteúdo principal da sua página. O conteúdo principal é aquele que mostra para o usuário que a página foi carregada. O tempo de carregamento é fundamental para garantir uma boa experiência ao usuário. Não é por menos que o Google Core Web Vitals resume a categoria (loading) carregamento neste item. Falamos sobre CWV mais abaixo (outra sigla? Que legal!) CLS (Comulative Layout Shift) Já o CLS quantifica algo que é experimentado pelo usuário final. Já aconteceu com você de entrar num site e os botões, imagens e itens simplesmente mudarem de lugar? É bem comum na verdade. Você entra no site e o botão aparece no canto esquerdo e aí quando você vai clicar, ele simplesmente muda de…