As we approach the end of 2012, I thought I’d consult the HTTP Archive Report which collates technology statistics from 300,000 of the web’s most popular sites. The staggering news: average page weight has bloated by 30% in one year to reach 1,250Kb. Yes, 1.25Mb.
Some of this obesity can be explained by the holiday and gift-giving season. If you examine the top 100 sites, page weights have expanded from 584Kb to 955Kb in two months — a massive 64% increase. The extra bulk is primarily images and Flash advertising. That may reduce once normality resumes and people become fed up with persistent panic shopping.
Breaking these figures down into specific technologies:
| technology | end 2011 | end 2012 | increase |
|---|---|---|---|
| HTML | 42Kb | 52Kb | 24% |
| JavaScript | 167Kb | 214Kb | 28% |
| CSS | 32Kb | 41Kb | 28% |
| Flash | 90Kb | 90Kb | 0% |
| Other | 629Kb | 852Kb | 35% |
The vast majority of these pages are publicly-accessible content websites rather than JavaScript-heavy applications or canvas-based games. ‘Other’ is mostly media such as images but will also include font stacks. Custom font usage has increased and is used by 13% of websites — up from 7% a year ago.
Flash has remained steady. The technology may be in decline but it remains the most viable option for cross-browser animated advertising. Besides, an average weight of 90Kb is a mere 7% of the total weight.
An increase in HTML code is likely as the industry moves toward HTML5. Simple semantic changes such as replacing a div with header or footer requires a few more bytes. Some functionality and validation can also be implemented in mark-up which was not previously possible.
A rise in CSS is also understandable. Modern CSS3 effects incur further properties and many require vendor-specific prefixes (that said, many developers don’t use all of them appropriately — see The Impending CSS Vendor Prefix Catastrophe).
However, the combined HTML5 and CSS increase should be offset by a far greater decrease in image file sizes. Fewer images should be required given that rounded corners, shadows, gradients and translations permit effects where graphics were previously required.
Similarly, many JavaScript-powered effects are unnecessary and less sophisticated than equivalent CSS3 transitions and animations. Admittedly we are in a transitionary period: most JavaScript libraries still provide animation functions for IE9 and below. But that doesn’t explain the 28% jump in file sizes.
I suspect two primary reasons for the page bloat. A fashion for large, high-quality, full-screen textures and photographs. This can only be ‘fixed’ by educating designers and clients. The second reason is more endemic: developer laziness. Do you or or colleagues…
- rely on one-size-fits-all frameworks and never remove redundant code?
- use multiple libraries or cut-and-paste coding to achieve different effects?
- not concern yourself with the consequences of page weight?
The first consequence is SEO. The overall impact may be relatively minor, but Google factors page speed into its ranking algorithms. Those who don’t care about SEO shouldn’t consider themselves professional web developers.
The next issue is user experience. Bandwidth is rarely plentiful and it’s never free; bloated pages result in slower downloads, execution and response times. This is especially evident on mobile devices — you probably have a blacklist of sites to avoid on your smart phone. Does it include your own site?
Finally, let’s not forget that 1.25Mb pages is an average. Assuming a normal distribution, half of those surveyed will be larger. That’s ridiculous for content websites and, ultimately, it will cost them visitors.
Should your site go on a diet? Why has it gained weight? Are you planning to resolve the problem?
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
