The HTTP Archive Report has published their end-of-year technology statistics which collate information from 300,000 of the web’s most popular websites. Average page weight has bloated by 32% in one year to reach more than 1,700Kb — or 1.7Mb — and now comprises 96 individual HTTP requests. It’s worse than the staggering 30% increase in 2012!
Some of the increase can be explained by increased ecommerce activity and advertising as people hunt for gifts. However, few web sites lose weight in January and continue to gorge themselves throughout the year.
The report analyzes publicly-accessible content and shopping web sites rather than complex web applications. It provides a breakdown of the specific technologies used:
| technology | end 2012 | end 2013 | increase |
|---|---|---|---|
| HTML | 54Kb | 57Kb | +6% |
| CSS | 35Kb | 46Kb | +31% |
| JavaScript | 211Kb | 276Kb | +31% |
| Images | 793Kb | 1,030Kb | +30% |
| Flash | 92Kb | 87Kb | -5% |
| Other | 101Kb | 205Kb | +103% |
| Total | 1,286Kb | 1,701Kb | +32% |
The rise in HTML is fairly negligible although it’s slightly surprising given the trend for cut-down content and simpler, flatter designs. 57Kb is quite chunky for just content.
CSS sizes have increased by 11Kb on average. Some could be explained by Responsive Web Design and CSS3 effects, but a reduced requirement for vendor prefixes should have helped?
However, any rise in HTML and CSS can be offset by a decrease in JavaScript code. There’s less reason to use large script libraries now we have better browser consistency and CSS3 animations. That’s not happened and the average page now loads 18 individual script files; concatenation and minification would help immensely.
Unsurprisingly, Flash has dropped by a few kilobytes and pages using the plugin have fallen from 37% to 32%. Advertisers remain the primary users but HTML5 alternatives are starting to appear now Responsive Web Design is a mainstream technique.
“Other” files have doubled in size. Almost a third of this growth can be attributed to webfonts and webfont icon sets which is acceptable given that it should lead to a reduction in image use … except it hasn’t. Perhaps high-density photographs can justify some increase, but who is loading a megabyte of images on every page?
The figures are more shocking when you consider they’re averages. Approximately half the web sites analyzed will be more obese. We web developers should hold our heads in shame.
The Reasons
What can we blame? My primary suspects are:
- Bloated CMS Templates
Typical WordPress themes are crammed full of features. Many will be third-party styles and widgets the author has added to make the theme more useful or attractive to buyers. Many features will not be used but the files are still present. - HTML5 Boilerplates
A boilerplate may save time but it’s important to understand they are generic templates. The styles and scripts contain features you’ll never use and the HTML can be verbose with deeply-nested elements and long-winded, descriptive class names. Few developers bother to remove redundant code. - Carelessness
Developers are inherently lazy; we write software to make tasks easier. However, if you’re not concerned about the consequences of page weight, you should have your web license revoked.
Even if we forget website SEO, software efficiency and user responsiveness, one in five web visits is from a phone. On the most efficient mobile network a 1.7Mb page will take one minute to download — assuming the phone or tablet is able to render it effectively. Would a potential customer be prepared to wait?
Mobile connectivity and bandwidth continues to improve but it rarely jumps 30% in one year. It’s ironic that developers are willing to adopt RWD techniques while making the same website unusable on the devices they’re targeting.
I’m appalled. Admittedly, I started development in the dial-up days when 100Kb was considered excessive, but are today’s web pages seventeen times better than they were back then?
Will web page weights ever reduce? Is your site clinically obese? How did it get into that state?
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.
