Few months earlier, Google announced about their new developed Apache module, mod_pagespeed on their googlewebmaster’s blog post. This is a apache module, which can be installed just like other apache modules and its command directives can be used on .htaccess file(If you don’t know anything about using htaccess command directives, you are gladly invited to my another tutorial about apche htaccess tutorial for beginners).
Although Google mention that they are working with Godaddy to provide its support, Godaddy didn’t instantly start supporting this on their hosting plans. After a few months of testing, Godaddy currently providing supports of this module for being used by its customers on linux shared hosting plans. As my hosting is also on Godaddy, i have come to experience it and found pretty much impressing. So, i decided to share some basic overview and quick start instructions about it. In this tutorial, I will show you how you can start using it very easily and can improve/optimize your website’s performance.
Which Servers Supports mod_pagespeed?
As far I know, currently, Godaddy and Dreamhost have support for mod_pagespeed on their shared hosting environment. If you are using some other hosting, please check with them whether they supports or planning to supports in near future. Otherwise, if you using dedicated server, you can install mod_pagespeed yourself easily.
Basic htaccess structure for using mod_pagespeed:
To use mod_pagespeed on your server, first a .htaccess file is required on the hosting root directory. on the .htaccess file, use the following code snippet anywhere in the file(top/bottom, doesn’t matter, just shouldn’t be inside another module’s code block):
<IfModule pagespeed_module> ModPagespeed on # using commands,fileters etc </IfModule>
mod_pagespeed filters references:
Although there is a rich set of filters provided by mod_pagespeed module, my hosting provider, godaddy, doesn’t support all. So, i didn’t try all yet. But hope the following ones will be mostly help you to get a already a better result and help you get very good idea to use them and you can use others also without much hassle.
Extend Cache(‘extend_cache’): This filter provides improved capability of caching, where browser will still cache a resource even it relocates on server as long as the resource is identical. It actually generates a new customized url for the resources and they are same always with a one year ttl(Time To Live) duration, doesn’t matter how often you are relocating them. Here is an example of html source code of a image reference, how it is affected with the extended cache filter:
<!-- Before using 'extend_cache' filter --> <img src="images/simple_image.jpg" /> <!-- After using 'extend_cache' filter --> <img src="images/simple_image.jpg.pagespeed.ce.xo4He3_gYf.jpg" />
Combine CSS(‘combine_css’): This filter helps for merging all css files into a single one, which in returns reduces the number number of http requests from browser to server, thus resulting less number of requests that saves time and also preserves the best practices(less number of round trips). Here is a code example that shows how its affecting css files:
<!-- css files structure before using 'combine_css' --> <link rel="stylesheet" type="text/css" href="styles/main.css"> <link rel="stylesheet" type="text/css" href="styles/layout.css"> <link rel="stylesheet" type="text/css" href="styles/styles.css"> <link rel="stylesheet" type="text/css" href="styles/plugins.css"> <!-- css files structure after using 'combine_css' --> <link rel="stylesheet" type="text/css" href="styles/main.css+layout.css+styles.css+plugins.css.pagespeed.cc.xo4He3_gYf.css">
Collapse White space(‘collapse_whitespace’): This filter simply reduces the resultant html file by removing extra unnecessary white spaces, which results less transfer time from server to browser.Here is a simple example which demonstrate the usage of ‘collapse_whitespace’:
<!-- html before using 'collapse_whitespace' --> <head> <!-- head codes--> </head> <body> Simple texts </body> <!-- html after using 'collapse_whitespace' --> <head> <!-- head codes--> </head> <body> Simple texts </body>
Move CSS to HEAD(‘move_css_to_head’): This filter moves all css elements to inside the ‘head’ tags if they exists on the other places in the html body. This is best practice for performance optimizing. This filter is of huge benefit in cases of cms like wordpress, where we use a lot of plugins and many of those plug-ins have their own css files and rendered in the middle of the html body. Here is a code snippet for showing the effect of using ‘move_css_to_head’ filter:
<!-- Before using 'move_css_to_head' -->
<html>
<head>
</head>
<body>
<div class="blue yellow big bold">
Simple Html Example
</div>
<link rel="stylesheet" type="text/css" href="css/style.css">
</body>
</html>
<!-- After using 'move_css_to_head' -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="blue yellow big bold">
Simple Html Example
</div>
</body>
</html>
Remove Comments(‘remove_comments’): This filter smply removes all comment code that uses “” in the html, which reduces the resultant html file size and takes less time to transfer to browsers. Css programmers who uses internet explorer conditional statements (used inside comment tag like ““), don’t have to worry, this filter doesn’t remove those conditional statements, so you can be tension free of getting your ie css vanished and website style breaking on ie browsers. It only removes the unnecessary comment tags. Here is a simple example that will show the effect of using ‘remove_comments’ filter:
<!-- HTML Before using 'remove_comments' filter -->
<link rel='shortlink' href='http://wp.me/1hHlI' />
<!--[if IE]>
<style type="text/css">
.addtoany_list a img{filter:alpha(opacity=70)}
.addtoany_list a:hover img,.addtoany_list a.addtoany_share_save img{filter:alpha(opacity=100)}
</style>
<![endif]-->
<!-- All in One SEO Pack 1.6.13.2 by Michael Torbert of Semper Fi Web Design[406,428] -->
<meta name="description" content="codesamplez.com is a blog site that includes useful articles for programmers and developers" />
<meta name="keywords" content="programming and development, code examples" />
<link rel="canonical" href="http://codesamplez.com/" />
<!-- /all in one seo pack -->
<!-- HTML After using 'remove_comments' filter -->
<link rel='shortlink' href='http://wp.me/1hHlI' />
<!--[if IE]>
<style type="text/css">
.addtoany_list a img{filter:alpha(opacity=70)}
.addtoany_list a:hover img,.addtoany_list a.addtoany_share_save img{filter:alpha(opacity=100)}
</style>
<![endif]-->
<meta name="description" content="codesamplez.com is a blog site that includes useful articles for programmers and developers" />
<meta name="keywords" content="programming and development, code examples" />
<link rel="canonical" href="http://codesamplez.com/" />
Few Useful .htaccess directives:
Besides filters, there are some more useful commands to be used for provide a wide range of flexiblity of using this mod_pagespeed module and also provide controls how the filters will perform their actions. For example, here are 2 that you will might be interested of:
Restrict files from rewritten(ModPagespeedDisallow): We can restrict the mod_pagespeed module and instruct it not to rewrite some kind of files if we have any using this directives. Such as some javascript files those are sensitive to their own file names, must need to be kept as they are. rewrite to those files can result errors on page rendering. For example, the following command directive will help restrict jquery file from being rewritten:
ModPagespeedDisallow */jquery-ui-1.8.2.custom.min.js
Specify files to rewritten(ModPagespeedAllow): If there are most of the files we don’t want to rewrite and only few we want to rewrite, then its also possible to specify the files which we wan to be under rewrite scope. We can use regular expression syntax for these also. Such as, following code sample will allow only css files to be rewritten:
ModPagespeedDisallow * ModPagespeedAllow http://*mydomain.com/*/css/*.css
Quick usage example of mod_pagespeed:
Here is a code sample which you can use on your site as a ready code(specially if you are on godaddy shared hosting) without any risk of getting your site broken:
<IfModule pagespeed_module> ModPagespeed on ModPagespeedEnableFilters extend_cache,combine_css, collapse_whitespace,move_css_to_head, remove_comments </IfModule>
Analyzing Performance:
Google provides a tool for testing a website’s performance and also provides suggestion, with which you can get idea which filters/commands of mod_pagespeed with help you most. This tool is a Firefox extension and installed under firebug as a new tab. So, you will first have to have firebug. Then you can download this tool from here. You can read Google documentation on how to use this tool.
You should observe a huge improvement in the page speed tool performance after using this module commands. I have used the above given ready htaccess code on my wordpress blog and getting a very good output 🙂
References:
to get more details information and documentations on each elements, please refer to official Google documentation on mod_pagespeed. If your hosting on Godaddy, then you should also read about their support on mod_pagespeed. Let me know if you have any question. Happy coding 🙂
Very informative post.
But unfortunately in my case in a shared Godaddy server didn’t work as it should be. Placing the filters all in one line like in the example below causes a 500 error. While adding them single lined one after another don’t yield and error, but also dont seem to carry complete solution either.
Having it like:
ModPagespeed on
ModPagespeedEnableFilters extend_cache
ModPagespeedEnableFilters extend_cache
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters move_css_to_head
ModPagespeedEnableFilters elide_attributes
ModPagespeedEnableFilters remove_comments
# There Should be No Space Between Filters#
ModPagespeedEnableFilters extend_cache,combine_css,collapse_whitespace,move_css_to_head,remove_comments
I found your blog through google search. Great SEO work. Whilst i am learning seo myself I have found the information on your blog post helpful that has increased my passino to learn more. Once again, a great post 🙂 thanks.
Hey its really very nice article. I am also using expiry headers in htaccess so that my static contents will fetch form users cache and not from server.
Thanks
Dhanesh Mane