Speed Up WordPress: 14 Easy Ways To Decease Load Time

By Henry Reith, - In Marketing

Photo Credit: Henry Reith

Throughout this article I am going to go through how to speed up WordPress. I’ll go through the exact checklist I use, and the easy step by step process to optimize WordPress.

via GIPHY

47% of surveyed consumers said they expected a website to load in under 2 seconds in 2011. However, I don’t imagine the other 53% of people surveyed expect to wait forever for your website to load either.

A potential customer being able to load your website is the first step they take down the process of converting.

Walmart found that for every extra second increase, in loading time, conversions decreased by 2%. And if your page load time takes over 7 seconds you may as well forget selling anything.

Google is known to take page load time into account when deciding where to rank your website.

When I work with clients, I first work on optimizing the conventions first, not traffic. And step one in all of this is speeding up the web experience to improve all of our key metrics.

Through this article I will you though a lot of ways you can speed up WordPress. Although I am mainly going to focus on speeding up WordPress in this article, all the ideas can be applied to any website.

I will show you what I actually do with my clients and personal projects to get them super speedy. I will touch on and share some code in the advanced section below. However, I am not a website coder by trade, and so I will keep everything in human language. So don’t worry, everything in this article will be actionable for any startup or founder. If not I will give you takeaways to give to your coder to implement.

I will go through both the quick/instant wins you can get with little effort. Plus dive into the more advanced ways you can speed up WordPress load times. So let’s get into it.

Get To Know Where You Are At

The first step in speeding up your WordPress website is to get an idea we are currently at. This will allow us to see where we can quickly improve a website speed. Plus allow us to get a before and after to see if the changes we make have an effect.

When looking at improving a website’s page speed, I want to know the topline figures (how long does it take for a page to load), and what’s contributing to the page load time.

There are a number of services that I turned too to help me get an idea where a website is at.

Pingdom Website Speed Test

My number one tool I turn to is http://tools.pingdom.com/fpt/. I use this to get the actual page load time of the website.

Image of Pingdom's Full Page Tester service that i use to speed up WordPress

Pingdom Full Page Tester

Using this tool will show you the overall page load time, and a timeline of how all of your website files were loaded, plus the size of each file loaded and total page size.

Example of a Example of a Pingdom Full Page Tester Result

Example of a Pingdom Full Page Tester Result

I tend to test the homepage of a website, a blog page and a landing page. I run the tests for each of the three pages, then run through them again.

This gives me a good idea of what resources are being loaded on every page. I also scan the timeline to see which resources are taking the longest time to load. At this stage I don’t do any more than eyeball the result and store them in my memory bank for later.

GTMetrix

Next I turned to https://gtmetrix.com/. It does a similar job as the Pingdom tests above.

Image of GTmetrix Page Speed Tester that i use to help me get an understanding of how fast my WordPress site is

GTmetrix Page Speed Tester

I use GTmetric as a backup test just to confirm information I have above. Plus, it also presents a few other pieces of information better than Pingdom, that are useful when speeding up a website.

The GTmetric results include an easy to read Google PageSpeed and YSlow score and analysis. The analysis breaks down which aspects of your website could be improved, and their relative importance. Plus if an area of your site needs attention you can click to pop down extra information that shows you more information about the issue and which files can be optimized.

Image of a GTmetrix test highlighting the Pagespeed and YSlow Test Tabs

GTmetrix Pagespeed and YSlow Test Tabs

If at the stage I’m just looking for quick conversion wins on a client’s website. And the page load speed is under 1.5 seconds, there are no major problems with the PageSpeed or YSlow results, I then move on to look at other ways to increase conversions on their website, instead of focusing on decreasing the page load speed.

However, if the page load speed is above 1.5 seconds I get on with looking at the easy ways to speed up a WordPress website that are below.

Or if I’ve been working on the website conversions for a bit. I’m am at the stage where I have a good conversion process going on a website. And I just want to keep improving those little things (10% wins that add up to huge gains) I will continue running the test below to gain more data on where we are at. Then look at both the basic and advanced ways to speed up a WordPress website.

Monitis

http://www.monitis.com/pageload/ looks at page load speed from various locations around the world. So when I’m working on a website that targets readers and customers around the world I use this test to see what’s going on.

