Guia de início rápido para usar CDN na sua aplicação

CDN (Content Delivery Network) são servidores distribuídos através da internet que oferecem seu site não apenas com redundância, mas através do caminho mais próximo do seu cliente.

Este serviço é utilizado por grandes websites e empresas. Mas podemos utilizar parte destes serviços de graça para acelerar nossos sites e aplicações. Vamos aprender como.

Algumas reflexões e regras sobre performance

Existem várias “regras” a seguir em nossas páginas HTML para acelerá-la, mas vamos começar com uma básica: folhas de estilos no topo, javascripts no final. A razão é: javascripts vão bloquear downloads subsequentes.

Outra regra é, evidentemente, manter o número de requisições o mais baixo possível. Minimizar e combinar javascripts e folhas de estilo, utilizar CSS Sprites fazem bem este trabalho, mas este não é o foco deste artigo.

Também temos algumas limitações a enfrentar. O número de conexões simultâneas por navegador (browser max connections) variam bastante, de 2 a 60, e servidores também podem limitar este parâmetro também. Também sabemos que se espalharmos nossas requisições por vários servidores, nossa página será mais rápida.

E ainda há outro detalhe para pensarmos: se utilizamos um recurso estático que nosso cliente já utilizou, ele pode estar em seu cache (e/ou proxy) – e, sim, a página parecerá ainda mais rápida.

Agora nosso dilema real de desenvolvimento, como iniciar nossa página HTML com máxima performance e pouco esforço.

O que utilizamos no desenvolvimento real

Muitos dos projetos atualmente utilizam bibliotecas conhecidas como Twitter Bootstrap, jQuery, jQueryUI e similares. O primeiro pensamento é: vamos baixar tudo e criar uma referência local para estes recursos.

Uma página simples para utilizar o Twitter Bootstrap seria como segue:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <link href="/bootstrap/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/my-stylesheet.css" rel="stylesheet">
  </head>
 <body>
    <div class="container">
    </div> <!-- /container -->
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/my-javascript.js"></script>
  </body>
</html>

Sim,bem simples para começar.

Convertendo para CDN

Mas podemos utilizar recursos CDN facilmente com uma pequena pesquisa em BootstrapCDN e no rodapé de jQuery Page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/my-stylesheet.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
    </div> <!-- /container -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="js/my-javascript.js"></script>
  </body>
</html>

Muito simples, não é? Seus javascripts e folhas de estilo (css/my-stylesheet.css and js/my-javascripts.js) continuam iguais.

Mais e mais recursos em CDN

Mas… se quisermos outros recursos? Se quisermos utilizar ferramentas fantásticas como underscore.js, ou Plugins jQuery plugins muito legais como o Datatables?

Nem todas nossas necessidades tem CDNs. Mas, ainda bem, dois ótimos serviços proveem CDN para várias ferramentas excelentes:

Você pode pesquisar e escolher a versão correta para utilizar na sua aplicação. Underscore.js pode ser incluída com:

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

ou:

<script src="//cdn.jsdelivr.net/underscorejs/1.4.4/underscore-min.js"></script>

Muitas referências a CDNs pode ser ruim

CDNs são muito úteis. Mas se você incluir muitos recurso, pode ter o efeito colateral de quebrar a regra “muitas requisições”. Talvez parte dos recursos possa ser combinada localmente. Utilize o Yuy Compressor ou JSMin.

Alguns frameworks possuem ferramentas internas para combinar e minimizar recursos. O Symfony utiliza o Assetic, que pode ser utilizado não apenas no Symfony mas em qualquer projeto PHP 5.3.

Faça alguns testes misturando ambas as técnicas para encontrar o ponto ótimo para sua aplicação.

Outras fontes de CDN

jQuery possue 3 fontes principais para CDN: EdgeCast/MediaTemple (a oficial do jQuery, utilizado no exemplo acima), Microsoft e Google.

Qual deles utilizar? Este artigo faz uma boa comparação.

Pensamentos finais

Um grande uso para CDNs é bootstrap rápido / prototipação. Um arquivo (ou template, dependendo do seu método de desenvolvimento) e você pode iniciar seu projeto, já atualizado para boas práticas.

Outra vantagem é a fácil atualização de bibliotecas: é só mudar a versão no seu template e está feito. Até o downgrade é fácil.

Sem mais desculpas para utilizar o CDN em seus projetos!

  • I read a lot of interesting articles here. Probably you spend a lot
    of time writing, i know how to save you a lot of time, there is an online tool that creates
    unique, google friendly posts in minutes, just search in google – laranitas free
    content source

  • José Silva

    Legal o artigo!
    Entendi que dá pra usar a CDN pra JQuery e tals… Mas dá pra usar também CDN pro meu site inteiro, certo?
    Eu tava olhando essa CDN aqui http://www.gocache.com.br , vocês recomendam?

    • LeoRS

      eu prefiro a CloudFlare por ser gratuíta