mod_pagespeed filters

Google has developed mod_pagespeed module that is very easy to use and that acomplishes many Google Page Speed Insight recommendations.

Here is simple example how could you use it


Vagrant.configure("2") do |config| = "ubuntu/trusty64" "public_network"
    config.vm.provision :shell, path: ""


#!/usr/bin/env bash

# Use closest mirrors available
sudo mv /etc/apt/sources.list /etc/apt/sources.list.bak
echo "deb mirror:// trusty main restricted universe multiverse" | sudo tee --append /etc/apt/sources.list
echo "deb mirror:// trusty-updates main restricted universe multiverse" | sudo tee --append /etc/apt/sources.list
echo "deb mirror:// trusty-backports main restricted universe multiverse" | sudo tee --append /etc/apt/sources.list
echo "deb mirror:// trusty-security main restricted universe multiverse" | sudo tee --append /etc/apt/sources.list

sudo apt-get update
sudo apt-get install -y apache2

sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install
rm -rf mod-pagespeed-*.deb

sudo rm /etc/apache2/sites-enabled/000-default.conf
sudo ln -s /vagrant/Site.conf /etc/apache2/sites-enabled
sudo a2enmod headers setenvif mime rewrite authz_core deflate filter expires include
sudo service apache2 restart

Site config

<VirtualHost *:80>
    DocumentRoot /vagrant

    <Directory /vagrant>
        Options All
        AllowOverride All
        Require all granted

    <Location /pagespeed>
        Order allow,deny
        #Allow from localhost
        #Allow from
        Allow from all #WARNING: this SHOULD be removed
        SetHandler pagespeed_admin

Filter enabled by default

General: add_head, extend_cache

Images: rewrite_images

Styles: combine_css, rewrite_css, flatten_css_imports, inline_css

Javascript: rewrite_javascript, inline_javascript, combine_javascript

Suggested (safe to use) filters

General: collapse_whitespace, insert_dns_prefetch, remove_comments, remove_quotes, trim_urls, elide_attributes, combine_heads

Images: lazyload_images

Styles: inline_google_font_css, move_css_to_head, move_css_above_scripts, prioritize_critical_css

Scripts: insert_ga

Project specific filters

Images: resize_images, resize_rendered_image_dimensions, sprite_images, inline_preview_images

Magic (danger) filters

General: local_storage_cache

Javascript: defer_javascript

Ended up with following addition to HTML 5 boilerplate .htaccess:

<IfModule pagespeed_module>
    ModPagespeedEnableFilters collapse_whitespace,insert_dns_prefetch,remove_comments,remove_quotes,trim_urls,elide_attributes,combine_heads,lazyload_images,inline_google_font_css,move_css_to_head,move_css_above_scripts

    # prioritize_critical_css - only for big styles
    # insert_ga - only if you use Google Analytics
    # resize_images - project dependet, resizes: <img src="photo-1024x768.jpg" width="648" height="480">
    # resize_rendered_image_dimensions - project dependet, resize: <img src="photo-1024x768.jpg" style="max-width: 20em">
    # inline_preview_images - project dependet, inlines lowres images
    # sprite_images - project dependet, generates sprite map from css backgrounds
    # defer_javascript - magic
    # local_storage_cache - magic

    # ModPagespeedAnalyticsID UA-799647-3

Here is all code:

Clear (flush) mod_pagespeed cache

sudo touch /var/cache/mod_pagespeed/cache.flush

After opening pages you can delete if

sudo rm -rf /var/cache/mod_pagespeed/cache.flush