So you’ve enabled caching, gzipped your files, but your site still loads slowly? The culprit might be the large number of separate CSS and JavaScript files that the browser must load when first visiting your site.
A web browser must open a new connection to the web server when requesting each component of your webpage: the HTML page itself, each CSS file, each JavaScript file, each image, video, music file included on your page. Each request and the subsequent negotiation between the web server and the browser takes time (usually a mere blink of an eye on fast computers with fast connections), but they add up if your webpage contains a lot of CSS, JS, image files, etc. Thus, loading one 2kb CSS file is faster than loading two 1kb CSS files. Loading one 100kb JS file is noticeably faster than loading ten 10kb JS files. See “Bulk File Transfer Measurements” for a quantitative analysis of this concept.
Eliminate unnecessary CSS, JS, plugins, etc.
The solution to too many CSS and JS files slowing down your website is obviously to reduce the number of such files. The simplest and most commonsensical way for WordPress users is to choose themes that are light on CSS and JS components, and to eliminate any plugins that aren’t absolutely necessary. Eliminating unnecessary plugins will also reduce the number of PHP executions and database queries, further speeding up your website.
Consolidate CSS and JS files by hand
For the remaining CSS and JS files that you cannot eliminate, you can combine them into one big CSS file and one big JS file. This post has some advice for people who want to attempt manually consolidating CSS and JS. Be warned that this approach should not be attempted unless you are meticulous, comfortable with code moficiations, and not afraid of borking your site and having to fix it.
Automatic CSS and JS consolidation with minification or compression
For the lazy (like me), there is a more elegant and simple way of consolidating your CSS/JS. The PHP scripts minify and Combine allow you to load multiple files like this:
<script type="text/javascript" src="minify.php?files=firstfile.js,secondfile.js"></script>
or if use .htaccess rewrite rules, simply like this:
<script type="text/javascript" src="firstfile.js,secondfile.js"></script>
minify and Combine would then consolidate the files into one big one and send that single file to the browser.
minify and Combine offer more features other than just combining CSS/JS files into one. minify minifies the files (duh!), combines them, then caches to disk to avoid duplicate processing in the future. Unfortunately, minify does not gzip compress as the author feels that compression is best left to mod_gzip/deflate (which are more efficient at compressing but does not have caching functions which means unnecessary recompressions, IMO). Combine does not minify, but it does gzip after combining, and it too caches to disk.
It is still a pain in the butt to combine WordPress’s CSS/JS even with tools like minify and Combine, since the files are not in the same directory and some careful editing of the header template would be required. But at least it is less time-consuming and more easily portable compared to manual consolidation. Also, minify and Combine perform other optimizations like minification or gzip compression.
Of the two products, I’m leaning towards poking at minify. It is written by the same author who ported the JavaScript minifier JSMIN to PHP. If only minify could also gzip compress. I wonder if I could steal the gzip function from Combine and stick it into minify…
If you liked this post, please subscribe to my feed. Thanks for visiting!
1 Response to “CSS and JavaScript consolidation: fetching one big file is faster than ten small files”