increase wordpess website speed header

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.


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.

Download minified and optimized resources from Google

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 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()) {
// Remove jquery too if it's not required
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' );


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 Then you can prefetch that hostname’s DNS by adding this in the <head> of the document:

<link rel="dns-prefetch" href="//">

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 <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.

// DNS Prefetch For Speed Up
function dns_prefetch() {
$prefetch = 'on';
echo ''."n";
if ($prefetch != 'on') {
$dns_domains = array(
foreach ($dns_domains as $domain) {
if (!empty($domain)) echo ''."n";
add_action( 'wp_head', 'dns_prefetch', 0 );

Source: GitHub by Leo Gopal

Eliminate render-blocking JavaScript and CSS

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

A render blocking warning from Google Insights tool

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:

// Getting script handles
function gb_inspect_scripts() {
global $wp_scripts;
foreach( $wp_scripts-&gt;queue as $handle ) :
echo $handle . ' | ';
add_action( 'wp_print_scripts', 'gb_inspect_scripts' );

Source: WordPress Stack Exchange

This code prints out a list of enqueued handles, separated by ” | “, into the header of every page.

Script handles in the header

Copy those handles and remove that code from the functions.php, because you won’t need it anymore.

2. Defer JavaScript. Finally, place this code in your functions.php and change the handle names in the array to the ones you copied in step 1.

// Defer JavaScript
function my_defer_scripts( $tag, $handle, $src ) {
// The handles of the enqueued scripts we want to defer
$defer_scripts = array(
if ( in_array( $handle, $defer_scripts ) ) {
return '<script src="' . $src . '" defer="defer"
type="text/javascript"></script>' . "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. In that case, you should see something like this:

Defered JavaScript

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.

Levarage browser caching of analytics.js

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.

Traffic Planet Hosting Logo

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.

Click Here to Leave a Comment Below

Leave a Reply: