Este artigo é um guia completo para entender sobre tempo de carregamento e performance de produtos digitais, por que isso é importante para experiência dos usuários e conversão, além de trazer uma lista de ferramentas para monitorar o tempo de carregamento e melhorar suas core web vitals.
“Velocidade é output, o outcome é a boa experiência do usuário”
Hoje um dos principais desafios dos gestores de produtos digitais (engenharia, design e produto) é a o tempo de carregamento/velocidade dos sites e o quanto isso impacta nas seguintes variáveis:
- Posicionamento na busca orgânica
- Custo de mídia paga, e
- Experiência do usuário. (esse é o nosso foco)
A importância da velocidade para a experiência do usuário:
O quanto o tempo de carregamento das aplicações impacta na experiência do usuário talvez seja uma das coisas mais fáceis de se mensurar, uma vez que o tempo de carregamento e as métricas das ações dos usuários relacionadas com a jornada são facilmente correlacionadas, por exemplo taxa de conversão de um cadastro de uma landing page e a taxa de conversão de e-commerce ou até mesmo bounce rate e tempo médio de permanência na página/site.
Existe uma série de estudos que relatam a importância da velocidade para experiência do usuário, um dos materiais mais completos sobre esse assunto é um estudo realizado pelo Google e a WWWAwards, onde eles mostram a correlação entre o tempo de carregamento e como os usuários percebem isso em suas experiências ao utilizarem produtos digitais.
“O tempo de carregamento das páginas é o fator mais relevante na opinião de 75% dos usuários entrevistados”
“53% dos usuários abandonam um site quando ele demora mais de 3 segundos para carregar”
Além dessas informações, esse relatório também traz outras que destacam que o estado mental do usuário no momento da interação com a interface também influencia na sua percepção sobre o tempo de carregamento.
Dados de uma pesquisa do portal Thinking With Google mostra que 77% dos compradores de comércio eletrônico através de dispositivos móveis estão mais propensos a comprar em empresas que apresentam um processo de compra rápido e facilitado.
Além dessas existem várias outras evidências comprovando a eficiência do tempo de carregamento e o quanto isso impacta a experiência do usuário e também as métricas de negócio. Como referência vou deixar no final do texto um link para um site que reúne uma série de resultados de estudos e casos de WPO (web performance optimization).
Onde tudo começou?
Agora que já entendemos um pouco sobre a importância do tempo de carregamento e como isso impacta a experiência do usuário e também as metas de negócios vamos entender um pouco sobre como tudo isso começou até chegar no cenário atual.
Um grande movimento para tornar os navegadores de internet (browsers) mais rápidos, acarretou em uma alta demanda de capacidade de processamento para os computadores.
De forma resumida, tudo começou quando o que nós chamamos de a Guerra dos Browsers começou a ficar um pouco mais acirrada com disputa entre empresas como Microsoft, Mozilla e Google pela liderança da categoria. Entre meados de 2010 até 2013 era comum ver esse tema estampando capas de reportagens nos portais do assunto e também nas revistas (sim, nessa época ainda era bem comum ler revistas sobre internet).
Em 2013 em uma jogada estratégica o Google anunciou que deixaria de dar suporte ao navegador Internet Explorer fazendo então que boa parte dos usuários adotassem o navegador do Google, deixando o navegador da Microsoft para trás. Com o avanço e ascensão do Google Chrome sua tecnologia de base, o “motor” V8 que originou o Node Js(mas essa história fica para outro momento), também nos trouxe outros avanços para toda comunidade de desenvolvimento web.
Impacto nas decisões de design
OK, mas como isso impacta as decisões de design que fazemos hoje e por que a velocidade se tornou um elemento muito importante?
A grande mudança que aconteceu de 2011 para 2021 com os browsers, e com o aumento da capacidade dos computadores domésticos avançando na mesma época, também originou um movimento em que as empresas passaram a terceirizar a responsabilidade da capacidade de processamento para o usuário final. Muitas coisas que eram processadas em server-side (no servidor web), agora são enviadas para serem processadas client-side (no computador do usuário), ou seja, isso exige que os computadores dos clientes gastem mais com processamento e memória RAM.
Porém, uma coisa que as empresas não se atentaram nesse movimento é que a mudança comportamental da grande parte da população de usar mais dispositivos móveis do que o dispositivo fixo (desktop) também mudou nesses últimos anos. Podemos entender isso ao observar o gráfico abaixo com o percentual de uso de dispositivos móveis nos últimos anos:
O que implica em ter também muito poder de processamento e memória nos celulares, mas ao contrário da nossa realidade que trabalhamos com tecnologia e temos bons dispositivos móveis, a grande maioria do público em geral não tem o celulares de qualidade com a capacidade de processamento, memória e nem uma boa conexão de internet eficiente, o que faz a capacidade de processamento dessas páginas com muita tecnologia embarcada ser muito lenta gerando uma péssima experiência para os usuários. Por isso foi necessário estabelecer protocolos que determinam regras e boas práticas sobre a construção de páginas web com boa performance.
Esse cenário nos traz uma co-responsabilidade com o tamanho das páginas que vamos entregar para nossos clientes. Considerar que imagens, vídeos e outros tipos de mídias, apesar de ajudar a comunicar nossos produtos e suas propostas de valor, pode também gerar um má experiência para usuários com devices e conexões de baixa qualidade. Aqui cabe sempre o equilíbrio, qual seria o meio termo, ou entregar conteúdos diferentes para cada perfil de usuário.
Outra consequência que impacta não só os usuários mas também as empresas, são os critérios utilizados pelo Google para exibir os sites no resultado da busca orgânica. Um dos critérios para ser bem posicionado nas primeiras posições da SERP (Search Engine Result Page), é o tempo de carregamento da página.
Chegamos nas core web vitals
E agora mais recentemente para tentar estabelecer padrões para regular melhor a qualidade das páginas web o Google adotou as core web vitals (principais métricas da web,) essas métricas tendem a regular e medir quais são as páginas que seguem as melhores práticas para ter oferecer uma melhor experiência para os usuários.
E as core web vitals estão classificadas em três principais métricas que precisamos monitorar para atingir um score de qualidade, essas métricas são LCP, FID e CLS cada uma dessas métricas focam em um tipo de fricção que pode acarretar boa ou má experiência para os usuários.
De forma resumida eu vou contar o que é cada uma dessas métricas:
LCP (Largest Contentful Paint, ou Maior “Pintura” com Conteúdo)
O LCP é relativo ao tempo de carregamento do maior componente visual da primeira dobra da página, esse componente visual pode ser uma imagem, um vídeo ou um grande bloco de texto.
FID (First Input Delay, ou Primeiro Atraso de Entrada)
A métrica FID é relativa a interatividade da página, ela monitora o tempo até que os elementos da páginas ficam disponíveis para os usuários interagirem, por exemplo: formulários.
CLS (Cumulative Layout Shift, ou Mudança de Layout Cumulativa)
E a métrica CLS trata de estabilidade visual, ela mede se houve mudanças no layout durante o tempo de carregamento, ex: quando acessamos uma página fixamos o olhar em um bloco de texto e de repente uma imagem é carregada no local e joga o bloco de texto para baixo.
Mais uma vez, destaco que todas essas métricas endereçam elementos relativos à experiência do usuário. Cada uma dessas métricas são classificadas em três níveis o estado: bom, precisa de melhoria ou pobre.
Como saber se seu produto atende as Core Web Vitals?
Como eu consigo alinhar o meu produto com esse novo mundo e com essas novas exigências do Google.
“A mesma mão que bate, também acaricia…”
Eu costumo dizer que a mesma mão que bate também acaricia, pois o Google define as regras que dificultam que nossas páginas sejam indexadas pelo buscador, mas também oferece uma série de ferramentas para que possamos analisar a performance de nossas aplicações e realizar melhorias. Vou listar uma série de ferramentas aqui para ajudar vocês nessa jornada.
Métricas LAB e Métricas RUM
Antes de entrar nas ferramentas vale trazer uma informação importante para começar a lidar com esse tipo de relatório, existem dois tipos de métricas principais nessas ferramentas, métricas LAB e métricas RUM.
As métricas LAB são geradas a partir de simuladores, durante testes simulam máquinas virtuais e rodam em servidor em um ambiente controlado para estimar o tempo médio de carregamento em cada uma das métricas.
As métricas RAM são de (real users metrics) são métricas de usuários reais coletadas no device dos usuários ao acessarem a sua aplicação/produto com celular deles, com a conexão ao nível que ele estiver naquele momento para reportar um cenário mais realístico em torno do tempo de carregamento. Você pode encontrar mais informações sobre métricas LAB e RUM no final deste artigo.
Ferramentas para análises e otimizações
Google Analytics
Primeira ferramenta que eu gostaria de apresentar aqui é o Google Analytics, no GA tem um relatório focado em analisar o tempo de carregamento das páginas ele vai trazer uma média geral e uma listagem de cada uma das páginas, indicando quais delas estão acima do tempo médio de carregamento e quais estão abaixo.
Para acessá-lo basta ir (Behavior > Site Speed > Page Timings), e a partir desse relatório você pode dar o seu passo inicial na análise.
Pagespeed Insights
Outra ferramenta bem útil é o Pagespeed Insights, também do Google essa ferramenta te ajuda analisar como está o tempo de carregamento de uma determinada url, e essa é uma das melhores ferramentas na minha opinião, porque além de dar a nota para cada uma dessas métricas importantes, ela traz uma série de recomendações de oportunidades de melhorias como: reduzir tamanho de imagens, reduzir scripts, definição de cache de imagens, modificações no servidor, entre outras dicas que ajudam bastante a orientar quais são as otimizações básicas que devem ser feitas na página.
Uma outra ferramenta que também tem ligação com a anterior é o LightHouse, esta ferramenta que você pode usar ela no formato de um plugin instalando no seu Google Chrome e ele vai ajudar principalmente pra você olhar as métricas de páginas que não são acessíveis publicamente (áreas que tem login) que a ferramenta anterior não conseguiria fazer esta análise.
E como bônus indico também a ferramenta Lighthouse Scoring Calculator que é do projeto base do LightHouse onde você pode fazer uma simulação de quais métricas são afetadas de acordo com as otimizações ou eventuais decréscimo de performance que você venha ter e qual vai ser a nota resultante final no seu index geral no core web vitals.
Uma outra ferramenta que já é bastante conhecido e ajuda bastante bastante as pessoas trabalham com SEO (Search Engine Optimization) é o Google Search Console, essa ferramenta ajuda a monitorar dia-a-dia o total de urls que o seu site tem, e quais dessas url estão classificadas como pobre precisa de melhoria ou boas url. Ele também tem um sistema de notificação além de medir outras métricas de SEO.
E a mesma tecnologia e bases de dados que fornece esses métricas também está disponível no formato de API e através do console do Google Cloud Platform, se você precisa fazer um tipo de conexão ou automação com os relatórios integrado, é possível utilizar os serviço via API e obviamente vai ser um recurso mais técnico e precisa de suporte do time de engenharia (devs).
O outro recurso também interessante é o Chrome User Experience Report, é uma das bases de dados utilizadas para medir qual é a sua nota geral do core web vitals, esse projeto disponibiliza um relatório padrão do Google Data Studio para que você acompanhe as suas métricas vitais da web, basta copiar o template (link no final do texto).
Uma outra ferramenta um pouco menos conhecida está dentro de um dos portais do Google e o Test My Syte, ela ajuda a simular o resultado do seu site relacionando o tempo de carregamento, tráfego e receita média. Mostrando o quanto você pode ter de incremento ou decréscimo no seu faturamento de acordo com o seu tempo de carregamento.
Ferramentas para designers utilizarem no hand-off de projetos
Duas dicas de ferramentas que podem ajudar designers a contribuir com o tempo de carregamento das páginas, desde as fases iniciais do projeto. Ferramentas de compressão de imagens que podem ser utilizadas durante o handoff ou depois.
TinyImage: plugin para Figma, ela ajuda a exportar os assets do projeto com melhor compressão de imagem ou transformá-las em imagens de última geração (aquelas que têm carregamento progressivo).
ImageOptim: serviço que oferece via software que você pode instalar na sua máquina ou via webservices (API) e otimizar as imagens que já foram exportadas.
E nesse momento você deve estar se perguntando qual é a métrica boa que eu devo perseguir para ter meu produto performando bem. De fato, é muito difícil de conseguir a nota máxima nas métricas do Google, mas o fato é que quanto mais rápido você estiver, melhor. Por isso, busque sempre manter suas páginas com o máximo de otimizações possíveis.
Conclusão
Ao nos debruçar nesses temas mais técnicos nas tarefas do dia-a-dia em busca da melhoria do tempo de carregamento, é normal que nos afastemos dos objetivos macro do por que fazemos o que fazemos, e no final das contas é basicamente sobre melhorar a experiência dos usuários.
Isso nos remete a afirmação que fiz no início desse texto, velocidade de sites é output (resultado de um trabalho) e o outcome (impacto que isso gera) é boa experiência de usuário.
Já do ponto de vista de negócio, temos alguns benefícios práticos mensuráveis que derivam da otimização de velocidade:
- Rankear bem na busca orgânica (depender menos de mídia paga).
- Reduzir o CAC de mídia paga.
- Melhorar a conversão primária de landing pages uma vez que com melhor tempo de carregamento reduzimos bounce rate, que resulta em maior tempo médio de sessão e maior taxa de conversão.
E ai, SPEED MATTERS for you?
Lista de links de referências:
- 12 Statistics That Show How Page Load Time Impacts Conversion Rate
- Web Vitals
- Http Archive
- Core Web Vitals report: Poor, Need improvement, Good
- What Is a Good Page Load Time for SEO — How Fast Is Fast Enough?
- How to Increase Page Speed
- WPO Stats
- Google Algorithm Update History
- Lighthouse Scoring calculator
- Real user monitoring — Wikipedia
- Métricas de desempenho centradas no usuário
