PageSpeed CDN Integration

Updated on January 4, 2023

What is PageSpeed?

Google PageSpeed initially set out to offer a collection of various tools to help make the web faster. Since then, two components have been either deprecated or repositioned. These components include what used to be known as PageSpeed Service (Deprecated in 2015) and the PageSpeed Chrome DevTools extension which has been integrated into the Chrome DevTools. Therefore, the two tools currently available under the Google PageSpeed umbrella include:

PageSpeed Module - A module available both for Nginx and Apache web servers that utilize various open source server modules to optimize your site automatically.
PageSpeed Insights - A web-based tool that provides web optimization techniques to help you improve your site's overall speed and usability. Read more about how to score 100/100 with Google PageSpeed using WordPress.

In this tutorial, we're going to discuss how to setup a PageSpeed CDN implementation for those interested in using both in unison.

Using a PageSpeed CDN setup

The steps below will outline the process that must be followed in order to start using the PageSpeed Module with KeyCDN. For this setup, we are using an Apache2 web server and Ubuntu 14.04.

Step 1 - Installing the PageSpeed Module

Start off by downloading the PageSpeed Module file with the following command (if you're on a 64-bit version).
```
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
```
Next, run the following two commands from within the same directory that you just downloaded the PageSpeed Module file.
```
sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install
```
Now that the PageSpeed Module has been downloaded and installed you can restart Apache.
```
sudo service apache2 restart
```

Step 2 - Setting up your KeyCDN Zone

Now that the PageSpeed Module is installed and running on your Apache web server, you can move on to creating a KeyCDN Pull Zone.
Once your Zone has fully deployed and is set to "active" you can now use it. Additionally, if you don't want to use the default Zone URL, you can create a Zone Alias in order to deliver the content via a custom CDN URL (e.g. cdn.yourwebsite.com).

Step 3 - Modifying your configuration file

The last step in getting your PageSpeed CDN combination up and running is to make a few adjustments to your Apache configuration file. If you're using Apache2, this will usually be located in the /etc/apache2/sites-available/ directory.

First off, find the portion of the configuration file that is located within the <Directory> </Directory> directive. If you have multiple websites configured within the same configuration file, ensure that you are modifying the correct one.

Add the following snippet within the <Directory> directive, remember to replace yourwebsite.com and yourwebsite-hexid.kxcdn.com with your actual domain and CDN URL.

ModPagespeed On
ModPagespeedAllow all
ModPagespeedEnableFilters rewrite_domains
ModPagespeedDomain yourwebsite.com
ModPagespeedDomain yourwebsite-hexid.kxcdn.com
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
ModPagespeedEnableFilters combine_javascript,extend_cache,resize_rendered_image_dimensions

There are many other filters you can enable depending on your needs. Learn more about the full list of PageSpeed filters.

Just above the <Directory> directive, add the following snippet to rewrite your original domain URL to the CDN's Zone URL or Zone Alias, again, remember to replace the sample domains with your actual domains.
```
ModPagespeedMapRewriteDomain yourwebsite-hexid.kxcdn.com yourwebsite.com
```
Once done, save your changes, and restart Apache.

When visiting your website, you should now see that all static files (CSS, JS, and images) are rewritten to use the CDN URL. It should be noted that srcset attributes can be generated by PageSpeed but the attribute's value does not get parsed and optimized by default. There are some PageSpeed filter configurations that must be applied in order to achieve this.

Additionally, if you enable PageSpeed image optimization, you will likely experience a discrepancy in the image's canonical header link. Optimizing your images with PageSpeed actually adds additional text to the end of your image URL. For example, an image URL before PageSpeed optimization may look like:

http://yourwebsite-hexid.kxcdn.com/wp-content/uploads/2016/03/test.jpg

However, after optimization it will look like the following.

http://yourwebsite-hexid.kxcdn.com/wp-content/uploads/2016/03/test.jpg.pagespeed.ic._Q5LC7BeqM.webp

Therefore, if using a CDN, it will also modify your canonical header with the added PageSpeed text. This means that your canonical header will resemble http://yourwebsite.com/wp-content/uploads/2016/03/test.jpg.pagespeed.ic._Q5LC7BeqM.webp which is incorrect as it should not include the .pagespeed.ic._Q5LC7BeqM.webp section in the URL. Thus, it is recommended to use a dedicated image optimization service such as Optimus for optimizing your images.

The above configuration snippets, however should be a good starting point for those who want to use a PageSpeed CDN setup. Now that your website is properly configured, you can begin playing around with the various filters to tweak any configuration settings you desire.