ProCache CDN Integration

Using ProCache with a CDN can drastically reduce the server’s overhead and bandwidth in delivering assets, while also greatly improving the speed at which they are delivered to end-users.

What is the benefit of using a CDN with ProcessWire?

By using the CDN feature provided with ProCache on your ProcessWire site, you can drastically reduce the server's overhead and bandwidth in delivering assets, while also greatly improving the speed at which they are delivered to end-users. This is because most CDN providers have multiple regional locations, and automatically select the one closest to the person visiting your site. The result is that your site loads more quickly than it otherwise might without the CDN.

Using a CDN also means that you are much better prepared for traffic spikes, as your server can focus purely on delivering the HTML while all the high bandwidth assets can be delivered by the CDN. Combined with ProCache's static caching features, you have an unbeatable performance combination. Using ProCache and a CDN enables you to do a lot more with less, especially in terms of server resources. It is very likely you will find better performance with this combination than you would in paying for a faster server or more resources at your hosting facility.

What is an "origin pull" CDN?

"Origin" implies your server (or a location on your server), and "pull" implies automatically pulling a file from your server.

ProCache can be integrated with any CDN that supports origin pull. This may also be referred to as "pull zone", "pull mode" or just "pull". Origin pull implies that you configure the CDN service to mirror a path on your server (origin), so that accessing the same path on the CDN returns the same file that it would on the origin server. When the CDN doesn't have the requested file present, it pulls it from your origin server and then caches it so that it doesn't need to re-pull it for future requests to the same file.

The origin can be any URL on your server that has assets beneath it. For example, with ProcessWire, the most common pull origin would be the /site/ directory on your server. This is because all of your site's files managed by ProcessWire live under /site/assets/, and all CSS/JS files typically live under /site/templates/. The origin could also be the entire server "/".

With ProCache, we recommend using /site/ as your pull origin since ProCache uses a CDN to offload your site's assets, while letting your server focus on delivering the HTML. The origin is configured both in ProCache settings and at your CDN provider.

What CDN providers support origin pull?

Almost all CDN providers support origin pull. Examples you may have heard of include Amazon CloudFront, KeyCDN, MaxCDN, Akamai, CDNetworks and more. We use Amazon Cloudfront on ProcessWire.com and so our configuration examples focus on that provider.

Configuring a CDN with ProCache

Our instructions focus on configuring Amazon CloudFront with ProCache. However, the process should be very similar for any CDN provider. CloudFront is an easy one to get started with since their entry level CDN is free (that's the one we are using on this site).

  1. Obtain an account with the CDN provider (Sign-up page for Amazon Cloudfront).

  2. On the AWS Web Services page, click to: Storage and Content Delivery > CloudFront. This takes you to the "Cloudfront Distributions" page.

  3. Click the "Create Distribution" button, and then click the "Get Started" button for "Web".

  4. You will now be on the "Create Distribution" page. To get things started, we recommend accepting all the default settings already selected. However, you will want to populate these two at the top:

    • Origin Domain Name: your-domain-name.com

    • Origin Path: /site/

    • In addition, if you are using HTTPS you will likely want the “Origin protocol policy” setting set to “Match viewer”.

  5. After creating your distribution, you will come back to the Cloudfront Distributions page. You should now have a row for your newly created CDN distribution. Note the "Domain Name" column in the table, which will look something like d1juguve2xwkcy.cloudfront.net. Copy or write it down, as you will be pasting it into your ProCache settings next, where we mention your-id.cloudfront.net.

  6. Login to your ProcessWire site, go to Setup > ProCache, and click the CDN tab. We recommend the following settings:

    • CDN status: "Enabled for all users" (or you may wish to temporarily use "Enabled for logged-in users" for testing on a production site).

    • CDN host setup: /site/ = your-id.cloudfront.net

    • CDN file extensions: css js jpg jpeg gif png pdf (default value, or blank for all)

    • CDN attributes: href src srcset

    • CDN template files: None (or you may wish to check one or two templates temporarily for testing)

Assuming your CloudFront CDN is now deployed (it can take 10-20 minutes), you are ready to test to see how the CDN is working. View a page on the front-end of your site where your CDN would be in use. View the source or use your browser inspection tool to examine the URLs for any assets using file extensions you configured in ProCache. For example, your site's CSS file(s) should now point to: //your-id.cloudfront.net/templates/styles/main.css.

If all looks good and appears to be working then your site's assets are now powered by the CDN! At this point you may want to clear your ProCache cache and/or configure your minification and merge settings under the "Minify" tab.

Twitter updates

  • ProcessWire 3.0.142 has a lot of updates but the biggest is the addition of custom fields support for file and image fields. In this post, we take a closer look at that, and also outline all of the new features in the just-released FormBuilder v40— More
    11 October 2019
  • This week’s dev branch version brings you improvements to ProcessWire’s input->cookie API variable, plus it adds the ability to modify system URLs and paths at runtime. This post also includes some examples to demonstrate just how useful this can be— More
    20 September 2019
  • New post: This week we’ll take a look at a new version of FormBuilder that's on the way (with a screencast), as well as the latest version of the core: ProcessWire 3.0.140— More
    6 September 2019

Latest news

  • ProcessWire Weekly #283
    The 283rd issue of ProcessWire Weekly introduces ProcessWire 3.0.142 and FormBuilder v40, highlights some conference content, and features a new weekly poll continuing with the #processwireworks theme. Read on!
    Weekly.pw / 12 October 2019
  • ProcessWire 3.0.142 core updates
    This latest version of the core on the dev branch has a lot of updates, bnd the biggest is the addition of custom fields support for file and image fields. In this post, we take a closer look and also outline all of the new features in the just-released FormBuilder v40.
    Blog / 11 October 2019
  • Subscribe to weekly ProcessWire news

“Yesterday I sent the client a short documentation for their ProcessWire-powered website. Today all features already used with no questions. #cmsdoneright—Marc Hinse, Web designer/developer