Why should you care about website speed? Because the speed of your website could be the main reason behind a visitor leaving or staying on your website.
It’s thus vitally important to speed up your website.
I hate to be the one to tell you, but it doesn’t matter how beautiful your site is if it takes ages to load.
When it comes to website speed every second counts. Even a single second can make a huge difference in page views, customer satisfaction, and conversions. A 1 second delay in page load time yields 11% fewer page views, 16% decrease in customer satisfaction, and 7% loss in conversions.
To understand just how important is to speed up your website, consider this recent experiment from Financial Times. As they wrote, “over the testing period users read fewer articles each day whilst experiencing delays loading each web page.”
And there’s even more to it.
Now, let me ask you. Are you ready to speed up your website and increase your conversion rates?
Here’s what I’ve done to optimize this website (zoranbosancic.com). I improved my initial load time by six seconds.
Results, of course, might not be the same for your site, but I can promise you considerable time savings in page load time.
To make it easier for you to move around, here’s a list of tips in the post:
Before you make changes to your site, make sure to create a back-up. Some methods and techniques require tweaking settings and/or editing files that could potentially cause a malfunction. All websites are unique and yours might not be compatible with a certain technique, method, or plugin suggested in this post.
In any case, you should always perform regular back-ups. Don’t rely on your hosting company. You should have a system in place to maintain your own back-ups.
To measure your progress check your current website speed with a performance testing tool. Here are three free and easy to use tools that will evaluate your site and give recommendations for improvement:
Take note that sometimes results vary from tool to tool. This is completely normal since they use different approaches, and use servers from different parts of the world to test your site. I usually start with GTmetrix and continue on PageSpeed and Pingdom to compare results.
There’s also one interesting tool that does a bit of a different job than the tools mentioned above. Load Impact tests your website with many users at once—from 25 to over 100k users.
Why is this important?
Your website might perform well when just one or two visitors are on your site at once. But it might not deal well when there are many visitors. If stability under load is critical, you’ll also want to consider more extensive testing.
This one is not so easy to answer.
The simple answer is—make it as fast as possible.
But sometimes you will compensate a bit of speed to include crucial features. To help you better understand, here are some benchmarks to compare:
Below 1 second = Perfect
1-3 seconds = Above average
3-7 seconds = Average
7+ seconds = Poor
Plus, you can compare your website to your competitor’s website. A nice tool called Which loads faster does exactly that. On one side you put in your URL and on the other the URL of your competitor’s website.
Now, let’s get to the good stuff and explore the ways to speed up your website. I’ll start with the basics and continue with more advanced stuff.
No matter how much time you spend tweaking your settings and implementing suggested techniques, there’s only so much you can do on the website part.
It wouldn’t come as a surprise to me if changing the hosting provider made the biggest impact on the speed of your website.
When you first started out, you probably chose the cheapest hosting provider. If not the cheapest, you likely chose shared hosting. And that’s totally fine.
Until your site grows, is full of content, and you get a ton of visitors every day. Then your site gets slower.
If you want to speed up your website, it makes sense starting with a strong foundation. That means picking a great hosting provider.
Even if you’re on a budget and you can only afford shared hosting, choosing a reliable host is important.
The company I recommend and have experience with is SiteGround [affiliate link].
They offer a bunch of options from shared hosting to WordPress specific options and dedicated hosting. I use them for most of my projects and my experience with them is fantastic. Their support is the best in the business. And it’s available 24/7.
There are also hosting providers that are focusing solely on WordPress. They offer additional WordPress related services and will usually manage the technical aspects of your website. Two examples would be WP Engine and Synthesis from CopyBlogger.
I know that this headline sounds super techie, but it’s important for you to understand what are HTTP requests.
Because it’s definitely not as scary as it sounds. And because a lot of the stuff that I mention in the points that follow is directly connected to HTTP requests.
Every time you try to access a website your web browser will fetch the files it needs to load that website from a web server. It does so by using HTTP—that’s “Hypertext Transfer Protocol”.
HTTP is a request/response protocol, which means your computer sends a request for a file, and the web server sends back a response with that file.
The more files it needs to load the website, the more requests there are. In other words, the more files, images etc. your page consists of, the slower it will load.
You’d be surprised how many requests your website actually makes. For example, to load my homepage, the browser makes 48 HTTP requests.
You can sort the requests by file size or load time. This allows you to identify the bottlenecks. The image below is from my homepage.
The bottom line to limit the number of HTTP requests is to make the page design simple and combine as many files as you can into a single file. Read on and I’ll show you how to reduce HTTP requests.
Another scary word? No worries, it’s easy to understand.
A content delivery network (CDN) is a system of servers distributing your static files to visitors worldwide.
CDN can make a huge difference to your page loading speed. In some cases, you can split your load time in half, or even more. They are quick to implement and the results are almost instant.
If you’re just starting out, you don’t need a CDN. CDNs are best for medium to large sized websites serving hundreds of visitors at a given moment. For example, I don’t use a CDN for this website.
Page size has a huge impact on load time. A page of 1MB will generally load much faster than a page of 3MB. The largest files are usually your images.
So, when trying to reduce page size, optimizing your images is a great start.
First, remove the images that are not absolutely necessary. I’ve seen sites that use images in places they could avoid them, or use CSS instead of images.
Second, don’t use images larger than needed. For example, if you intend to display an image in 100x100px, you shouldn’t upload an image in 400x400px.
And third, compress your images.
You can compress images in a lossless or a lossy way. Lossless compression doesn’t affect image quality. Lossy means there’s a slight loss in quality.
I like to keep my images sharp and colorful, so I use a lossless compression.
Want to go even further? Use lazy load.
With the help of lazy load, your website will only load images above the fold—the part of your site visible without having to scroll. As your reader begins to scroll, the page will load other images. The result is increase in page speed.
Read this to learn how to install LazyLoad plugin for JQuery, or just use a WordPress plugin called BJ Lazy Load.
Got plugins on your WordPress site you don’t use or don’t necessarily need? Delete them.
Did you install other plugins or third-party scripts you completely forgot about? Clean them up.
Plugins create a lot of new files (remember HTTP requests?) that will slow down your website. So before installing think of the benefits and keep only the ones you need.
You don’t need a plugin for every single thing. Great examples are tracking codes. You don’t need a plugin for Google Analytics or Facebook Pixel as you can just copy-paste the code in your website manually.
You know that short pieces of code you copy-pasted in your website for a fancy icon set or a social media box? Well, I hate to say it, but it’s probably slowing down your website.
Every time your website loads, it needs to call those resources located on a different server than your website.
Like plugins, you should only use this scripts when you absolutely need them. I’m not saying you should completely avoid them—sometimes you can’t—but you should stay smart when using them.
But, sometimes linking to external sources can also help you speed up your website.
For instance, linking to jQuery library hosted on Google’s servers is a good idea. The library might already be saved on your reader’s computer. Website developers link to an often used resource to benefit from caching (which I’ll explain later). Because the visitor’s browser doesn’t have to download the file that was already downloaded, your site loads faster.
Image hotlinking is linking to an image on another website, instead of loading the image from your own server.
This basically means that the speed of your website depends on the speed of some other server. If the server of the image you hotlinked is experiencing a downtime or is slow, you can expect trouble.
Also, you could prevent others from hotlinking your own images.
When people hotlink your images, they use your bandwidth since images load from your server. If you encourage your readers to embed your images—such as infographics—on their sites, you shouldn’t prevent image hotlinking.
If you want, though, you can prevent hotlinking with ease.
A redirect occurs when you point to a link that points to another link. Redirects create additional HTTP requests and increase load time. Why? Because they waste time transporting from one location to another.
You’ll want to cut the number of redirects—especially for resources needed for loading your homepage. You can check your redirects with performance testing tools suggested in this post.
Sometimes the use of redirects is inevitable. Such cases include when you want to indicate the new location of a resource (known as 301 redirect), to reserve multiple domains, etc.
Remember linking to a page that already has a redirect is a huge no-no. Also, you should check all your resources and be consistent when calling them. If you use a non “www” version (-www) for your site, you should also call your files without “www”.
Browser caching stores some of these files on the devices of your visitors.
Their first visit to your site will make their browser download all needed files. But, when they revisit your website, refreshes the page, or even move to a different page of your site, they already have some of the files they need locally.
This lowers the amount of data the user’s browser needs to download. And of course, fewer HTTP requests are made. The result? Faster load times.
You can tell the browser which resources it needs to download and which are already stored locally. Some pages, or parts of pages, don’t need to be downloaded every time because they don’t change often. Think of your logo or your main picture. The odds are you won’t change it every day. So, for example, you can tell the browser to only download it once a month.
The good news is that you can do this with a caching plugin.
If it’s your first time setting up a caching plugin, this tutorial from WPBeginner can help you set it up.
Now that I explained browser caching, let’s look how to tell the browser when to look for a file on the server and when in the cache.
Expires headers do exactly that. They tell the browser where to look for a specific file—on the server or in the browser’s cache.
Adding Expires Headers reduces HTTP requests which, in turn, reduces the time it takes for the server to communicate with the browser.
Caching plugins can add expires headers to your files. You enable them in the settings.
Gzip compresses your files before sending them over to the browser. This reduces transfer time since the files are much smaller.
Enabling compression is one of the fastest ways to improve your site’s performance. It will save bandwidth and speed up your website.
If you use W3 Total Cache, you can enable this from the configuration page. Other caching plugins have similar options.
I can almost see you thinking, “what the heck is Keep-Alive?”
When not enabled, a web browser will request each file separately. Each time opening a new connection. And when enabled, all file requests go via a single open connection. The result is, of course, a faster loading time.
How do you enable Keep-Alive?
It’s easy. Plugins do that for you. Just make sure to enable it in the settings.
Content management systems (CMS), such as WordPress, heavily rely on databases to save data. Add the date stored from plugins and your database can quickly become cluttered.
Logs, statistics, user data, post revisions, pingbacks, and trackbacks are all stored in your database.
(Btw, I don’t know any good reason to have pingbacks and trackbacks enabled in the first place, so I recommend you turn them off.)
This one is a no-brainer. And here’s why.
@import uses up more resources than linking to your stylesheets despite achieving the exact same result. Also, older browsers don’t support it.
When it comes to your JS and CSS files, there’s a best practice.
Put your CSS as close to the top of your page as possible and your JS as close to the bottom as possible.
To be more exact–put your CSS files in the <head> and your JS files just before closing the <body> tag.
Browsers won’t render your page before rendering the CSS file. JS, on the other hand, prevents browsers from parsing before it is loaded and complete.
One thing that can also help improve performance is asyncing your scripts.
As mentioned, the page has to wait for the script to be fully downloaded, parsed and executed before it can continue parsing. This can add to the load time of your page. So, to speed your website you can use async attribute. You do it like this:
<script async src="example.js"></script>
This way the script is downloaded asynchronously while the rest of the page continues to get parsed.
Also, try to combine your JS and CSS files. Remember, the more files you have, the more HTTP requests need to generate. A step further is to minify your combined files.
White space and comments you have in your JS and CSS files don’t really matter to browsers. By minifying you’ll shave off bytes that otherwise reduce website speed.
If you need some more help on how to optimize your files, here’s a handy guide.
You can reduce HTTP requests by combining images into sprites.
You’ll be able to reduce the number of bytes your visitor downloads and the delay caused by roundtrips made when your server is downloading other resources.
This technique is essentially about grouping images into a single file and then positioning them with CSS. There are many tools that will help you generate sprites. Two examples are SpritePad and SpriteMe.
So that’s it, guys. I’ve given you the list of things you can do to speed up your website.
There are some other advanced techniques that you could use such as PHP acceleration. But, I can guarantee you’ll have a much faster website after putting this tips to work.
I’d love to see your results. Tell me in the comments.
And, it would mean the world to me if you shared this post on social media.