Porque a internet é lenta?

Quem nunca brincou com o autocompletar do Google? Recentemente estive fazendo uma pesquisa com a pesquisa “porque o(s)”, juntando com vários substantivos, como por exemplo “porque os americanos”1. Em uma dessas, me deparei com o Facebook:

Fonte: Auto-completar do Google Chrome

 

Tentando ver algum padrão, procurei pelo Twitter:

Fonte: Auto-completar do Google Chrome

 

Podemos ver alguns resultados parecidos, como “fica lento”, “trava”, “não funciona”, “parou”, logo fiquei curioso, e tentei aumentar a abrangência com outros temas:

Fonte: Auto-completar do Google Chrome

Fonte: Auto-completar do Google Chrome

 

Logo fui pro mais abrangente possível:

Fonte: Auto-completar do Google Chrome

 

Para analisar isso, seria necessário antes definir o que é “ficar lento”.
Depois de algumas pesquisas234, constatei alguns “marcos” temporais importantes na experiência do usuário:

  • 0,1 segundo, que é aproximadamente o limite de onde o usuário sente o sistema reagindo de forma instantânea.
  • 1 segundo é aproximadamente o limite para que a linha de pensamento do usuário não seja interrompida, onde apesar de notar a “pausa”, não irá realmente incomodar o usuário5.
  • 10 segundos é o limite da “atenção” do usuário, ou seja, mais que isso o usuário percebe que realmente está demorando, e “resultados” de futuras interações são esperados (telas de carregamento ou exibição de alguma informação).

Tendo nossos marcos, vamos ás possíveis causas:

  • Primeiro e mais importante, é a distância entre seu computador e o servidor6. Hoje, o limite máximo é a velocidade da luz, o que significa que é impossível transmitir qualquer informação por exemplo de Sydney na Austrália para Londres na Inglaterra em um tempo menor que ~0,056 segundos, e já que o processo de carregamento de um website representa uma requisição e uma resposta, efetivamente dobrando o tempo.
  • Hoje, sites não são somente o arquivo HTML,possuindo diversos arquivos estáticos como imagens, arquivos JavaScript e CSS, ou seja, são várias requisições, efetivamente uma para cada arquivo. O navegador possuí um limite no número de arquivos que ele busca em paralelo.7
  • Um outro problema é que o próprio protocolo HTTP não suporta que uma única conexão busque vários arquivos em paralelo.
  • Hoje muitos sites são HTTPS8, o problema é que o SSL tem um processo longo de requisição, sendo necessário uma validação do certificado, utilizando mais da CPU quando enviando e recebendo informação.
  • Outro problema é a sincronização desnecessária das aplicações Web. Faz um longo tempo que é possível que os desenvolvedores atualizem somente as porções dos sites que realmente precisam ser atualizadas, porém antigamente além de complicado de fazer o controle de estado, as ferramentas disponíveis ainda não ajudavam muito nesse controle.9
  • Um problema grave também é a mal utilização dos recursos de cache, seja do servidor ou do próprio navegador. Entender o conceito de desenvolvimento e como a web funciona é bem fácil, porém utilizar corretamente os recursos de cache é relativamente complicado.
  • Muitas aplicações ainda não utilizam uma CDN10. Se todos utilizassem, os usuários teriam uma chance bem maior de ter os arquivos comuns como bibliotecas CSS e frameworks JavaScript já no cache do navegador.
  • Outro problema são as estruturas complexas dos sites, ao utilizar o recurso “selectors” seja do CSS, ou de bibliotecas JavaScript como o JQuery, deixa a renderização do site bem lenta devido ao longo processamento necessário da estrutura.
  • Diversos dos servidores atuais não entregam o conteúdo das respostas HTTP de forma comprimida, utilizando o GZip por exemplo.
  • Muitos desenvolvedores não entendem as implicações de utilizar recursos lentos de terceiros. Sim, estou falando de você empresas de Analytics e Ad. Estes tipos de recurso quando lentos fazem com que o visitante ache que o carregamento está lento porém o site já pode ter carregado todos os recursos necessários e estão somente aguardando este.
  • Muitos desenvolvedores utilizam recursos JavaScript quando não são realmente necessários. Hoje o CSS3 já permite algumas lógicas simples sem a utilização do mesmo.
  • Porque estamos enviando cookies em diversos conteúdos que não precisam de cookies.
  • Porque fazemos o HTML maior do que precisa realmente ser. A utilização correta das classes e hierarquias CSS, principalmente sua reutilização possibilita uma ótima redução do HTML final.
  • Porque ainda utilizamos também imagens que poderiam muito bem ser um CSS11.