Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

Craig's articles

  1. An Introduction to Gulp.js

    Craig’s step-by-step tutorial provides an introduction to Gulp.js – a new task runner which can automate your page weight reduction and performance optimization tasks.

  2. The Complete Guide to Reducing Page Weight

    Total page weight increased by 32% in 2013 to reach a ludicrous 1.7Mb and 96 individual HTTP requests. That’s an average figure; half of all sites will be larger. Website obesity has become an epidemic and we web developers are to blame. There are no excuses.

    An overweight site will adversely affect your bottom line:

    The larger the download, the slower the experience. Not everyone has a 20Mb connection and this is especially true in developed western countries with aging copper infrastructures. It doesn’t matter how good your site is: users will not wait.
    Mobile web access has increased rapidly to reach almost one in four users. On a typical 3G connection, a 1.7MB page will take almost a minute to appear. Is there any point adopting Responsive Web Design techniques when your site won’t work effectively on those devices?
    Google’s page speed algorithms will downgrade your site and harm Search Engine Optimization efforts.
    The more code you have, the longer it takes to update and maintain.
    I predicted page weight will drop this year — and I hope not to be proved wrong. Fortunately, there are a number of quick fixes which will have an instant effect on site performance. All these techniques are well known, use today’s technologies, do not take considerable time, and can be implemented on an existing codebase without the need for redevelopment. Later on I’ll move on to more advanced techniques, then outline some tools to help you measure your success.

    The first three don’t actually slim your website, but put it in a corset and flattering clothing…

    1. Activate GZIP compression

    According to W3Techs.com, almost half of all websites do not enable compression. This is normally a server setting which should be enabled by your web host, although it may be possible to configure it yourself.

    2. Encourage browser caching

    If the browser can easily cache a file, it won’t necessarily need to download it again. Simple solutions include setting an appropriate Expires header, Last-Modified date or adopting ETags in the HTTP header.

    You may be able to configure your server to handle this automatically, e.g. here is an Apache .htaccess setting to cache all images for one month: