Speed: Why Your Website is Losing You Money
The average web page is growing at an alarming rate, around 20-25% per year for the last five years. It's an obesity problem of epic proportions that few marketers even know exists.
Why should you care?
There are three main reasons.
First, the amount of consumers who purchase something from you is inversely proportional to load time. When load times go up, sales go down.
Amazon estimates that one additional second would cost them $1.6 Billion dollars in sales — every 100ms costs them 1% of sales. Google ran tests with similar results showing that slowing its search results by just four tenths of a second they could lose 8 million searches per day.
Second, Google already takes page speed into account in rankings and is now going to start marking sites with a 'Slow To Load' label and a yellow triangle with an exclamation point. Potential visitors will see your site in search results, but they'll never click on the link to load it.
Third, a large majority of your users aren't on a fast cable connection or LTE. Here's a breakdown of how long it takes to load common sized websites at different network speeds:
| Internet Connection | 10 MB File | 6 MB | 3 MB | 1 MB |
|---|---|---|---|---|
| High Speed Cable (50Mbit) | 1 second | < 1 second | < 1 second | < 1 second |
| Typical Cable (25Mbit) | 3 seconds | 1 second | < 1 second | < 1 second |
| LTE (15Mbit) | 5 seconds | 3 seconds | 1 second | < 1 second |
| DSL (10Mbit) | 7 seconds | 4 seconds | 2 seconds | < 1 second |
| 3G HSPA+ (3Mbit) | 26 seconds | 15 seconds | 7 seconds | 2 seconds |
| 3G (1.5Mbit) | 52 seconds | 31 seconds | 15 seconds | 5 seconds |
| Edge (384Kbps) | 3 minutes, 28 seconds | 2 minutes, 5 seconds | 1 minute, 2 seconds | 20 seconds |
| GPRS (171Kbps) | 7 minutes, 47 seconds | 4 minutes, 40 seconds | 2 minutes, 20 seconds | 46 seconds |
| Dial Up (56Kbps) | 23 minutes, 48 seconds | 14 minutes, 17 seconds | 7 minutes, 8 seconds | 2 minutes, 22 seconds |
This does not take into account the amount of time it takes to look up resources and connect to their servers. That typically adds around a half a second per server to cellular connections. It can be downright brutal with 2G and 3G cellular networks.
Four in 10 Americans give up accessing a mobile shopping site that won't load in just three seconds.
But, here's the real reason this chart should scare you. The average internet connection in the US is 11.7 Mbit, while the average world wide is just 5.1 Mbit. Remember: That's the average!
How many of your US based visitors do you think are below 3 Mbit? Try 30%.
It can't be that bad. Can it?
Yes, and it's much worse than you think. Our target should be less than 2 MB in size to quickly reach a large majority of your visitors. Here are few websites that I visit on a regular basis.
Facebook I decided to take a quick peek at my Facebook feed. That cost me 228 different requests for files and 6.95MB. If you have videos set to autoplay, it's much, much worse.
228 request. If you mouse over anything it sends tracking request. After leaving the page sitting for 10 minutes, I broke 999 requests. I can't actually tell you how many because Safari stopped counting.
CNN The home page is 7.33MB. An article on the election was 10.9MB at first with 489 requested files. By the time the first video on that pages finishes autoplaying it's over 600 requests and 30MB.
The Verge Simply pulling up the first article on this tech news website made 357 requests to their servers.
BBC 246 requests and 4.86MB
Medium.com Here's an article about pages being too big and bloated. Apparently that's all talk because the page still made 55 requests and needed 2.64MB.
TGFI.Net Contrast all of these with our website, the one that you are on. We have 21 requests for 510K. The largest pages on our site – blog posts – are still less than 1MB.
Websites heavy on imagery and video are not always the worst offenders.
WHOA! My site is huge! How can I fix it?
There are five main reasons that websites have become so big.
- Designers love the look of custom fonts. However, they don't take into account that they just added 400KB to a page load.
- JavaScript and CSS Frameworks - Frameworks like Zurb Foundation and Twitter Bootstrap make designing responsive websites easier. They are also a kitchen sink be default.
- Many websites use the wrong type of images for the picture they are trying to display (GIF vs PNG vs JPG). They also don't minimize and compress the images.
- Videos are huge sucks of bandwidth. You need to make sure the video file you are sending to a person is optimized for their screen size and connection. You should also never autoload or autoplay videos.
- Marketers want to track everything and content sites want to display advertising. Do you really need 21 of these scripts to run TheVerge.com?
Google Chrome's Developer Tools allows you to simulate connection speeds.
Honestly, most designers, developers and marketers just don't know any better. When they test out their new designs they load quickly on their super fast 50Mbps cable connection. It's also natural to believe that everyone is in a similar situation to your self.
I'm proud of you though. Since you were willing to read this far, I know you are smart enough to know that it's just not the case. Together we can fix this by reversing some of the issues noted above.
There's even a really quick way to get started. Using Google Chrome, you can make it act like a slower Internet connection. Trust me, you'll be shocked at how bad it can be.