How to Speed Up WordPress Performance by 70% (Case Study)

This time I want to show you some simple techniques on how to improve or increase your website speed on WordPress. I have tested my blog speed some days before, noticed that the speed was horrible.  Google Page Speed gives me a 6.

You have to know that website speed its so important to make the websites popular on search engines.

Clearly Google is increasingly acting upon what is intuitively obvious: A poor performing website results in poor user experience, and sites with poor user experiences deserve less promotion in search results.

So let start test our websites with Google Page Speed: 

For the moment this is the GooglePage Speed report for this blog:

Before starting optimization the WordPress blog GooglePage Speed it is:

The first question I do to myself is:  What causes this big issue with my blog.

Google Page Speed gives me some advice to make my page faster:

Then I decided to install   Wp SmushIt another plugin that seems to fit with our website and theme without any problem. So I recommend also our buyers to use this plugin to compress their images.

Now I want to share with you this video,  take a look at how you can configure this plugin: 

After plugin configuration, I see that images are reduced by 10% – 20%. However, the Google PageSpeed test doesn't change so much the plugin gives to my blog only some points.

Then I started to compress images by myself, if you want something perfect you have to make it manually. So I get the images and resize them with Adobe Photoshop after saving the new file

I see that the file its yet so large.  The only way to reduce the file size its to compress the file with some tools now. I have tested so many online compressors but the only one that I like is CompressNow

I have uploaded the new images resized to Compressnow and the tool compresses them to some little images files (about 10-70Kb).

The moment of truth!

Let's test the website with the new images.

Now, this is a good result if you consider that before that we have only a 6. We have gained 42 points with image optimizations.

My experience shows that the most important parameter to speed up any websites is the media files. These files take so much time to download.

Below you can read this article from Google how to optimize your images:

https://developers.google.com/speed/docs/insights/OptimizeImages

Eliminate render-blocking JavaScript and CSS

The second piece of advice google Google Page Speed gives to me its to Eliminate render-blocking Javascript and CSS.

Then I started to read about this problem and found that I have to call all my Js and Css files to the Footer.

In case you have a little Html template you can do it without any problem, in other cases like a WordPress theme this is more complicated because you have to call some scripts and header. So the only thing I can do it to remove some javascript and CSS called but not used in the blog page.

This blog is running on Specular – Responsive Multi-Purpose Business Theme that used some different Javascript and CSS files but in this case, if I used it as only as a blog. So let remove some of these files because I will not use other features. My example is about Specular but its the same thing with other themes out there.  WordPress Themes call the Javascripts and CSS files through functions.php file.  These files are called with this function wp_enqueue_style, wp_enqueue_script after they were registered but this isn't in our interest now.

The function that loads the styles on Specular is:

function codeless_register_global_styles(){
global $cl_redata;
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_style('bootstrap-responsive');
#wp_enqueue_style('jquery.fancybox');
#wp_enqueue_style('vector-icons');
wp_enqueue_style('font-awesome');
wp_enqueue_style('linecon');
#wp_enqueue_style('steadysets');
# wp_enqueue_style('hoverex');
#wp_enqueue_style( 'jquery.easy-pie-chart' );
#wp_enqueue_style( 'idangerous.swiper');
#if( redux_post_meta('cl_redata',(int) codeless_get_post_id(), 'fullscreen_post_style' ) || $cl_redata['fullscreen_sections_active'] )
# wp_enqueue_style('fullscreen_post_css');
}

As you see before some of these lines I put “#” to deactivate some styles like vector-icons that I don't use or jquery.easy-pie-chart. These files aren't used in a simple blog, but are needed if you will create a business website for example.

Let's remove some Javascripts now:

