Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Por que o desempenho é importante

Na nossa busca compartilhada para impulsionar a Web a fazer mais, nós nos deparamos com um problema comum: o desempenho. Os sites nunca tiveram tantos recursos. São tantos recursos que vários sites enfrentam dificuldades para alcançar um alto nível de desempenho entre as diversas condições de rede e os diferentes dispositivos.

Os problemas com o desempenho variam. No melhor dos cenários, eles geram pequenos atrasos que incomodam um pouco os usuários. Já em situações mais graves, eles tornam o site completamente inacessível, sem resposta à entrada do usuário ou apresentam os dois problemas.

Cuidar do desempenho é reter os usuários

Queremos que os usuários possam interagir de forma significativa com o que nós criamos. Se for um blog, queremos que as pessoas leiam as postagens. Se for uma loja virtual, queremos que comprem os artigos. Se for uma rede social, queremos que as pessoas possam interagir entre si.

O desempenho exerce um papel fundamental no sucesso de qualquer empreendimento on-line. Veja aqui alguns estudos de casos que mostram como os sites de alto desempenho engajam e retêm os usuários de maneira mais eficaz do que os de baixo desempenho:

Veja alguns estudos de caso que mostram como o baixo desempenho causou um impacto negativo nas metas da empresa:

No mesmo estudo da DoubleClick do Google mencionado acima, descobriu-se que os sites com carregamento de até cinco segundos tinham 70% de sessões mais longas, 35% de taxas de rejeição mais baixas e 25% de visualizações de anúncios a mais do que os que levam quase quatro vezes mais tempo, em 19 segundos. Para ter uma ideia geral de como o desempenho do seu site é comparado com seus concorrentes, conheça a ferramenta Speed Scorecard.

Uma captura de tela da ferramenta
Speed Scorecard, comparando o desempenho entre quatro sites de ponta de estoque conhecidos.
Imagem 1. O Speed Scorecard compara o desempenho de quatro sites concorrentes usando dados do Chrome UX Report de usuários de rede 4G nos Estados Unidos.

Cuidar do desempenho é melhorar as conversões

Reter usuários é fundamental para melhorar as conversões. Sites lentos causam um impacto negativo na receita, e o oposto também é verdade. Veja aqui alguns exemplos de como o desempenho pode tornar os negócios mais (ou menos) lucrativos:

Se você gerencia uma empresa na Web, o desempenho é fundamental. Se a experiência do usuário do seu site for rápida e responsiva às entradas dele, isso gerará efeitos positivos nos negócios. Para ver como o desempenho pode afetar sua receita, verifique a ferramenta Calculadora de impacto.

Uma captura de tela da Calculadora de
Impacto, com uma estimativa da receita que pode ser gerada por um site se forem feitas melhorias no
desempenho.
Imagem 2. A Calculadora de Impacto faz uma estimativa da receita que pode ser gerada ao melhorar o desempenho do site.

Cuidar do desempenho é ter uma experiência do usuário satisfatória

Quando você navega até um URL, você faz isso a partir de qualquer ponto de partida possível. Dependendo de algumas condições, como a qualidade da conexão e o dispositivo usado, a experiência pode variar entre os usuários.

Uma comparação de duas bobinas de tiras de filme
do carregamento de uma página. A primeira mostra um carregamento de página com uma conexão lenta, enquanto
a segunda exibe o mesmo carregamento com uma conexão rápida.
Imagem 3. Uma comparação de carregamento de página com uma conexão muito lenta (parte superior) em relação à uma conexão mais rápida (parte inferior).

Quando um site começa a ser carregado, há um tempo em que os usuários aguardam o conteúdo ser exibido. Até que isso aconteça, não há uma real experiência do usuário. Essa falta de experiência é breve em conexões rápidas. No entanto, em conexões mais lentas, os usuários são forçados a aguardar. Os usuários podem enfrentar mais problemas, conforme os recursos da página lentamente aparecem.

O desempenho é um aspecto fundamental de uma boa experiência do usuário. Quando os sites apresentam muitos códigos, é necessário que os navegadores usem megabytes do plano de dados do usuário para fazer o download do código. Os dispositivos móveis têm memória e energia de CPU limitados. Frequentemente, eles ficam sobrecarregados com o que pode ser uma pequena quantidade de códigos não otimizados. Isso cria um mau desempenho, que leva à falta de resposta. De acordo com o que sabemos sobre o comportamento humano, os usuários não tolerarão os aplicativos com baixo desempenho por muito tempo antes de abandoná-los. Se quiser saber mais sobre como avaliar o desempenho do seu site e descobrir oportunidades para melhorá-lo, consulte Como considerar as ferramentas de velocidade.

Visão geral do desempenho da página como aparece na
Lighthouse.
Imagem 4. Visão geral do desempenho da página como aparece na Lighthouse.

Cuidar do desempenho é lidar com pessoas

Os sites e aplicativos com um mau desempenho também podem representar altos custos para seus usuários.

Como os usuários de dispositivos móveis constituem uma grande parte de usuários da Internet de todo o mundo, é importante considerar que muitos deles acessam a Web usando redes LTE, 4G, 3G e até mesmo 2G. Conforme destacado por Ben Schwarz da Calibre neste estudo de desempenho do mundo real, o valor dos planos de dados pré-pagos está diminuindo, o que torna o acesso à Internet mais acessível em locais onde antes isso não ocorria. Os dispositivos móveis e o acesso à Internet não são mais itens de luxo. Eles são ferramentas comuns e necessárias para navegar e operar em um mundo cada vez mais interconectado.

O tamanho total das páginas vem aumentando desde, pelo menos, 2011, e essa tendência parece que veio para ficar. À medida que as páginas normais enviam um número maior de informações, os usuários precisam substituir os planos de dados limitados com mais frequência, o que gera gastos mais altos.

Além de poupar dinheiro, as experiências do usuário mais leves e rápidas também podem ser fundamentais para usuários em crise. Recursos públicos, como hospitais, clínicas e centros de atendimento possuem recursos on-line que proporcionam aos usuários informações importantes e específicas necessárias durante uma crise. Embora o design seja crucial para apresentar informações importantes de maneira eficiente em momentos críticos, a velocidade da exibição desses dados não pode ser subestimada. Isso faz parte do nosso trabalho.

O que fazer a partir daqui

Embora as listas abaixo possam parecer intimidadoras, entenda que você não precisa fazer todas essas ações para melhorar o desempenho do seu site. Elas são só pontos de partida. Por isso, não se assuste! Qualquer coisa que você possa fazer para melhorar o desempenho será útil para seus usuários.

Observe quais recursos você envia

Um método eficaz para desenvolver aplicativos com alto desempenho é examinar quais recursos você envia aos usuários. O painel Network no Chrome DevTools faz um excelente trabalho de síntese de todos os recursos usados em uma página específica. No entanto, se você ainda não pensou sobre o desempenho do seu site, saber por onde começar pode ser assustador. Veja algumas sugestões:

  • Se você usar Bootstrap ou Foundation para criar sua IU, avalie se eles são necessários. Essas abstrações incluem vários CSS que o navegador precisa fazer o download, analisar e aplicar a uma página, tudo antes do CSS específico do site aparecer. Flexbox e Grid são formidáveis na criação de layouts simples e complexos com relativamente poucos códigos. Como CSS é um recurso de bloqueio de renderização, a sobrecarga de uma biblioteca de CSS pode atrasar a renderização significativamente. Você pode acelerar sua renderização removendo sobrecargas desnecessárias sempre que possível.
  • As bibliotecas JavaScript são convenientes, mas nem sempre necessárias. Use jQuery, por exemplo: A seleção de elementos foi extraordinariamente simplificada graças a métodos como querySelector e querySelectorAll. A vinculação de Event é fácil com addEventListener. classList, setAttribute, e getAttribute oferecem maneiras simples de se trabalhar com atributos de elementos e classes. Se você precisar usar uma biblioteca, pesquise alternativas mais simples. Por exemplo, Zepto é uma alternativa menor para jQuery, e Preact é uma opção menor para React.
  • Nem todos os sites precisam ser aplicativos de página única (SPAs), já que frequentemente usam o JavaScript de maneira extensiva. O JavaScript é o recurso mais caro que disponibilizamos na Web, byte por byte, já que ele precisa ser transferido por download, analisado, compilado e executado. Por exemplo, blogs e sites de notícias com arquitetura e front-end atualizados podem ter um desempenho tão bom quanto experiências tradicionais de múltiplas páginas. Isso ocorre se o armazenamento em cache de HTTP for devidamente configurado e, opcionalmente, se um service worker for usado.

Observe como você envia recursos

Uma exibição eficiente é fundamental para gerar experiências do usuário rápidas.

Observe quantos dados você envia

Veja algumas sugestões para limitar quantos dados você envia:

Para ver mais guias completos sobre como melhorar o desempenho, verifique a nota no modelo de desempenho RAIL, concentrado na melhoria do tempo de carregamento e capacidade de resposta do aplicativo. O nosso guia de padrões PRPL também é um recurso excelente para melhorar o desempenho de aplicativos de página única modernos.

Se você estiver animado para saber mais sobre o desempenho e sobre como tornar seu site mais rápido, leia nosso documento de desempenho para encontrar guias sobre diversos tópicos. Adicionamos novos guias constantemente e também atualizamos os existentes. Por isso, volte sempre!

Um agradecimento especial a Addy Osmani, Jeff Posnick, Matt Gaunt, Philip Walton, Vinamrata Singal, Daniel An e Pete LePage pelos diversos comentários sobre como melhorar e lançar este recurso!

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.