CDN ou Concatenar?

[diegoemerique]

Fala ai galera.

Me surgiu um pensamento, e talvez seja besta, mas com toda essa coisa de concatenar js, minificar e juntar tudo em um arquivo só. Me pergunto se usar CDN como o https://cdnjs.com/ ainda é uma boa opção e como isso se encaixa no workflow.

Pq vamos lá, Se o projeto tem dependências como um jQuery, algum plugin para estilizar Select e File Inputs, ou talvez algo para Drag And Drop. Isso tudo seria algo nessa ordem pegando pelo o CDN + o all.js:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.11/js/min/perfect-scrollbar.jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js

all.js

Eu fiquei pensando:

• Se eu boto isso que ta no CDN dentro do all.js, seria um download desnecessario da mesma coisa.
• Se eu não boto só o cdn(com fallback caso n consiga pelo o cdn) fica vários requests(já ouvi falar que quanto menos melhor).
• Se eu boto só o all.js, perco as vantagens de usar um CDN.

Alguém Sabe qual seria a melhor opção em casos assim? e se algum dos meus pensamentos está errado?

Vlw

[felipeuntill]

Toda solução leva a um problema, ambos as premissas de otimização são boas praticas mas podem conflitar, se você optar por minificar tudo irá abrir mão dos ganhos do CDN(baixa latência, cache, economia de banda, etc..) em contra partida mantendo o CDN você terá uma maior quantidade de requisições paralelas(quanto menos melhor) para o carregamento da sua aplicação.

A matemática é simples se sua infraestrutura não possuir limitações de banda e a soma dos arquivos apontados para o CDN não exceder a quantidade de 4 arquivos eu recomendaria manter as duas opções, agora se os arquivos externos estiverem demasiados não lhe resta opção se não absolver os arquivos em uma única request.

Outra coisa que você também deve considerar é necessidade de carregamento dos arquivos, colocar um all.js de 10mbs no header não faz sentido algum, o ideal é que os scripts que realmente não forem necessários para o carregamento da página estejam no footer.

[leonardoelias]

Sempre quando penso em CDN, vejo o mapa onde estão seus devidos servidores, no caso do CDNJS https://www.cloudflare.com/network-map e cruzo com meu resultado do analytics.

Então acho legal, você pensar em HTTP2, se você tem bastante preocupação com performance. Da uma olhada no post do Sergio Lopes no blog da Caelum: http://blog.caelum.com.br/http2-server-push-na-pratica/

[leocavalcante]

Vale lembrar que usar CDN não significa necessariamente que o navegador vai sempre fazer mais um request. Quando em cache o navegador não sai do client.

Se alguém que visita seu site visitou um outro site anteriormente que também usava a mesma versão da jQuery em CDN, no seu site a tag script que trás a jQuery não vai ser mais um request (num browser descente, claro 😆).

[leonardoelias]

@leocavalcante da uma olhada nesse post do facebook https://code.facebook.com/posts/964122680272229/web-performance-cache-efficiency-exercise/

💃

[diegoemerique]

Obrigado a todos, vou ler os links e absorver todas as dicas!

Fico muito agradecido pelas respostas, consegui esclarecer bastante das minhas dúvidas.

[yuricamara]

Mesmo usando CDN é importante subir as libs para fazer fallback
Exemplo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

Já aconteceu de CDN ficar offline e ferrar inúmeros sites.

E eu gosto de CDN. Pelas duas grandes vantagens:
1 - Não fazer a request se o arquivo estiver cacheado
2 - Fazer download em paralelo sendo o domínio diferente do da sua aplicação.
E tb dá uma economizada no seu custo com servidor. Pequena, mas toda economia é bem-vinda. ;-)

[valdineyap]

Cara, sem dúvida o melhor caminho é usar CDN. Mas a CloudFlare e CDNJS NÃO são a melhor opção pra quem tá no Brasil.
Essas CDNs só tem servidores em São Paulo. Você deve usar uma CDN que tenha servidores no Brasil inteiro, assim fica rápido tanto pra quem mora em Manaus quanto pra quem tá em SP.
Veja esse post aqui que explica direitinho: https://www.gocache.com.br/cdn/cdn-jquery-brasil/
Mas resumindo, use CDN, mas use uma CDN com servidores espalhados pelo Brasil e não apenas em SP.

[leocavalcante]

Mas a latência de quem tá no Acre pra São Paulo é mínima! Tem jogo que roda numa boa com um server só no Brasil, você acha que isso seria garga-lo num site?

[valdineyap]

Jogos são ultra-otimizados para transferir o mínimo de dados possível, mesmo assim são impactados.

Pra um servidor em SP, tipicamente a latência em Manaus pode chegar a 50ms ou até 100ms (já trabalhei lá). Em SP, a latência fica entre 5ms e 10ms, ou seja, quase 10 vezes.

Vale lembrar que a latência também impacta na velocidade de download dos arquivos do site (apesar de esquecermos disso), pois cada pacote TCP enviado tem que aguardar um ACK (acknowledged)... Se a latência é alta o ACK demora chegar e, portanto, o servidor demora enviar outro pacote com dados, impactando na velocidade de carregamento do site como um todo.

[kazzkiq]

Isso me lembrou dessa pergunta no SO-pt, vale a leitura:

Por que colocar JS, CSS e imagens em outro servidor?