# Como criar a ilusão de páginas mais rápidas > Melhore a performance percebida do seu site. Técnicas comprovadas para criar ilusão de velocidade: indicadores, skeleton screens e lazy loading. URL: https://dpw.dev/miscelanea/como-criar-a-ilusao-de-paginas-mais-rapidas/ Publicado em: 2014-09-16 Categoria: miscelanea Tags: performance Autor: Tárcio Zemel 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**. > Artigo baseado em [How to create the illusion of faster web pages ](http://www.webperformancetoday.com/2014/07/16/eight-tricks-improve-perceived-web-performance/). 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](http://www.nngroup.com/articles/response-times-3-important-limits/) tem sido consistente por mais de 45 anos: ![](/images/blog/como-criar-a-ilusao-de-paginas-mais-rapidas/como-criar-a-ilusao-de-paginas-mais-rapidas-percepcao-visitante.webp) 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](http://www.webperformancetoday.com/2014/04/29/spring-2014-state-union-ecommerce-page-speed-web-performance-infographic/) 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](http://chimera.labs.oreilly.com/books/1230000000545/index.html): > 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](http://www.lukew.com/ff/entry.asp?1797)) [Veja mais dicas sobre melhores práticas ao usar barras de progresso](http://www.quora.com/What-are-the-best-practices-for-using-a-progress-bar). ### 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](http://www.webperformancetoday.com/2010/07/28/case-study-symantec/) 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. ![](/images/blog/como-criar-a-ilusao-de-paginas-mais-rapidas/como-criar-a-ilusao-de-paginas-mais-rapidas-eyetracking-estudo.webp) 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](/javascript/como-loading-de-javascript-funciona-domcontentloaded-e-onload/ "Como loading de JavaScript funciona: DOMContentLoaded e 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. ![](/images/blog/como-criar-a-ilusao-de-paginas-mais-rapidas/como-criar-a-ilusao-de-paginas-mais-rapidas-imagem-baseline-progressivo.webp) 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 --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml