Way back in 2008 (when Miley Cyrus was still a doe-eyed Disney idol and Tina Fey was busting out her “I can see Russia from my house” impression), Aberdeen Group published an eye-opening report linking website load times to potential revenue. They found that business performance begins to suffer after 5.1 seconds of delay—and every additional second averages a 7% loss in conversions, 11% reduction in page views, and 16% reduction in overall customer satisfaction.
Did we mention this was 2008? When the global average of internet users was around 1.4 billion?
Today, the global average of internet users has more than doubled at 3.3 billion, and experts are still referencing the Aberdeen report like nothing has changed. But the truth is, as scary as those statistics were back then, things have changed; the stakes are even higher now. With consumers increasingly more connected to faster broadband—both at home and on the go—we’re smack in the middle of a TL;DR epoch, where your average goldfish has a longer attention span than your average human being. If you can get folks to visit your website in the first place, you only have about 10 seconds to convince them to stay! So the key is to save as much time as you can, where consumers are bound to be the most impatient—right after they’ve hit that enter key and are waiting for your site to deliver the goods.
Here are 3 simple ways to optimize your site for faster loading.
1. Wrangle out-of-control images
If you’re running an eCommerce site, there’s a good chance a lot of your loading time will come from a whole catalog of images. And while adding crisp, high-res product photos might seem like a good way to entice potential buyers, that’s only going to work if they’re willing to wait for them to load. Being mindful of image types and sizes will make a big difference.
- Size images appropriately before uploading them. Uploading a huge 4000px-wide image and setting the width parameters to 300px wide means your users’ browsers are still forced to upload that full-sized image first, and then wait again for it to be resized. Don’t be lazy; if you define a standard image format and size, and stay consistent as you go, you can save yourself an optimization overhaul later.
- Speaking of formats: there are appropriate image formats for everything you’re trying to accomplish on your site. While JPEGs, PNGs, and GIFs are the most commonly supported types, sites that rely heavily on images (like product photos for eCommerce) will typically perform better with JPEGs—which provide the best image quality at the smallest size.
- Don’t leave your src code empty. The src attribute tells the browser where it should look to find the image it’s supposed to be displaying. If this is empty, the server spends precious time requesting this information from the directory, which could result in slower loading and (even worse) broken images.
2. Enable browser caching
You might be uploading new product images on a semi-regular basis, but your logo? That’s likely to stay the same in the long term. Instead of making a customer’s browser request data to download that image every time, cache it! By leveraging browser caching you allow the customer’s browser to remember what it has already loaded (everything from images, to scripts, and more), so it doesn’t have to waste time reloading the same elements for every page within your site or every subsequent site visit. You can do this for elements that seldom change, or for pages that have a lot of files to load—and you can (and should) set appropriate expiration dates for all the things that need to be fresh and new for your visitors each time.
3. Put fast-loading, cool shit “Above the Fold”
Have we mentioned how we hate the whole “Above the Fold” thing? That’s because it’s an antiquated practice that assumes today’s savvy internet- and mobile-users (representing a whopping 60% of the global population) have never learned to scroll—which is both rude and wrong. But that’s not to say that the “Above the Fold” region of your site isn’t really important; with only 10 seconds to convince visitors to stay, this is where it really shines. If your content above the fold loads quickly, you have a better chance of grabbing your customer’s attention and keeping it while other assets continue loading further on down the page. The key here is to prioritize content that will seal the deal and make them stick around. Depending on your industry or target audience, this might be a bold headline, provocative product photo, or even a video.