However, if I’m only working on a local services such as, LVS Glass, who only focus on US customers, or Personal Trainer Bristol, who only work with UK-based clients there is no need to run this test.

If for instance I see that Asia, is loading slowly, as shown in the example below:

Image of a Monitis Website Speed Test highlighting the difference in load time of a website between the USA, Europe and Asia

Monitis Website Speed Test

And then see the initial get, for the website is still under 1 second, but the site resources, are taking time to get to Asia, then look at moving the website to a CDN (more below).

 

P3-Profiler

P3-Profiler is a WordPress plug-in, that can runs tests on your WordPress website to do an analysis of how long each plug-in is taking to load on your website.

Image of the P3-Profiler Plugin in the WorldPress plugin directory

P3-Profiler Plugin

You can download it to your WordPress website, as you would any other plug-in via the search method from the add new plug-in screen.

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=AXM1QgMODW0

Once installed, you can go to the plug-in dashboard by clicking on it in the submenu of Tools.

Image of where to find the P3-Profiler submenu under the WordPress tools menu

P3-Profiler Submenu

From the dashboard, you can now click the scan button, then auto scan to run the test.

Simage of where to find the start scan button in P3 Profiler

Start P3 Profiler Scan

It comes back with a number of interesting ways to present the information. As you can see in the examples results below the plugin Advanced Custom Fields Pro is taking the most time to load in the example below:

An image of a P3 Profiler plugin scan result

P3 Profiler Scan Result

In this instance ACF is needed for the site to run, however if there are any plugins that are being used that take up a lot of load time, but aren’t critical (e.g. shortcode plugins) this is an area I look at.

Note: At present P3 Profiler doesn’t work with PHP7. I either flip your site back to PHP5.X to do the tests, then change it back to PHP7 or just don’t both with this at present.

Easy Ways to Speed Up WordPress (Quick Wins):

1. Use a Well Coded Theme

The first and easiest win to speed up any WordPress website is to use a well coded theme.

These days I mainly code my own themes for projects and clients. However, as much as I love using custom coded themes, pre-made themes are incredibly valuable to any startup. The ability to buy a theme off the shelf and create an awesome website in just a few hours is vital to getting a startup going.

Even though I can code, I still start every new project I have, or new client’s ‘idea for a company’ with a pre-made theme. I am talking about the idea validation stage here, the ‘Can I market this product and how can I spend as little time and money to find out if I can’. We then only move to a custom theme when:

  • The website is receiving over 5,000 visitors a month,
  • or the website is generating over $5,000 in revenue.

Why these numbers? Well at this point is worth starting seriously split testing to increase conversions.

I don’t have to look for new themes every day, so I asked Nick Davis founder of Theme Valet for some advice on the subject. He works with new theme’s every day so see’s a lot of the good and the bad and the ugly of WordPress themes.

via GIPHY

Nick said “The most important thing when choosing a theme is choosing a strong but simple design that will clearly communicate the one most important thing you’re trying to say to your customer.

The second is: does it load quickly?

And the third is: does it look good on mobile?

Ideally, it should stand out (by the quality of the design). However do not choose a theme with three sliders, five parallax panels, and two carousel sections.

Not only will these distract from your message, often the only thing these so-called ‘themes that do everything’ will actually do in reality is give you headaches and probably break horribly at some point in the future, when all the plugins and sliders it comes packed with hit a bug when a new version of WordPress is released. Forcing you to choose between a secure but broken site or an insecure but functioning one.”

I think the last point Nick makes about the issues of ‘multipurpose themes’ is important, and one I’ve fallen foul of in the past.

So when I say well coded I, mean one that doesn’t load hundreds of files just to make it run.

An example of this is a ‘multipurpose’ theme like Monstroid from Template Monster. When I ran a page speed test, it loaded 39 CSS files, and 41 script files. These will have to be loaded one by one from your server that takes ages! (However, if you have one of these theme’s don’t give up hope right now, there are still thing we can do to speed it up.)

Image of the waterfall of all the files the Monstroid theme loads to make it run

Monstroid theme Resource Waterfall

Image of the breakdown of the number of CSS and JS files the Monstroid theme loads to run

Monstroid theme Resource Breakdown

Essentially if you run a speed test on a pre-made theme and it has loads a lot of CSS and JS files, I would avoid it. Having said that, it is possible to merge these files later on, but given the choice, I like to start with a theme that’s as small and fast as possible in the first place.

