I am pretty sure that we all have a conceptual knowledge of keeping the three layers: presentation, behaviour and content of a website separate. Most of us might be working with JavaScript files and CSS as well and we prefer to keep large JavaScript as well as CSS in external files.
Besides the concept of separating the three layers there is one more thing that we as a developer need to consider. Well the issue is regarding the performance of the website.
Let us talk about the best practices for speeding up a website, earlier in one of my blogs I had already mentioned that compressed JavaScript files are ideal for production environments since they typically reduce the size of the file by 30-90%.
Besides the concept of separating the three layers there is one more thing that we as a developer need to consider. Well the issue is regarding the performance of the website.
Let us talk about the best practices for speeding up a website, earlier in one of my blogs I had already mentioned that compressed JavaScript files are ideal for production environments since they typically reduce the size of the file by 30-90%.
Now my question in this blog is not whether do I use a minified version of JavaScript or not, but rather I wanted to find out which one of the following options can give me a high performance website:
Using inline javascript and CSS or using an external one?
Before I start to look for the solution of my question, I would like to speak about a very basic thing here:
Several components are used in a webpage like CSS, Javascript, Images, Flash etc. When a user makes a request in his browser for a web page, it requires all the components to load a page. For each component HTTP request is send to the server. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
Let me mention this too that 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Again one another fact is JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed. No doubt by doing so we are absolutely increasing the size of the HTML document too.
Several components are used in a webpage like CSS, Javascript, Images, Flash etc. When a user makes a request in his browser for a web page, it requires all the components to load a page. For each component HTTP request is send to the server. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
Let me mention this too that 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Again one another fact is JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed. No doubt by doing so we are absolutely increasing the size of the HTML document too.
Now my question is why should I use JavaScript and css as an external file for a web page, which increase the number of HTTP request. As of now I do not see it as a great option for enhancing my website performance? Do you agree?
To my question that what should be my approach for increasing a website’s performance, using an inline JavaScript and CSS or using an external one, do I have an answer now?
No, absolutely not? I have not reached the conclusion yet.
Well when I use an inline approach I surely reduce the number of HTTP requests required to download each and every external javascript or CSS but then there is one more fact that I should know before making any decision.
And the truth is the HTML documents are not cached by the browser while if the JavaScript and CSS are in external files and are cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests. Is not that great?
Now I have an answer:
The key factor is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. Besides that , to reduce the number of HTTP requests Combined files are a way I mean combining all scripts into a single script, and similarly combining all CSS into a single stylesheet wherever possible.
Hope this will help you too while making a decision for the same issue that I was looking for.