Home / server / Questions / 477055
Accepted
Lord Loh.
Asked: 2013-02-09 14:34:48 +0800 CST

Will including the CSS & JS in the HTML improve page load times and / or server performance?

  • 772

Which of the two HTML snippets perform better?

Including the CSS & JS in the HTML

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

OR linking the CSS & JS:

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

The logic I can think of is

  1. The server receives fewer hits (+server)
  2. Parallel transfers are reduced (-browser)
  3. DEFLATE performance is improved, if used. (+server)

Will I notice an improvement / degradation for large server loads?

web-server

2 Answers

  1. Best Answer

    You'll get better performance with separate JavaScript and CSS files because they don't change often and so can be cached more aggressively, whereas your HTML is usually dynamic and can't be cached. If you inline your JavaScript and CSS you therefore can't cache them either, which means more data to download and longer page generation time. You probably want to do the following to these separate files however:

    • Concatenate CSS and JS into a single file each
    • Minify the content
    • Enable gzip compression when serving the files
    • Ensure that Etag and Last-Modified headers are set, and that the server honours If-Modified-Since and If-Not-Match
    • Set an Expires header some time in the future
    • 3

  2. Well one example is client side and the other is server side. So, if you prefer better server performance then go with client side in your second example. By the way, your still linking in both examples and not inputting any CSS or JS code in the actual HTML doc. In the first example, you're telling the server to process the CSS and JS code within the PHP tags and in the second example, you're telling the client (your web browser) to process the CSS and JS code.

    • 0