A importância da performance das páginas na experiência do usuário

Segundos a mais no carregamento de um site podem significar frustração para os usuários e menores taxas de conversão para empresas.

As pessoas estão cada vez menos pacientes com páginas que demoram para carregar. Um estudo recente compartilhado em meu blog mostra que usuários perdem a paciência com vídeos após os 2 segundos de espera. O mesmo se aplica a páginas web. Ainda mais se levarmos em conta o fato de que mais e mais pessoas estão acessando a web através de seus dispositivos móveis: muitas vezes a baixa qualidade de conexão 3G ou Egde faz com que a experiência do usuário seja frustante ou até catastrófica.

Você já deve ter passado por isso. Entrar em um site e se deparar com uma página que carrega de forma extremamente lenta, imagens pesadas, elementos não otimizados para web e layout não otimizado para o dispositivo em que está sendo visualizado. Isso sem contar os sites que colocam um “Loading” logo na entrada, achando que isso basta para que os usuários fiquem ali parados vinte segundos (para ser otimista) esperando a página carregar.

Com o crescimento de empresas concorrentes que oferecem serviços similares (todas acessíveis a poucos cliques de distância), é muito comum que as pessoas desistam e partam para um outro site que conhecem e sabem que funciona melhor. Mesmo que de forma não consciente, tempo é um fator decisivo na percepção das pessoas sobre determinado serviço.

Quantas vezes você já preferiu pagar mais caro e renovar sua carteira de motorista em um despachante, ao invés de encarar as filas intermináveis do (muitas aspas) Poupatempo? O princípio é o mesmo.

No caso dos dispositivos móveis, ainda é preciso levar em conta com mais atenção o contexto em que o site é acessado. Cinco segundos na frente do seu computador não são o fim do mundo. Mas cinco segundos na fila do pão quando sua vez está pra chegar podem ser incrivelmente frustrantes.

Só falar sobre o problema não o elimina

Você, como UX Designer, já deve estar cansado de saber sobre esse problema e como ele afeta a experiência dos usuários.

Obviamente, essa é uma batalha que não se luta sozinho.

Primeiro você precisa ter certeza que os outros membros do time (designers e programadores) estão cientes que essa relação entre performance e UX existe, para que eles já criem o produto com isso em mente. Em outros casos, você precisa convencer o gerente de projetos a reservar alguns dias do já apertado cronograma para que o time consiga focar em resolver esses problemas de performance e otimizar o peso e desempenho do site. E em outros casos, você precisa convencer o cliente a investir alguns cruzeiros a mais para que essa otimização aconteça.

Como a “experiência do usuário” é algo bastante subjetivo, alguém pode argumentar que a performance nem tem tanto impacto assim. Já ouvi clientes falarem que “se o conteúdo é bom, as pessoas esperam carregar sem problemas”.

É.

Uma forma de contornar esse tipo de argumentação genial geniosa é mostrar evidências numéricas e mais tangíveis de como essa rejeição dos usuários por sites pesados impacta diretamente nas vendas. Quando pesa no bolso, o cliente costuma pensar melhor sobre o assunto.

Então aqui vão alguns estudos de caso recentes sobre boas e más práticas em relação a performance e como elas afetaram diretamente o engajamento dos usuários com o site ou o retorno sobre investimento (ROI) para as empresas:

• Usuários esperam páginas carregarem em dois segundos. Depois do terceiro, até 40% dos usuários abandonam o site.
• A Amazon notou que cada 100 milissegundos de espera representam um declínio de 1% nas vendas.
• O Google perdeu 20% de lucratividade e tráfego de usuários por causa de um aumento de meio segundo no tempo de carregamento de suas páginas de resultados.
• A Akamai mostra em uma pesquisa recente como 75% dos compradores online que experienciam algum tipo de congelamento, link quebrado ou página que demora muito para carregar deixam de comprar daquele site.
• O Google Maps realizou um estudo que apontou que reduzir o peso da página de 100KB para 80KB fez com que o tráfego aumentasse 10% na primeira semana e 25% nas três semanas seguintes.
• O time de design do Etsy percebeu um aumento na taxa de rejeição em 12% em dispositivos móveis quando resolveram adicionar mais imagens na página, num total de 160KB.
• A DoubleClick removeu um redirect de uma página (aquela troca de URL que você às vezes nem percebe que aconteceu) e viu um aumento de 12% no acesso da página em dispositivos móveis.
• A Amazon verificou em testes que comprimir imagens em JPEG em uma página reduzem a quantidade de bateria necessária para carregar a página em um dispositivo móvel em até 20%. No Facebook (que tem mais imagens), essa economia de bateria chega a 30%.

E como é que se otimiza um site para melhorar a experiência do usuário?

A resposta para essa pergunta é enorme. Variada. Cada um tem um ponto de vista diferente. Existem nichos de desenvolvimento front-end que são focados somente nesse assunto — e seria pretensão demais tentar explicar tudo em um único post. Mas traduzi e reuni abaixo alguns pontos citados aqui neste post para serem lembrados. Não é um checklist exaustivo, mas é um bom começo.

• Limpe seu HTML. Renomeie elementos não-semânticos no seu HTML. Agrupe elementos pela funcionalidade que oferecem, não pelo conteúdo. Menos IDs no CSS, menos tempo de carregamento. Evite também os excessos de DIVs — isso também facilita a edição do código no futuro.
• Limpe seu CSS. Remova seletores que não estão sendo usados. Em média, essas linhas extra de código aumentam o tempo de carregamento da página (não o peso, repare) em 5,5%.
• Reuse código sempre que possível. Elementos-mestre, includes, padrões de interação aplicados também ao código. Menos HTML e CSS deixa a manutenção mais fácil e reduz levemente o tempo de carregamento.
• Faça menos requisições. Cada vez que seu site faz uma requisição para um serviço (ex: “mostrar lista de amigos que curtiram este produto”), o tempo de carregamento aumenta consideravelmente. Aliás, em muitos casos as requisições demoram mais tempo do que todas as imagens existentes na página demoram para serem carregadas. Evite também a requisição da requisição da requisição, que gera aqueles redirects bizarros que mencionamos aqui antes. Não requisite arquivos em todas as páginas se ele não está sendo realmente exibido em todas elas. Quando possível, substitua scripts de redes sociais por links.
• Otimize as imagens. Passe elas por otimizadores como o ImageOptim. Mesmo quando a imagem está em alta resolução para dispositivos tela-retina, comprima.
• Economize nas requisições de imagens. Crie sprites. Por exemplo: para backgrounds que se repetem, crie uma para repetição horizontal, outra para repetição vertical.
• Use menos imagens. Verifique quais imagens você consegue substituir com efeitos de CSS3. Além de reduzir drasticamente o peso, isso permite que você edite essas imagens no futuro apenas via CSS (ao invés de ter que abrir e editar o asset original). Existem tecnologias que permitem embedar uma imagem no CSS ao invés de sempre apontar para uma URL que irá carregá-la.

Como UX e Visual Designers podem contribuir para a otimização da página?

Além desses pontos mais técnicos (consulte sempre um profissional front-end) existe um último que impacta diretamente na forma em que UX e Visual Designers podem contribuir para a otimização da performance de uma página — criar um design que seja otimizado para boa performance, desde o primeiro dia do projeto.

Quantos tamanhos de fonte você está usando? Precisa mesmo de todos eles? Lembre-se que cada tamanho de fonte vira uma classe no CSS, e isso aumenta o tempo de carregamento. Quantas imagens você está usando? Você está usando imagens full screen somente quando é realmente necessário? O seu layout “combina” com o tipo de site que você está desenhando? Se você está trabalhando em um e-commerce, onde a performance da página tem impacto direto na conversão e vendas, tem certeza que aquela imagem 1600×1200 que você adicionou é realmente necessária? Você está reutilizando elementos da melhor forma possível, ao invés de criar elementos novos na página a cada vez? Todos os blocos de conteúdo que você colocou na página são realmente necessários? Quais deles você poderia sacrificar em benefício de um menor tempo de carregamento? Quais elementos você pode carregar por “lazy loading”, somente depois que o usuário começa a descer a rolagem?

A lista é extensa, o assunto é complexo e as técnicas de otimização mudam a cada dia. Em breve compartilharei exemplos mais tangíveis lá no blog. Fique de olho ☺