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 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.
Do you want to become a developer? Are you considering a switch in your programming career? Do you want to make a million from your next project? Craig offers several pragmatic programming propositions.
Craig takes his regular look at the browser usage charts provided by StatCounter. Safari was the only winner in January 2014, but the statistics may not be all they seem…
In the final part of Craig’s webpage weight-loss program, he reveals the more difficult, development lifestyle-changing tasks.
Unless you measure your pages you’ll never know whether you’re winning the weight war! Craig lists ten of the best analysis tools.
In the second part of Craig’s page weight reduction series he suggests ten further optimizations you can make to your code.
Chrome 32 has been released with a stack of new features ranging from the innovative to the bizarre.
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:
Mobile browsers use an artificial 300ms delay when clicking items on your page. Can you prevent it to make your application appear faster and more responsive?
Using screen size to assess device capabilities is a crude mechanism. Fortunately, the new Network Information API can help assess bandwidth to ensure your site remains responsive everywhere.