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.

After the optimization my WordPress blog post loads in 0.3 sec.

[image]

And I got the perfect 100/100 score on Google PageSpeed tool.

How can you replicate these results?

Well, this is mainly due to my lightweight theme that I’ve built myself using the Bootstrap framework. And a super-fast Terry’s Kyle hosting that I highly recommend. But more about that later.

Technically, my slow WordPress site wasn’t so slow, to begin with. As you can see below it loaded in under a second.

Still, I managed to increase its speed 3x times! With the performance optimization I’m about to share.

Table of content:

1. Use a caching plugin
2. Minify CSS and JavaScript
3. Optimize Images using Lossy Compression
4. Disable Emoji’s
5. Disable Embeds
6. Use Disqus comment system
7. DNS prefetching
8. Eliminate render-blocking JavaScript and CSS
9. How to achieve 100/100 in Google PageSpeed Insights test
10. Pick a fast hosting
11. Switch to PHP 7

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 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 the emoji's
function disable_wp_emojicons() {
// all actions related to emojis
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
// filter to remove TinyMCE emojis
add_filter( 'tiny_mce_plugins', 'disable_emojicons_tinymce' );
}
add_action( 'init', 'disable_wp_emojicons' );
function disable_emojicons_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}

Source: WordPress Stack Exchange

Option 2

You can also achieve that with a plugin “Disable Emojis“.

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.

// Remove WP embed and jQuery (Load jQuery from Google API)
function stop_loading_wp_embed_and_jquery() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
// Remove jquery too if it's not required
wp_deregister_script('jquery');
}
}
add_action('init', 'stop_loading_wp_embed_and_jquery');
// Remove the REST API endpoint.
remove_action( 'rest_api_init', 'wp_oembed_register_route' );
// Turn off oEmbed auto discovery.
add_filter( 'embed_oembed_discover', '__return_false' );
// Don't filter oEmbed results.
remove_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10 );
// Remove oEmbed discovery links.
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
// Remove oEmbed-specific JavaScript from the front-end and back-end.
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
// Remove all embeds rewrite rules.
add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' );

Source: Crunchify.com

Option 2

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 of the document:

In his epic front-end performance article, Harry Roberts explains it:

“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 ' . "n"; } return $tag; } add_filter( 'script_loader_tag', 'my_defer_scripts', 10, 3 );

Source: Scott Nelle

That’s it. Now inspect the source code in the head, to make sure it’s working. 

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.

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.