Does going from

<script type="text/javascript" src="jquery.js"></script>

to

<script type="text/javascript">
  <?php echo file_get_contents('jquery.js'); ?>
</script>

really speed things up?

I am thinking it does because php can fetch and embed a file's contents faster than the client's browser can make a full request for the file, because php isn't going over the network.

Is the main difference that the traditional method can be cached?

Does going from

<script type="text/javascript" src="jquery.js"></script>

to

<script type="text/javascript">
  <?php echo file_get_contents('jquery.js'); ?>
</script>

really speed things up?

I am thinking it does because php can fetch and embed a file's contents faster than the client's browser can make a full request for the file, because php isn't going over the network.

Is the main difference that the traditional method can be cached?

• php
• javascript
• http
• optimization

• 2 That will affect caching though. – GWW Commented Aug 14, 2011 at 15:29
• 2 @GWW replace "may" with "will". :) – nickf Commented Aug 14, 2011 at 15:29
• 2 Even faster would be: <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> ;-) – T.J. Crowder Commented Aug 14, 2011 at 15:31
• @TJ If you're concerned about speed, you shouldn't use /1/; it doesn't cache for very long. – Yahel Commented Aug 14, 2011 at 15:45
• @yahelc, The stability is even more concerning... – nickf Commented Aug 14, 2011 at 17:39

8 Answers 8

It may be faster on the first page load, but on every subsequent load it will be much slower. In the first example, the client browser would cache the result. In the second, it can not.

If you only ever serve one single website in your client's life, then yes, because you only have one HTTP request instead of two.

If you are going to serve multiple sites which all link to the same javascript source file, then you're duplicating all this redundant data and not giving the client a chance to cache the file.

You need to transfer the bytes to the browser in both cases. The only difference is that you save a HTTP request in the latter case. Also make sure to escape the javascript with CDATA or using htmlspecialchars.

If you include your JS lib in your HTML page, it cannot be cached by the browser. It's generally a good idea to keep the JS separate from the normal HTML code because the browser can cache it and does not need to fetch it on subsequent requests.

So to make it short, it's an optimization that works only if the page is called once by the user and jquery is not used on other pages.

Alternatively, you may want to use the jquery from google apis - with the effect that they are often in the browser's cache anyway, so there is no need to transfer the lib at all.

It does so for that ONE PAGE.

All subsequent pages using the same library (jquery.js downloaded from the same URL) SUFFER, because if you include the reference to the external file yes, it has to be downloaded in an extra connection (which is relatively cheap with HTTP\1.1 and pipelining), BUT - provided your webserver serves it with useful headers (Expires:-header far in the future), the browser caches that download, while with the "optimization" it has to retrieve it with every single content-page.

Also see pages like this one: http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

(the keyword here is "revving" in connection with those far-future expiration dates)

The first one is better since the browser can cache the script. With the second version it will have to re-download the script every time it loads the page even if the script didn't change.

The only time the second version is an improvement for scripts that cannot be cached by the browser.

It depends on how many files use the same file. However, in most situations this will be slower than your first piece of code, mostly because jquery.js can be cached.

Yes, that would initially be a performance optimization regarding the number of HTTP-requests being used to serve the page - your page will however become a bit bigger per pageload as the jquery.js will be cached in the browser after the first download.

It does if your page is static.
But if its not static your browser will download the page very time while jquery doesn't change but still included. if you use src="jquery.js" and the page changes, the browser will load jquery from cache and not download it again so using src="jquery.js" is actually faster.