How to speed up Nginx web server with PageSpeed

It is no secret that faster loading web sites lead to higher visitor engagement, retention and conversion rates. Every 100 msec of latency costs Amazon 1% drop in its sales, while 500 msec extra delay means 20% less traffic and revenue for Google. If there is a way to speed up your web server without upgrading to a more powerful server, there is no reason not to try it.

In this tutorial, I am going to describe how to optimize Nginx web server to speed up its performance. While Nginx web server itself emerged as one of the fastest and most scalable web servers, there are still various ways to tune the performance of its stock installation.

For one, there is a web server module developed by Google, which is called PageSpeed module. PageSpeed attempts to improve web page loading time and reduce bandwidth usage of web servers. Recently, an Nginx version of PageSpeed module (ngx_pagespeed) was released. As a possible way to speed up Nginx web server, I am going to demonstrate how to enable and configure ngx_pagespeed module in Nginx.

PageSpeed Features

The PageSpeed module automatically applies various optimizations (e.g., reduce document size, the number of HTTP requests, the number of HTTP round trips, DNS resolution time) by using a number of rewriting "filters", and each filter can be turned on/off selectively.

The following are some of the filters supported by ngx_pagespeed. Refer to the official document for a complete list.

  • Collapse Whitespace: reduce bandwidth usage by replacing multiple contiguous whitespace in HTML pages with a single whitespace.
  • Canonicalize JavaScript Libraries: reduce bandwidth usage by automatically replacing popular JavaScript libraries with ones hosted for free (e.g., by Google).
  • Combine CSS: reduce the number of HTTP requests by combining multiple CSS files into one.
  • Combine JavaScript: reduce the number of HTTP requests by combining multiple JavaSript files into one.
  • Elide Attributes: reduce document size by removing tags specified with default attributes.
  • Extend Cache: reduce bandwidth usage by optimizing cacheability of web pages' resources.
  • Flatten CSS Imports: reduce the number of HTTP request round-trips by removing @import in CSS files.
  • Lazyload Images: delay the loading of images which are not visible on the client' browser.
  • Minify JavaScript: reduce bandwidth usage by minifying JavaScript.
  • Optimize Images: optimize image delivery by introducing more inline images, compressing images, or converting GIF to PNG.
  • Pre-Resolve DNS: reduce DNS resolution time by pre-resolve DNS.
  • Prioritize Critical CSS: rewrite CSS files to load page-rendering CSS rules first.

Unlike Apache web server, Nginx modules cannot be loaded dynamically at run-time, but must be incorporated during compile-time. As of this writing, ngx_pagespeed module is not included in the Nginx package distributed with major Linux distros (e.g., Fedora 19). Thus, to use PageSpeed in Nginx, you need to build Nginx from source.

Build and Install Nginx with ngx_pagespeed

Install prerequisites for building nginx and ngx_pagespeed.

On Debian, Ubuntu or Linux Mint:

$ sudo apt-get install build-essential zlib1g-dev libpcre3-dev

On Fedora, CentOS or RHEL:

$ sudo yum install gcc-c++ pcre-devel zlib-devel make wget

Download and install ngx_pagespeed source code as follows. ngx_pagespeed will be extracted into /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta

$ sudo mkdir -p /usr/local/nginx/modules
$ wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.7.30.3-beta.tar.gz
$ sudo tar xvfvz v1.7.30.3-beta.tar.gz -C /usr/local/nginx/modules --no-same-owner

Download pre-built PSOL (PageSpeed Optimization Libraries), and install it under ngx_pagespeed directory:

$ wget https://dl.google.com/dl/page-speed/psol/1.7.30.3.tar.gz
$ sudo tar xvfvz 1.7.30.3.tar.gz -C /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta --no-same-owner
$ sudo find /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta/ -type d -exec chmod +rx {} \;
$ sudo find /usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta/ -type f -exec chmod +r {} \;

Download the latest stable version of Nginx from http://nginx.org/en/download.html

$ wget http://nginx.org/download/nginx-1.4.4.tar.gz

Finally, compile Nginx with ngx_pagespeed module enabled, and install it as follows.

$ tar xvfvz nginx-1.4.4.tar.gz
$ cd nginx-1.4.4
$ ./configure --add-module=/usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta --prefix=/usr/local/nginx --sbin-path=/usr/local/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/run/nginx.pid --lock-path=/run/lock/subsys/nginx --user=nginx --group=nginx
$ make
$ sudo make install

You can verify that ngx_pagespeed module has been added to Nginx installation as follows.

$ /usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.4.4
built by gcc 4.8.2 20131212 (Red Hat 4.8.2-7) (GCC)
configure arguments: --add-module=/usr/local/nginx/modules/ngx_pagespeed-1.7.30.3-beta . . . .

Configure ngx_pagespeed Module in Nginx

To enable and configure ngx_pagespeed, edit server section of Nginx configuration. The following example of nginx.conf indicates where to specify PageSpeed filter(s).

$ sudo vi /etc/nginx/nginx.conf
    server {
        # port to listen on
        listen 80;

        # server name
        server_name xmodulo.com www.xmodulo.com;

        # document root directory
        root /usr/local/nginx/html;

        # access log
        access_log /var/log/nginx/access.log main;

        # enable ngx_pagespeed
        pagespeed on;

        # put individual pagespeed filter(s) here.
    }

When it comes to specifying PageSpeed filters, there are two different levels you can choose from: CoreFilters and PassThrough. Unless specified, CoreFilters is used by default.

