We have a web application with a common header file for all pages. We want to reduce the page load times. We are thinking of having separate headers for different pages, depending on each page's specific javascript and css needs. Will that make any difference in the load time, or not (since they are cached by the browser)?
Asked
Active
Viewed 206 times
2
-
When you say different headers what CMS are you talking about? – iambriansreed Jun 21 '12 at 20:46
-
It's a custom java web application built with Struts tiles. It has a common header include with all js and css files. – spyk Jun 21 '12 at 20:48
-
Wait, are you asking about removing stuff you never use, or consolidating stuff you *do* use into fewer files? The "unneeded" in your title seems a bit misleading. – apsillers Jun 21 '12 at 20:54
-
The "unneeded" refers to stuff that are never used in some pages, but are however included in all pages as they all have a common header. – spyk Jun 21 '12 at 21:02
2 Answers
3
Yes. Absolutely.
Many folks clear their cache or even turn it off completely (like me).
Even if the unneeded JavaScript is cached it is still run by the browser.
Check out http://tools.pingdom.com/fpt/.
This tool tests the load time of that page so you can analyze it and find bottlenecks in load time.
When you say different headers what CMS are you talking about? Most CMSs allow you to add additional page head data, JS or CSS, in hooks or ugh placeholders.
iambriansreed
- 21,935
- 6
- 63
- 79
-
So if each page has its own js/css includes where is it better to place them within the page's body? Is it better to place them at the bottom of each page instead of having them within the header? – spyk Jun 21 '12 at 20:58
-
-
It's not a CMS but a custom java webapp (see above). Our concern is that it increases the complexity, as we need to maintain different header files for different pages. – spyk Jun 21 '12 at 21:09
-
Have the header file end with the `` tag unclosed and close it in each page layout. Does that make sense? – iambriansreed Jun 21 '12 at 21:11
-
Yes, but I don't think it is a good idea as it messes a bit with the structure of our includes. – spyk Jun 21 '12 at 21:13
-
It's possible to simulate "include" sections somewhat like ASP.NET master pages. This is for PHP, but I'm sure it could be adapted for java http://blog.themeforest.net/tutorials/creating-an-html-friendly-template-system-using-phps-output-buffering/ I've used this specific technique in PHP before and it does really work well. – BLSully Jun 21 '12 at 21:28
1
People have addressed the JS issues already.
CSS includes can also impact page speed noticeably. CSS rules are matched right to left by browsers, which is very different to how most people think about writing their rules. Given a complicated enough layout, CSS optimizations could improve your rendering times significantly.
http://css-tricks.com/efficiently-rendering-css/
http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing
-
+1 good point. Rerdless of caching browsers still execute / parse the JS and CSS. – iambriansreed Jun 21 '12 at 21:01
-
I will add that you must balance between including some measure of unnecessary code/css in your files, and having too many http requests. For example: You may only need a few functions from JQuery in a given page. That does **not** mean getting obsessive about only loading the absolute necessities and splitting JQuery across multiple files. I generally have "core" files (both js and css) that get included everywhere, and only things that may only get used once in an application get their own include. HTTP requests will slow you down **way** faster than a bit of code bloat – BLSully Jun 21 '12 at 21:11
-
1Yes, I have found that to be true. Which is why I am obsessive about my sprites. http://www.vbgov.com/siteassets/images/layout/sprite.png – iambriansreed Jun 21 '12 at 21:13