Setting up Cloudfront in LSCache

Last Updated on December 28, 2022 by Steve

You can configure the LiteSpeed Cache plugin to work with almost any content delivery network. Today, we’ll show you how to set up CDN support, if you are using Cloudfront. We chose Cloudfront as our CDN provider because it is extremely easy to set up, powerful and affordable. Amazon Web Services offer pay as you go model which can be cheaper than other services with monthly subscription charging you for resources you may not be using.

Set up your CloudFront CDN according to this tutorial.

Make a note of the Domain Name they give to you (i.e. d111111abcdef8.cloudfront.net).

Enter that domain name directly into your browser and make sure that your site comes up. If it does, then everything is in working order, and you are ready to move on to the next step.

Set Up in LSCache Plugin

From the WordPress Dashboard, navigate to LiteSpeed Cache > Settings > CDN, and do the following:

  1. Set Enable CDN to ON
  2. Enter CDN URL. This is the Domain Name you received earlier from CloudFront.
  3. If CloudFront will be handling your image, CSS, or JS files, set the appropriate Include buttons to ON.
  4. If you set any of the above buttons to OFF, check the Include File Types box and make sure the relevant file extensions are not listed. For the example outlined in red above, Include JS is set to OFF and so we also need to remove .js from Include File Types
  5. Set Original URL to your site’s domain name (i.e. //example.com/wordpress).
  6. Save your changes.

Verify

In our example, Include CSS was set to ON and Include JS was set to OFF. To verify that everything is working as expected, we need to take a look at the Request URL in the headers and see from where both CSS and Javascript are being served.

To do so, navigate to your site, and press F12 to bring up the developer tools in the Network tab. Reload the page.

First, check for CSS. Select the CSS tab, and then choose the first file listed to the left. Make note of the Request URL header. Is it coming from the CloudFront domain? If so, then CSS is being served correctly.

Now, check for JS. Select the JS tab, and then choose the first file listed to the left. Make note of the Request URL header. Is it coming from your original domain? If so, then JS is being served correctly. After verification is complete return to LSCache CDN configuration page and turn Include JS to on. That’s it! You have just set up CDN using Cloudfront with LSCache plugin.

Hope you found this article helpful.

Leave a Comment

%d bloggers like this: