Tell me more ×
Server Fault is a question and answer site for professional system and network administrators. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
1  
Try it and see what happens. You may also want to visit our sister site Webmasters where many questions on this topic may get better answers. – Michael Hampton Feb 8 at 22:38
Anything I try on a local test server will not seem to make any difference. I am not sure how to simulate hundreds of hits to test and notice some difference. – Lord Loh. Feb 8 at 22:40
You're never going to see a measureable difference on localhost -- this is as close to instant transfer as you'll get. Try this on a VPS and use a load-testing tool. Even so, with such a small amount of code (in total), the difference may not be measurable. Try a test using around 200KB+ of HTML/CSS/js. – Luke H Feb 9 at 16:46

2 Answers

up vote 3 down vote accepted

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
share|improve this answer
How can I server a CSS + JS file? – Lord Loh. Feb 8 at 23:04
@LordLoh. I don't understand what you mean. – mgorven Feb 8 at 23:05
2  
@LordLoh. mgorven meant concatenate them to a single file each, not a signle file consisting of both the JS and the CSS. – Attila O. Feb 9 at 0:36
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.