Page Speed: optimize on the fly your rendered code
Contents
 |
|
| Software version | 1.7.30.3 |
|---|---|
| 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:
 /etc/apt/preferences.d/00dotdeb.pref
|
Package: * Pin: release o=packages.dotdeb.org Pin-Priority: 100 |
Then add the repository:
| /etc/apt/sources.list.d/dotdeb.list
|
deb http://packages.dotdeb.org wheezy all deb-src http://packages.dotdeb.org wheezy all |
Add the GPG key:
|
cd /tmp wget http://www.dotdeb.org/dotdeb.gpg sudo apt-key add dotdeb.gpg |
And run an update:
|
|
apt-get update |
Then you can install nginx with pagespeed integrated:
| 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 :
| /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 127.0.0.1; deny all; }
location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; 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 http://127.0.0.1:80/;
pagespeed DownstreamCachePurgeMethod PURGE;
pagespeed DownstreamCacheRewrittenPercentageThreshold 95; |
Then apply this configuration to your wished virtual host:
| /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:
| /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:
- GTMetrix: http://gtmetrix.com
- Page Speed Insight: http://developers.google.com/speed/pagespeed/insights
Then try to correlate with PageSpeed options and you're now ready to perform tests and see the awesome result :-)
