Analyze and optimize WordPress loading time

On 21 December, 2012 by Carol

[note color="#fad540"]This post will show you how to analyze and optimize WordPress, defer parsing of JavaScript, minify css and minify javascript, and more important, how to speed up wordpress[/note]

Having a fast loading website is a must these days. It’s a part of the user’s experience that has to be continuously improved. People don’t want to wait anymore for your pages to load and if they don’t load fast, they won’t stay. It’s that simple.
This blog, which runs on WordPress,  was loading slow for quite a while and when i first ran the tests, i was amazed by the low score i got.
Thankfully, the services below don’t only show the faults, but also suggestions on how they can be fixed.
This way, i could see which plugins are slowing my blog down, which scripts and css files i have to compress and got the chance to work a bit on it so i am going to write down a few pointers in case you’ve got a slow loading website.
The links listed below will help you analyze your pages and point right away what needs to be improved.
And if you don’t know what to do about certain settings, don’t need to worry. All the links i provide you with for the scan will provide you with extra info and help.

So, here we go.

  • Analyze the loading speed and get the suggestions

 

gtmetrix 300x240 Analyze and optimize Wordpress loading time

 

 

GTmetrix
PingDom Tools
Google’s Page Speed
Yahoo’s ySlow
Web Page Test

 

  •  Compress, minify and cache

For this, i recommend the WordPress plugin “W3 Total Cache“. It’s the best but be careful; don’t get excited and check everything, or you’ll end up with a css’less website. It can get messy.
Just follow their instructions and you should be fine.

  • Defer parsing of JavaScript

This is the part i had troubles with but then i found a code somewhere on a forum and used it. It worked.
The code Google provides didn’t work for me.

So to fix that, add this code to your footer right before the end of the body tag “</body>” and of course, replace my link in the code with yours.

[pullquote align="none"]<script defer=”defer” type=”text/javascript”>
    window.onload=function(){
        var mycode;
        mycode=document.createElement(“script”);
        mycode.type=”text/javascript”;
        mycode.src=”http://www.carolsvault.com/”;
        document.getElementsByTagName(“head”)[0].appendChild(mycode);
    }
</script>

[/pullquote]

  • Optimize images

One thing i noticed on the results i had was that my images were not optimized. For a moment there i thought that i might have to manually optimize hundreds of images, but i found a tool that does that in bulk.

WP Smush.it is an WordPress plugin that lets you optimize your images to reduce bandwidth and loading time of your pages.

These are just a few steps that you can take to greatly improve the loading speed on your pages and my recommendation is: don’t overreact with the settings and changes.
If you give up too much to performance, you will lose quality.

That’s my latest report and although i want to score as high as possible, i think i will take the A offered by ySlow and see what improvements i can do later on.
Latest Performance Report 300x115 Analyze and optimize Wordpress loading time

That’s it for now. Enjoy pimping your website and if you need any help, just check the links provided or drop a line in the comments box if you have any other suggestions.

  • http://jasonhjh.com/ Jason HJH

    Defer parsing worked, thanks Carol for the handy code!

  • http://www.facebook.com/pim.uijttewaal Pim Uijttewaal

    Thanks for the info. But the defer parsing does nothing. I copied it, changed the URL to my host and put it just before the /body closing tag in my footer.php. Google pagespeed gives to the exact amount of KB’s the javascript is not parsed. (No caching plugin enabled)

    • http://www.carolsvault.com/ Carol

      Hi Pim,

      If that code is not working for you, then try differing it with WP Minify plugin:
      http://wordpress.org/extend/plugins/wp-minify/

      • http://www.facebook.com/pim.uijttewaal Pim Uijttewaal

        Hi Carol,

        It’s working now! :-) The reason: I had the “Use Google Libraries” plugin enabled (http://wordpress.org/extend/plugins/use-google-libraries/) this appearantly caused the “normal” jquery not be loaded.

        Disabling this plugin and adding the above code just before the /body tag did the trick. Thanks :-)

        • http://www.carolsvault.com/ Carol

          Glad you worked that out because it worked perfect for me.

          Cheers!

%d bloggers like this: