Setting up StackPath with LiteSpeed Cache: Amazing Performance

Last Updated on June 26, 2021 by Steve

This tutorial will cover the steps needed to set up StackPath CDN with LiteSpeed Cache on WordPress with your own custom domain.

Requirements

  • StackPath CDN Account.
  • WordPress website with LiteSpeed Cache installed.

Tips

  • LiteSpeed Web Server is not neccessary to use LSCache’s CDN support. This feature will also work on Apache, nginx or any other web servers.
  • There will be no downtime during the process, if each and every step is followed correctly.
  • StackPath can be used in conjunction with QUIC CDN. Use QUIC CDN to serve your dynamic pages while StackPath handles the static files. To set up QUIC CDN, please see the documentation These two solutions are supported together out of the box without any special steps.

This tutorial will be covered in two major parts:

BestWP Banner Ad

1. Configuring the CDN itself within your StackPath account

2. Configuring LiteSpeed Cache to work with the CDN.

Setting up the CDN

Create a CDN Site

Log into your StackPath account, complete the registration process, and you will be taken to the Overview tab. Press the Create CDN Site button.

StackPath Overview Tab
StackPath Overview Tab

You will be asked to Enter your Delivery Domain. Choose a subdomain where you will serve your static files from. A common choice is cdn.yourwebsiteurl.com.

Enter your Delivery Domain
Enter your Delivery Domain

Set Source to WebServer and Hostname/IP Address to your site’s domain.

Please enter your site’s default domain. If your website currently opens on https://bestwordpress.solutions, Choose https and enter bestwordpress.solutions in the domain. Open your domain in a browser once to verify.

Enter your site's default domain
Enter your site’s default domain

Once your CDN site has been created, you will be given a CNAME URL. Make a note of this value.

CNAME URL
CNAME URL

Log in to your domain registrar and create a CNAME record with the host cdn.yourdomain.com or whatever you chose during the initial setup, and use the CNAME URL given to you by StackPath, like so:

cdn.yourdomain.com CNAME IN TTL(Minimum Possible) xxxxxxx.stackpathcdn.com

Be sure to replace xxxxxxx with your CDN site’s actual subdomain.

Note: If you are a Best WP customer and your domain names are hosted with us we use Enom. You can configure DNS settings for your domain names by logging into the client area and going to My Services.

Setting up SSL and DNS records

Return to the StackPath dashboard by clicking the Overview button.

Click on your newly-created CDN site, go to Edge SSL, and click the Generate Free SSL Certificate button.

Generate Free SSL Certificate 
Generate Free SSL Certificate

Select your delivery domain and click Continue.

You will recieve another CNAME record that you must create in order to validate SSL for your custom created CDN subdomain (cdn.yourdomain.com)

Validate SSL for your custom created CDN
Validate SSL for your custom created CDN

You now have two CNAME records. One is to point your custom domain to StackPath CDN and the other is to verify domain ownership for SSL.

Log into your domain registrar and add the 2nd CNAME record which is for SSL Verification, exactly as shown by StackPath.

Note: This record should be created for the delivery subdomain and not the root domain. e.g, If your main domain is website.com, but in the delivery subdomain you have entered cdn.website.com, This CNAME record should be created as _6a425c407d379df5c68ac0ca93337eb1.cdn.website.com CNAME IN TTL(minimum) ****.cnamerecord.com

Once the CNAME record is added, you can wait for 5-10 minutes and then click the Force Recheck button to validate your domain. You should see an SSL Certificate inside the Edge SSL tab now.

Validate your domain

If it is taking sometime, it’s fine to move ahead. You can re-verify at the end.

Setting up Mandatory CDN Settings

Return to the Overview tab, re-select your newly created CDN site and go to the Settings tab.

In this page, you need to set up two things:

  • Host Header: This value should be your real domain and not the delivery subdomain. For example, if you use your website like yourwebsite.com, select yourwebsite.com there. If you use your website like www.yourdomain.com, select www.yourwebsite.com. Click on Add Custom, if you don’t see the desired option in the list.
  • Pull Protocol: This value should also be selected based on your website’s default. If you use HTTPS by default select HTTPS. Otherwise, leave it on HTTP.
Mandatory CDN Settings
Mandatory CDN Settings

Other settings below are related to caching properties and are best decided by the website owner. It is also okay to leave them set to their defaults if you’re not sure.

Setting up the LiteSpeed Cache Plugin

In the second and the final step, we will setup the LiteSpeed Cache plugin to serve static files using StackPath.

Log into your WordPress Dashboard, navigate to LiteSpeed Cache > Settings > CDN

Note: If you do not see the CDN tab, click on Show Advanced Options to enable it.

Set Enable CDN to ON. In the CDN Mapping section, set CDN URL to the delivery subdomain you created in the previous steps, i.e cdn.yourdomain.com. Set Original URL to your original default domain that you use with your WordPress site (www or non-www).

"LiteSpeed

Do not click the “Save Settings” button yet.

Before saving the settings, re-verify everything so as to avoid any downtime. Your SSL should be issued and should be showing as active in your EdgeSSL Settings inside your StackPath Account, and Host Headers and Pull Protocol should be set perfectly.

You can also verify if the CDN settings are correct by simply going to your website and trying to load any image on your website using the delivery subdomain. For example, if your logo loads from https://yourdomain.com/logo.png, manually open a new tab and open the URL as https://cdn.yourdomain.com/logo.png, and see if it loads correctly.

If everything looks right, click Save Settings, and then Purge – LSCache via the LSCache logo on the Admin bar.

CDN setup is complete!

Verify Your CDN is Loading Correctly

Visit any page on your site. View the page source by using CTRL + U or the right click menu. You should see your static files being served from cdn.yourdomain.com.

Verify Your CDN
Verify Your CDN

Summary StackPath with LiteSpeed Cache

This completes your website’s setup with LiteSpeed Cache and StackPath. Including a CDN with LiteSpeed Cache can significantly improve performance. Let us know your feedback or any problems you may experience. Hope you found this article helpful.

Visit our FAQs or knowledge base for full tutorials and how to articles on WordPress. Existing customers we thank you. Visitors who have not had the privilege of having a Best WordPress Solutions Maintenance or Best WordPress Solutions Shared/VPS Hosting account please consider becoming our customer by selecting one of our WordPress Maintenance Solutions or Shared Hosting / VPS Hosting packages. For those not interested in monthly commitment we do offer solutions with one time payment option. You will not be disappointed.

Author

  • I have been in the information technology field since I left the United States Army over twenty years ago. Skills and experience include a Bachelor's degree in Computer Information Systems with a Specialization in Databases and a Master's in Computer Information Systems Management.

    I fell in love with WordPress over 10 years ago and spend most of my time designing, building and administering WordPress based sites. I am fluent in multiple programming languages including Python, PHP, SQL, Java and C#.

    Have a problem with your site? Do you need a reliable host and a reliable systems administrator to help with your site? I can have your site up, running and simply hand you the keys. No job is too big or too small.  Satisfaction guaranteed or your money back. Visit online store for latest pricing and offerings!

Leave a Comment

%d bloggers like this: