How to Install Pagespeed Nginx Module on Ubuntu 18.04

How to Install Google Pagespeed Nginx Module on Ubuntu 18.04. In this tutorial, I’m going to show you, How to set up and configure the Pagespeed module for your website with Nginx.

Nginx is perhaps the most versatile web server out there, and it can beat other servers when configured correctly. It can also do other important things, such as load balancing, HTTP caching, and can be used as a reverse proxy.

Pagespeed can automatically increase the performance of the website by changing the web resources, improves web latency, and many more.

If you don’t have a website yet and wish to start with the main step: Consider purchasing a hosting. Please check out the following article: Best WordPress Hosting in 2020

Best WordPress Hosting in 2020

Make sure to log in via root user. Without further ado, let’s get started with:

Step 1: Install Nginx

If you haven’t installed Nginx you can install Nginx using the below commands. In case of VestaCP, nginx would be already installed so you can pretty much skip it.

sudo apt update
sudo apt install nginx

Once Nginx installed you can verify the status.

sudo service nginx status

● nginx.service - nginx - high performance web server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Sun 2020-05-03 17:15:23 IST; 11min ago
     Docs: http://nginx.org/en/docs/
  Process: 2127 ExecStop=/bin/kill -s TERM $MAINPID (code=exited, status=0/SUCCESS)
  Process: 2129 ExecStart=/usr/sbin/nginx -c /etc/nginx/nginx.conf (code=exited, status=0/SUCCESS)
 Main PID: 2141 (nginx)
    Tasks: 36 (limit: 4915)
   CGroup: /system.slice/nginx.service
           ├─2141 nginx: master process /usr/sbin/nginx -c /etc/nginx/nginx.conf
           ├─2143 nginx: worker process
           ├─2145 nginx: worker process
           ├─2147 nginx: worker process
           ├─2149 nginx: worker process
           ├─2151 nginx: worker process
           ├─2154 nginx: worker process
           ├─2155 nginx: worker process
           ├─2157 nginx: worker process
           └─2158 nginx: cache manager process

Now you can check your domain name in the browser. You will see the Nginx welcome page. VestaCP users probably already know this.

Note for VestaCP Users

Before you proceed, execute this and save the output into notepad or something, ’cause you’re gonna need it soon, or else you might face a ‘semi-installed’ Nginx, and your websites might stop working.

nginx -V

It would be something like this:

nginx version: nginx/1.18.0
built by gcc 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04) 
built with OpenSSL 1.1.1g  21 Apr 2020
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --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-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module

Copy the configure arguments

Copy everything after configure arguments:, and save it. Basically something like this:

--prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --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-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module

Step 2: Install Pagespeed and Modules

Install ngx_pagespeed with the following command.

sudo apt install libssl-dev

bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
--nginx-version latest

Soon, you see something like:

Extracting nginx... About to build nginx. Do you have any additional ./configure arguments you would like to set? For example, if you would like to build nginx with https support give –with-http_ssl_module. If you don’t have any, just press enter.
->

Paste the contents you copied from here. Also, you can add any other extra modules you want from here. Continue the installation by entering Y.

Step 3: Setup the Cache Directory

sudo mkdir /var/cache/ngx_pagespeed_cache

Step 4: Enable the Pagespeed Module

To enable the Pagespeed module, you need to edit the Nginx virtual host configuration and add the Pagespeed configurations.

From Ubuntu users, the file is found at:

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

For VestaCP users specifically, if the VestaCP user is: niklaus and your domain is domain.com, the file is found at:

sudo nano /home/niklaus/conf/web/domain.com.nginx.conf

Edit the file and add the Pagespeed configurations. Your file should look something like:

