Minimizing JS and CSS to Speed Page Load Times

Website performance is a constant battle for any operations team.  As the proliferation of high bandwidth home and office connections continues so does the demand for near instant response times from websites by consumers.    The enormous complexity of modern websites has made this near instant response time a lofty goal, but one that can be met using a multitude of small tweaks in both web servers and web applications.

One of the easiest ways to speed web experiences is to reduce the amount of data sent to the client, while still maintaining the same client experience.  In my past blog posts I discussed http compression and reducing excessive files, which are both excellent methods to reduce the data payload of a site, but for this post I’ll be discussing Javascript and CSS minimizing.  Javascript and CSS minimizing is the reduction in non interpreted content from the Javascript and CSS in your site, and can easily shave at least 25% of the size of those files.  With the enormous amount of CSS stylus and Javascript content in a modern website a 25% reduction can add up to a huge boost in end user performance.

Javascript and CSS are rather simple markup language.  Snippets of code are placed on lines and neatly organized so that web designers can easily review their code and make modifications as necessary.  Unfortunately all that formatting isn’t actually necessary for the code to run and takes up a huge amount of space.  Comment blocks, spaces, and carriage returns can all be removed from your code to reduce the space.  Dozens of pages of CSS or Javascript code can be reduced to a single large line that is interpreted by your browser at the exact same speed as the nicely formatted file.

So what exactly does a snippet of minimized code look like?  Very plain is the answer:

 

Original code:

/*

Name: Your Product Name

Description: Handheld mobile device styles.

Version: 1

Author: Some guy at your company

Tags: handheld, mobile, iphone

 

*/

 

/*

—————————————————————-

H A N D H E L D

—————————————————————- */

@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

 

Minimized Code:

@media screen and (max-device-width:480px){html{-webkit-text-size-adjust:none}}

 

Notice that all comment blocks have been removed as have about a half dozen spaces that made the CSS content just a little bit easier for web designers to read.  The single line CSS content is interpreted exactly the same by all major web browsers and the user will never know the difference, except that the one line content loaded several times faster.

 

How Big is the Impact?

The impact can be enormous.  Here’s the stats of a sample corporate webpage I found that didn’t minimize code:

 

4 CSS Files:

– Default.css: 4940 bytes unminimized, 3844 bytes minimized (22% reduction)

– Style.css: 69523 bytes unminimized, 55848 bytes minimized (20% reduction)

– All-ie.css: 212 bytes unminimized, 177 bytes minimized (17% reduction)

– Profile-capture.css: 1485 bytes unminimized, 1302 bytes minimized (12% reduction)

 

JavaScript Files:

– jquery.js: 252880 bytes unminimized, 141924 bytes minimized (56% reduction)

– customeffects.js: 3230 unminimized, 1800 bytes minimized (55% reduction)

– eloqua.js: 646 bytes unminimized, 555 bytes minimized (86% reduction)

– jquery.form.js: 26750 bytes unminimized, 14525 bytes minimized (54% reduction)

– jquery-lightbox_me.js: 10577 bytes unminimized, 4117 bytes minimized (38.9% reduction)

– jquery.eloqua.js: 3123 bytes unminimized, 2571 bytes minimized (82% reduction)

– jquery.profile_caputre.js: 2272 bytes unminimized, 1527 bytes minimized (67% reduction)

– actions.js: 1000 bytes unminimized, 687 bytes minimized (68% reduction)

– priv-tools.js: 6117 bytes unminimized, 4866 bytes minimized (79% reduction)

Leave a Reply

Your email address will not be published. Required fields are marked *