My general rule is, if a pre-made theme loads less than 65 requests then it can be worked it.

Along with checking that a theme doesn’t have to load hundreds of CSS and JS files, I check to make sure it doesn’t have to run more than 2 plugins just to make it work. If it does, again, I avoid it.

Again, as buying a new theme isn’t something I do every day I asked for Nick’s advice, as his company setups up and installs WordPress theme’s for clients every day.

He suggested “http://studiopress.com and http://themezilla.com are great places to look”. I agree, having worked with StudioPress before with a client, it did impress me. However, If you do choose a StudioPress theme and want to modify it, I strongly suggest finding a developer who knows StudioPress (also known as the Genesis Framework that their themes are built on). Even as a good coder myself, it took me a bit of time to get used to how their framework is coded vs the standard WordPress setup.

He also showed me his https://leanthemes.co/. When I tested their theme’s I was blown away! Milton is the best pre-made blog theme’s I’ve ever seen! Super clean and super fast.

Now I have a good, inherently fast theme in place I move onto the hosting of the website.

2. Hosting

Next in my speed up WordPress checklist, I look at hosting. If you run a number of speed tests over a few days and the initial response time is over 1.5 seconds, it time to look at moving hosts.

Here you can see my personal website initially loads the HTML in 0.1 secs.

Image of a page load test showing the initial load time of my personal website henryreith.co

Initial Load Time

However as you can see below, Bar Restaurant Success is taking over 5 seconds to initially send the web page back to the browser!

Image of a Page Load Waterfall Of Slow Website that shows how it tool over 5 seconds to initially load

Page Load Waterfall Of Slow Website

This is a sure sign, that either 1. the theme is poorly coded (that in this case it’s ok, but not good). Or 2. the hosting needs improving. In this case, I know the hosting is poor, so I will moving the website to good hosting next week ;).

From experience, if you are using any of these below, I can guarantee your hosting is killing your WordPress website speed:

Hostgator (that also goes under the alias, Just Host)

1 & 1

Or any other hosting sold for under $5 a month as an add-on to buying a domain.

There are some good ‘standard’ shared hosting solutions out there such as TSO Host for UK focused websites VentraIP for Ozzie focused sites or In Motion Hosting for the rest of the world.

However, good hosting is now very cheap. We as business owners have no excuse not to buy fast hosting, if we are serious about growing our businesses. There is now a number of hosting setups specifically designed for WordPress. I personal recommend and use:

‘In the Good and Startup Affordable Hosting Level’

PowerUp WordPress Hosting

This is the hosting I use for Fridge, and it’s fast. Plus their customer service team has been amazing as well.

SiteGround WordPress Hosting

I use SiteGround for my personal site and most of my clients as well. It’s incredibly good value starting at just $3.95 to host a single site.

However, I use their top package, mainly just because I wanted to host multiple sites and they have a useful 1-click site clone (staging) feature. This is a great feature for any startup, or tech head who is always tweaking there website. It takes the hassle out of development.

Plus they have a built in WordPress management dashboard that is fantastic.

And last rocking feature is you get to choose which part of the world you want your website hosted. So you can choose a location near your customers. That will make your site that extra bit faster for the people who are going to be using it.

‘ The Premium My Start-Up Is Making Money WordPress Hosting’

I have also work with both WP Engine and Media Template. Both of which are the best you will find and I personally recommend to anyone.

I have personally talked to Media Template’s customer support team. I was blown away by the fact they answered and treated me like an intelligent web savvy adult, and didn’t just read a list of questions from a screen! Plus if you are moving to, or from them, they will move your site for you!

WordPress Hosting Conclusion

For me the above 4 options are the only hosting solutions I would recommend. However there are millions of hosting companies out there, so if the above don’t rock it for you can do a search for “Wordpress Hosting” on Google.

3. Cache & Minification & All The Rest

Next on the checklist to speed up WordPress is to cache, minify and generally make your website file size smaller. If you want to get geeky about all the details of this technique, you can check out this article.

What difference does it make?

For a quick example, I turned the Caching off, on the Fridge site and ran a test on Pingdom & GTmetrix.

Without any caching and other optimization on, this site took an average of 2.4 seconds to load, and everything on took 1.3 secs to load. Essentially caching the site halved the loading time.

