Page Speed: optimize on the fly your rendered code

From / Bloc Notes Informatique
Jump to: navigation, search

Software version
Operating System Debian 7
Website PageSpeed Website
Last Update 19/02/2014
Others Nginx 1.4.4-1

1 Introduction

PageSpeed[1] speeds up your site and reduces page load time. This open-source webserver module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow.

2 Installation

As wheezy get an outdated version of Nginx, we're going to use Nginx extras package with Page Speed built-in. To get it, we will use the well known dotdeb repository: To install DotDeb repository, add a preference file to avoid unwanted override packages:

Configuration File /etc/apt/preferences.d/00dotdeb.pref
Package: *
Pin: release
Pin-Priority: 100

Then add the repository:

Configuration File /etc/apt/sources.list.d/dotdeb.list
deb wheezy all
deb-src wheezy all

Add the GPG key:

cd /tmp
sudo apt-key add dotdeb.gpg

And run an update:

apt-get update

Then you can install nginx with pagespeed integrated:

Command aptitude
aptitude install nginx-extras

3 Configuration

The configuration is quite easy but there is a lot of options that needs to be tested one by one to be sure it has the correct effect :

Configuration File /etc/nginx/pagespeed.conf
# PageSpeed
# Enable ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /usr/share/nginx/pagespeed;
# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
  add_header "" "";
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow; deny all; }
location /ngx_pagespeed_global_statistics { allow; deny all; }
location /ngx_pagespeed_message { allow; deny all; }
# Defer and minify Javascript
pagespeed EnableFilters defer_javascript;
pagespeed EnableFilters rewrite_javascript;
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters canonicalize_javascript_libraries;
# Inline and minimize css
pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters fallback_rewrite_css_urls;
# Loads CSS faster
#pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
# Rewrite, resize and recompress images
pagespeed EnableFilters rewrite_images;
# remove tags with default attributes
pagespeed EnableFilters elide_attributes;
# To enable Varnish
pagespeed DownstreamCachePurgeLocationPrefix;
pagespeed DownstreamCachePurgeMethod PURGE;
pagespeed DownstreamCacheRewrittenPercentageThreshold 95;

Then apply this configuration to your wished virtual host:

Configuration File /etc/nginx/sites-enabled/vhost.conf
server {
    listen 80;
    include pagespeed.conf;

And reload Nginx for changes to take account. You can also enable pagespeed on the server side directly to apply the configuration to all vhosts at once.

3.1 File path cache optimization

The file path cache is use to store rewritten elements. So it's preferable to have good performances on it and to achieve it, you can use a tmpfs. Add this line to your fstab:

Configuration File /etc/fstab
tmpfs                                       /usr/share/nginx/pagespeed  tmpfs   rw,mode=1777,size=512M  0   0

And then create the folder and mount it :

mkdir /usr/share/nginx/pagespeed
mount /usr/share/nginx/pagespeed

Restart nginx and it's ok :-)

4 Benchmark

Several websites exists to bench your site and gives you recommendations:

Then try to correlate with PageSpeed options and you're now ready to perform tests and see the awesome result :-)

5 References

  1. ^