How to Increase Speed 3X for a Slow WordPress Site

Page speed is crucial in this day and age of short attention spans and demand for instant gratification. Not to mention that it is one of the ranking factors on Google.

For me, as an aspiring front-end web developer, website performance optimization is a vital part of the job. For that reason, I spent a lot of time studying all the ways to increase the performance of my blog. And it also turned out in a pretty nice post about WordPress page speed optimization.

Use a caching plugin

Using a caching plugin is the fastest way to improve the performance of your WordPress website. Caching plugins improve the user experience by increasing server performance and reducing the download times. There are a lot of caching plugins for WordPress, however, I use and recommend – W3 Total Cache.

After installing this plugin, go the General Settings and enable Page Cache and Browser Cache. Other configuration settings depend on what hosting you’re using, your theme and plugins. You can use my settings which are safe and won’t break your website.

How to import configuration: Extract archive, then go to the General Settings, scroll down to the bottom and import the file.

Minify CSS and JavaScript

Minification of resources means removing unnecessary characters, white space and comments from the files. As a result, it reduces the size and speeds up the load time. There are a few ways to do it.

Option 1

If you’re using the W3 Total Cache plugin, then there is an option to minify CSS and JavaScript. But sometimes it may break your theme, so in that case, read on.

Option 2

A neat trick is to test a page in Google PageSpeed tool and download from there minified version of CSS and JavaScript (and optimized images as well if you need). Then, upload and overwrite files in your theme’s folder.

The drawback is that you may need to do it every time after the update to your theme or plugins.

Option 3

This is not the easiest way. But If you are an aspiring front-end web developer, then I recommend learning how to use Grunt to minify. Grunt is a task runner used by many developers and besides minification it can make your life easier in many ways.

Optimize Images using Lossy Compression

Usually, a big part of page size is made up of images. So it’s crucial to optimize and compress them. With a lossy compression, you can sometimes save up to 90% of initial file weight. While retaining most of the quality. In most cases, you won’t be able to tell the difference even upon close inspection.

I use the “Kraken” plugin for image optimization. It’s premium plugin but it’s free for the first 100 MB, which should last for a while. In addition, it’s always free when you optimize on Kraken website.

Another great alternative is “TinyPNG”. With a free account, you can optimize about 100 images each month.

Note: To get the best results I also resize images in Photoshop to the exact size I will need. Then, for JPEG files I choose a high-quality (60) option in Save for Web.

Disable Emoji’s

WordPress insists on loading wp-emoji-release.min.js every time. Whether you actually use emoticons or not. It is best to get rid of it and have one file less to load. There are a couple of ways to do that.

Option 1

If you want to avoid unnecessary plugins, add this code to the bottom of your functions.php file.

Disable Embeds

Since WordPress 4.4 release, there is a new script that is loaded, called wp-embed.min.js. It allows you to more easily embed blog post, videos etc. The problem is that WordPress loads this script on every page. You can read more about it on official page and decide if you want to keep it. I disabled it because I don’t see a need for it. In that case, you can do it in a couple of ways.

Option 1

Put this code below to your theme’s functions.php file and it will stop loading.

Also, you can Install a plugin “Disable Embeds”. Just activate the plugin and you’re good to go.

Use Disqus comment system

Disqus is a great option for comments, eliminating almost all spam. However, its default plugin creates additional HTTP requests which can significantly slow down your site.

Thankfully James Joel developed a plugin which cuts out those HTTP requests on initial load by using lazy loading. It’s called “Disqus Conditional Load”. It’s free and even doesn’t require jQuery. Also, it is SEO friendly, so Google will still crawl your comments.

As a result, your website will load faster using Disqus, compared to your blog comments.

Note: If you’re already using Disqus don’t forget to disable official Disqus plugin to avoid conflict.

DNS prefetching

Let’s say you need to request a file from maxcdn.com. Then you can prefetch that hostname’s DNS by adding this in the <head> of the document:

