Optimization with Pagespeed

Here I’ll go a little into optimizing one or multiple sites with Pagespeed, both the Firefox plugin and the mod_pagespeed module for the Apache webserver.

There are two tools with the name Pagespeed, both can be acquired here. The Firefox Pagespeed addon requires the Firebug addon which you can download here.

Once installed and Firefox has been restarted, visit a site, hit F12 on your keyboard and click on the ‘Page speed’ tab.

Initially it’ll show a button ‘Analyze Performance’ and some info. Clicking on it reveals some info, similar to this

You can click on each [+] sign and it’ll show exactly what Pagespeed suggests. Each suggestion also contains a link to the Google Pagespeed site with additional info. Most of the suggestions are fairly easy to implement, usually a quick look at the Pagespeed site will clarify things.

A good suggestion is to move static content such as images, CSS and javascript files to a cookieless domain.

Depending on your website’s structure it may be fairly easy to move all these files to a domain such as
static.yourdomain.com, with a separate docroot than your main website. It’ll be more work when using systems such as WordPress, where the images of your theme are usually hardcoded into the CSS file and possibly at other locations. One theme I use had the domain dynamically created in its code. In these cases you need to modify the code too. The location and how it’s done may vary from theme to theme.

It’s a good practice to create sub directories in your new sub domain for the files, such as static.yourdomain.com/images, /css and /js.

Having only one subdomain however may prompt the Pagespeed plugin to suggest using multiple subdomains to prevent too many http requests. So create two more, such as media.yourdomain.com and res.yourdomain.com with the same docroot as static.yourdomain.com. Now adjust your CSS file to load the images from all three of these domains, e.g. static.yourdomain.com/img/image1.jpg, media.yourdomain.com/img/image2.jpg etc, the CSS file itself being in static.yourdomain.com/css.

Adjust in your website the link rel to load the CSS file from its new position. This again may vary how it’s handled in systems such as WordPress and its multiple themes. Equally adjust the javascript link.

When using Drupal, WordPress, etc. it may prove difficult to move images, javascript and css files of each plugin, since some plugins update fairly often and therefore will overwrite the changes each time. It’s up to you to decide if the additional work is worth the move.

Another helpful option included in the Pagespeed plugin is the download of minified CSS and Javascript files if they aren’t minified yet as well as optimized images. You can chose to do this or let the Apache module mod_pagespeed do this, more to this below.

Some options aren’t easily implementable, such as using only CSS used on the specific page, when you have a large css file included across the complete site. You can do it if you really want, splitting up the CSS and create a new one for each page, but it’s a lot of maintenance work to keep up later, and difficult with CMS plugins.

Some Javascript files, especially if they’re your own, can and should be combined into as few as possible files. External plugins such as Jquery and various others aren’t easily to combine into few files however. In these cases you can mostly disregard the Pagespeed notification.

Another notification is about the cache expiration of certain files. This can easily be helped by loading the module mod_expires into Apache. Then edit the conf file for your website and add this:

<Directory /path/to/media>
    <IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 2 months"
    </IfModule>
</Directory>

You can also add specific expiration per filetype:

   ExpiresByType image/jpg "access 1 month"
   ExpiresByType image/gif "access 1 month"
   ExpiresByType image/jpg "access 1 month"
   ExpiresDefault "access plus 14 days"

Pagespeed may also notify you about adding ‘Vary Accept-Encoding’ to your files. Add this to your apache website conf

<Directory /path/to/media>
   <FilesMatch "\.(js|css)$">
      Header append Vary Accept-Encoding,User-Agent
   </FilesMatch>
</Directory>

Lets move on to the Apache mod_pagespeed module.
Installation is straight forward, instructions are available on the link provided above. Installation packages are available for the 32 and 64 bit versions of Debian & Ubuntu, Centos,Fedora and Red Hat Enterprise Linux (RHEL isn’t mentioned specifically, but since it’s available for Centos, it should work with RHEL too).

