With responsive websites being at the forefront of eCommerce websites these days developers and webmasters are heading back to the days of squeezing every last kilobyte off your files to make your site as fast as possible.
One way of doing this is to combine and minify your javascript and CSS files into one file and minify the code inside. If you are working with Magento then there is a setting in the backend system that will do all of the hard work for you. Log into your Magento admin system and head to System -> Configuration -> Advanced -> Developer. Under Javascript and CSS settings you will see the option to merge the two sets of files.
When enabled and a page is loaded, Magento will look through all of the JS files needed for that page and combine them into one file which Magento will name after an MD5 hash of the various filenames together in one string. Lets look at a simple example to simplify that theory.
If you visit the homepage you may have jquery.js, bootstrap.js and carousel.js. These will be combined into a file called something like cd846def9440f38196ceb7fc0411b680.js. Web browsers will download this file and store it in the cache to use later. Ok so the file is a bit large but better to do it now in one go and use it later on right?
The user then navigates to a different page and the list of JS files is the same. Magento gives the same file back to the <script> tag. The browser will look and see it already has that file so doesn't need to download it, just pick the file you already have.
Our user then decides they want to look at a product on our site. Magento will read through and work out that we need jquery.js, bootstrap.js, carousel.js and product.js. The MD5 that is produced is b0db3a7d3759c27488e35a793620ca70.js. The browser looks and realises that it is a different file and re-downloads the whole lot. Product.js might only be 5 or 10% of the new file but we have to download the whole lot again just for that 5 or 10%.
In the example above this may not be too much of a problem but multiply the number of javascript files by a factor of 5 or so and the files become larger and the problem increases. The combined and minified file may look good to SEO speed checks but isn't so good for your users.
The solution? Turn this setting off and let your JS and CSS be included separately. It doesn't look great on the SEO speed checks, and the initial page load is not that great but the pay off for the site as a whole is great. You can do things to help out a bit, minify your scripts, use CDN scripts where possible, put the JS and CSS at the bottom of the document where possible. Each of these techniques will depends on the site you're working on but they will go a fair way to helping without making your users download several copies of the same file.