For Newbies: Use CoreFilters

The CoreFilters contains a set of PageSpeed filters which are considered safe by Google for most websites. By enabling CoreFilters, you are enabling a set of "safe" rules automatically. So this method is recommended for newbies. If you want, you can disable particular filter(s) from CoreFilters, or enable additional filters selectively. Here is an example of ngx_pagespeed configuration with CoreFilters.

    server {
        # port to listen on
        listen 80;

        # server name
        server_name xmodulo.com www.xmodulo.com;

        # document root directory
        root /usr/local/nginx/html;

        # access log
        access_log /var/log/nginx/access.log main;

        # enable ngx_pagespeed
        pagespeed on;

        pagespeed FileCachePath /var/ngx_pagespeed_cache;

        # enable CoreFilters
        pagespeed RewriteLevel CoreFilters;

        # disable particular filter(s) in CoreFilters
        pagespeed DisableFilters rewrite_images;

        # enable additional filter(s) selectively
        pagespeed EnableFilters collapse_whitespace;
        pagespeed EnableFilters lazyload_images;
        pagespeed EnableFilters insert_dns_prefetch;
    }

See the official document for a complete list of filters in CoreFilters.

For Advanced Users: Use PassThrough

For advanced users, you can use PageThrough level, where you enable individual filters manually.

    server {
        # port to listen on
        listen 80;

        # server name
        server_name xmodulo.com www.xmodulo.com;

        # document root directory
        root /usr/local/nginx/html;

        # access log
        access_log /var/log/nginx/access.log main;

        # enable ngx_pagespeed
        pagespeed on;

        pagespeed FileCachePath /var/ngx_pagespeed_cache;

        # disable CoreFilters
        pagespeed RewriteLevel PassThrough;

        # enable collapse whitespace filter
        pagespeed EnableFilters collapse_whitespace;

        # enable JavaScript library offload
        pagespeed EnableFilters canonicalize_javascript_libraries;

        # combine multiple CSS files into one
        pagespeed EnableFilters combine_css;

        # combine multiple JavaScript files into one
        pagespeed EnableFilters combine_javascript;

        # remove tags with default attributes
        pagespeed EnableFilters elide_attributes;

        # improve resource cacheability
        pagespeed EnableFilters extend_cache;

        # flatten CSS files by replacing @import with the imported file
        pagespeed EnableFilters flatten_css_imports;
        pagespeed CssFlattenMaxBytes 5120;

        # defer the loading of images which are not visible to the client
        pagespeed EnableFilters lazyload_images;

        # enable JavaScript minification
        pagespeed EnableFilters rewrite_javascript;

        # enable image optimization
        pagespeed EnableFilters rewrite_images;

        # pre-solve DNS lookup
        pagespeed EnableFilters insert_dns_prefetch;

        # rewrite CSS to load page-rendering CSS rules first.
        pagespeed EnableFilters prioritize_critical_css;
    }

Additional Configuration Steps

Create a file cache directory which will be written by Nginx.

$ sudo mkdir /var/ngx_pagespeed_cache
$ sudo chown nginx:nginx /var/ngx_pagespeed_cache

For convenience, create an init script for Nginx.

$ git clone https://github.com/Fleshgrinder/nginx-sysvinit-script.git
$ cp nginx-sysvinit-script/nginx /etc/init.d/nginx
$ chmod 0755 /etc/init.d/nginx
$ chown root:root /etc/init.d/nginx

Finally, start Nginx.

$ sudo service nginx start

Note: Depending on requirements, you may want to define additional Nginx modules (e.g., HTTPS/SSL support, etc) besides ngx_pagespeed. In that case, you need to add them during Nginx compilation step. See this tutorial for enabling additional Nginx modules.

Subscribe to Xmodulo

Do you want to receive Linux FAQs, detailed tutorials and tips published at Xmodulo? Enter your email address below, and we will deliver our Linux posts straight to your email box, for free. Delivery powered by Google Feedburner.

The following two tabs change content below.
Dan Nanni is the founder and also a regular contributor of Xmodulo.com. He is a Linux/FOSS enthusiast who loves to get his hands dirty with his Linux box. He likes to procrastinate when he is supposed to be busy and productive. When he is otherwise free, he likes to watch movies and shop for the coolest gadgets.
Your name can also be listed here. Write for us as a freelancer.

9 thoughts on “How to speed up Nginx web server with PageSpeed

    • You need to build Nginx from source, and re-install it as described in the tutorial, since Nginx does not support loadable modules. If you installed Nginx with package manager, uninstall it first.

        • Depending on your Linux environment, use either of them:
          $ sudo apt-get remove
          $ sudo yum remove

          Unless you know what you are doing, I do not recommend fiddling with the existing Nginx deployment, though...

  1. Very interesting! Hope it will be in the core of nginx!
    I really wonder how the server knows where the visitor is in the page to send new images with the lazy loading.
    I guess it becomes useless if I serve my images on a CDN with cloudfront for example?

    • Lazy load works by nginx server updating <img> elements in HTML pages (i.e., changing src attributes and adding onLoad handler). Lazy loading is then initiated by web browser when onLoad event is triggered as user is scrolling down. So it's not that nginx is tracking where visitor is. nginx simply updates HTML documents so this magic happens. https://developers.google.com/speed/pagespeed/module/filter-lazyload-images

      When you are using CDN, this could save you additional byte transfers between your origin server and CDN nodes. But correct. end users would not benefit from this module.

Leave a comment

Your email address will not be published. Required fields are marked *

Current ye@r *