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?
- What is an "origin pull" CDN?
- What CDN providers support origin pull?
- Configuring a CDN with ProCache
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).
Obtain an account with the CDN provider (Sign-up page for Amazon Cloudfront).
On the AWS Web Services page, click to: Storage and Content Delivery > CloudFront. This takes you to the "Cloudfront Distributions" page.
Click the "Create Distribution" button, and then click the "Get Started" button for "Web".
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.comOrigin Path:
/site/In addition, if you are using HTTPS you will likely want the “Origin protocol policy” setting set to “Match viewer”.
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.
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.netCDN file extensions:
css js jpg jpeg gif png pdf(default value, or blank for all). I recommend also addingwebpandsvgif using those types of images.CDN attributes:
href src srcsetand potentiallydata-srcanddata-srcsetif using a lazy-loading script that uses those attributes.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.