Otimização Extrema: Use CDN!

Continuando com a série de artigos relacionados a otimização extrema de sua aplicação, hoje começaremos com a abordagem do uso de cache para diminuir a latência no carregamento de suas páginas.


Com a pequena curva de aprendizado e grande quantidade de bibliotecas para a preparação do front-end, cada vez mais, cresce a quantidade de documentos de estilo e arquivos javascripts anexados a uma página. Com esse crescimento, também cresce vertiginosamente a quantidade de requisições e até mesmo o tamanho do documento que deve ser entregue ao usuário. Como já visto anteriormente em outros artigos, o tempo de carregamento de sua página pode ser um fator decisivo na permanência e decisão de um usuário em sua aplicação/página.

Pensando nisso, algumas gigantes da internet, como Google e Microsoft, criaram um repositório de bibliotecas(js) e frameworks(css) para servi-las de forma otimizada. Esses repositórios, denominados CDN(Content Delivery Network), distribuem bibliotecas como jquery, mootools, prototype e frameworks css, como o twitter bootstrap, com um excelente controle de cache, e ainda em servidores otimizados para entrega de conteúdo estático, como o nginx e lighttpd. Mais a frente vamos ver um artigo em como montar o seu próprio servidor de arquivos estáticos.

A ideia de usar CDNs em seus projetos é a de aumentar consideravelmente a possibilidade de requisições a objetos que já estão em cache, utilizando recursos que foram requisitados em outra requisição, em outro site, a seu favor.

Digamos que o exista um site “exemplo.com”, e no código html do site há a requisição para o carregamento de um código javascript de uma das bibliotecas servidas por uma das CDNs. Quando o usuário acessar a página, o código será carregado para o browser do usuário e colocado em cache, devido as fortes regras que as CDNs tem relacionados a isso. Caso eu use a mesma biblioteca em um projeto, e também usar a CDN, não haverá a necessidade do usuário carregar novamente a biblioteca, já que o arquivo estará em seu cache. Como o controle de cache nos browsers atuais é feito por intermédio do domínio onde tal recurso está alocado, o conteúdo vai estar cacheado e pronto para ser utilizado.

Com o propósito de saber qual a CDN com maior velocidade, e também exemplificar o que disse anteriormente, vou criar dois hosts virtuais(hosta e hostb), em minha máquina e descobrir qual a melhor opção de CDN a ser utilizada em seu projeto.

Urls protocol-relatives

Antes de iniciarmos nossos testes, precisamos dar uma olhada em um ótimo recurso que as CDNs tratadas aqui possui. Esse recurso em questão, trata-se de servir as bibliotecas tanto em http, quanto em https, possibilitando as urls serem montadas sem a especificação do protocolo. Obviamente que isso não é um recurso dos hosts das cdns cedentes, mas sim uma regra que é seguida por quase todos os browsers(todos os browsers modernos seguem), para levar em consideração o protocolo atual da sessão do usuário. Com tal recurso, fica fácil fazer a troca de ambiente sem se preocupar com o que será feito com as urls que seguem outro protocolo, como por exemplo o https.
Se o usuário estiver navegando por algum área de sua aplicação onde não há nenhum tipo de encriptação https, seus links começaram com “http://”, e se em algum momento ele fizer login e todas as páginas que ele visitou passassem a ser servidas pelo protocolo https, como o programador faria para trocar todas as URLS especificando o protocolo seguro?

Fácil! É só ele não se preocupar com isso, omitindo a especificação do protocolo, contruindo url absolutas, mas com relatividade ao protocolo. Veja no exemplo abaixo a ausência do protocolo no início das URL.

Vamos ao testes!

Para nossos testes usaremos três grandes CDNs. A primeira é a do Google, que serve as principais bibliotecas disponíveis atualmente, tais como Jquery, MooTools, Ext, entre outras.

googleapis-1

Como pode ser visto na imagem acima, o tempo de espera( do momento do pedido até o início da entrega), foi de 202ms, fazendo com que o tempo da CDN do google, nos testes efetuados, seja o pior. Mas se você considerar a quantidade de aplicações/sites utilizando o serviço, esse valor é aceitável. Por outro lado, sem dúvida alguma essa CDN vence todas as outras por compressão. A biblioteca foi entregue em apenas 32k, de um total de 90k, sem compressão. Na imagem abaixo, utilizei outro host(hostb), para demostrar como a biblioteca já está carregada ao browser do usuário e não será requisitada novamente.

googleapis-2

Partindo para nosso segundo teste, utilizaremos a da Microsoft, que ao meu ver é a mais limitada. Além da padrão Jquery, possui em seu arquivo alguns plugins da mesma biblioteca, e a biblioteca para se trabalhar com o MVC da tecnologia .NET.

aspnetcdn-1

Confesso que me supreendi com os resultados da CDN da Microsoft. O tempo de espera foi de apenas 32ms, ignorando o tempo em que o browser procurava o DNS! Mas isso pode significar que a CDN é pouco usada. Mas infelizmente esse ganho na espera é neutralizado com o tempo baixando a biblioteca, como pode ser visto.

aspnetcdn-2

A última CDN que utilizaremos é a disponibilizada pela CloudFlare, denominada cdnjs. Em relação a quantidade, é sem dúvida alguma a melhor. Enquanto escrevia esse artigo havia 268 objetos sendo disponibilizados pela empresa.

cdnjs-1

Essa CDN pode ser problemática em sua aplicação! Apesar de seu tempo de espera não ser o pior, o tempo de download foi bem ruim comparado aos outros dois. Além disso, três em dez vezes que executei os testes, o host apresentava problemas com a conexão. Por algum motivo obscuro, não resolvendo o DNS. Use-a, mas com cautela.

cdnjs-2

Terminado os testes, podemos concluir algumas coisas:

  1. Na maioria das vezes, é mais rápido carregar um objeto de uma CDN que do seu próprio host;
  2. A CDN com maior performance definitivamente é a do google. Porém, nada lhe impede de carregar uma outra biblioteca para completar sua aplicação, como por exemplo, da cdnjs.
  3. Utilize sempre as URLs “protocol-relatives”. Você nunca sabe quando sua aplicação possa passar a servir em protocolo seguro. Isso pode lhe evitar retrabalho futuro. Além disso, pode ser sensível, mas querendo ou não diminui o tamanho do seu documento omitindo o protocolo.
  4. Apesar da grande quantidade de bibliotecas agregadas ao repositório da CDN disponibilizada pela CloudFlare, definitivamente ela é a CDN menos eficiente.

Terminado este artigo, lhe faço uma pergunta: Você utiliza sua biblioteca javascript conscientemente? Jquery é a solução para todos os seus problemas? Esse é o assunto de nosso próximo artigo.