return to list of articles

Using Nginx Pagespeed to improve your page load times

Nginx Pagespeed has been released. Read about why you should be using it.

Improve the performance of Nginx

Google has released a tool for the Nginx web server called ngx_pagespeed that allows webmasters (is that term still in use?) to optimize the speed of their sites. Below is a quick run-through of why you may want to play around with it.

The configurable filters

The pagespeed tools comes with 40 configurable filters that you can play around with to optimize your site. See the full list of config_filters. Let’s go through a few of the key filters in some detail. extend_cache will increase the lifetime of the assets (stylesheets, JavaScript files and images) that you haven’t already optimized. It does this by signing appending a content hash to the end of the file’s URL (i.e file.png?485748394). If you don’t want to do this to all of your asset types you can use a combination of extend_cache_css, extend_cache_images and extend_cache_scripts instead.

If you use background images in your stylesheets you can sprite them into a single image with sprite_images. You should compare the performance before and after before making your final decision here - consider individual file sizes, number of HTTP requests, latency (especially if you don’t use a CDN) etc. In line with that configuration, it’s highly recommended that you use rewrite_images to optimize image size and encoding if you don’t already use a tool like ImageOptim prior to deployment.

Speaking of latency, if you want to measure the latency of page loads, add_instrumentation adds JavaScript to your pages that will send that information back to the server.

A great configuration if defer_javascript which will defer the loading of JavaScript until the page is finished loading. This is potentially a very big performance option if you have clunky, blocking JavaScript files to load. If you haven’t already done so, move_css_above_scripts moves your CSS elements about all <script> tags on your page. Still on JavsScript loading, make_google_analytics_async will ensure that requests to Google Analytics will be asynchronous so that’s one less blocking script to worry about.

I won’t go through all of them, check out the link about to get a better insight into all of the configurations.

Installation

The installation process is covered on the Github page for ngx_pagespeed.

Why you should care

Optimizing your pages and reducing your page load times will almost certainly reduce bounce rates and could increase conversions. Zona research said in 1999 that you could lose up to 33% of your visitors if you page took more than 8 seconds to load. Akamai said in 2006 that you could lose up to 33% of your visitors if your page took more than 4 seconds to load on a broadband connection. Tests done at Google in 2006 revealed that going from 10 to 30 results per page increased load time by a mere 0.5 seconds, but resulted in a 20% drop in traffic. More tests done at Amazon in 2007 revealed that for every 100ms increase in load time, sales would decrease 1%.

PageSpeed insights

You can use PageSpeed insights to analyze the current performance of your website to see what you should be optimizing. Good luck and get performant!


Get notified when Pawel releases new posts, guides, or projects