skey - web developer

Speed up your website with Pagespeed mod

by on

Last year, in September 2014, when I was working for one of my clients, I was asked to look for some options how quickly and easily speed up the loading of the webpages. At that time, the client hadn't any frontend developers. Nobody in team had solid knowledge about bower, gulp, less, sass and other cool toys of frontend guys. Basically we were team of pure backend php developers. So we had to sort out the performance issue very quickly without having the right skills. I was looking into solutions like caching, but that still, didn't optimised images, nor minimised the css and js files. At that time I've heard about how cool stuff is google doing in one of podcasts. One of the tools was google pagespeed mod. TL;DR I would like to share with you my experience with setting up the pagespeed mod and using it.


Requirements

  • linux based server
  • no more than 1 hour setup time
  • Apache webserver
  • internet connection
  • drink
 
    drink = 'beer'
    if(your_age < 18)
        drink = 'coffee'

Installation

Let's jump into problem. Pagespeed is module which needs to be installed onto Apache server. My commands are run for centos, but I believe if you replace yum with apt-get for debian or brew for MacOs, it should be all the same. Install at, get the rpm package and install pagespeed:

   
    sudo yum install at
    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm
    sudo rpm -U mod-pagespeed-*.rpm

The installation should add these two files to your system:

   
    /usr/lib64/httpd/modules/mod_pagespeed.so
    /usr/lib64/httpd/modules/mod_pagespeed_ap24.so

One is for Apache version <=2.2 and the other one for Apache >=2.4. It depends on your version of apache which file you will be added to your httpd.conf You can check your apache version by running

   
    httpd -v

The rpm installation also adds 2 conf files located here

   
    /etc/httpd/conf.d/pagespeed.conf
    /etc/httpd/conf.d/pagespeed_libraries.conf

and finaly the minify command

   
    /usr/bin/pagespeed_js_minify

Activate settings

PageSpeed is enabled automatically when you install it on Apache and all configuration for this module is in

   
    /etc/httpd/conf.d/pagespeed.conf

Please note, that you should restart the apache server to load new updated configuration files.

   
    sudo service httpd restart
    #or
    sudo apachectl -k restart

Admin features are set up on the bottom of the conf file in directives like:

<Location /pagespeed_admin>
    Order allow,deny
    Allow from localhost
    Allow from 127.0.0.1
    SetHandler pagespeed_admin
</Location>
<Location /pagespeed_global_admin>
    Order allow,deny
    Allow from localhost
    Allow from 127.0.0.1
    SetHandler pagespeed_global_admin
</Location>

If you are running on localhost, you should be able to access it by typing in browser http://localhost/pagespeed_admin I installed pagespeed mod into my Vagrant devbox in Virtual machine and I couldn't access these admin pages straight away and was getting 404 page. My IP address to Virtual machine was 10.0.2.2 and therefore I had to add to both of directives Allow from 10.0.2.2 to fix 404 page. (restart apache again ;)

Locking access to admin pages

I assume that you don't want the admin pages to be visible on live server, therefore you should remove admin directives or do something else. There are many ways on how to do it. I simply locked access for certain user. Let’s start with creating user vagrant and storing password in file:

   
    sudo mkdir /usr/local/apache
    sudo mkdir /usr/local/apache/passwd
    sudo htpasswd -c /usr/local/apache/passwd/pagespeed_pwds vagrant

When asked, enter the new password and then confirm it. Great, now we have created file /usr/local/apache/passwd/pagespeed_pwds where we can store all users and passwords. We can create later more users and store their credentials in this file.

Go back to /etc/httpd/conf.d/pagespeed.conf and change both directives to this:

<Location /pagespeed_admin >
    Order allow,deny
    Allow from 10.0.2.2
    SetHandler pagespeed_admin
    AuthType Basic
    AuthName "Restricted Files"
    AuthBasicProvider file
    AuthUserFile /usr/local/apache/passwd/passwords
    Require user vagrant
</Location>
<Location /pagespeed_global_admin >
    Order allow,deny
    Allow from 10.0.2.2
    SetHandler pagespeed_global_admin
    AuthType Basic
    AuthName "Restricted Files"
    AuthBasicProvider file
    AuthUserFile /usr/local/apache/passwd/passwords
    Require user vagrant
</Location>

Don't forget to restart apache after each conf change.

Now go to browser http://localhost/pagespeed_global_admin/ and you will be able to login only with user vagrant using correct password

Pagespeed Admin Console

Configuring pagespeed modules

Ok, now we can see in admin what is active and what not, we also can see some statistics, but we will do some more changes to set up desired configuration. The pagespeed consists of many filters, or so called submodules, each of them adds some functionality to the whole pagespeed module. Some of these filters are in experimental or test phase, but some are already ready to be used. The ones which are stable, are added to core level. CoreFilters level is recommended as safe and contains a lot of filters. Full list of filters is available at the pagespeed website. Lets go back to /etc/httpd/conf.d/pagespeed.conf file and activate CoreFilters:

 
    ModPagespeedRewriteLevel CoreFilters

This will enable one of 3 levels of filters. We can use ModPagespeedDisableFilters {something} to remove any filters activated in that level. We don’t need to remove any filters, but we are going to add few additional filters to conf file:

 
    ModPagespeedEnableFilters make_google_analytics_async,include_js_source_maps
    ModPagespeedEnableFilters collapse_whitespace,elide_attributes
    ModPagespeedEnableFilters insert_image_dimensions,remove_comments
    ModPagespeedEnableFilters sprite_images,trim_urls

Some rewrite or optimisation processes can take more time than we want to wait. If the process is longer than 50 miliseconds, serve the original resource and process and cache the resource after serving for the next request:

 
    ModPagespeedRewriteDeadlinePerFlushMs 50

The resources made by modpagespeed should be delivered gziped? So we can simply turn that on, in our conf file:

 
    ModPagespeedFetchWithGzip on
    SetOutputFilter DEFLATE

If the SSL certificates are not used, comment out the following lines:

 
    ModPagespeedSslCertDirectory "/etc/pki/tls/certs"
    ModPagespeedSslCertFile /etc/pki/tls/cert.pem

Restart apache and we should be able to see these changes in admin as active.

Pagespeed activated filters

Let's now load page from our website:

Pagespeed in action

We can now see results loading our page: one css, one js, sprites gif, progressive jpegs, and many more. Enjoy the drink of your selection.