Page Speed Optimization of your Website

I am a person who is obsessed with application performance – be it web applications, desktop or mobile apps, I really get frustrated if screen refreshes take longer especially due to bulky code written by web developers and non-optimized images getting included in web pages.

When it comes to tuning my blogs or websites for performance (even when I was on shared hosting), I make sure that I save as many bytes as possible – especially on the home page – by optimizing images, going for a lean theme, avoiding heavy CSS/JS files and removing all unwanted comments, longer variable names etc. And Google Page Speed only made me more paranoid about those unwanted bytes.

How to Optimize with PageSpeed?

Well, I am not going to explain every single step here because almost every suggestion given by the Google PageSpeed plugin for Firefox pretty much self explanatory. However, I could give you some tips on what I am doing with this plugin as onetime optimization as well as on a regular basis (i.e. when time permits). Let’s start with the installation and Page speed execution part.

  1. First, if you don’t have the firebug addon yet, install it to Firefox using this link
  2. On top of Firebug, install PageSpeed. Alternatively, you can run pagespeed online version for page load analysis which uses the same performance rules. However, it wouldn’t be as flexibility and optimization options as in the Firefox addon version
  3. Now after restarting the Firefox, load your website to be analyzed, press F12 to bring up Firebug, Go to the ‘Page Speed’ tab and click ‘Analyze Performance
  4. After a few seconds, your page speed score will appear giving a lot of suggestions in Red, Orange and Green

How this blog achieved a Page Speed score of 95?

Basically all that you have to do is to work with the red, orange and green items (with say less than 90% score) and take the necessary steps to boost your site performance.

Typical red items, include the following:

1. Leverage browser caching

You can improve performance by specifying a longer expiry time for your images, css and JavaScript files. What I did here was to have .htaccess files in each folder specifying expiry values for file types. For example, my theme image folder has the following .htaccess commands.


# BEGIN CACHING
# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# 1 YEAR

ExpiresDefault A29030400
Header set Cache-Control "max-age=29030400"


(Remember to add a convenient value in seconds for max-age)

Similarly my CSS and JS files have a higher expiry value specified and this took out the red from my Browser Caching speed results

2. Enable compression

GZIP compression (or mod_deflate ) is not always possible with shared hosting services. If you have a VPS or dedicated hosting you can opt for mod_deflate configuration. In my case, I didn’t do it at the server side firstly because I didn’t know how to do it and secondly I didn’t try hard to do it because compression increases the server load.

Instead, I decided to do it at my CDN set up and looks like it’s working fine as well. I got a good score for the ‘Enable Compression’ section.

By the way, if you are interested in mod_deflate implementation on apache, this link might help

3. Optimize images

This is where there is huge potential. Basically after running, page speed will provide a detailed report on non-optimized images and even an optimized version of each image that you can view and save as the old filename (and upload to the server). This will instantly save you a lot of band width without having any image editing tool.

This ‘save as’ trick can be used to optimize individual post images as well. You may keep a backup of the original image, just in case things go wrong

4. Minify

Next is minifying CSS, Javascript and HTML to get rid of all unwanted spaces, comments and unused code. You can use the W3 Total Cache to do minify of all file types but be careful about Page speed’s suggestions here. In particular, keep the following in mind:

  • Never remove comments from your main style.css. If you are on WordPress your theme will never get recognized after that and you won’t be able to access most of theme related admin functionality. (such as editing)
  • Never remove unused CSS as suggested by Page Speed. This is because, when you run the page speed analysis on your home page, some CSS may be redundant but they may be used in other pages
5. Other performance improvements

With the above steps taken care of, you should be already in lat 80s with respect to page speed score. Next you can work on the green items such as specifying image sizes, reducing number of images, combining images (image sprites which I have done on the homepage), consolidating scripts, reducing number of requests etc.

Feel free to use help on each result set by clicking the same. Also, when you hover the icons (left most) on the page speed result, you get to see the score for each ruleset and you have to correct any item with a low score.

I still have some more work to be done but at 95 out of 100, things look pretty good and sometimes the homepage is loading under 1 second.

Hope this post was useful to you. Feel free to contact me for any queries related to Page Speed and performance optimization. Couple of other things that might help you with performance is to make sure that you have clean HTML by using the HTML validator service and use a real light weight theme like the one I am using.

Happy tweaking!

Comments

  1. Thanks for this tutorial. I was looking for some thing similar. After following all steps My blog home page speed is 96/100. And loading time less 1.5 s.

Speak Your Mind

*