StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POOptimizing javascript and css requests
text
Body
copied!<p>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 <strong>combine and minify</strong> the files to have fewer requests.</p> <ol> <li>Would it be a good practice to combine and minify all javascripts necessary on each type of page into one file (and to do the same for css)? e.g. <ul> <li>home page has just one <code>homepage.js</code>,</li> <li>list pages have just <code>listing.js</code>,</li> <li>detail pages have just <code>detail.js</code>,</li> <li>etc.</li> </ul></li> <li>Is it better to combine only those files which are always used together? e.g. <ul> <li><code>jquery.js</code> + <code>jquery.cookie.js</code> + <code>common.js</code>,</li> <li><code>list.js</code> + <code>paging.js</code> + <code>favorite.js</code>,</li> <li><code>detail.js</code> + <code>favorite.js</code>,</li> <li>etc.</li> </ul></li> <li>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, e.g. <ul> <li><code>init.js</code> goes to <code><head></code> and <code>do.js</code> goes to <code><body></code>.</li> </ul></li> <li>What about having one file for common functions and one for administrative functions which is loaded if the user has specific permissions? </li> <li>Are there any strategies how to balance between 1., 2., 3., and 4.?</li> <li>What is a recommended amount of javascript and css requests for a page?</li> </ol> <p>I am considering large-scale websites a.k.a. portals or social networks. </p> <p>(BTW, there are some libraries which requests I can't control, e.g. TinyMCE or google maps).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload