How to Optimize my WordPress Loading Time?

We all know that loading time is the one of key factors for keywords ranking. How does loading time affect your keyword ranking? Well, it is not direct, but indirectly via bouncing rate.

If your website is very slow to open, your visitors will leave even before see anything on your page. Yours bounce rate is very high, so G recognize your website can’t give users’ optimized experience. Therefore, your keywords won’t rank highly in G eyes.

In this article, I will show you exactly how to improve your WordPress site loading time by taking an example of my website, wprank.top.

Before I start any speed optimization, I took a loading time test from GTMetrix, and here is the result.

How to Speed up your WordPress site? Step by Step Guide

The first thing first, you need a plugin, WPRocket, and for me, it is really must-have plugin to optimize your loading time. I won’t give much on how to configure the WPRocket properly here. I will write a seperate guide to detail everything on WPRocket users menual.

If your domain hasn’t switched to CloudFlare, I think you should do now. CloudFlare free plan is good enough to assist your website loading anywhere.

Prefetch DNS

Prefetch DNS can reduce the loading time by setting up DNS lookups to perform in the background.

DNS prefetching can make external files load faster, especially on mobile networks

How do you know what external files your website should prefetch? Well, you can use this tool, https://prefetch.xyz/, to display external files you need to prefetch.

However, it does not always show all files sometimes, so if you would like double check, I would suggest another method.

Open your website in Chrome browser, then press F12, and a code panel open at the bottom, you need to click on the “Source” tab. All external files that you should prefetch are displayed on the left bar.

Enter those external files into the setting of “Prefetch DNS Requests” in WPRocket.

Image Optimization

To optimize each image you display on your WordPress site, you need another plugin, Shortpixel, to get images load faster.

Firstly, you need to enable all Lazyload option in Media tab of WP Rocket.

Then move down to “Disable” both Emoji and WordPress Embeds.

Once done these setting, go ahead to install “Shortpixel” plugin.

ShortPixel is a image compression tool that can reduce image size by 80%, but still remain the image quality. It comes with free credit, but have to buy once your image compression credit has been used up.

Once ShortPixel is ready, go to its dashboard, then activate the Lossless Compression option in the “General” tab.

Then move to “Advanced” tab, and scroll down to select the “Create WebP Images” option.

Now, you can go to Media > Bulk Shortpixel in your WordPress to compress all your images in one run.

Once finish the optimization fo all images, move back to WP Rocket > Media, then scroll down to enable this option: WebP caching

Prevent Contact Form 7 from Loading on Every Page

I don’t know why is this, but it happens a lot and what’s weird it’s not on every WP installations. 3 of 5 of my websites have this issue. This is a pretty simple one.

1. Go to functions.php (public_html/wp-includes)
2. Add the following code on the bottom.

// Remove contact form 7
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
add_action('wp_enqueue_scripts', 'load_wpcf7_scripts');
function load_wpcf7_scripts() {
  if ( is_page('contact') ) {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
      wpcf7_enqueue_scripts();
    }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
      wpcf7_enqueue_styles();
    }
  }
}

If you have CF7 on multiple pages, change ” if ( is_page(‘contact’) ) {” to “if ( is_page(‘contact|page1|page2|page3’) ) {“

Remove version entirely from the source files

WPRocket should do the job with this, but if you have css/js files that are excluded WPRocket won’t touche them in any way, so this one is coming in handy to those files.

1. Go to functions.php (public_html/wp-includes)
2. Add the following code on the bottom.

Time for results after doing all these simple neat tricks that are do// Remove version entirely from the source files
function sh_remove_ver_css_js( $src_file ) {
    if ( strpos( $src_file, 'ver=' ) )
        $src_file = remove_query_arg( 'ver', $src_file );
    return $src_file;
}
add_filter( 'style_loader_src', 'sh_remove_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'sh_remove_ver_css_js', 9999 );

Does my WordPress Site Load Faster Now?

After these speed optimization, I took my website back to GTMetrix, and tested again for the difference.

As you can see, my website performs better on loading now, although it is slim.

My website is very thin in content as it is pretty fresh. I am working on it to add more pages and posts.

Apart from these technical issues, your WordPress loading time is also affected by many other factors.

A good WP theme should be optimized for the loading. A bad coded theme takes longer than average to load in. So, try to use a light theme being optimized for speed.

Don’t install too many plugins, and also delete any plugin you are not using. More plugins can certainly slow down the loading.

You should always use a premium server with the speed optimization in mind.

Your WordPress hosting service plays an important role in website performance. A good shared hosting provider like Hawkhost or Siteground take the extra measures to optimize your website for performance.