Optimizing NGINX – Part 2

pagespeedIn a previous post we talked about the benefits of using Google’s PageSpeed module with the Nginx web server to automatically optimize page elements and improve the loading speed of pages.

This post will cover more of the details of downloading the source for both Nginx and PageSpeed, compiling them and the configuration options that we have used with the best results.

These directions are for CentOS 6.4/5 but should be the same for almost any flavor of Linux.

Download

You’ll need the latest versions of PageSpeed, the PageSpeed library and NGINX. (Current as of 1/31/2014)

cd ~ 
wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.7.30.3-beta.zip 
unzip v1.7.30.3-beta.zip
cd ngx_pagespeed-1.7.30.3-beta/ 
wget https://dl.google.com/dl/page-speed/psol/1.7.30.3.tar.gz 
tar -xzvf 1.7.30.3.tar.gz

cd ~
wget http://nginx.org/download/nginx-1.4.4.tar.gz
tar -xvzf nginx-1.4.4.tar.gz
cd nginx-1.4.4/

Build & Compile

You’ll need to copy the current build parameters from you existing NGINX installation to build the new one, run “nginx -V” in your shell to get the list of parameters.  For our servers it looks something like this:

./configure --add-module=/root/ngx_pagespeed-1.7.30.1-beta --prefix=/etc/nginx --sbin-path=/usr/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=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-file-aio --with-http_spdy_module --with-cc-opt='-g -O2 -fstack-protector --param=ssp-buffer-size=4 -Wformat -Wformat-security -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro' --with-ipv6

make

make install

The last two commands will build, compile and install NGINX.

Configure

We’ve added the following configurations lines to our main nginx.conf file:

# Pagespeed config directives
pagespeed on;
pagespeed FileCachePath "/var/ngx_pagespeed_cache/";
pagespeed EnableFilters rewrite_css,rewrite_javascript,combine_javascript,remove_comments,collapse_whitespace,local_storage_cache;
pagespeed DisableFilters  rewrite_images,convert_png_to_jpeg;

pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;

The complete documentation for the filters can be found here, but here is a short description of what we’ve found works best for us:

rewrite_css – This filter parses linked and inline CSS, rewrites the images found and minifies the CSS. The filter works on CSS found in style blocks and link refs.

rewrite_javascript – This filter minifies JavaScript code, using an algorithm similar to that in Douglas Crockford’s popular JSMin program. At present, the filter strips all comments and most whitespace. The filter works only on JavaScript found in script blocks (either as the target of the src attribute, or within the body of the block).

combine_javascript – Combine JavaScript’ seeks to reduce the number of HTTP requests made by a browser during page refresh by replacing multiple distinct JavaScript files with a single one.

remove_comments – The remove_comments filter eliminates HTML comments, which are often used to document the code or to comment out experiments.

collapse_whitespace – The ‘Collapse Whitespace’ filter reduces bytes transmitted in an HTML file by removing unnecessary whitespace.

local_storage_cache – his filter saves inlined resources to the browser’s local storage (an HTML5 feature) on the first view of a page, and loads them from local storage on subsequent views rather than sending them (inline) again.

The rest of the configuration options turn on statistics, stats logging and the location of the stats logs files.  We also disable two of the default filters that manipulate images, we ran into a few conflicts with other code that uses dynamic images and decided that it was easier to keep it off.

Pro Tip

You can “flush” the PageSpeed cache by opening a terminal window and issuing:

touch /var/ngx_pagespeed_cache/cache.flush
This entry was posted in Search Engine Optimization, Technical Talk. Bookmark the permalink.

Leave a Reply

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