Indubitavelmente, performance é um dos assuntos em voga no mundo do desenvolvimento web. Essa necessidade de servir páginas e aplicativos web cada vez mais rapidamente é algo que despertou e desperta a criatividade de desenvolvedores para atingir o objetivo de permitir o (atualmente) utópico carregamento em 100ms. Evidente que a variável “tecnologia” está na equação, mas a criatividade e esforço em desenvolver maneiras de prover uma melhor performance com o que se tem disponível no momento é o que realmente conta.
Enquanto ainda não somos brindados com velocidades de rede de primeiro mundo, resta-nos utilizar métodos e técnicas capazes de criar a ilusão de páginas mais rápidas.
A internet pode mudar e páginas da web podem crescer e evoluir, mas as expectativas dos visitantes são constantes — alguns diriam que até tendem a ser mais exigentes com o tempo. Ao longo de vários estudos, esses números sobre os tempos de resposta e percepção humana tem sido consistente por mais de 45 anos:
E não há nada que possamos fazer quanto a esses números; temos controle zero sobre eles. Eles são consistentes independentemente do tipo de dispositivo, aplicativo ou conexão usada no momento do acesso. Esses números são o motivo pelo qual tentamos alcançar o objetivo de fazer as páginas renderizarem em 1 segundo ou menos — ou a meta ainda mais ousada de 100 milissegundos ou menos.
Mas quando se considera quantas coisas devem acontecer antes de que algo comece a aparecer no navegador — tal como DNS lookup e conexão TCP para analisar HTML, download de folhas de estilo e execução de JavaScript –, 1 segundo pode parecer impossível. E esqueça sobre 100 milissegundos!
Estudos recentes em sites de e-commerces evidenciam que o tempo médio de renderização é de 2,9 segundos. Em outras palavras, um visitante típico senta e fica olhando para uma tela em branco para quase 3 segundos antes que ele comece a ver alguma coisa na tela. Isso não é bom.
Dicas para criar a ilusão de páginas mais rápidas
Muito se tem falado sobre o “inchaço” de páginas web, scripts insidiosos de terceiros, os desafios de desempenho móvel e todas as outras coisas que fazem alcançar essas metas de velocidade parecer uma façanha impossível. Mas, em vez de desanimar, é possível apontar em direção a esse grande citação de Ilya Grigorik em seu livro High Performance Networking Browser:
Tempo é medido objetivamente, mas percebido subjetivamente, e experiências podem ser projetadas para melhorar o desempenho percebido.
Talvez Albert Einstein já tenha dito algo nesse sentido (com exceção da segunda parte), mas o importante é que, como disse a Ilynha, existem maneiras de planejar a sensação de performance, a ilusão de páginas mais rápidas!
Indicadores de progresso
Nunca subestime o poder de um indicador de progresso (vulgo “barrinha de loading”) para ajudar a melhorar a experiência do visitante em páginas que são necessariamente mais lentas (por exemplo, página de resultados de busca). Os indicadores de progresso tranquilizam os visitantes ao mostrarem que a página é realmente funcional e dão uma noção de quanto tempo a pessoa terá que esperar.
Dicas rápidas:
- Um indicador de progresso em uma página que carrega em 5 segundos ou menos fará com que essa página pareça mais lenta do que realmente é. Jakob Nielsen sugere que as barras de progresso sejam reservadas para páginas/aplicações que demorem 10 segundos ou mais para carregar
- Indicadores de progresso que oferecem a ilusão de uma onda em movimento à esquerda podem melhorar a percepção do tempo de espera em até 10%
- Barras de progresso que pulsam e cuja freqüência do pulso aumenta conforme a barra avança são percebidos como sendo mais rápidos
- De igual maneira, barras de progresso que aceleram são consideradas mais satisfatórias
- Use indicadores de progresso com moderação, dado que muitos deles dentro de uma única aplicação pode ser contra-produtivo porque dá às pessoas a impressão de que o aplicativo é lentom em geral (Luke Wroblewski compartilhou um bom estudo de caso a respeito)
Veja mais dicas sobre melhores práticas ao usar barras de progresso.
Carregue algo útil primeiro
Este princípio pode parecer um tanto óbvio, mas é incrível a quantidade de sites que carregam o conteúdo principal por último. Em estudos recentes de TTI (Time to Interact), constatou-se que o tempo médio para interagir para os 100 melhores varejistas foi de 5,4 segundos. Isso significa que uma pessoa leva 5,4 segundos para o conteúdo mais importante de uma página ser renderizado. Isso representa um fracasso, tanto para o proprietário, quanto para os visitantes do site…
Um estudo de eyetracking da Nielsen-Norman Group descobriu que uma pessoa que é servida com conteúdo de característica no primeiro segundo de carregamento da página passou de 20% do seu tempo dentro da área do recurso, ao passo que um usuário sujeito a um período de 8 segundos de atraso de um conteúdo de característica da página gastou apenas 1% de seu tempo interagindo visualmente com aquela área da página.
Em outras palavras, fazer com que os conteúdos mais importantes sejam renderizados por último é uma ótima maneira de garantir que seus visitantes tenha uma experiência ruim.
Adie conteúdo não-essencial
Na sequência do ponto anterior, o diferimento (deferral) é uma excelente técnica a ser usada para garantir que conteúdo primário seja rapidamente renderizado. Ajude seus visitantes a visualizarem suas páginas mais rapidamente atrasando o carregamento e renderização de qualquer conteúdo que esteja abaixo da área inicialmente visível, às vezes chamado de “abaixo da dobra” — apesar de este conceito ter ficado em xeque depois do advento do web design responsivo. Adiar o conteúdo não-essencial não vai mudar seu tempo de carregamento “abaixo da dobra”, mas pode melhorar drasticamente o tempo de carregamento percebido.
Muitas bibliotecas de script não são necessárias até que a página tenha terminado de renderizar. O download e parser desses scripts podem seguramente ser adiados até depois do evento onLoad. Por exemplo, não faz sentido que scripts que suportam comportamento interativo dos visitantes, como “drag and drop”, sejam chamados antes que a pessoa tenha sequer visto a página. Adie o máximo possível até depois do onLoad ao invés de, desnecessariamente, segurar a renderização inicial de conteúdos importantes das páginas.
Renderização progressiva de imagem
Renderização progressiva de imagem é baseada na ideia de que quanto mais rápido você puder obter uma imagem completa no navegador, não importando a resolução dessa imagem, melhor a experiência do visitante — ao contrário de imagens baseline, que são carregadas linha a linha e levam muito mais tempo para renderizar uma imagem completa.
JPEGs progressivos não são coisa nova. Eles foram amplamente utilizados na década de 1990, mas caíram em desuso devido a problemas de desempenho causados por velocidades lentas de conexão e JPEGs grosseiramente renderizados. Atualmente, assistir a um carregamento de imagem pixel a pixel é uma experiência dolorosa. Agora que as velocidades de conexão têm melhorado e JPEGs progressivos são mais sofisticados, esta técnica é viável novamente e está retornando como uma boa prática de performance web. No ano passado, Pat Meenan, engenheiro da Google, estudou os principais 2000 sites de comércio eletrônico e descobriu que JPEGs progressivos melhoraram o tempo médio de carregamento em até 15%.
Apesar das descobertas de Pat — e apesar do argumento de que imagens progressivas também contribuem para uma melhor UX –, JPEGs progressivos têm uma incrivelmente baixa taxa de adoção: em torno de 7-8%! A razão para isso pode ser o fato histórico mencionado — ou o fato de que a opção padrão do Photoshop é para salvar imagens baseline.
Auto-preloading (ou Cache Preditivo de Navegador)
Não confunda com o pré-carregamento do navegador (browser preloading); auto-preloading é uma poderosa técnica de performance em que são observados e registrados todos os caminhos percorridos pelos visitantes de um site. Com base nessa enorme quantidade de dados agregados, o mecanismo de auto-preloading pode prever qual é a mais provável próxima página que será visitada com base nas que foram vistas anteriormente. Então os recursos para essa próxima página são carregados no navegador do visitante, permitindo melhorias de velocidade de carregamento de até 70%!
Perceba que esta é uma técnica que exige altos montantes de análise de dados e é intensivamente dinâmica, só podendo ser realizada através de soluções automatizadas. Se estiver interessado em aprender mais, leia um ótimo post de Kent Alstad a respeito de Auto-preloading.
Fugindo um pouco do Cache Preditivo — mas ainda sobre pré-carregando de conteúdos –, uma solução mais rápida e menos dispendiosa é o InstantClick, que faz preload da página do link que será clicado (em mouseover ou click/tap), eliminando o tempo de latência da (possível) requisição.
Finja que está funcionando, mesmo quando não está
Mark Wilson escreveu um ótimo post sobre um punhado de truques que o Instagram usa para fazer suas páginas parecerem mais rápidas. Por exemplo, um que eles chamam de “ações otimistas”. Para ilustrar: mesmo que a velocidade de sua conexão seja lenta ou tenha caído, se você clicar no botão “like”, a interface registra o clique e realça o botão. Ele envia os dados reais de volta ao servidor sempre que a conexão melhorar ou for restabelecida. Dessa forma, o site sempre parece estar funcionando, mesmo quando não está.
Conversão de evento de toque
Se você usa dispositivos móveis, então provavelmente já está ciente do atraso que ocorre entre o momento em que você toca a tela e o tempo que leva para a página responder. Isso porque cada vez que você toca a tela, o dispositivo tem de traduzir esse evento de toque em um evento de clique. Essa tradução leva entre 300-500 milissegundos por clique.
Certifique-se de que o valor percebido corresponda à espera
Se longos tempos de espera são necessários, garanta que está entregando algo com valor proporcional ao tempo de espera. Bons exemplos disso podem ser encontrados em sites de viagens. Quando você está procurando as melhores tarifas de hotéis, a maioria não se importa em esperar alguns segundos. Nós racionalizamos o tempo de espera porque assumimos que o mecanismo está à procura de um repositório enorme de impressionantes promoções de viagem, a fim de entregar os melhores resultados.
Conclusão sobre ilusão de páginas mais rápidas
“Liberdade”, “verdade”, “paz” ou talvez “amor”? São ilusões, fantasias da percepção, sínteses temporárias de um débil intelecto humano tentando desesperadamente explicar uma existência sem significado ou propósito.
Sim, é um mundo de ilusões em que vivemos, meus caros. Algumas benéficas e úteis; outras, nem tanto. Então por que não trazer este conceito ao desenvolvimento web para suprir as limitações existentes?
Chegará o dia em que a meta de carregamento de 100ms será alcançada. Mas este dia não é hoje. Então, faça o melhor que puder com o material que tem em mãos para garantir que a performance de seu site/aplicativo seja a melhor possível. E o impossível deixemos para o futuro.