Configuration takes place in the file pagespeed.conf in your apache modules directory.
If this isn’t set, add this to the top of your pagespeed.conf

SetOutputFilter MOD_PAGESPEED_OUTPUT_FILTER

Enable ModPagespeed if it’s disabled

ModPagespeed on

Next to set are the directories for your cache and file prefixes.
The default is below, though you can change it to your preferred position.
I’ve replaced /var/ with /tmp/ for my site.

ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"

For Modpagespeed to do its work, uncomment the line

# ModPagespeedRewriteLevel Corefilters

For most cases, this setting is enough to work with websites.

You can also set this to

ModPagespeedRewriteLevel Passthrough

so no modifications will take place. You can set specific options this way

ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters extend_cache
...

To having CoreFilters set and wanting to disable a specific option, use

ModPagespeedDisableFilters combine_css

Now you set the domains for mod_pagespeed to do its magic

ModPagespeedDomain static.yourdomain.com
ModPagespeedDomain media.yourdomain.com
ModPagespeedDomain res.yourdomain.com
ModPagespeedDomain www.yourdomain.com

That’s about it. Further options can be found on the Google Pagespeed page in the documentation, and some options with examples can be found here

If you want some statistics about its work, set following options in the pagespeed.conf file.

Uncomment

# ModPagespeedEnableFilters add_instrumentation

#  <Location /mod_pagespeed_beacon>
#      SetHandler mod_pagespeed_beacon
#  </Location>

This adds a small Javascript script to each file which sends data to yourdomain.com/mod_pagespeed_beacon.

To view the statistics, uncomment

#   <Location /mod_pagespeed_statistics>
#      Order allow,deny
#      Allow from localhost
#      SetHandler mod_pagespeed_statistics
#   </Location>

Adjust the ‘Allow from’ as needed.

Following to note:
Having

ModPagespeedEnableFilters rewrite_css

to minify CSS files will fail if the CSS file contains syntax errors.

This is not stated in the documentation nor in the logs or anywhere else.
I came across this on the Pagespeed’s issue page when looking for a reason why my CSS is not minified, which you can find here.

Here’s my full pagespeed.conf

<IfModule pagespeed_module>
    SetOutputFilter MOD_PAGESPEED_OUTPUT_FILTER
    ModPagespeed on

    AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html

    ModPagespeedFileCachePath            "/tmp/mod_pagespeed/cache/"
    ModPagespeedGeneratedFilePrefix      "/tmp/mod_pagespeed/files/

    ModPagespeedRewriteLevel CoreFilters

    ModPagespeedEnableFilters collapse_whitespace
    ModPagespeedEnableFilters elide_attributes
    ModPagespeedEnableFilters extend_cache
    ModPagespeedEnableFilters combine_css
    ModPagespeedEnableFilters rewrite_css
    ModPagespeedEnableFilters rewrite_javascript
    ModPagespeedEnableFilters rewrite_images
    ModPagespeedEnableFilters remove_comments
    ModPagespeedEnableFilters add_head

    ModPagespeedDomain media.section-nine.org
    ModPagespeedDomain static.section-nine.org
    ModPagespeedDomain res.section-nine.org
    ModPagespeedDomain www.regendoerp.com

    ModPagespeedEnableFilters add_instrumentation

    <Location /mod_pagespeed_beacon>
          SetHandler mod_pagespeed_beacon
    </Location>

    <Location /mod_pagespeed_statistics>
        Order allow,deny
        Allow from all
        SetHandler mod_pagespeed_statistics
    </Location>
</IfModule>

If you employ mod_rewrite to your website either in your website’s Apache config file or in a .htaccess file, you may need to add this condition to your rewrite block

RewriteCond %{REQUEST_URI} !^/(mod_pagespeed_statistics|mod_pagespeed_beacon) [NC]

Insert it before the RewriteRule.

That’s about it.
Having implemented all or most of it, it should improve your website’s speed noticeably.

Enjoy!