Have you ever noticed how even with a nice fast browser like Chrome, some sites can be really slow to load, and even stutter as you try to scroll down the page? Why is that?
Heck, why should we even care? Your content is already great, you’ve put in the time to make the design awesome, you’ve tailored your CMS technology to your content, and you’ve made sure your visitors can find the content they want. You’ve built it, and they will come, right?
Google has been trying to explain this since at least 2009. According to Google Research’s Speed Matters blog, slowing down a page as little as four-tenths of a second lowered traffic by half a percent.
Now, considering that conversion rates are typically around 2% to start with, do you really want to throw away any visitors?
KISSmetrics puts it succintly: “If a site is making $100,000 per day, a 1 second page delay could cost you $2.5 million in lost sales every year.”
“This site takes forever,” Tom said slowly.
So what makes your site slow? Assuming that you’ve optimized your images, aren’t loading unneeded CSS and scripts, and are generally being a good craftsman, it’s probably not your own site.
They’re incredibly popular. Check out all the widgets and trackers used by these popular sites:
But when you add half a dozen or a dozen widgets, you start to slow down your page loads. Thus lowers conversion – your visitors become impatient and abandon your site.
Show me the data!
I went digging, looking at some of the worst offenders, such as RadioShack.com and Engadget. (I wanted to analyze Huffington Post, but their site has so many trackers that even the web inspector was getting wiggy.)
What I found was that it’s almost never any single widget or plug-in that was the problem. Here’s a pretty typical one – a SellPoint commerce tool used at RadioShack.com:
It takes the browser a moment to look up the server. It then sends a request, waits for about a twentieth of a second for a reply, and in about a hundredth of a second it has the script. This resource also blocks blocks page load for about 79ms – less than a tenth of a second. That’s a bit higher than most, but within variance. Overall load time for Sellpoint: 100–150ms. Pretty good.
But RadioShack.com has 23 widgets and trackers, and many of them require several resource requests to get everything they need. Radioshack’s core page is pretty tight, but by the time all the rest of the resources load up, all those tenths of a second have added up to four seconds before the page is actually responsive, and it takes eight seconds to finish loading every last resource.
The situation on news sites is even worse:
Engadget loads 23 services, but they’re not as fast as the services RadioShack uses. Here we see an atwola.com resource blocking for 67ms and taking over 90ms to reply, just to load a measly 860 bytes of data. (That’s about three paragraphs worth.)
The DOM was ready (which means the user can see content on the screen) in 1.3 seconds, which is great. But it took 15.8 seconds to load all the resources Engadget has piled on. And while that was happening, scrolling was janky and unpleasant, and the layout would flicker every few seconds as new scripts ran.
And then there’s security.
The hack was functionally harmless – a political statement, not a financial attack or identity takeover or botnet installer. But it could have been much worse.
With every outside service you add, you add a potential vulnerability.
TL;DR: Keep it under half a dozen.
So, should you eschew all of those fantastic external services? No way! They’re great. Keep using them. But don’t use all of them.
As a rule of thumb, you should expect that each service you deploy will add around a 100–150ms to your page load time. You can afford to load up four or five, maybe even six, assuming the developers of the service themselves value performance.
Be choosy. Don’t duplicate. Pick one stats tool and love it. One marketing automation or visitor tracker. One ad network. One social sharing platform. You get the picture.
Bonus tip: How to Speed Up Your Web Surfing
Install a tracker blocker. It’s really that easy. Some good ones include:
- Ghostery – I’m quite fond of this comprehensive blocker. It provides fine-grained blocking and is regularly updated.
- Privacy Badger – From the EFF, Privacy Badger only blocks services that appear to be tracking you across multiple sites without permission. Slick.
- Adblock Plus – The grandaddy of ad blockers, this community project targets ads, popups and video ads.