Let’s say you have an HTML page that weighs in at 8K. You have some CSS that might contain 32K. And you have a couple of JavaScripts that are 4K and 12K. That adds up to 56K.
If you put the CSS and the JavaScript information in the HTML, you still have 56K. One would assume 56K is 56K no matter what. However, there’s a little thing known as browser cache to take into account.
Let’s say every page in your site uses the CSS and JavaScripts we’re talking about. If those are externalized, then the very first time a page from your site is downloaded, all 56K gets downloaded. But the external CSS and JavaScript files get cached. Which means, for all subsequent pages that are downloaded, all the browser sends out a request for is the HTML. If the HTML is all content (no presentation, no scripting), speed rules.
Stumble it!
2 Comments
RE: Externalize JavaScripts and CSS
Question: How far should you externalize? Up to a different directory? Two directories?
The location within your site structure doesn’t really matter, IMO. Most people put scripts in a directory called ‘scripts’ but that isn’t absolutely necessary. With more than one CSS file, people often store them in a directory called ‘css’ but that isn’t absolutely necessary either. It depends of the size of your site and how you organize it.
2 Trackbacks/Pingbacks
[...] externalization. So, to save performance due to page load issues, I think it would be better to externalize at least some of the site content. This can in turn help in proper site organization and also [...]
[...] The Need for Speed: Externalize your JavaScripts and CSS – Virginia DeBolt [...]
What can you contribute?