How to Add CDN to Your PageSpeed NGINX Configuration

One of the benefits of using Pagespeed is its capability of rewriting all assets in your webpage to the CDN of your choice, reducing server loads and improving concurrent visitors. The recommend CDN provider for you is KeyCDN, it is a cheaper alternative with lots of data center in different regions giving you low latency.

If you follow our guide on how to setup PageSpeed with Brotli in Nginx, you will have no problem following our steps here on adding CDN to your Pagespeed.

To add CDN to your Nginx, we only need to edit the /etc/nginx/nginx.conf.

vim /etc/nginx/nginx.conf

Then add the following Pagespeed directives. Make sure to replace it with your own domain and CDN links. The LoadFrom File /var/www/yourdomain.com/ is the directory where your website root folder is located, it will ensure that Pagespeed will load the file in the server instead of an HTTP connection.

pagespeed Domain https://yourdomain.com;
pagespeed Domain yourdomain.com;
pagespeed Domain https://cdn.yourdomain.com;
pagespeed Domain cdn.yourdomain.com;

pagespeed PreserveUrlRelativity on;

pagespeed MapRewriteDomain "https://cdn.yourdomain.com" "https://yourdomain.com";
pagespeed MapRewriteDomain cdn.yourdomain.com yourdomain.com;

pagespeed LoadFromFile "https://yourdomain.com/" "/var/www/yourdomain.com/";
pagespeed LoadFromFile "https://cdn.yourdomain.com/" "/var/www/yourdomain.com/"

pagespeed LoadFromFileRuleMatch Disallow \.php$;

Save the file and restart Nginx.

sudo service nginx restart

All of your web page assets like CSS, Javascript, and images are now rewritten to the CDN link.

If you’re using WordPress and enabled Jetpack’s Performance & Speed, no worries it will not affect, all of the images are still using the WordPress CDN.