Back in 2014, Hubspot discovered that, on average, 55% of website visitors spend only 15 seconds on the websites that they visited. Another study, conducted only a year later in 2015, revealed that visitors spend only 10 seconds on a website.
We're in 2017 now (I'm sure you see where I'm going with this).
In a world where content is becoming so accessible, where mobile devices are quite literally within arms reach 24 hours a day, users can pretty much find engaging content without much struggle. This is why when a website doesn't look interesting enough, or seems complicated, or worse, doesn't load quickly enough for the impatient user, that website is tossed aside within seconds.
3 seconds, to be exact.
Loading Times — What Users Expect
47% of website visitors expect a webpage to load within 2 seconds or less, and 40% of visitors abandon a website that takes more than 3 seconds to load. You're a user too — think about it. How impatient are you when it comes to browsing?
Every 1-second delay results in a 7% reduction in conversions, so if an e-commerce website can potentially earn $100,000 per day, a 1-second delay could result in a loss of revenue totalling $2.5 million every year. Just this statistic alone is reason enough to care about loading times, but if you're interested to learn more, there's plenty more statistics over at Kissmetrics.
Let's talk about how we can improve loading times, and how to keep the user engaged during and once the website has loaded.
How TTFB (Time to First Byte) Affects SEO
We already know that loading times affect SEO, but how exactly does Google monitor this? By a little metric called TTFB (Time to First Byte).
Between the moment that the user enters the website and when the content actually starts loading, is called the Time to First Byte, or TTFB. During this time the browser attempts to make a connection to the web server, collect the necessary resources, and then tries to send them back to you/the web browser, and the quicker it can do that, the better your search ranking will be and less likely your visitors are to leave. But how do we decrease the TTFB?
Reducing TTFB
Reducing TTFB (Time to First Byte) is complex, but not complicated. It does require some reading up, but I'll try to outline the basics here. If you have zero control over where the web server is located, much of the advice here won't apply to you (because if the server is geographically far away from the user, the data has to travel further, and thus it will take longer).
Priority number one is to host websites on a lightening fast, dedicated server. Again, some reading up is required and you'll have to ask around to see which hosting companies are the best. Priority number two is to use a CDN (Content Delivery Network). As described above, resource location is important—CDN's reduce the physical distance of your resources, so they load faster.
By using a free service like Pingdom Tools, you can measure the TTFB and it'll also explain how you can rectify the areas where you're going wrong.
Here's a super-useful Page Speed Checklist that you should totally bookmark, which tells you how to enable Gzip file compression, minify HTML/CSS/JS resources, reduce redirect latency, optimise images, leverage browser caching, improve server response time, and implement a CDN (as mentioned above).
Critical CSS and Asynchronous Loading
Okay, so the browser has made contact with the server, it's started to load the assets, and the user is already ready to leave (users are impatience little swines, aren't they we?). So how do we make the website itself load faster?
Critical CSS
Back in the day, we were taught that external CSS is better, although in recent years it's become desirable to declare a little inline CSS in the <head> section of the webpage. This inline CSS should contain the styles used to render the above-the-fold content, as this gives the user something to look at while the rest of the webpage is loading. We call this CSS, critical CSS.
Webpages can't render external CSS until the entire file has been loaded up, which annoys users as it causes unnecessary delay in letting the users view the webpage correctly. When we render the above-the-fold content using critical CSS, we call this perceived performance, as it makes the webpage appear as if it's loaded, when in fact the below-the-fold content hasn't yet.
Asynchronous Loading and Deferred JavaScript
<script async src="script.js">
What the async attribute does, is say to the web browser: "Hey, you can download me while you're downloading other resources". Without async, loading of other assets is momentarily paused, essentially increasing the load time.
Save asynchronous loading for non-important JavaScript.
<script defer src="script.js">
Similarly to async, defer essentially says: "Please serve me last, I'm not that important", which has the same effect of inserting JavaScript before the closing </body> tag. Obviously, both of these attributes don't affect overall loading times, but it does increase perceived performance (i.e. the webpage appears to have loaded, even if it still has a little way to go).
If the user is staring at the screen, waiting for the text and images to appear, because you have resource-blocking scripts that are still loading, they will almost certainly click away. Always deliver the essential assets and content first.
Bonus Advice: Reduce Visual Noise
Great, you've fully loaded the webpage. Now what? Have we locked the user in our grasp? Nope, not even close! It needs to be painfully clear to the user:
- Who you are, and what you do
- What you're offering, and how it benefits the user
- How the user can reap those benefits
Generally speaking, this step is about reducing visual noise, or for the lack of a fancy term, "cutting the crap". Visitors need to see that there are benefits to sticking around and dedicating their valuable time, and there needs to be clear instruction as to how the user can activate those benefits (simple copy, clear call-to-action, etc). We also need to ensure that there's nothing immediately off-putting, such as autoplay video (users hate that with a vengeance!).
———
Delivering quality content in the shortest amount of time imaginable isn't an act of overreaction. People are impatient, and they won't wait around for a millisecond more than they want to! Deliver content quickly and you will notice results quickly.