“That simple line will tell supportive browsers to start prefetching the DNS for that domain a fraction before it’s actually needed. This means that the DNS lookup process will already be underway by the time the browser hits the <script> element that actually requests the file. It just gives the browser a small head start.”

In WordPress, you can add this code to functions.php and it will add rel="dns-prefetch" to your header.

Eliminate render-blocking JavaScript and CSS

If you tested your website on any of the tools online, you probably saw a warning like this.

So how to solve render-blocking?

Load CSS asynchronously

This a great article that explains and illustrates what async loading looks like. So I’m not going to get into the details.

The easiest way to do it with Speed Booster Pack plugin. Besides asyncing CSS it also has other features to speed up WordPress, but I personally use it solely for this.

Go to the plugin settings and expand the option “Still need more speed?” and tick “Load CSS asynchronously”. And you’re done.

Defer and async JavaScript

Firtst of all, you have to find out if it’s better to async or defer JavaScript for your website. That article I mentioned above will help you to do that. I found that for my blog it’s better to use defer.

Option 1

You can try to defer JavaScript with the same Speed Booster Pack plugin. Tick “Defer parsing of JavaScript files” in the settings. But for some reason, it didn’t work for me. So here is another option.

Option 2

1. Get your script handles. Every enqueued WordPress script has a handle: a name that the site knows to call it by. To begin, we need to know these handles for all scripts, but unfortunately, it is a bit of a hassle. First, copy this code to your functions.php file:

That’s it. Now inspect the source code in the head, to make sure it’s working. In that case, you should see something like this:

How to achieve 100/100 in Google PageSpeed Insights test

First of all, don’t obsess about the 100/100 metric. The perfect score alone doesn’t do anything for your site. You should aim for speed. Google PageSpeed Insights tool just provides guidelines on what to work to improve performance.

However, if you followed all the above advice you should be able to get a near perfect score. Except for one little problem. And it comes from the Google themselves. What an irony.

Caching analytics.js

The main obstacle to getting the perfect 100 from Google is the Google’s analytics.jsthat’s not cached. Therefore, you have host it yourself to do it.

The easiest way to cache it is with the plugin “Complete Analytics Optimization Suite”. But, I suggest to test yourself to look if it has any performance impact at all. I didn’t notice, or it’s very minor.

Pick a fast hosting

For the most part, fast website relies on a fast hosting. Therefore, If you care about speed, you shouldn’t settle for anything less than WordPress managed hosting with SSD.

I’m using Traffic Planet Hosting and it’s blazingly fast. Here is what the co-owner of TPH Terry Kyle says:

“Page loading speed is one of our (hopefully healthy) obsessions”.

They also have enterprise-level DDoS protection to all customers’ websites with Incapsula, an industry leader in DDoS protection. At no extra cost. By the way, they offer free SSL certificates as well. In addition, TPH provides a free site migration and in general have a fast, awesome support.

To sum up, I highly recommend them. Check them out.

Switch to PHP 7

PHP 7 is twice as fast as an old PHP 5.6. Latest WordPress version already runs on PHP 7 and you can enjoy those improvements. But not all plugins support it yet. As a result website owners are reluctant to transition or are simply unaware of PHP 7 and it’s benefits.

Still, I had no problems switching to PHP 7 with my 11 plugins (except for the small fix you have to do for W3 Total Cache). Therefore, I recommend to test it for your site and revert to PHP 5.6 if you encounter problems.

So how to do it?

First of all, your hosting has to support PHP 7. Ask them if they do and if they can enable it for you. If you decide to migrate to Traffic Planet Hosting their support team will take care it for you. Including a fix for W3 Total Cache.

To conclude: performance optimization is an ongoing process

Keep in mind, that I don’t use a content delivery network (CDN) and I haven’t optimized font loading. Also, lazy loading images would help as well. Not to mention emerging, new methods I am currently not aware of.

In conclusion, there are still ways to improve. So, I will keep updating this post. Hopefully, you will speed up your WordPress site dramatically with these tips. Of course, you’re welcome to share in the comments your results and opinions.