You have probably heard a lot of stats that prove the importance of enhancing your site's page speed. Because of the importance to your users and a factor that Google will apply in the mobile-first index, it’s important to note.
Here are a couple of examples to refresh your memory of its importance:
- 47% of consumers expect a site to load in 2 seconds or less, and they are likely to abandon it if it doesn’t load within 3 seconds (source)
- If a page takes longer than 10 seconds to load, further 30% of users will go somewhere else (source)
- And a 3 second waiting time decreases customer loyalty by 16% (source)
Finally, my favorite one, quoted via CDNetworks:
“Every one-second delay in page load time could lead to $1.6B in annual losses for major online merchants.”
And I’m sure you also already know that once Google finally launches the mobile-first index, its significance as a ranking factor will only increase. We know Google’s end goal and focus is to deliver the best search experience for their users.
But I guess that although you understand why you should improve the page speed, you may not know the main factors that effect page speed.
And this post will focus on five ways to help you remedy your page speed issues.
Interested? Then let's get started.
#1. Leverage Browser Caching
In Page Speed recommendations, Google states:
“Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor.“
The search engine’s team then concludes (note, the emphasis in bold is mine):
“All server responses should specify a caching policy to help the client determine if and when it can reuse a previously fetched response.”
And that’s the secret to this strategy - allowing a browser to remember and reuse resources it has already downloaded during the previous visit.
As a result, when a person visits another page on the site or returns to it again, their browser does not need to request such elements as logos, CSS files, and other scripts. Instead, it reuses the ones it has already downloaded during the previous visit, significantly decreasing the time required for a page to load.
With browser caching, all your website files get stored in a browser’s cache, instead of being pulled out over and over again with each visit.
But how long should a browser retain those elements in cache? Here's a quote from Google on this:
“We recommend a minimum cache time of one week and preferably up to one year for static assets or assets that change infrequently.”
#2. Reduce Server Response Time
A server response time describes the length of time it takes for a server to respond to a browser request. In other words, it’s the gap from the moment a user types a URL or clicks on a navigation button, and when the server begins to send files to the browser.
And needless to say, reducing that delay greatly improves your page response time.
In general, three elements affect your server response time:
- Your traffic levels. Naturally, the more requests server has to process at once, the slower it might work.
- Resource usage. Reducing the number of resources a browser has to request will reduce the response time.
- Server and hosting platform. Finally, your server setup can play a role in its response capabilities.
But naturally, you cannot decrease your traffic. In fact, it’s the opposite that you aim for, right?
However, you can reduce resource usage (more on which later in this post) or upgrade to a better hosting platform to handle growing traffic.
#3. Store Website Assets on a Content Delivery Network
Did you know that 80% of the server response time is spent on a front-end (elements displayed in the browser)?
Here, let me show you (note, a report generated by seoClarity’s Page Speed tool). Most issues found on this page relate to front-end files. The majority of potential delays are a result of the time it takes to download the code, images, and other website assets.
But do you also know that the closer a server with your files is to a user, the quicker they’ll see the site?
(Of course, the opposite is also true. The further away a person is from your server, the longer it’ll take for a page to load).
To combat this proximity issue, implement a content delivery network (CDN).
A CDN is a collection of web servers distributed in various locations around the globe, allowing you to always serve files from one that’s the closest to your visitor. Here’s a good visual representation of how CDN works:
Notice that, although the original server resides in the US, visitors from Europe or Asia can access those files from servers much closer to them. That’s the key benefit of using Content Delivery Networks - a significant boost in page load time due to placing website assets closer to the user.
This goes without saying: The further you develop your site, the more code you add.
And that code can get messy. Really messy.
In fact, all those additional spaces, line breaks, comments and many other, unnecessary elements can significantly slow down your site. How? Because browsers need to go through it all to display a page, and that simply takes time.
Just compare those two versions of the same code:
The top section of the image shows an original HTML file. The bottom, a minified version.
(And I admit, the top looks much better. It’s nicer to look at and read.)
But does minifying the code deliver any meaningful results?
Absolutely. Just take a look at the suggestions from our Page Speed tool:
#5. Display Above-the-Fold Content First
Here’s another code hack that will help you improve page speed:
Split your CSS file into two to allow above-the-fold content to load faster.
Because, let’s face it - as long as your visitors see something on a page, they’ll be satisfied, right? After all, they no longer need to wait for a page to load and can start consuming the content straight away. And when they’re ready to see the rest, their browser would have already loaded it.
But to achieve this, you need to split the CSS into two sections:
- Inline CSS for the above-the-fold content that will require no additional server request to load, and
- The rest, stored in an external file that a browser will request when loading the remainder of the page.
One challenge with this approach, however, is that adding inline styles increases the amount of code a browser has to read, before displaying a webpage. Plus, it may make making some edits more awkward, as they’d have to happen on a page level, rather than a single, external file.
The relationship between a site’s speed and SEO is irrefutable. And hopefully after reading this article, you have a clear idea where to start improving your page speed to make your website load faster.