Without:

Image of a Pingfom full page test, when no cache is enabled on Fridge's website

No Caching On Website

With:

Image of a Pingfom full page test, when cache is enabled on Fridge's website

With Caching On Website

It should be noted that the Fridge site’s hosting is fast. When I have optimized sites on poor hosting before, I have seen a decrease of loading time of up to 4 seconds!

How to Cache and Minify Your WordPress Site

The easiest way to do this is by using a plugin, either W3 Total Cache or WP Super Cache.

I use W3 Total Cache, so I’m going to concentrate on this for this article. You can view a detailed guide on how to set up W3 Total Cache or view the video below.

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=2Q_V95ip7Pc

Note: Unlike the video I strongly advise setting the minify mode to manual. If left on automatic, scripts and other resources tend to get loaded in odd orders and break the site.

Image highlighting the option to Change W3 Total Cache Minification To Manual

Change W3 Total Cache Minification To Manual

For the rest, I’ll let you watch the video above, to see the exactly how to set it up. However, I do have a few extra tips that I have on my checklist that I do as well.

Page Cache Setting

On the Page Cache add your sitemap address to the Cache Preload section and tick ‘Automatically prime the page cache’ and ‘Preload the post cache upon publish events.’

Image highlighting where to turn on page cache and add your sitemap to price it in W3 Total Cache that helps to speed up WordPress

Add sitemap to page cache

Include Comments If Needed

If you turn the mimification on and enable HTML & XML minify (that is advised) it will remove all the comments from in the HTML. However, if you use lazy loading widgets as we do by commenting them out. You will need to include a word from that code in the Ignored comment stems box. So in this case we have included the word ‘facebook’ so this process doesn’t remove the Facebook widget code.

Image to show where to add custom ignore comments minification into W3 Total Cache

Add custom comments word

Enable JS & CSS Minify

Most off the shelf theme’s load many different CSS and Javascript files individually (remember the Monstroid theme example earlier). This means that a web browsers has to call the server and then receive many different files for the page to run. But, browsers can only make a certain number of requests at a time to download resources, so lots of requests will significantly slowing down the speed of your site loading.

One great feature of W3 Total Cache is it lets you combine (and minify) these CSS and JS files together.

However, in order for your website to work properly the files need to be combine in the same order as they would as if they were being downloaded individually.

To find out what order resources are loaded, I head over to Pingdom, and run a full page test on a blog page (as this normally loads every resource).

In this example I’m going to go through and use my client, LVS Glass as an example.

You can see in the Pingdom Waterfall below, most file end with a question mark then some digits.

Image of query strings in the file names of WordPress resources when checked with Pingdom

WordPress Query Strings

These are called query strings and they need to be removed. This will both speed up the site and allow the minification to work.

You can jump down to this section on removing query strings from WordPress below to get the code.

Having done that, run the Pindom test again, and it will result in the files not having question marks and digits afterward.

Let’s first concentrate on CSS file.

From the top of the waterfall, go down the list and copy all the locations of the CSS files, one by one and add them to the CSS File Management List.

Image of how to add CSS files to CSS File Management List in W3 Total Cache

CSS File Management List

After you have added all your CSS files, click ‘Save all settings’.

Now, click the ‘Empty All Caches’ under the Performance tab at the top. And now load your homepage to check everything is working, and your site looks normal.

If it looks fine, then we can rerun the Pingdom test and you should notice all the CSS files have been merged into 1 file that loads first or second after the page load.

Next we can move onto the JavaScript (JS) files. These can be trickier as for JS to work, the files must be loaded in an exact order. I also advise that you don’t combine some files as they are critical to others working. When I’m optimizing a WordPress site I never touch:

  • jquery.js
  • jquery-migrate.min.js
  • analytics.js
  • modernizr.js
  • any split testing JS such as Optimizely
  • any ad/pixel tracking JS e.g. Facebook or any other externally loaded script.

If your site is built using Bootstrap or Foundation I don’t touch their function’s JS file that might look like bootstrap.min.js or foundation.min.js.

Essentially I only look to combine files that add user features to a theme or plugin. And these tend to include wp-content/theme in their file web address.

So in the case of LVS Glass, it is all the highlighted JS files below:

Image highlighting all the JS files in an example WordPress Theme

JS Files Loaded

Now add these files one by one to the JS file management section as we did with the CSS files.  After you have added all these files, click the ‘Save all settings’ button as you did with the CSS, and clear the Cache.

If you notice some functionality doesn’t work on the site, then we know one of the files added is critical and must be loaded in a certain order.

If this happens I delete all the JS files I have added and run another Pingdom test so I can see the JS files loading order again. Next, I do the process of adding files to JS file management again; however, I only add 1 JS file at a time before clicking save, then look at the site. If all is good, I then add the next JS file and repeat the process, until I find the file that is causing the issue. I then leave this file out and just combine the rest.

W3 Total Cache Notes

W3 Total Cache is a great plugin and works amazingly in 99% of cases. In my experience of advanced optimization I have noted 2 things:

  1. If you select CSS Tidy as your CSS minifier, it may mess up pages that are loaded in iframes, such as LeadPages. However, I haven’t seen any issues with either the default or YUI Compressor options.
  2. If you are running PHP 7 (as I advise below) the plugin will throw an error. You can fix this PHP7 error in about 30 secs, just by edit one of the files, as shown here.

4. Removing Query Strings from Resources

This is a really quick way to speed up WordPress. As mentioned above it’s the process of removing the numbers at the end of resources.

To do this, you can add the code below to your functions.php file of your theme, or better add it to your Functionality Plugin.

Add the following code it and it will remove the query strings from WordPress.

5. Reduce the Number of Plugins on Your Site

Next on this checklist to decrease WordPress loading times, is to reduce the number of plugins on your site.

Essentially the more plugins on WordPress you run the slower your site will be as a rule of thumb. The most I ever have is 20, and if I need more, I ask myself what I can do without.

If you run the P3 Profiler as shown above and there is 1 plugin taking up loads of the load time, see if you can do without it, or find an alternative.

Next, if it’s a pre-made theme I look through to see if there are any plugins that it auto installed, but are not needed. Examples of this may be WooCommerce, Slider Plugins, Contact Form 7, Social Media Plugins (more on this below), JetPack and Shortcode plugins. If any of these plugins are installed but not being used then I remove them. And even if it is being used, I ask myself is there a better, faster plugin out there.

Next I remove any plugins that do things such as, add the default Twitter stream/follow buttons or FB page like button to a widget. First off, who has this one their site anymore /:. And two, Twitter, Instagram and Facebook provide a way to generate this code, that you can drop into a Text widget if needed. Adding a plugin to do this, just takes more resources and increases WordPress load time.

After that, I look to see if there are any ‘pointless’ shortcode plugins e.g. ones that allow you to embed YouTube video’s in WordPress pages. This can all be done by default by WordPress via oEmbed, as per the video below. Or by copying the iframe embed code YouTube gives us.

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=76-lR85ocrk

More advice on shortcode button below.

Also, I look to remove what I call ‘helper’ plugins that companies make to help users add their script to a website. Examples are Optimizely’s plugin and LuckyOrange’s plugin (both services I use and love, so not hating on them, all SaaS companies have similar plugins). All these plugins do is add 1 line of code to add their script to your site, but they take up yet more resources. It’s far more efficient to manually add this script code yourself. Preferably you would add this to functionality plugin (in most cases), however you could add it to your functions file as per the video below.

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=4xbvhXj72kU

After carrying out the above checks, I look through the plugins that are being used again. I am rarely left with more than 15-20 active plugins. I then totally delete the unused plugins, and move on to look at other ways to speed up a WordPress website.

Use As Little Shortcode as Possible

As mentioned above there are many pointless shortcode buttons for WordPress. Especially for media (video or ‘embed a tweet’ for example that’s now part of the WordPress default functionality) embed’s and widgets. However there are other Shortcode plugins that are bad news for anyone looking to speed up their website, and these are styling shortcodes.

What are WordPress Shortcodes?

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=PHzIflDHcYE

Essentially, shortcodes are codes that WordPress recognizes, and a developer has told WordPress what to do when it sees that code. They tend to be wrapped in square buckets and look like this:

[socialbuttons]

And this might display a group of pre-defined social share button. Or:

[button text=”click me” link=”http://awesomedomain.com/yes” size=”large”]

This might show a pre styled button on the front end. Or they might wrap around some other information e.g.

[tt_popup id=”22”]A nice image[/tt_popup]

On poor hosting, lots of shortcodes will slow you site down a lot, however on good hosting as suggested above, you shouldn’t see much of an impact on performance.

WordPress Shortcode Do’s & Don’t

Because shortcodes spit out full HTML instead of displaying the shortcode text they can be very useful for developers. They can give non-coders ways to show complicated code on the front of your website without the need for writing any code.

The issues with them comes, when you switch away from a plugin or theme that uses them. You will be left with a lot of shortcodes all over your website, but no instruction for WordPress to do something with it.

They then have to be removed manually

via GIPHY

or if you know some RegEx and have the time to get geeky with this go for it.

All of the above methods are essentially just hassle and time consuming to do. So if your theme relies on shortcodes to run, be aware it is likely to be slower than it could be. Plus if you ever move away you will be left with a site that you may as well start again with, as every page will look like weird.

I advise only using shortcode if you are going to use the plugin for a long time/ever. And don’t use shortcode that are theme dependent, or at least use them sparingly, as you will have to change them all when you move themes.

6. Use Good/Fast Social Media Share Buttons

When looking for a social sharing button plugin, I look for speed and if the number of shares is cached or not. If it isn’t then every time your page loads it will have to spent time getting all your total share counts from the networks, that takes time. Removing plugins that do it the non-cached way has reduced page load speed by up to a second!

Plus in general avoid the popular AddThis service. It is slow, and is only used as a way to put 3rd party companies pixels and track visitors on YOUR website (last time I checked)! Also from my experience, the Shareaholic plugin significantly slows any website I have worked on down.

I personally use Easy Social Share Buttons for WordPress as I have always found it to be the fastest social plugin around. However, there are some other good social WordPress plugins as well.

Something else to consider when looking for a fast and efficient WordPress social media sharing plugin is where they can be placed. When I first started working with a client, they had been manually placing share button shortcodes at the top of their posts. This was because the buttons they were using didn’t have an option to include it at the top of blog posts. Needless to say, this was killing their WordPress load speed.

According to Neil Patel it is best to either put the sharing buttons at the top and bottom of posts, or as he also suggests and I prefer a ‘floating bar’ on the side of the article, and at the bottom.

So when I choose a WordPress social sharing plugin I look to see if it has these options built in, that Easy Social Share Buttons for WordPress does.

7. Minimize Images File

Having removed unnecessary files from WordPress, I move onto optimizing the necessary files. Reducing the size of the image files on your site is one of the other easy ways to speed up WordPress.

The quick and easy way to do this is by adding either EWWW Image Optimizer or Compress JPEG & PNG plugin to your site.

Both of these plugins work in the background and optimize every image as you upload it, without noticeably reducing the quality. They both also have the feature to (re)optimize all of the currently uploaded images as well.

Compress JPEG & PNG reduces the image size slightly more than EWWW. However, I personally use EWWW Image Optimizer on most of my websites as Compress JPEG & PNG has a monthly limit of 500 free image optimization, before you have to pay for the service. I have found that if you want to go back and optimize old images the 500 limit quickly run’s out.

This process will take some time (especially on slow hosting) but is well worth the effort of a few clicks, and an excuse to grab a coffee wile it does its stuff.

My Advanced Image Compression on WordPress

However, for no other reason than I am passionate about giving the best experience to the Fridge website and clients websites users, I go one step further.

I use the online service of the Compress JPEG & PNG plugin to manually compress images before I even upload them to WordPress. It’s as simple as uploading an image and it will return you an optimized image.

As you can see below, it reduced the image file sizes by as much as 88% on a recent article I wrote about ActiveCampaign Automations.

Image of an example of all the uploaded files and the huge file size saving Tiny PNG can do

Tiny PNG File Compress Service

Having now optimized them with Tiny PNG I then upload them as normal to WordPress. However as I have EWWW Image Optimizer installed, this then reduces the files size, that bit more.

On that particular article, the reduced image files size, ended up taking the page from a potential 8.6Mb to just 3.3mb. That includes all 24 images, YouTube video’s and all the rest!

8. Replace PHP with Static HTML

This is the process of trying to reduce the number of PHP operations your hosting had to do, but changing PHP code into HTML. The idea is to change dynamically created content such as the date e.g. the year in a copyright statement to just the raw text of 2016 Or if you had a basic static text and images home page you would make a WordPress template with that HTML in instead of using the WordPress back end to write it in the WIZIWIG editor.

I give the above examples in the past tense, as this was a very popular tactic back in the day. It was very effective when hosting was slow, and was seriously limited by the number of operations it could perform a second. However, with any modern hosting environment, just removing 1 or 2 lines of PHP, will have virtually no effect on the processing time of your page.

The amount of extra effort you have to go through to take a pre-made theme and remove lots of small php operations isn’t worth it, to save maybe 0.001 seconds of loading time.

These days it is more about picking or creating a well coded WordPress theme as discussed above, than trying to reverse engineer a bad theme.

Basic Ways to Speed up WordPress Conclusion

Having gone through the checklist above, your website should be loading in less than 2 seconds (ideally less than 1.5 secs). However when you test the site load time, depending how many extra scripts you have loading in the footer of your page may take a bit longer.

The important thing here is, for me as long as customers can start using your website within 1.5 seconds of them clicking your link in an Ad or organic search, then your site is on the way to converting more visitors to customers.

Advanced Ways to Speed up WordPress

However, if you have got a good onsite conversion setup already going, and we want to speed up a WordPress website even more, there is more we can do.

via GIPHY

Below I will cover a few of the ways to speed up WordPress. I will get a bit techy and codey. However, I will try and make it as easy to understand as possible for everyone, with some quick copy and pastes. However, if this isn’t your thing, you can ask your coder do to the below for you.

9. Move to PHP7

One of the quick ways to speed up your WordPress website is to use PHP7 on your hosting. WordPress is built on PHP code and until recently PHP5 was the latest version that was supported by WordPress (and most hosting environments).

However, in December 2015 Php7 was released. Plus WordPress was also updated so it can run on PHP7, and the results have been Awesome.

In a recent article by WP Engine, they found that WordPress ran over twice as fast on PHP7 vs PHP5.

So if you are using WordPress 4.3.1 onwards, this is one of the quickest and easiest ways to speed up WordPress.

If you have cPanel Hosting you can active PHP7 by going to the PHP Version Manager and following the onscreen instructions to update a site.

Image of where to find PHP Version Manager in CPanel

PHP Version Manager

Or if you can’t do this, check with your hosting provider’s support and they should be able to show you how to update it.

Note: The only plugin I have found that was an issue after updating to PHP7 was W3 Total Cache. And this can easily be fixed as shown above.

10. Lazy Load Images

Lazy loading is the process of only loading the non-essential information such as images when they come into view on the client’s browser window. For a more technical answer on how Lazy Loading works you can check out this article. It is a great way to speed up WordPress, especially on mobile.

There are many great advantages of lazy loading and the quickest way to implement it is by using a plugin. The BJ Lazy Load plugin is one of the most popular; and there are so many other lazy load plugin’s to choose from, if this doesn’t work for you.

However, again, taking an out of the box solution can cause issues (as it did when I tried it on the Fridge site). To gain more control over how it all works, I choose to manually add it to all of my themes. I use the Lazy Load XT script as it is easy to implement and the fastest most flexible solution that I know. If you know how WordPress templates work, there isn’t much involved in implementing it.

On the Fridge site all the article featured images are lazy loaded. And all the of the images on the home are lazy load as well. This helps us keep our site as quick as possible on mobile. It cut the page load size down by over 50%.

Example of lazy loaded images on the Fridge website

Lazy Loaded Images

11. Lazy Load Widgets

Again the same as images, lazy loading widgets e.g. Facebook page like button will speed up WordPress a lot, especially on mobile. It is a bit more complicated to implement but it is well worth it.

As you can see below, over the past 3 years, mobile/tablet usage is now nearly 50% of Fridge’s readership, so having a fast site on mobile is a must.

Picture of 3 pie charts from Google Analytics showing the percentage of sessions from phones, tablets and desktops in Janurai 2014, 2015 and 2016. Showing that in 2016 Phone and Tablet usage accounted for nearly 50% of Fridge's traffic as apposed to just over 25% in 2014.

Fridge’s Website Phone, Tablet & Desktop Usage Change

This makes removing these massive social scripts a must for us.

On this Fridge site the Facebook Button for the Fridge Facebook page is an example of a lazy loaded widget.

Example of a lazy loaded widget, the Fridge Facebook Page Like button at the top of all articles

Lazy Load Widget

I don’t know any plugins that can target widgets like this, so instead it is something I code in to WordPress themes. Again, this is part of the Lazy Load XT package and is easy to implement.

You can also lazy load a lot more, including images in articles and video’s however we don’t go that far, as our site loads in about a second anyway. Having said this, because of the ever increasing importance in mobile, this is on our roadmap. As we want to ensure we continue to have an easy to access resource for startups and founders, whatever device you are on.

12. Host Your Site On A CDN

A Content Distribution Website (CDN) is a distrusted network of your files, in locations across the world. This means the resources for your site can be served from a data center as close to the end user as possible.

It is another great way to see up your website vs just using your domain hosting data center to serve your website resources to users. For anyone who has a worldwide audience, like Fridge does, or my clients do, I would suggest using a CDN is a must.

There are now lots of great CDNs out there, but we kept it simple and use Amazon CloudFront, and set it up in W3 Total Cache.

There should be a video here, but as javascript is not enabled on your browser the video can not be loaded. However, You can view it here:

https://www.youtube.com/watch/?v=BAjF7u_NYP4

(we will do an Fridge guide for this soon)

13. Async & Defer Javascript

Async and Defer is a way to delay the time that you load Javascript files to allow a webpage HTML to load first before the script.

I’m not going to get techy about it, I’ll just get into what we do.

Like many of you, I use LeadPages, and we inset LeadBoxes into articles each loading their own scripts.

To ensure the script we load mid page doesn’t ‘block’ the rest of the page loading, we add in the async attribute the LeadBox script.

An example of the original LeadBox script is:

<a href="https://fridgemedia.leadpages.co/leadbox/blarblarblar175dec95fb46dc/0000000098338816/" target="_blank">Click Here to Subscribe</a>

<script data-leadbox="blarblarblar175dec95fb46dc" data-url="https://fridgemedia.leadpages.co/leadbox/blarblarblar175dec95fb46dc/0000000098338816/" data-config="%7B%7D" type="text/javascript" src="https://fridgemedia.leadpages.co/leadbox-A0001.js"></script>

However, the more efficient way of adding these scripts that will speed up a WordPress site is including the async attribute in the script code:

<a href="https://fridgemedia.leadpages.co/leadbox/blarblarblar175dec95fb46dc/0000000098338816/" target="_blank">Click Here to Subscribe</a>

<script async data-leadbox="blarblarblar175dec95fb46dc" data-url="https://fridgemedia.leadpages.co/leadbox/blarblarblar175dec95fb46dc/0000000098338816/" data-config="%7B%7D" type="text/javascript" src="https://fridgemedia.leadpages.co/leadbox-A0001.js"></script>

This principal can be applied to most scripts that you get given from various services.

Conclusion

Through this article I have covered all the quick and easy ways to speed up WordPress. Plus some of the more in-depth ways to decrease WordPress loading speed. By doing this you are going to go a long way to increasing your conversion rates.

So yes, you can have a fast loading website, but still have all the necessary extra conversion and ad scripts that are used these days!

Now it’s over to you. Even if you just ensure your hosting fits your needs and optimize your site with W3 Total Cache your users and customers will love you!

This is the checklist I use when going on a SPEED UP WORDPRESS mission. I hope you can gain the benefits for your startup from it that I do.

Have I left anything out? Do you know any other ways to speed up WordPress? Add them in the comments below.



Editor-In-Chief

Fridge Magazine Editor. WP Membership Plugin, Founder. "marketing is a commodity, process is priceless"

Connect:


  • Join The Conversation

    Discussion

      Comments: 2

    1. Kathirvel on

      Really Nice article. I found more points than any other speed optimization posts.
      I followed some of your points now my page speed is below 700ms. before it was 2.10s. Thanks for this awesome article, sure i will share this with my blogger friends.
      regards,
      kathir.

      Reply
    2. Jyoti Ray on

      Wow! This tutorial helped me to Speed Up WordPress Site. I had not much idea about CDN and image compression. But I using CF and image compression tool as well. Now my site loads under 1.5 seconds. Thank you very much for this article.
      Thanks, Jyoti

      Reply

    Join The Conversation