• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Featured
    • C# Tutorials
      • LinQ Tutorials
      • Facebook C# API Tutorials
    • PHP Tutorials
      • CodeIgniter Tutorials
    • Amazon AWS Tutorials
  • Categories
    • Programming
    • Development
    • Database
    • Web Server
    • Source Control
    • Management
    • Project
  • About
  • Write
  • Contact

CodeSamplez.com

Programming, Web development, Cloud Technologies

You are here: Home / Web Server / Improve Website Speed With mod_pagespeed

Improve Website Speed With mod_pagespeed

February 28, 2011 by Rana Ahsan 6 Comments

mod_pagespeed tutorial

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 🙂

Share If Liked

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

You may also like

Filed Under: Web Server Tagged With: apache, htaccess

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.
Github: ranacseruet

Reader Interactions

Comments

  1. Lenin says

    May 20, 2011 at 12:59 pm

    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.

    <IfModule pagespeed_module>
    	   ModPagespeed on
    	   ModPagespeedEnableFilters extend_cache,combine_css,  collapse_whitespace,move_css_to_head, remove_comments
    </IfModule>
    

    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

    Reply
    • niresh says

      May 5, 2014 at 12:33 pm

      # There Should be No Space Between Filters#
      ModPagespeedEnableFilters extend_cache,combine_css,collapse_whitespace,move_css_to_head,remove_comments

      Reply
  2. Erik Schnetter says

    July 20, 2011 at 8:10 am

    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.

    Reply
  3. dhanesh mane says

    December 16, 2011 at 12:53 am

    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

    Reply

Trackbacks

  1. بهبود سرعت وبسایت با استفاده از mod_pagespeed « Sajjad Aghapour's Blog says:
    March 20, 2011 at 9:30 am

    […] داشته باشم. کل مطلب رو میتونید از لینک زیر مشاهده کنید: http://codesamplez.com/web-server/mod_pagespeed-htaccess-tutorial دسته‌ها:PHP دوست داشتننخستین کسی باشید که این را […]

    Reply
  2. mod_pagespeed « engg4910cj journal says:
    February 9, 2012 at 11:28 pm

    […] illustrations of some filters:  http://codesamplez.com/web-server/mod_pagespeed-htaccess-tutorial […]

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Follow Us

  • Twitter
  • Facebook

Top Posts & Pages

  • How To Work With JSON In Node.js / JavaScript
    How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
    PHP HTML5 Video Streaming Tutorial
  • How To Work With C# Serial Port Communication
    How To Work With C# Serial Port Communication
  • Facebook C# API Tutorials
    Facebook C# API Tutorials
  • LinQ Query With Like Operator
    LinQ Query With Like Operator
  • Using Supervisord Web Interface And Plugin
    Using Supervisord Web Interface And Plugin
  • Get Facebook C# Api Access Token
    Get Facebook C# Api Access Token
  • Generate HTTP Requests using c#
    Generate HTTP Requests using c#
  • Getting Started With UDP Programming in Java
    Getting Started With UDP Programming in Java
  • Utilizing Config File In C#.NET Application
    Utilizing Config File In C#.NET Application

Recent Posts

  • Building Auth With JWT – Part 2
  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read

Tags

.net angularjs apache api audio auth authenticatin aws c# cloud server codeigniter deployment docker doctrine facebook git github golang htaccess html5 http javascript jwt linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty socket.io tfs tips unit-test utility web application wordpress wpf

Footer

Archives

Follow Us

  • Twitter
  • Facebook

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Copyright © 2023