How to speed up your WordPress site – All you need to know

Pierre Bastille

Pierre Bastille

One of the first things I do when I finish a website is taking a look at how fast and well-optimized it is.

Yes… I’m a bit of a geek…

Unfortunately, as you might have experienced yourself, this is never the case right from the start.

You need to follow a set of rules and complete a few tasks  to fully optimize your website and make it as fast as possible.

When I finished pierrebastille.com, I had terrible grades:

Ouch!

My homepage was about 1.5 MB, and it took at least 2.55 seconds to load.

I was not happy with these results…

Did I manage to improve this disastrous performance? (Hint: This story has a happy ending.)

If you follow the guidelines described in this article, you can improve your website as well.

I’m also going to explain the reasoning behind each task so that you can better understand how WordPress works.

Why Speed Is So Important

First of all, why should you worry about the speed of your website?

There are 2 main reasons for this.

Visitor Experience

Yesterday I wanted to check out the NBA Playoffs video recaps. I went to the website I use to follow the NBA (It’s not the official NBA website). I won’t disclose which one it is 🙂

So, I opened up 1 tab for each game, and then a few others for the postgame interviews.

The website was so slow that it froze Chrome! There were so many ads (banners and popups) loading that it just crashed.

Needless to say, this kind of web experience drives me CRAZY.

furiousmichelscott

Yes, I was like that…

Yes, the first reason to speed up your website is to enhance the visitor experience.

I am sure you agree that slow websites are a pain.

You love your audience, don’t you? Don’t you want them to have an amazing experience when they surf your site? Of course, you do!

For the sake of your audience, and out of respect for them, make your website fast.

SPEED AFFECTS PAGE ABANDONMENT (BOUNCE RATE)

Technically speaking, speed has a significant impact on the bounce rate of your site.

The bounce rate is the percentage of people who land and leave your website right away divided by your total number of visitors.

Of course, you want your bounce rate to be as low as possible. When people land on your website, you’d like them to view as many pages as possible and opt-in to your list. If your website is too slow, visitors who weren’t looking for anything specific to your site will leave.

Boom! Gone! And you never got to interact with these visitors, get their emails or even offer them anything. Nada!

Slow websites are annoying and drive people away.

To grasp the importance of speed, let’s review a few studies.

STUDIES

  • According to Kissmetrics, 47% of Internet users expect a page to load in less than 2 seconds, and 40% will abandon a website that takes more than 3 seconds to load.
  • According to a computer and speed specialist at Microsoft, people will visit a website less often if it is slower than a close competitor by more than 250 milliseconds (that’s 1/4 of a second!).
  • Amazon found that every 100 milliseconds of latency cost them 1% in sales.
  • Google discovered that an extra 0.5 seconds in search page generation time reduced traffic by 20%.

Now you understand why speed is a major factor for online businesses. Every last millisecond matters!

The good news is that you will make serious improvements to your website with all the different techniques we will be studying today.

MOBILE

There are now more people surfing the Internet from their phones than from a desktop. Mobile traffic continues to increase year upon year.

When we use mobiles, however, our connection is usually weak (due to our cellular networks). As a result, the need for optimized and fast websites is stronger than ever.

If your site is slow to load, you run the risk of pushing away a lot of your mobile visitors.

Google Ranking

Another reason to strive for a fast-loading website is this: speed matters to Google.

In fact, since 2010, speed has been a factor for SEO. Although we don’t know the specifics of how speed affects our ranking, we can assume that with the steady growth of mobile users, loading speed will only grow more important.

In the last few years, Google even developed a few tools to encourage people to improve their website speed.

One of the most well-known is PageSpeed, which allows you to access information on the improvements you should bring to your site.

Google also created the AMP (Accelerated Mobile Pages) initiative, which aims to improve website speed on mobile devices.

So, if you want to optimize your SEO and receive free traffic from Google, you should take the speed of your website very seriously.

*****

Now it’s time to make your website supersonic! There are 2 aspects to this:

  • First, we are going to discuss the fundamental rules we need to follow.
  • Then we will review which steps we need to take to optimize our websites with the help of plugins.

