Been feeding your site too many JavaScript donuts?

That’s right, based on the top 1,000 most visited sites on the web, the average page download size has jumped 25 percent since this time last year — 626 kB per page to 784 kB. That’s a hefty weight gain in just a year and of course usually the larger the page, the slower the page.

The latest page size data comes from the HTTP Archive, which keeps monthly tabs on the size of web pages.

As you might expect the largest single type of content on the average page is still images, which account for 451kB of the total 784kB. Images alone do not, however, account for the rapid increase in page size.

Our friends over at Pingdom sliced and diced the HTTP Archive data and found that much of the remainder of the bloat can be blamed on JavaScript. CSS files are also getting bigger, but since they’re generally smaller to begin with the increase doesn’t add nearly as much to the bottom line.

Here’s Pingdom’s take on the matter:

In terms of sheer size, images are still the biggest factor, but the fastest-growing content type by far is JavaScript. It is also the second-largest content type in terms of size.

CSS content has increased 25 percent in size, which may seem like a lot, but we are still talking about relatively small files. That increase doesn’t matter as much. It does matter, though, that every single content type is growing. Size optimization seems to have gone out the window pretty much across the board.

Pingdom goes on to note that, if you expand the data sample beyond the top 1000 most visited sites the trend is even more dramatic, with the average page size at nearly 1MB.

So the web is getting fatter on a diet of ever-richer JavaScript files and more sophisticated CSS, it’s worth asking — does it matter? After all, broadband is getting faster, 3G and even 4G are spreading in the mobile space and web browsers are speeding up their JavaScript engines with every release. Do we really need to worry about larger download sizes?

Bigger pages aren’t necessarily a problem until they outstrip the corresponding increases in bandwidth and performance gains in web browsers. Bigger pages are, after all, a natural outcome of more complex, more powerful sites and web applications. But assuming all of your users have fast connections can be a mistake, particularly with a global audience. Sure users in South Korea might be able to download a 1MB page in the blink of an eye, but the same page is going to crawl over dialup in the rural United States.

What’s perhaps most alarming about the HTTP Archive data is the rate at which pages are growing. If the 25 percent jump were to continue it would mean that in just five years the average size of a webpage would nearly 2.5 MBs. And remember, that’s the average, many pages will be much, much larger. Relying on broadband speeds to keep pace with page size growth is risky at best.

At the same time throwing out modern app building tools like JavaScript is also a mistake. What’s disheartening about Pingdom’s analysis is that sites seem to be ignoring the middle ground and, according to Pingdom, “size optimization seems to have gone out the window.” The mystery is why very large, very popular websites would risk creating larger, potentially slower pages. That’s clearly a recipe for disgruntled users. New features are great, but if they slow down your site, no one is happy. It’s a well established fact that speed is the most important element of your website. Study after study show that users turn their backs on websites that take more than mere seconds to load.

There’s nothing you can do to help slim the top 1000 sites (unless you happen to be in charge of one of them), but if you’d like to put your own website on a diet there are number of tools that can help you compress and compact your site. We suggest starting with Web Page Test to get a basic look at how your site loads and where you might be able to compress files. Another handy tool is Google’s Page Speed service, which can help speed up your site. Yahoo’s YSlow is another invaluable tool for diagnosing page load problems.

Other things worth experimenting with include using CSS 3 to replace background images (where possible), making sure that your scripts load through a CDN and optimizing your site for mobile networks.

[Donut image by D Sharon Pruitt/Flickr/CC]