Como criar a ilusão de páginas mais rápidas

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