Installing Nginx Pagespeed Module
PageSpeed is a technology from Google, designed to help a website’s performance optimisations. Faster websites offer a better user experience, boost rankings in Google and increase conversion rates.
Pagespeed lets you measure and (automatically) optimise your web pages and comply with web performance best practices. Speed up your web site and boost web performance!
Assume that you already have the Nginx install and running in your server, this post only to build the module and load the dynamic module into the nginx server.
################ # Installing Basic Dependency ################
sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev ################ # Download Nginx Source Code ################
VERSION="1.18.0" && \
sudo wget https://nginx.org/download/nginx-${VERSION}.tar.gz && \ sudo tar zxf nginx-${VERSION}.tar.gz && \ cd nginx-${VERSION} ################ # Download Nginx Pagespeed Module Source Code ################
NPS_VERSION=1.13.35.2-stable && \
sudo wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip && \
sudo unzip v${NPS_VERSION}.zip ################ # Build Pagespeed Module ################
cd nginx-${VERSION} && \
sudo ./configure --with-compat --add-dynamic-module=../incubator-pagespeed-ngx-latest-stable && \
sudo make modules && \
sudo cp objs/ngx_pagespeed.so /etc/nginx/modules/ngx_pagespeed.so
For other installation alternative, you may refer to Pagespeed site at https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source
Once the module is done compiled, than you need to load the module in the nginx.conf before the http block than restart the nginx sudo service nginx restart
load_module /etc/nginx/modules/ngx_pagespeed.so; http {
...
...
server {
pagespeed on;
pagespeed FileCachePath "/var/pagespeed_cache";
}
}
To test the Pagespeed working on your website, you may using the curl to call to the site and check on the header. You should get the X-Page-Speed:1.13.25.2–0, this mean that the PageSpeed module is working fine in your server.
$ curl -I 127.0.0.1There are a lot of configuration and filter you may apply in your pagespeed module, the following is the sample configuration that currently apply in my server, you may fine tune it by referring to the Pagespeed documentation at https://www.modpagespeed.com/doc/.
Basically the following configuration enabled the cached in RAM and also on disk, combine, compress and convert the css, js, images to reduce the download size. In the last part of the configuration, I enabled the pagespeed admin page for the monitoring and purging of cache.
$ vim pagespeed.confCopy the following content into the file.
pagespeed on;
pagespeed FileCachePath "/var/pagespeed_cache";
pagespeed FileCacheSizeKb 1024000;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 500000;
pagespeed LRUCacheKbPerProcess 16384;
pagespeed LRUCacheByteLimit 32768;
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;
pagespeed RewriteLevel CoreFilters;## Text / HTML
pagespeed EnableFilters add_head;
pagespeed EnableFilters remove_quotes;
pagespeed EnableFilters combine_heads;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters convert_meta_tags;
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters pedantic;
pagespeed EnableFilters remove_comments;
pagespeed EnableFilters remove_quotes;
pagespeed EnableFilters trim_urls;## JavaScript
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters canonicalize_javascript_libraries;
pagespeed EnableFilters inline_javascript;
pagespeed EnableFilters rewrite_javascript;## CSS
pagespeed EnableFilters outline_css;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters fallback_rewrite_css_urls;
pagespeed EnableFilters rewrite_style_attributes_with_url;## Images
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters responsive_images;
pagespeed EnableFilters dedup_inlined_images;
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters convert_gif_to_png;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed EnableFilters recompress_jpeg;
pagespeed EnableFilters recompress_png;
pagespeed EnableFilters recompress_webp;
pagespeed EnableFilters strip_image_color_profile;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters jpeg_subsampling;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters insert_image_dimensions;
pagespeed NoTransformOptimizedImages on;
pagespeed EnableFilters sprite_images;## Admin
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;# This location block is the pagespeed admin page allow IP addresslocation ~ ^/pagespeed_admin {
allow 127.0.0.1;
deny all;
}location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";
}location ~ "^/pagespeed_static/" { }location ~ "^/ngx_pagespeed_beacon$" { }location ~* ^/webp/.+\.(png|jpe?g)$ {
expires 30d; add_header Vary "Accept";
add_header Cache-Control "public, no-transform";
try_files $uri$webp_extension $uri =404;
}
Include the file /etc/nginx/pagespeed.conf in the server block where you want to apply the pagespeed. After that, just reload the nginx, than you should get your pagespeed configuration to work in your server.
server {
listen 80;
listen [::]:80; ...
include /etc/nginx/pagespeed.conf;
... location / { }
}
The above is the configuration that I apply after done some study and testing on my server, it’s may not the best and perfect configuration, you may kick start with the above configuration, than fine tune it to fit your use case. For more detail about the pagespeed, you may refer to their official website at https://developers.google.com/speed/pagespeed/module
Originally published at https://tech.david-cheong.com on June 14, 2020.