Implementing these recommendations should not take you longer than 1 hour.

Before rushing to download and test the plugins, take 2 minutes to perform a few tests.

Let’s measure the improvements we’re going to bring to our site.

To do so, we need to analyze our website as it is now.

All you need to do is enter the URL of your site on the websites below:

Each site will give you a grade and comments (a lot of them) on elements you should improve.

Take a screenshot of your results, and let’s see if we can improve the performance of your website.

Are your grades as bad as mine were before I optimized my website?

Fundamental Rules

01. Good Host

It’s the most fundamental rule of all. You can optimize your site all you want, but if your host sucks, your website will always be slow. It’s like optimizing a website for conversion that has no traffic: you can do it, but you’re not going to get more subscribers.

Choosing a host can be tricky because there are so many options. When you select your host, the 2 major factors to consider are speed and support. From experience, and based on my research, here are my recommendations:

Personally, I use SiteGround (affiliate link). My experience with them has been outstanding so far.

Why do I love them?

  • My website is super-fast.
  • Their support is excellent. You can ask them absolutely anything, and they are extremely competent. I love their live chat, where you can drop them a question and have an answer within 2 minutes.
  • SiteGround offers useful bonus features for WordPress users (SuperCacher, a free CloudFlare plan, staggering features, Autoupdate, etc.).
  • They also successfully migrated my website from my previous host for free.

Finally, WordPress recently updated the list of hosts they recommend. Siteground (affiliate link) is now officially one of the 4 hosts that WordPress considers as the “best and brightest in the world”!

If you have a huge amount of traffic and want a premium offer, it seems that WP Engine has the best service and reputation. Please note that I have never used them myself.

02. Not Too Many Plugins

You should only keep the plugins you use. Don’t make your website a duplicate of the WordPress plugins directory!

The more plugins you have, the more likely you are to end up with a “heavy website” that is slower to load. Plugins can also conflict with one another, which causes some instability.

P3 is a great plugin that allows you to check the time required to load each one of the plugins you’ve installed.

If you have multiple plugins and feel like they might be slowing down your website, install P3 and determine whether this is the case.

Since we’re discussing plugins, I’d like to bring up a few guidelines for when you install them on WordPress:

  • Make sure the plugins have been updated recently. So you make sure they’re still supported.
  • Install plugins with 4+ stars
  • Install plugins with a good number of installs. (I look for plugins with at least 10,000 installs.)
  • Check that the plugin is compatible with the latest version of WordPress. (Take a look at the bottom right of the plugins page.)     

03. Update WordPress/Plugins

To keep your website optimized and secure, always upgrade WordPress, your theme, and your plugins. Then you’ll have access to all the latest features!

This rule is especially important for security purposes. Don’t believe me? Did you know that the Panama Papers case was most likely caused by a WordPress plugin that had not been updated?

04. Host Videos Externally

If you have videos on your website, it’s better to host them externally (i.e., on YouTube, Vimeo, Amazon S3).

Hosting them in your WordPress library can be very resource-taxing, and it might slow down your website.

05. Use a Premium Theme

Finally, the last rule is to use a premium theme with clean code. When you select your theme, read the comments and reviews to make sure there aren’t any recurrent problems with how the theme functions.

You can check out the most frequently used WordPress themes here. If a high number of people are using a theme, it means it’s working, right?

I use Divi by Elegant Themes. It’s amazing! There are no limits to what you can do with the theme, and it is so easy to use.

The theme has premium features like A/B testing incorporated right into it. It also comes with premium plugins that I use on this website (Monarch & Bloom).

*****

You know all the rules to make your site quicker than the speed of light! Now, let’s see how to optimize it with the help of plugins.

Optimizing with Plugins

We have all the fundamental rules to make our website lightning fast. Now let’s optimize it!

Implementing these recommendations should take you no longer than 1 hour.

Optimize Images: COMPRESS JPEG PNG

Images are among the heaviest elements to load from a web page. It is important that we optimize them and make them as light as possible so that they’re quicker to load.

You have 2 options when it comes to optimizing your images:

01. Optimize them before you load them onto WordPress.