function codeless_register_global_scripts(){
global $cl_redata;
wp_enqueue_script( 'bootstrap.min' );
#wp_enqueue_script( 'jquery-easing-1-1' );
wp_enqueue_script( 'jquery-easing-1-3' );
wp_enqueue_script( 'jquery.mobilemenu' );
#wp_enqueue_script( 'isotope');
if($cl_redata['nicescroll'])
wp_enqueue_script('smoothscroll');
#wp_enqueue_script('jquery.flexslider-min');
#wp_enqueue_script('jquery.fancybox');
#wp_enqueue_script('jquery.fancybox-media');
# wp_enqueue_script('jquery.carouFredSel-6.1.0-packed');
#wp_enqueue_script('jquery.hoverex');
#wp_enqueue_script('mediaelementplayer');
#wp_enqueue_script('tooltip');
#wp_enqueue_script( 'jquery.parallax' );
wp_enqueue_script( 'main' );
wp_enqueue_script('comment-reply');
wp_enqueue_script('placeholder');
#wp_enqueue_script('countdown');
wp_enqueue_script( 'waypoints.min');
#wp_enqueue_script( 'idangerous.swiper');
wp_enqueue_script('jquery.appear');
# wp_enqueue_script( 'modernizr' );
#wp_enqueue_script('jquery.countTo');
wp_enqueue_script('animations');
#wp_enqueue_script('background-check.min');
#wp_enqueue_script( 'jquery.fullPage');
#wp_enqueue_script('skrollr');
#wp_enqueue_script('select2');
#wp_enqueue_script('jquery.slicknav.min');
#wp_enqueue_script('classie');
#wp_enqueue_script('mixitup');
# wp_enqueue_script('masonry');
#wp_enqueue_script('jquery.onepage');
wp_enqueue_script('imagesloaded');
#wp_enqueue_script('jquery.infinitescroll');
if( redux_post_meta('cl_redata',(int) codeless_get_post_id(), 'fullscreen_post_style' ) || $cl_redata['fullscreen_sections_active'] )
wp_enqueue_script('fullscreen_post');
}

Now, these files will not be loaded anymore and this will reduce the time of load. I advise anyone who use Specular – Responsive Multi-Purpose Business Theme or Tower | Business-Driven Multipurpose WP Theme only for blog purposes to deactivate these JavaScripts and CSS files as I do above.

The results:

Awesome 60 points from 100 I have gained 54 points from the first test. Very proud but not fully enjoyed. At the start seems to be easy but now it is more difficult to earn more points and make my website faster.

Leverage browser caching

Google gives this advice so to fix this problem I read about this: https://gtmetrix.com/leverage-browser-caching.html you can do that too.  You can cache your files manually with htaccess but if you use WordPress Theme as I do, use  W3 Total Cache.  After installing this plugin, that is fully compatible with our themes I go to configure the Browse Cache tab in the plugin settings.

After the configuration that it is simple you can use my own configuration like in the image below, as you see I have checked the Options “Set expires header”, “Set cache control header”.

I clicked on Save all settings and also I check the .htaccess file that was written with the new instructions. Seems the plugin works ok but after a new test I don't see any improvements. This is strange so I think that something goes wrong with the apache mod_expires module.  Now I open my shell and check this module that was disabled.

So I activated it with:

“a2enmod mod_expires“

The command from a Debian OS. In case you are hosting on a shared platform, request the Server Admin to activate this module.

It's so important! Now after the test the site again I reached  7 points.  

Minify CSS, Minify Javascripts

This rules triggers when PageSpeed Insights detects that the size of one of your resources could be reduced through minification.

The description above of Google Page Speed so now I have to minify the Resources with W3 Total Cache options. I open Minify tabs and start playing and test with it.

My best configuration:

W3 Total Cache has so many options like compression and CDN you can change and set the optimal option for your website. The result gained from Minify and other W3 Total Cache features it's fantastic I have reached 16 points from this plugin.

Conclusion

I  have reached 76 points in total from 6 that I started, it is so difficult now to gain more points I'm trying to do better. So if you use WordPress Themes like Specular or Tower or any other I recommend you 2 principal things to make your website run faster:

1. Optimize your Images

2. Install W3 Total Cache plugin

3. Choose a good host

4. Install and Configure W3 Total Cache or AutoOptimize

5. Configure CDN

6. Activate Image Lazy Loading (Jetpack)

7. Choose Fast WordPress Themes

If you are lazy and want something done professionally you can get the speed optimization service from WPbuffs.com

Read more on how to minify CSS/JS in WordPress.