Improve Website Speed With Apache mod_pagespeed

A few months earlier, Google announced its newly developed Apache module, mod_pagespeed, on its Googlewebmaster blog post. This is an Apache module that can be installed just like other Apache modules, and its command directives can be used in a .htaccess file(If you don’t know anything about using htaccess command directives, you are gladly invited to my other tutorial about Apache htaccess tutorial for beginners).

Although Google mentioned 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 provides support for this module for its customers to use on Linux-shared hosting plans. As my hosting is also on Godaddy, I have come to experience it and found it pretty impressive. 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 quickly and can improve/optimize your website’s performance.

Which Servers Support mod_pagespeed?

As far as I know, Godaddy and Dreamhost currently support mod_pagespeed on their shared hosting environments. If you are using another hosting, please check with them whether they support it or plan to support it in the near future. Otherwise, if you are using a dedicated server, you can easily install mod_pagespeed yourself.

Basic htaccess structure for using mod_pagespeed:

To use mod_pagespeed on your server, a .htaccess file is first required in the hosting root directory. On the .htaccess file, use the following code snippet anywhere in the file(top/bottom doesn’t matter; it just shouldn’t be inside another module’s code block):

<IfModule pagespeed_module>
ModPagespeed on
# using commands,fileters etc
</IfModule>Code language: HTML, XML (xml)

mod_pagespeed filters references:

Although the mod_pagespeed module provides a rich set of filters, my hosting provider, GoDaddy, doesn’t support all of them. So, I haven’t tried all yet. But I hope the following ones will mostly help you get a better result and give you a very good idea of how to use them. You can also use others without much hassle.

Extend Cache(‘extend_cache’): This filter provides the improved capability of caching, where the browser will still cache a resource even if it relocates on the server as long as the resource is identical. It actually generates a new customized URL for the resources, and they are always the same with a one-year ttl(Time To Live) duration; it doesn’t matter how often you relocate them. Here is an example of the HTML source code of an image reference and how it is affected by 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" />Code language: HTML, XML (xml)

Combine CSS(‘combine_css’): This filter helps merge all CSS files into a single one, which in return reduces the number number of HTTP requests from the browser to the server, thus resulting in a number of requests that save time and also preserve the best practices(less number of round trips). Here is a code example that shows how it affects 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">Code language: HTML, XML (xml)

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 demonstrates 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>Code language: HTML, XML (xml)

Move CSS to HEAD(‘move_css_to_head’): This filter moves all CSS elements inside the ‘head’ tags if they exist in the other places in the HTML body. This is the best practice for performance optimization. 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 are rendered in the middle of the HTML body. Here is a code snippet for showing the effect of using the ‘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>Code language: HTML, XML (xml)

Remove Comments(‘remove_comments’): This filter simply removes all commented code that uses ” in the HTML, which reduces the resultant HTML file size and takes less time to transfer to browsers. CSS programmers who use Internet Explorer conditional statements (used inside comment tags like “”) don’t have to worry; this filter doesn’t remove those conditional statements, so you can be tension-free of getting you, i.e. CSS vanished and website style breaking on, i.e. browsers. It only removes the unnecessary comment tags. Here is a simple example that will show the effect of using the ‘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="https://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="https://codesamplez.com/" />Code language: HTML, XML (xml)

Few Useful .htaccess directives:

Besides filters, there are some more useful commands to be used to provide a wide range of flexibility in using this mod_pagespeed module and control how the filters will perform their actions. For example, here are two that you might be interested in:

Restrict files from rewritten(ModPagespeedDisallow): We can restrict the mod_pagespeed module and instruct it not to rewrite some kinds of files if we have any using this directive. For example, some javascript files that are sensitive to their file names just need to be kept as they are. Rewriting those files can result in errors in page rendering. For example, the following command directive will help restrict jQuery files from being rewritten:

ModPagespeedDisallow */jquery-ui-1.8.2.custom.min.js

Specify files to be rewritten(ModPagespeedAllow): If there are most of the files we don’t want to rewrite and only a few we want to rewrite, then it is also possible to specify the files which we want to be under rewrite scope. We can also use regular expression syntax for these. Such as the following code sample will allow only CSS files to be rewritten:

ModPagespeedDisallow *
ModPagespeedAllow http://*mydomain.com/*/css/*.cssCode language: JavaScript (javascript)

Quick usage example of mod_pagespeed:

Here is a code sample which you can use on your site as a ready code(especially 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>Code language: HTML, XML (xml)

Analyzing Performance:

Google provides a tool for testing a website’s performance and also provides suggestions, with which you can get an idea of which filters/commands of mod_pagespeed will help you most. This tool is a Firefox extension 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 considerable improvement in the page speed tool performance after using this module’s commands. I have used the above given ready htaccess code on my WordPress blog and am getting an excellent output 🙂

References:

to get more detailed information and documentation on each element, please refer to the official Google documentation on mod_pagespeed. If you are hosting on Godaddy, then you should also read about their support on mod_pagespeed. Let me know if you have any questions. Happy coding 🙂