One of the most requested areas in WordPress Support is how to improve the SPEED of a WordPress website.

Why Is WordPress Speed Important?

The speed of your website is IMPORTANT. More important than many people realize, and it’s NOT because Google has added website speed to their algorithm — that will not negatively affect your rating unless your website is really slow.

No, more important than this — and the reason Google has added speed as a factor is, USER BEHAVIOR.

Today’s web users EXPECT fast websites.

Failure to provide a speedy user experience will mean losing customers — that’s a fact. And that is why you cannot ignore website speed.

According to a survey by Kissmetrics, 47% of users expect a site to load in under 2s. Let me say that again:  TWO SECONDS!

Another stat to get you even more worried! 40% of people abandon a website that takes more than 3 seconds to load. FORTY PERCENT!

WordPress is NOT Built For Speed

WordPress is a fantastic Content Management System. It is extremely versatile. But that’s also its achilles heel. WordPress is NOT built for speed, it is built for VERSATILITY.

That’s not to say there have not been major improvements in WordPress speed recently. Because there has been and it is continuing to improve. But by nature of it’s design, WordPress will never be a super fast web experience straight off the bat.

To get the best performance from WordPress, you will need to put some time and effort into that end.

Before We Start

A couple of recommended actions before we get to the real meat….

Choose A Good Host

Sounds simple, put it’s best to begin with a good foundation. The choice of web host will make a difference to your site speed. Choose a good one. There are too many options to list.  We use SiteGround, they’re fast enough for us and have great customer service.

Run A Web Speed Test

Jump over to a website such as Pingdom and use their website speed test tool. This will give you a detailed analysis of your website and the areas you need to concentrate on. You can then pick the from the list below in order of priority.

Screen Shot 2016-04-08 at 18.02.48

Now lets begin…

1. Choose a Good Theme

What is a good theme? Well in general, the themes which only have the features you need and are not bloated are lighter and faster. This is, however, not a hard and fast rule.  The coding expertise of the theme creators will have a major influence on site speed also.  So look for reviews about your chosen theme to ensure speed is not an issue.

2. Cache Cache Cache

WordPress uses PHP to generate the code that your browser can understand (HTML). So every time a browser accesses your website a process is run to generate the code.

This of course takes time. You can avoid this by using a caching service or plugin.

Caching saves a static HTML version of your page and offers that to your browser instead of going through the PHP process. Having caching enabled on your website can release significant time savings. Sometimes we’re talking seconds here — yes, entires SECONDS!

Your hosting provider may have a custom caching solution. We use SiteGround hosting and they have a great caching solution called Super Cacher.

Another method is to use a plugin. Once of the most popular is W3 Total Cache

Screen Shot 2016-04-08 at 17.43.57

3. Squash Those Images

Image files are often guilty criminals when it comes to web speed problems.

You don’t need to offer super large HD images to all your users.  Yes they may look amazing for that one customer who has a 27 inch iMac, but everyone else will probably not wait around for the website to load and never get to experience your moment of glory. Of course those customers trying to load your website on their paltry mobile internet don’t even stand a chance.

Keep your image size as small as possible and large as necessary! You can use the likes of retina.js or a plugin like WP Retina 2x to serve HD images only to those visitors who are using Retina screen.

Remember to offer significantly smaller images smaller versions for those on mobile.

Use small images

Also use a plugin designed to optimise images to the smallest possible size.

A popular plugin for this purpose is called WP Smush. WP Smush reduces image size even further by stripping them of such things as meta-data. It can do this automatically every time you upload an image.

4. Squash Your Database Too

You WordPress website uses a database to store lots of essential information about your website. Over time it will grow in size and can become unnecessarily large and cumbersome. This can in some circumstances slow down your website. You can manually optimize your database to keep it in tip top shape. There is a great blog here to show you how.

But an easier way is to use a plugin designed for the purpose. One of the most popular plugins for this purpose is WP Optimize.

It may not save seconds of your load time — but every little helps.

5. Spread The Love With CDN

While we are on the topic of code and caching we should discuss Content Delivery Networks.

Content Delivery Networks

Content Delivery Networks work by spreading versions of your website onto servers throughout the world. Now this has a number of advantages:

  1. Your site becomes faster to the end user because the information is held in a location that is geographically closer to them. So a user in Asia is accessing a server based in Asia.  A US based user accesses a US server.
  2. Your site becomes more resilient because all of the traffic is not coming to your hosting provider. Instead, your traffic is spread throughout the Content Delivery Network. This also makes it more difficult to bring down a website in the case of a Denial of Service (DoS) attack.

One point to add though:  CDN’s are generally not free.  One popular CDN that does offer a limited version for free is CloudFlare.  For more options, checkout the list of CDNs compiled recently by the team over at Elegant Themes.

6. Use Lazy Load

Lazy Load

Lazy loading is particularly important if you have a website with a lot of images on the homepage.

What is it?

Basically it’s a method that uses jQuery to force the browser to only load images that are visible in the browser.

Therefore, the user is not waiting for an image at the bottom of the page to load before they can view the top part. In web design, anything that is currently viewable on the screen is called “above the fold”. Think of a folded piece of paper.  You only see one side until you unfold it to see the other half. On your browser you only see what is “above the fold” until you scroll down.

A popular plugin for this purpose is “Lazy Load” developed in part by the WordPress team. You can get it here.

7. Add Expiry Header to Static Items

This is one for your regular website visitors.

It will make no difference to the speed of your site to new visitors, but returning visitors will see an improvement.

In basic terms, it tells the user’s browser not to reload the images from your website, but use the ones it previously loaded and which it has saved in browser cache. This reduces the number of requests from the browser to your website for returning visitors. The default time is to request a reload 2 hours after the last visit, but you can extend this out to 1 month or even more.

Remember though, if you change any image and save it under the same name as before — for example “home_page_banner” the user will not see the new version. You need to call it a different name in order for the browser to recognize it needs to load the updated content.

Simply add the following code to your .htaccess file (always make a backup first).

 ExpiresActive On
 ExpiresByType image/gif A2592000
 ExpiresByType image/png A2592000
 ExpiresByType image/jpg A2592000
 ExpiresByType image/jpeg A2592000

The number (2592000) is a month in seconds — 60*60*24*30=2592000.

You can also use a plugin.  W3 Total Cache includes an option to add an expires header.

8. Don’t Hot Link!

Hot Linking

No I don’t mean sexy links. Hotlinking is when you link to an image stored on another website’s host. It may seem like you’re saving bandwidth, but it’s an extra task that’s unnecessary and you put yourself at the mercy of the third party’s server speed.

On the flip side, you can also prevent others from hotlinking to your site. It is important to protect yourself from hotlinking and you can do it easily by adding the following code to your .htaccess (always backup your site before changing .htaccess).

 RewriteEngine on
 RewriteCond %{HTTP_REFERER} !^$
 RewriteCond %{HTTP_REFERER} !^http://(www.)?*$ [NC]
 RewriteRule .(gif|jpe?g|png)$ - [F]

9. Compress Your CSS

Actually the proper term is Minify. What that actually means is removing all of the characters that are not required to execute the code, but are there to help improve readability for us humans. This includes such things as spaces and comments etc.

This by the way is not compression. Compressed files have to be uncompressed in order to use them. Minified files do not.

You can Minify your code by hand of course — but why would you when plugins are available?  A popular plugin for this is Better WordPress Minify.

That’s it for now. Do the above and BOOM! A faster website is yours.

Disclosure:  From time to time, our blog posts will contain affiliate links for services we actually use and recommend.  This means if you click on the link and purchase something, we will receive an affiliate commission.