It should be obvious but we often forget the need to minimise page weight when working on responsive designs. Page weight has increased over the years to an unbelievable average of 1.7MB. This takes forever to load on a slow mobile data connection and can rapidly eat into a users data limit.
Craig Buckler, writing on Sitepoint, has 10 quick and easy fixes we can all look at.
http://www.sitepoint.com/ten-quick-fixes-reduce-page-weight
To add to his comments, here are a few further thoughts.
Tools for testing page weight.
You can test page weight and get recommendations for reducing it using several tools. The best know is probably Google PageSpeed Insights at http://developers.google.com/speed/pagespeed/insights and another is GTmetrix at http://gtmetrix.com
Image Optimising/Compression
The Xat Image Optimiser I mentioned in a previous post is still the best tool I’ve found for the job. It’s easy to use and gives fine grain control over the applied compression.
CSS Compression
Now, a caveat, about CSS compression.
Depending on how your CSS is constructed you may find that CSS compression can’t handle it properly. Typically styles defined together can get confused, for example in this snippet:
.container .one.column,
.container .two.columns {
….
}
The bottom line is, as always, TEST any changes you make, thoroughly!
Server side code on your page
Another thing to be aware of is that if your HTML editor offers a ‘compress on publishing’ option, this may compress and mess up server side code on the page, in ASP.Net, Classic ASP or PHP etc.
Again, test everything thoroughly.