Your Bottom Line Literally Depends on Milliseconds: 5 Advanced Techniques to Optimize Your Page Load Speed
--
The most profound lesson I’ve learned through years in marketing is this: people are unbelievably lazy and impatient.
It’s no surprise that 53% of mobile users will leave a website if it takes more than three seconds to load. Yes, three seconds is already too long for most people.
This may seem laughable. However, for most online businesses, this is practically a death sentence.
Anyway, this is probably not new to you. If you are involved in marketing to any extent, you must be aware that page load speed is important.
But you may not realize just how important it is — and this is what this article is about.
As you’ll learn, a half-second decrease in waiting time can make a world of difference for you. In fact, for some companies, it’s a matter of extra hundreds of thousands of dollars in profit.
Yeah, that much.
Here I’ll show you a couple of spectacular case studies proving that each millisecond counts. To make it more actionable, I’ll also give you five advanced tips on how to speed up your load speed and get ahead of the competition.
Let’s dive in.
How Mobify Increased Their Revenue with a 0.5-second Decrease in Load Speed
Mobify is a global digital platform that allows retailers to set up their shops online.
In 2016, they made an extraordinary revelation: for every 0.5-second decrease in page load speed, they achieved a whopping $376,789 increase in revenue. It just goes to show how far a minuscule change in website performance can go.
Below is an infographic with more data and findings from their experiment:
The numbers don’t lie. And if you think about it, it makes total sense. Shoppers are more likely to stay on the website if it loads fast enough. And those who browse more, naturally, will buy more. With this said, an increase of just 1-page view per user led to a $398,484 increase in revenue for Mobify.
For some of you standing on the threshold of a breakeven, one second could be a game changer.
Case Studies from Pinterest and Misguided
The next case study is from Pinterest. After rebuilding their site for performance, they managed to cut their wait times by 40%. As a result, they saw a 15% increase in both site registration and search engine traffic.
Fashion retailer Missguided had an incredible success by optimizing their page speed on mobile. Initially, the company was having issues with their page load time on Android. By removing some third-party services, they managed to push the load time down by 4 seconds. A 56% increase in revenue from Android users followed!
How 850 Milliseconds Led to a 10% Increase in Conversions
Yet one more fantastic turnaround: COOK shortened their page load time by a mere 850 milliseconds, or 0.85 seconds, and saw a 7% increase in conversions, 10% increase in pages per session, and 7% decrease in “bounce rates”.
To sum it up, faster websites ensure deeper user engagement, which ultimately leads to higher conversion. To sum it up even further, faster websites mean more profit.
It’s simple as that.
5 Advanced Page Speed Optimization Techniques
Now that we’ve established that today each millisecond counts, let’s talk about how to actually improve one’s website. We won’t touch on the basics of web optimization and get right into the advanced tactics and techniques instead.
Combine and minify JavaScript and CSS files to reduce number of HTTP requests
Every time your website is visited, the user’s browser will ping your web server and request for the files that contain your site’s information, such as HTML, CSS, and JavaScript files, images, videos, and other files. This is called an HTTP request. Once the files are sent, the browser will then render the website for the user.
However, the more files your site has, the more HTTP requests are needed to render the page, which will eventually slow down your page load speed. In order to reduce the number of files needed to load the page, I recommend combining and minifying the files.
Minifying the files refers to removing all unnecessary spaces, characters, and lines from your HTML, CSS, and JavaScript files. Without this extra baggage, you can expect your site to run smoother and faster.
You can also opt to combine files, such as combining your 5 external Javascript files and 5 external CSS files into a single file would mean that it would only take 2 HTTP requests, instead of 10. Hubspot recommends a total of 10–30 files, but anywhere below 99 per page is good enough, according to the previous Head Performance Engineer at Yahoo! and Google.
If you run a WordPress site, I recommend WP Rocket, a plugin that allows you to easily access, minify, and combine files. It takes less than 10 minutes to minify files using this program.
Utilize asynchronous loading
When a user’s browser renders a page, it loads the information from top to bottom. That means once it reaches a CSS or Javascript file, it’ll stop loading everything else on the page until the CSS/Javascript has been fully loaded.
However, with asynchronous loading, the browser will render all the files simultaneously. Using this technique will ensure smooth loading of the page and will increase the overall loading speed of the page — or at least the part of it that is visible to the user.
Minimize Time to First Byte (TTFB)
After shortening the time it takes for your page to fully load, you’ll also need to consider the amount of time it takes to actually start loading.
TTFB, or time to first byte, is the duration of time a browser waits before receiving the first byte of data from the server. An optimized website should have a TTFB of fewer than 200 milliseconds. Slow TTFB is usually caused by high user traffic, dynamic web content, network issues, or web server configuration.
To check how long your TTFB is, Chrome’s Developer Tools provides the necessary insights. Simply click the “Network” tab and hover over the first item in the “Waterfall” column in Developer Tools.
However, it’s important to remember that the results of Developer Tools are affected by your own Internet connection. You may also opt to use third-party tools such as WebPageTest to find out your website’s TTFB.
As for optimization, I recommend Moz’s primer on how to measure and improve TTFF.
Minimize round-trip times (RTTs) by using a CDN
RTT or Round-trip Time is another critical thing on the checklist to look at.
RTT, essentially, refers to the time from when a request is sent from a browser to when it receives a response from the corresponding server. Network administrators use RTT to diagnose the health of the network connection. So, the shorter the RTT, the faster users are able to request and receive information.
So, how exactly does one minimize RTT? By implementing a CDN.
A CDN, or Content Delivery Network, is a network of servers placed at strategic locations and designed to hold a copy of website’s content. Its primary mission is to shorten the virtual distance between a browser and a server. If a user in Australia stumbles upon your UK-hosted website, then a CDN will dispatch the website’s content from a local server (also known as PoPs or points of presence), making it much faster for both parties.
Ultimately, it is a CDN’s role to improve site loading speed and overall performance. It handles high traffic loads, blocks spammers and bots, reduces bandwidth consumption, and balances the load between multiple servers.
If you’re running an international business that expects plenty of overseas traffic, then a CDN is an absolute must.
Install lazy loading for your site
Another way to improve your users’ experience is by having the top of the page (or the content above-the-fold) load faster while the rest of the page takes a few more seconds to load. This is, essentially, lazy loading and it’s especially helpful for sites that have tons of dynamic content below the fold.
Say, you have a blog post with more than 10 photos. The user’s browser would usually download all the photos before showing anything else on the page, but with lazy loading, it’ll load first the content within view and then load the photos afterward.
This cuts down on the load time of the content that matters to the user most, which is critical from a UX standpoint. And it’s as simple as installing plugins, such as Lazy Load, BJ Lazy Load,and WP Rocket.
Stop Underestimating This and Take Action Now
As you’ve learned, page speed is not just important. It’s literally critical. Increasing your page load speed by mere milliseconds can give you a solid boost of revenue. The ROI is almost guaranteed.
Manipulating your site’s TFFB and CSS and Javascript files may seem daunting If you are not a developer. But if you do a quick Google search, you’ll find that there are always a few tools/plugins out there that will do the job for you — with minimal coding knowledge.
Some of the techniques, such as asynchronous loading, might need some help from a developer, though. But it’s worth it.
