Menu
I need to optimize the loading speed of several existing websites. One of the issues that I have is the amount of requests per page. The websites have 7 or more different types of pages which should load different set of css and javascripts because they contain different widgets or functionality. Currently each widget or functionality has its own javascript file. I am planning to combine and minify the files to have fewer requests.
homepage.js,listing.js,detail.js,jquery.js + jquery.cookie.js + common.js,list.js + paging.js + favorite.js,detail.js + favorite.js,init.js goes to <head> and do.js goes to <body>.I am considering large-scale websites a.k.a. portals or social networks.
(BTW, there are some libraries which requests I can't control, e.g. TinyMCE or google maps).
802
Usually you can use the following pattern:
With this practice, you just have 2 requests for your JS on each page and you get a clear separation/structure in your JS. For all pages except the first one, it will be just one request as main.js would be cached.
You can use the same principle for the CSS as well. This is effective but as mentioned by another answer, you can actually take this further and bundle everything in 1 js only. Its a preference or style. I like to break it into 2 as it keeps things logical for me.
Ensure the following though:
EDIT: I thought I would update the answer to answer some of your points.
Point 2: Is it better to combine only those files which are always used together?
Ans: Personally, I don't think so. If you are serving all files which are being used together, it doesn't matter which group they belong to or how they land up on the page.This is because we combine JS files to reduce the amount of HTTP Requests.
Once your JS is combined & minified & in PROD, you are not expect to debug or make sense out of it. So to bind together logically related JS files is a moot point. Its in your DEV environment where you would like to have all these logically related code files together.
Point 3: What about having one file for all javascripts that should load in the head and one file for all javascripts that should load at the end of body?
Ans: There are certain cases where you are somehow forced to inject JS in the HEAD. Ideally, you shouldn't do it as SCRIPT tags are blocking in nature. So unless you really need to, place all your JS ( 1 or multiple files ) at the end of the BODY tag.
Point 4: What about having one file for common functions and one for administrative functions which is loaded if the user has specific permissions?
Ans: This seems like a reasonable approach to split your JS code. Depending upon the user privileges, you can fork your JS code.
Point 6: What is a recommended amount of javascript and css requests for a page?
Ans: This is a very subjective question. It depends on what you are building. If you are worried about too much JS being loaded on page load, you can always split it and use on-demand SCRIPT injection methods to split the load.
163
Like some others have said, put used-on-more-than-one-page scripts all together into a main.js and then if there are page specific ones: home.js, another_page.js, etc.
The only thing I really wanted to add was that for libraries like jQuery, you should use something like Google's Libraries API.
Oh, and finally -- don't forget to turn gzipping on your server!
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
