A inclusão do CSS e JS no HTML melhora os tempos de carregamento da página e / ou o desempenho do servidor?

Question

Qual dos dois snippets de HTML tem melhor desempenho?

Incluindo o CSS & JS no HTML

<html>
 <head>
  <style>
   <?php include("someStyle.css"); ?>
  </style>
  <script>
   <?php include("someScript.js"); ?>
  </script>
 </head>

OU vinculando o CSS & JS:

<html>
    <head>
        <title>Family Tree</title>
        <script src="someScript.js"></script>
        <link href="someStyle.css" rel='stylesheet' type='text/css' />
    </head>

A lógica em que consigo pensar é

1. O servidor recebe menos acessos (+ servidor)
2. As transferências paralelas são reduzidas (navegador)
O desempenho de
3. DEFLATE é melhorado, se usado. (+ servidor)

Vou notar uma melhoria / degradação para grandes cargas de servidor?

    

Answer 1

Você obterá um melhor desempenho com arquivos JavaScript e CSS separados, pois eles não mudam com frequência e, portanto, podem ser armazenados em cache de forma mais agressiva, enquanto o HTML é geralmente dinâmico e não pode ser armazenado em cache. Se você inline seu JavaScript e CSS, você não poderá armazená-los em cache, o que significa mais dados para download e maior tempo de geração de páginas. Você provavelmente quer fazer o seguinte para esses arquivos separados:

• Concatene CSS e JS em um único arquivo cada
• Minimize o conteúdo
• Ativar compactação gzip ao veicular os arquivos
• Verifique se Etag e Last-Modified cabeçalhos estão definidos e se o servidor honra If-Modified-Since e If-Not-Match
• Defina um cabeçalho Expires em algum momento no futuro

Answer 2

Bem, um exemplo é o lado do cliente e o outro é do lado do servidor. Portanto, se você preferir um melhor desempenho do servidor, vá para o lado do cliente em seu segundo exemplo. By the way, o seu ainda ligar em ambos os exemplos e não introduzir qualquer código CSS ou JS no doc HTML real. No primeiro exemplo, você está dizendo ao servidor para processar o código CSS e JS dentro das tags PHP e, no segundo exemplo, está dizendo ao cliente (seu navegador da Web) para processar o código CSS e JS.