Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.
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.
Happy New Year! Craig looks at the latest browser chart to find the vendor winners and losers of 2013.
2014 has arrived! Craig makes his usual ten web predictions for the year ahead…
Craig looks back at his web predictions for 2013. Can he do any better than the five out ten he scored in 2012?
The average web page now weighs in at a staggering 1.7Mb. Craig discusses the problems caused by an obese website.
Have you experienced the strange flash when animating page elements in Chrome? Craig provides details and a few options for fixing the problem.
Did you see that stunning calendar icon in Photoshop? Could you recreate a scalable version in HTML5 and CSS3? You bet…