How to install Google PageSpeed to improve NGINX performance

4 months ago 96
PR Distribution
speed.jpgImage: iStock/Oleksandr Pupko

Google PageSpeed is an open-source module, created by Google, to help make web pages load faster. This added speed is achieved by rewriting them for better latency and decreasing bandwidth. Although PageSpeed has been around for some time, it’s not often used. However, by adding it to your NGINX or Apache websites, you’ll find they perform considerably better.

SEE: Hiring Kit: Network Engineer (TechRepublic Premium)

I’m going to show you how to install both NGINX and PageSpeed, so your users can enjoy a much-improved experience with your web pages. We are going to install everything from scratch, so you’ll want to do this on a non-production machine first. Once you’ve mastered this, move it to production and then migrate your sites to the new web server.

What you’ll need

I’m going to demonstrate this on Ubuntu Server 20.04, so you’ll need an instance of that operating system and a user with sudo privileges. That’s, let’s get to work.

How to install the necessary dependencies

The first thing we’ll do is install a few dependencies. Log into your server and issue the commands:

sudo apt-get update sudo apt-get install libssl-dev libxslt-dev libgd-dev curl nano gnupg2 ca-certificates lsb-release git -y

How to install NGINX

Next, we need to install NGINX. First, add the repository with:

sudo add-apt-repository ppa:ondrej/nginx-mainline -y

Update and install NGINX with:

sudo apt update sudo apt install nginx-core nginx-common nginx nginx-full -y

We have to add the source from NGINX. Open the repository file with:

sudo nano /etc/apt/sources.list.d/ondrej-ubuntu-nginx-mainline-*.list

Locate the following line:

# deb-src focal main

Remove the # character from the above line and then save and close the file.

Update apt with:

sudo apt update

Now, we can download the NGINX source. Create a new directory with:

sudo mkdir -p /usr/local/src/nginx

Change into that new directory:

cd /usr/local/src/nginx/

Install the dpkg-dev package with:

sudo apt install dpkg-dev

Install the source with the command:

sudo apt source nginx

How to download the ngx_pagespeed source

Change into the src directory with the command:

cd /usr/local/src

Clone the necessary source code:

sudo git clone

Change into the newly created directory:

cd incubator-pagespeed-ngx/

Change to the latest stable branch:

sudo git checkout latest-stable

Locate the download URL with:


Use that URL to download the PSOL with a command like this:

sudo wget

Extract the new file with:

sudo tar xvf

Make sure you know which version of NGINX we’re using with:

ls /usr/local/src/nginx

You’ll use the most recent version number (in my case, it’s 1.21.4). Change into that directory with:

cd /usr/local/src/nginx/nginx-1.21.4

Build the necessary dependencies with the following commands:

sudo apt build-dep nginx sudo apt install uuid-dev

When those commands finish, configure the environment with:

sudo ./configure --with-compat --add-dynamic-module=/usr/local/src/incubator-pagespeed-ngx

Build the PageSpeed module:

sudo make modules

Copy the modules to the necessary directory with:

sudo cp objs/ /usr/share/nginx/modules/

How to load the PageSpeed module

Open the NGINX configuration file with:

sudo nano /etc/nginx/nginx.conf

Add the following line to the top of the file:

load_module modules/;

Save and close the file. Reload NGINX with:

sudo systemctl reload nginx

How to configure the PageSpeed filters

First, create the folder PageSpeed will use for its cache and give it the proper permission with the following commands:

sudo mkdir -p /var/ngx_pagespeed_cache sudo chown -R www-data:www-data /var/ngx_pagespeed_cache

I’m now going to enable PageSpeed for the default NGINX site. You’ll want to do this on the configuration file for the page/site you’re serving up with NGINX. For my demonstration, I’ll open the default file with:

sudo nano /etc/nginx/sites-available/default

At the bottom of the server section, add the following:

            pagespeed on;             pagespeed FileCachePath /var/ngx_pagespeed_cache;             location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {               add_header "" "";             }             location ~ "^/pagespeed_static/" { }             location ~ "^/ngx_pagespeed_beacon$" { }

So that entire server block looks like this:

server {             listen 80 default_server;             listen [::]:80 default_server;             # SSL configuration             #             # listen 443 ssl default_server;             # listen [::]:443 ssl default_server;             #             # Note: You should disable gzip for SSL traffic.             # See:             #             # Read up on ssl_ciphers to ensure a secure configuration.             # See:             #             # Self signed certs generated by the ssl-cert package             # Don't use them in a production server!             #             # include snippets/snakeoil.conf;             root /var/www/html;             # Add index.php to the list if you are using PHP             index index.html index.htm index.nginx-debian.html;             server_name _;             location / {                     # First attempt to serve request as file, then                     # as directory, then fall back to displaying a 404.                     try_files $uri $uri/ =404;             }             # pass PHP scripts to FastCGI server             #             #location ~ \.php$ {             #           include snippets/fastcgi-php.conf;             #             #           # With php-fpm (or other unix sockets):             #           fastcgi_pass unix:/run/php/php7.4-fpm.sock;             #           # With php-cgi (or other tcp sockets):             #           fastcgi_pass;             #}             # deny access to .htaccess files, if Apache's document root             # concurs with nginx's one             #             #location ~ /\.ht {             #           deny all;             #}             pagespeed on;             pagespeed FileCachePath /var/ngx_pagespeed_cache;             location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {               add_header "" "";             }             location ~ "^/pagespeed_static/" { }             location ~ "^/ngx_pagespeed_beacon$" { }            pagespeed RewriteLevel CoreFilters; }

Save and close the file.

Reload NGINX with:

sudo systemctl reload nginx

You can now make sure PageSpeed is working with the command:

curl -I -p https://SERVER

Where SERVER is either the IP address or domain of the server. The output should include something like this:


That’s it. PageSpeed is now installed and working to help speed up your NGINX web server. To make sure NGINX doesn’t get automatically upgraded (and break PageSpeed), you can put it on hold with the command:

sudo apt-mark hold nginx

When you are alerted (by apt) that there’s a new version of NGINX, you’ll need to download the source package and compile everything again.

Subscribe to TechRepublic’s How To Make Tech Work on YouTube for all the latest tech advice for business pros from Jack Wallen.

Read Entire Article