You can use software like the Save for Web feature of Photoshop to do so, or even websites like TinyPNG or Optimizilla.

02. Optimize your images automatically on WordPress with the help of a plugin. It’s the solution I chose. Yes, I am lazy and always looking for the smoothest solution. 🙂

There are several good plugins you can use to optimize your images on WordPress.

The one I use (and recommend) is Compress JPEG PNG.

If you already have tons of images loaded onto WordPress, don’t worry: The plugins can optimize all the images in your library.

How to set up the plugins after installing and activating it:

01. Go to Settings > Media

02. Follow the steps to get the TinyPNG API Key

03. WordPress automatically creates your images in different sizes when you upload them. By default, 3 formats are generated: large, medium and thumbnail.

This is why the plugin allows you to optimize these 3 formats. It will also give you the option to optimize images in the specific formats used by your theme.

I chose to optimize images in 4 formats: the original, large (1024x1024), medium (300x300) and thumbnail (150x150) formats.

Media Settings

My setup with this plugin

You also have the possibility to optimize images for certain formats used by your theme.

04. Now, every time you upload an image to your library, it will optimize automatically. You won’t have to lift a finger! 🙂

05. If you already have images that you want to optimize in your library:

Go to Media > Library > Compress all images

Click on Compress all images.

Compress existing images

Just have to click on Compress All Images

The plugins will optimize 500 images per month for free. Be careful, though, because this includes all the different formats that we chose earlier.

Personally, each image that I upload onto WordPress will be optimized in 4 formats, so the plugins will allow me to optimize 125 “real” images per month. This is more than enough to meet my needs!

After your 500 free images, it will cost you $0.009 per image.

About Caching

To understand why the cache is so important, let’s go back to how WordPress works.

HTML (Hypertext Markup Language) is the standard language used to create webpages.

Combined with CSS and JavaScript, it allows your browser to display website pages.

Every time a visitor requests a page on your website, WordPress launches a process using PHP scripts and calls to your database (SQL).

The goal of this process is to create dynamically the HTML code (combined with JavaScript, and CSS) of your page and serve it to your visitor’s browser.

Yes, this means that WordPress creates the pages of your website upon every request.

If you think that this process requires a lot of resources when you have a fair quantity of visitors, you are right.

If you also think that there should be ways to optimize the process and make your website faster, then you are also right!

Caching to the rescue!

Caching aims to reduce the amount of redundant work by reusing data from previous requests.

There are 2 types of caching: client-side caching and server-side caching.

Client-side caching happens when static data (CSS, JavaScript,  and Images) is stored on your visitor’s PC. It means that your visitor won’t need to download this static data more than once (unless he clears his browser’s cache). This type of caching is effective for the second request when locally stored elements will be used. This will make their second request very light and quick.

Server-side caching includes different types of caching:

  • Page caching: Save the pages as HTML files.
  • Database caching: Save the results from previous requests onto the database.
  • Object caching: Save complex data queries.
  • Opcode caching: Save the compiled PHP code between requests.

Server-Side Caching: WP Super Cache

To make the most of server-side caching, you have 2 free plugins at your disposal: Super Cache and W3 Cache.

These 2 plugins improve websites in a similar manner. I use WP Super Cache because it is easier to use. W3 offers more options, though (for the geeks among you).

Once you’ve installed and activated WP Super Cache:

01. Go to Settings > WP Super Cache

02. Go to the “Easy” tab, tick “Caching On” and click “Update Status.”

You can also click “Test Cache” to make sure everything is working.

WP Super Cache Easy set up

Easy set up with WP Super Cache

If you want to go through the advanced settings, you can take a look at this thorough guide.

Regarding the client-side cache, we are going to implement it with expires headers (see below).

Expires Headers (AKA Client-Side Caching) & Compression: WP Performance Score Booster

EXPIRES HEADERS

Let’s implement the client-side cache we discussed earlier!

