We have an epidemic spreading on the Internet right now. No, it’s not a computer virus. No, I’m not talking about a technology like Java or Flash. What I’m talking about is an epidemic of obesity. Too many web pages are overweight, and they’re clogging up our broadband and mobile connections like a fleet of mobility scooters clogging the aisles of a Walmart.
Michelle Obama isn’t coming to save the day on the obesity of your webpage any time soon though, so you had probably best start taking the matter of page weight into your own hands.
“Page weight” refers to the size of a webpage, and the count and size of all its associated assets like stylesheets, script files, images, and tracking pixels.
How can you see if your page weight is unhealthy? If you have Google Chrome, you’re well equipped to do some basic diagnostics. Let’s talk about how to find some of those metrics I just mentioned in the last paragraph. Go ahead and open up your site’s homepage in Chrome. Then fire up the debug tools:
You’ll see the developer tools panel open up either at the bottom of your page or in a new window. Open up the “Network” tab.
Now here’s the tricky part, hold down the Ctrl key and click the refresh button: (Note at the time of this writing, this doesn’t seem to consistently work. If you’re having trouble with it, you can try using Anonymous Browsing mode instead to avoid caching. Open the dev tools before visiting your page.)
By holding down the Ctrl key, you’ve forced the page to reload all its assets as if it were the first time you had ever visited. No caching. You’ll see a bunch of files download there in the Network tab. If you scroll to the bottom you’ll see a count of assets, and a total size.
In this case we’ve downloaded 58 assets, at 270 KB. Things loaded in just a bit over a second too, which is OK. In this case, we may be a bit overweight, but we’re not truly obese.
So what makes a page obese? There are no hard-and-fast rules. We’ll have to make some sweeping generalizations here, but some warning signs to look for are:
- If your page is pretty simple to your eyes (maybe only a few images, mostly text), then anything over a couple hundred KB may be too big.
- If you’re up above 500 KB you’re getting pretty unwieldy. This can be OK if you have lots of multimedia on your site.
- Anything around megabyte (1 MB/1024KB) or more is almost certainly way too big. There are very few good reasons for a page to be this large.
- If you have lots of requests (say, 50 or more) you’re probably losing a lot of efficiency. This can add up to be a problem.
- Slow load times. Anything more than ~3-5 seconds is really bad, and anything over 10 seconds is almost unforgivable. This can be due to many other things than page weight, but it’s a common symptom of a big page.
The deadliest symptom of page weight is slow load times. A great deal has been written about the effects of a slow page on conversion rates. A slow page can have a substantial negative impact on your conversions, repeat visits, time on site, and other key metrics. To quote from the linked article:
- “A 1 second delay in page response can result in a 7% reduction in conversions.”
- “47% of consumers expect a web page to load in 2 seconds or less.”
- “40% of people abandon a website that takes more than 3 seconds to load.”
And mobile users are often even more sensitive to page load times.
Another side effect of slow load times is that some search engines will ding you in their ratings if your site is slow. Google has said outright that they penalize search rankings of sites that have slow load times.
A more subtle complication of a large page is increased cost. If the huge assets are ones you’re hosting yourself (rather than linked from offsite) you’re eating up server resources like bandwidth and processing power (from serving extra requests). If your assets are on a CDN that you pay for, you may be paying a lot more than you need.
A very large page can also be costing your visitors money, especially your mobile visitors. No one expects a single page to generate a couple megabytes of traffic. Your mobile users often have bandwidth quotas and by having a huge page, you’re inflicting a good-sized dent in their quotas.
So what can you do? Well, it depends on who you are, what skills you have, and how much access you have to your website. I’ll lay out a fairly broad range of tips here.
- Audit your tracking codes, 3rd party tools, and scripts. You may have a bunch of jQuery plugins that you’re not using but still including, or tracking pixels that are no longer valid. Maybe you’re including both AddThis and ShareThis? Maybe you’re including jQuery twice (this happens more often than you’d think).
- Compress your images. If you have individual photos that are too big, try using a bit stronger compression. JPEGs can often stand to lose some additional quality. If any of your images are being scaled down with CSS or width/height attributes in your HTML, you could easily be adding multiple MB of fat to your page.
- Merge images into sprites. If you have a bunch of little images that are part of your navigation or user interface, it’s usually much faster for your visitors to merge them into a sprite. If you use a tool like SASS, it can even do this for you.
- Use compression. Most web servers can do this for you automatically.
- Got gradients, fancy animations, or textured backgrounds? See if you can replace those with a few lines of CSS3.
- Make sure your JS, CSS, and images are caching. This won’t help your first page load, but it’ll help subsequent loads.
Finally if you decide the only way to be sure is to nuke the entire site from orbit and start over, make sure you’re using a sharper set of tools:
- Feature re-evaluation. Decide if you really need that image carousel (you probably don’t), or that huge bar of share tools on your homepage.
- The aforementioned RequireJS can really cut down on the number of scripts you need to load up front.
- Look for smaller plugins or tools for simple tasks. Slideshows, tabs, drop down menus, these are things that shouldn’t need 50KB of JS.
Best of luck in your page weight loss, and a very sincere thank you for your interest in making the web a better place for all of us.
If you’re a non-profit organization that needs help cleaning up or rebuilding your site, give us a call and learn how we can help.