PageSpeed CDN Integration

pagespeed cdn

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 re-positioned. These components include what used to be known as PageSpeed Service (Deprecated in 2015) and the PageSpeed Chrome dev tools extension which has been integrated into the Chrome DevTools. Therefore, the two tools currently available under the Google PageSpeed umbrella include:

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

  1. 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
  2. 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
  3. 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

  1. Now that the PageSpeed module is installed and running on your Apache web server, you can move on to creating a KeyCDN Pull Zonekeycdn-deploying-zone
  2. 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 Zonealias 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.

  1. 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.
  2. Add the following snippet within the <Directory> directive, remember to replace yourwebsite.com and yourwebsite-1c6b.kxcdn.com with your actual domain and CDN URL.
    ModPagespeed On
    ModPagespeedAllow all
    ModPagespeedEnableFilters rewrite_domains
    ModPagespeedDomain yourwebsite.com
    ModPagespeedDomain yourwebsite-1c6b.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.

  3. Just above the <Directory> directive, add the following snippet to rewrite your original domain URL to the CDN’s Zone URL or Zonealias, again, remember to replace the sample domains with your actual domains.
    ModPagespeedMapRewriteDomain yourwebsite-1c6b.kxcdn.com yourwebsite.com
  4. 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-1c6b.kxcdn.com/wp-content/uploads/2016/03/test.jpg

However, after optimization it will look like the following.

http://yourwebsite-1c6b.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 on the fly.

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.

3 Comments

Leave A Comment?