Setting ‘expires headers’ will inform your visitors’ browser of whether it should request certain files from the server or if they can simply get them from the browser’s cache stored on the PC. (The second option is quicker!) Expires headers tell the browser how long it should store several files on the PC. This process reduces the likelihood of downloading the same files over and over again when it is not necessary to do so. Fewer downloads from the server = faster website. Of course, this process is only effective for returning visitors, as first-time visitors will still need to download all of the files from your server.

COMPRESSION

I don’t know about you, but I never have enough space on my hard drive. One way to gain some extra GBs on your computer is to compress heavy folders – and the same principle applies to websites. Gzip is a form of data compression used to make the files of your website smaller. As a result, this improves your page load speed and makes your website faster for your visitors.

WP Performance Score Booster is an amazing plugin you can use to perform both of the tasks I mentioned above. Plus, it will also remove query strings from static content. (This will also improve your website speed.)

I love this plugin because you don’t have to do a thing! After you install and activate it, make sure to check these 3 elements:

WP Performance Score Booster Settings ‹ Pierre Bastille — WordPress 2016-05-13 11-10-11

So easy, right?

Done. You’re all set!

CDN: CloudFlare

Imagine that you’re in the Philippines. (I certainly wish I was!) You’re visiting my website (cool!) hosted on servers in the USA. The information from my website host to your computer has a long way to go. On your end, this leads to a slow page load.

A CDN (Content Delivery Network) is your solution. It consists of a network of servers that are usually spread out all over the world. Each of these servers stores a large part of your website (the static files). Hence, when your visitor lands on one of your website pages, most of it will load from the closest server. This drastically reduces the loading time of your website.

Take a look at where the 79 CloudFlare servers are located:

Cludflare network of servers

CloudFlare has 79 servers around the world.

Let’s go back to the last example. (You’re in the Philippines, remember?) The static files that make up the pages of my website, which is hosted in the USA, will be sent to you from Hong Kong! This reduces the distance between the host and your network, and ultimately, it improves the speed of my website.

Using a CDN has other advantages as well.

Imagine that you’ve posted an amazing article that gets shared a lot. You suddenly have a peak amount of traffic on your website. Without a CDN, all of your traffic will end up on the same server, which may cause some issues and take down your website. If you use a CDN, however, the traffic will arrive on different servers.

Your traffic will be easily absorbed, and your website will still be super-fast. No problemo!

digramcdn

Traffic is better absorbed with a CDN

Finally, another advantage of using a CDN is security. CDNs act as an intermediary between you and your visitors by detecting threats and keeping them from reaching your server and your website.

Check out this diagram from CloudFlare’s website:

Overview | CloudFlare | The web performance & security company 2016-05-13 11-13-31

CDNs improve the security of your website

I recommend using CloudFlare for your CDNs. Here’s why:

  • It is very simple to set up your website with them. There’s no need to be a geek – CloudFlare will guide you through every step of the way. The whole thing will take less than 5 minutes!
  • It works well. You will see a drastic increase in the speed of your website.
  • It’s very intuitive. The member area is well-designed, and you can find extremely useful information there (analytics).
  • Last but not least, they offer a free plan that suits most people.

Click here to register with CloudFlare and choose the free plan.

The only technical component of setting up a CouldFlare account is changing the DNS addresses at your registrar (the company where you bought your domain). Check out this page for more information on how to complete this step. (You need to be logged into CloudFlare),

CloudFlare has another great feature to improve the performance of your website.

Once you have set up your website, go the Speed section of the member area.

In the Auto Minify section, check JavaScript, CSS, and HTML. This will reduce the file size of the source code on your website.

Speed Cludflare

Check JavaScript, CSS, and HTML

Important: Use the minify feature with just 1 tool. You can implement it on CloudFlare or with plugins, but do not enable this feature in multiple places.

Tip: Once you change your DNS address through your registrar, you will have to wait up to 24 hours for the change to be effective.

Clean up your database: WP-Sweep

By default, WordPress saves every post and page revisions. Most of the time these revisions are useless.

When I finished my website, I had 636 page/post revisions in my database!

To clean up my database, I work with the plugin WP-Sweep.

This plugin is very easy to use. Once installed and activated, go to Tools> Sweep.

Then you can “sweep” different elements of your database. Including the post and page revisions:

