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!