server {
    listen      172.217.166.14:80;
    server_name domain.com www.domain.com;
    error_log  /var/log/apache2/domains/domain.com.error.log error;

    # Pagespeed Module
    pagespeed on;

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

    pagespeed RewriteLevel PassThrough;
    pagespeed EnableCachePurge on;
    pagespeed PurgeMethod PURGE;
    pagespeed EnableFilters prioritize_critical_css;
	pagespeed EnableFilters rewrite_css;
	pagespeed EnableFilters collapse_whitespace,remove_comments;
	pagespeed EnableFilters flatten_css_imports;
	pagespeed EnableFilters combine_css;
	pagespeed EnableFilters combine_javascript;
	pagespeed EnableFilters defer_javascript;
	pagespeed EnableFilters extend_cache;
	pagespeed EnableFilters pedantic;
	pagespeed EnableFilters inline_google_font_css;
	pagespeed FetchHttps enable;
	pagespeed EnableFilters inline_css,move_css_above_scripts;
	pagespeed EnableFilters inline_javascript;
	pagespeed EnableFilters inline_import_to_link;
	pagespeed EnableFilters lazyload_images;
	pagespeed EnableFilters insert_dns_prefetch;
	pagespeed EnableFilters inline_preview_images;
	pagespeed EnableFilters resize_mobile_images;
	pagespeed EnableFilters rewrite_images;
	pagespeed EnableFilters responsive_images,resize_images;
	pagespeed EnableFilters responsive_images_zoom;
	pagespeed EnableFilters rewrite_javascript;
	pagespeed EnableFilters rewrite_style_attributes,convert_meta_tags;

    
    location / {
        proxy_pass      http://172.217.166.14:8080;

        proxy_cache cache;
        proxy_cache_valid 15m;
        proxy_cache_valid 404 1m;
        proxy_no_cache $no_cache;
        proxy_cache_bypass $no_cache;
        proxy_cache_bypass $cookie_session $http_x_update;

        location ~* ^.+\.(jpeg|jpg|png|gif|bmp|ico|svg|tif|tiff|css|js|htm|html|ttf|otf|webp|woff|txt|csv|rtf|doc|do$
            proxy_cache    off;
            root           /home/niklaus/web/domain.com/public_html;
            access_log     /var/log/apache2/domains/domain.com.log combined;
            access_log     /var/log/apache2/domains/domain.com.bytes bytes;
			expires        max;
            try_files      $uri @fallback;
        }
    }

    location /error/ {
        alias   /home/niklaus/web/domain.com/document_errors/;
    }

    location @fallback {
        proxy_pass      http://144.76.80.180:8080;
    }

    location ~ /\.ht    {return 404;}
    location ~ /\.svn/  {return 404;}
    location ~ /\.git/  {return 404;}
    location ~ /\.hg/   {return 404;}
    location ~ /\.bzr/  {return 404;}

    include /home/niklaus/conf/web/nginx.domain.com.conf*;
}

Different types of filters are available for this module. You can read about them from here.

Now all you have to do is reload your Nginx config file by typing the below commands and you have a Google’s Pagespeed backed, Nginx server:

sudo nginx -t
sudo systemctl restart nginx

If you get an error, something like or for some other module:

nginx: [emerg] unknown directive "gzip_static" in /etc/nginx/nginx.conf:53
nginx: configuration file /etc/nginx/nginx.conf test failed

There are two solutions to nginx: [emerg] unknown directive problem:

Solution 1:

Go to: /etc/nginx/nginx.conf

sudo nano /etc/nginx/nginx.conf

And comment that module’s line using a #. Example:

# gzip_static         on;

Retry this, and the error should go. If it doesn’t, leave a comment below and, we’ll solve it together?

sudo nginx -t
sudo systemctl restart nginx

Solution 2:

Or, If you really wish to use that module, you need to include that module while building nginx. Your can find out other modules from here.

I asked you to copy some contents, remember? Yeah there, add your module there. So, this is our configuration now.

--prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --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-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module

Add this here too: –with-http_gzip_static_module. So, the result should look like:

--prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --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-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-http_gzip_static_module

Re-run this now and the error should go.

sudo nginx -t
sudo systemctl restart nginx

Step 5: Test if the Pagespeed Module is working

To test is the Pagespeed module for Nginx is working, we make a request to the domain name using the curl command. If you don’t have an index.html or index.PHP page set up, make sure to create one in the website’s root directory.

echo "<html><head><title>Pagespeed Module Test</title></head><body><h1>It works</h1></body></html>" > /home/niklaus/web/domain.com/public_html/index.html;

Now, run this:

curl -I -X GET domain.com

The result should look something like:

HTTP/2 200 
date: Sun, 03 May 2020 11:46:55 GMT
content-type: text/html; charset=UTF-8
x-page-speed: 1.13.35.2-0
cache-control: max-age=0, no-cache, no-store
cf-cache-status: DYNAMIC

The X-Page-Speed:1.13.35.2-0) means Pagespeed is currently active and your website is optimized.

Conclusion

Now you’ve learned how to install and configure Pagespeed, Nginx’s Module on Ubuntu 18.04, or VestaCP.

Please feel free to post your issues in the comments box below.