Note: as for all operations impacting your database, make sure to backup your website before.

Finally, to keep my database tidy, I limit to 5 the number of revisions stored in WordPress.

You can do so by adding a line of code in wp-config.php. You can check this article to do so.

Wrapping up

You made it!

Hopefully,  you’re ready to implement the different optimization techniques on your website.

Use the websites we talked about earlier to track your progress.

Are these techniques working for you?

Share your results in the comments!

Here are my results after going through each and every step described in this post:

  • Pingdom: from 86/100 to 94/100
  • GTmetrix page speed: from 47% to 95%
  • GTmetrix YSlow: from 71% to 77%
  • Google for desktop: from 47/100 to 88/100

Page size: from about 1.5MB to approximately 600KB (almost divided by 3!)

Page speed: sometimes less than 0.7 seconds (on the second request, once the cache is used)

I’d like to share one more tip before I sign off – your homepage is where your visitors will land more often than anywhere else.

Make sure it is light and as fast as possible. Internet users have become less patient now that there is so much content available online.

A fast landing page will help you convert your visitors into subscribers.

Pierre Bastille

I help entrepreneurs build stunning websites with all the necessary features to grow their businesses. I like to write about online business, marketing, productivity, and travel

Did you like this article?

Enter your name and email and I'll send you next ones!

Comments

11 Comments

  1. hoek

    Hey! Really nice and usefully post. Thanks. I didn’t know WP-Sweep plugin. It is great.
    If you want speed up pages that don’t belongs to you just install uBlock Origin 😉

    Reply
  2. Pierre

    Hey Hoek,

    I’m glad you liked the article 🙂
    Thanks for the recommendation, I didn’t know uBlock Origin.
    I just installed it, and I’m going to give it a try!

    Pierre

    Reply
  3. Tomasz

    Great work Pierre – I like WP Performance Score Booster part. I didn’t know about existence of such a cool, lightweight plugin. I also believe you will be able to decrease website weight using Gonzales – https://tomasz-dobrzynski.com/wordpress-gonzales. It’s just a matter of disabling useless CSS and JS files. I think your one hour limit for website optimization won’t be visibly affected 🙂

    Reply
    • Pierre

      Thanks for sharing Tomasz. I’ll have to try this plugin out 🙂

      Reply
  4. jarod

    Thanks for the tips.

    Strangely my score without Super Cache was faster (according to gtmetrix) than with it. But getting rid of old plugins, themes and deleting revisions was quite useful.

    About cloudflare: as long as they block tor users from using cloudflare sites, i will not use it.

    Keep up the good work.

    Reply
    • Pierre

      Hey Jarod,

      Glad you found some useful tips in the article 🙂

      It’s odd that your site is faster without Super Cache… Perhaps you should contact their support team to see what’s happening?

      Regarding Cloudflare, you can choose how to handle visitors using Tor (you can automatically whitelist them). Here is an article on this subject.

      Pierre

      Reply
  5. Leslie Warren

    Very nice article! I just contacted the guys at my host and they installed the Compress JPEG & PNG images plugin on my WP site and optimize the images on my site. The loading speed of my website is much better than before.

    Thanks again!

    Reply
    • Pierre

      Hey Leslie,

      Awesome!! I’m glad this article helped you speed up your site.
      Thanks for sharing your results 🙂

      Pierre

      Reply
  6. Sonni Quick

    You followed me on twitter ( so you know where I came from) and I checked you out. Seems like I have a lot of work to do. Thanks!

    Reply
  7. Dipak G.

    Hi Pierre,

    Thanks for writing on one of my plugins WP Performance Score Booster. It really inspires when someone writes positive on something that you shared/contributed.

    Keep up the good work going!

    — Dipak G.

    Reply
  8. Hansoftech

    Great content! Agree with you Choosing a good web host is must for Speed optimization.
    Wordpress performance optimization plays a key role for ranking high in google. Find more tips on why to do
    website speed optimization

    Reply

Trackbacks/Pingbacks

  1. My selection of the best free WordPress plugins & how to use them - […] Title and Description for my post on How to Speed Up your WordPress Website […]

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This