WordPress performance tuning in nutshell

First of all I am not a professional in making WordPress sites super fast. The things I discuss in this post are mere experience I had, while I worked on a client project. Ok here is  the situation. You somehow managed to get a client project and you put all your knowledge gathered from anywhere and developed a site. Now with WordPress on your side it takes care of most of the things and on your part you made some tweaks to your theme. Now its all set up and your client had a look at your finished project and she is happy with the design and everything but she complains that the site loads slower than molasses going uphill in january( :) just kidding). Now you have no idea on improving the site performance except some times you came across this plugin W3Total cache. If it is so, then you are already halfway through. This is the most recommended plugin for WordPress performance tuning. You can see this plugin in every post that says “top ten WordPress plugins”.  Other than W3TC,  some other  plugins we gonna discuss here are,

WP-Minify
WP-Smush.it
WP-Optimize 

There are lot more plugins in the repository which targets on site performance. I don’t wanna confuse you.

Defining the problem: Before using the plugins, first you need to figure out what’s going wrong actually. You can use the links below to have a thorough performance analysis of your site.

developers.google.com/pagespeed/
gtmetrix.com
webpagetest.org

I personally recommend http://gtmetrix.com/. Try to get a 90 plus in both page speed grade and YSlow. Also there is an option to compare the performance of other sites with yours. Expand all the links in the report and  spend time reading it. Click the helper link in each section and you can find the Google page speed recommendations for that particular issue.

Let me give you a short introduction on some important factors which determines the site performance. Also I will discuss about the above plugins side by side.

Important factors you need to address first:

Number of HTTP requests: This is the basic thing you need to checkout first. Every time you request a file from a server it takes certain time for your site to load the file from the  server. Most of the other factors we are about to discuss will eventually lead to increase in number of HTTP requests.

Image optimization: Three factors you should  keep in mind when it comes to  image optimization are,
1. Avoid resizing the images using CSS cause it won’t reduce the memory size.
2. Try to use image-sprites in order to reduce the number of server requests. If you have no idea what an image-sprite is, I highly recommend you to visit this link and also  this screencast both by our CSS genius Chris Coyier.
3. Use WP Smush.it  for JPEG compression, stripping meta data etc.

Combine and minify external Javascript  and CSS files: Each Javascript or CSS file you use in the website will make an individual HTTP request which leads to the slow down. Use WP-Minify to Combine and minify Js and CSS files. Offcourse you can use W3TC to minify the scripts and styles but it won’t do the combining part. To do this you need to use WP-Minify.

Note: Minification of an already minified js file(eg:myscript.min.js) may cause layout issue in some cases. WP-Minify has an option to exclude such js files from minification. You just need to enter the file name  in the text area and don’t forget to save the options before you exit.

Leverage browser caching: Caching is the process of saving and retrieving the cachable resources of a website such as  JS and CSS files, image files, and other binary object files (media files, PDFs, Flash files, etc.) from the local storage space. You know, It’s faster to get something to display from your hard disk than it is to request it form a remote server that’s what caching is all about.

If you check the performance diagnostic result you probably come across this suggestion.

“The following cacheable resources have a short freshness lifetime. Specify an expiration at least one month in the future for the following resources”

So, What is this “short freshness lifetime”? It is the time period during which the browser can use the cached resource without checking to see if a new version is available from the web server. To know more about caching and to configure the W3TC plugin visit this link.

First byte time:  The time taken to send the HTTP request and the time taken to get the first byte of the page. Mostly this depends on your hosting provider. It has also been proved that post revisions may lead to delayed first byte time. You can use WP Optimize  in this case.

I just scratched the surface. There is lot more to discuss, but these are the basic things you need to address.  Above all try to follow the best practices for CSS and in including script files. Here are some useful links.

30 CSS Best Practices for Beginners
Including jQuery in WordPress (The Right Way)

So that’s it. Hope it helped you. Happy performance tuning. Please leave your comments.

Comments

  1. I’m looking for that. Thanks Kumar so much :)

Speak Your Mind

*