This tutorial shows you how to set up BunnyCDN + Amazon CloudFront + LiteSpeed Cache + Cloudflare DNS. (Images served from CloudFront CDN, JavaScript/CSS and other files served from BunnyCDN)
The VPS used in this tutorial: DigitalOcean (1GB RAM, 1 vCore), i use LiteSpeed Cache + Memcached Object Cache via “DigitalOcean OpenLiteSpeed WordPress“, also enable Let’s Encrypt SSL for demo domain via “DigitalOcean OpenLiteSpeed WordPress”.
Get $100 of free DigitalOcean credits if you sign up through this link!
Demo Theme: Twenty Twenty-One theme with default demo site
Demo Domain: blogwp.ovh
Please add your domain name to Cloudflare in advance.
Please replace blogwp.ovh with your own domain name.
BunnyCDN Settings:
1、Create a BunnyCDN Pull Zone for blogwp.ovh in BunnyCDN dashboard
Hostname: blogwp.b-cdn.net
Origin URL: blogwp.ovh
Add Custom Hostname, Custom hostnames can be used instead of BunnyCDN’s default b-cdn.net hostname. Set the Custom Hostname to “cdn2.blogwp.ovh”
Enable SSL for blogwp.b-cdn.net and cdn2.blogwp.ovh
Force SSL for blogwp.b-cdn.net and cdn2.blogwp.ovh
2、BunnyCDN Caching Settings:
Cache Expiration Time set to “Respect Origin Cache-Control”
Browser Cache Expiration Time set to “Match Server Cache Expiration”
3、CloudFlare DNS Settings:
Set up the CNAME record on CloudFlare DNS, untick the orange cloud, making it DNS Only.
Type Name Content TTL Proxy status
CNAME cdn2.blogwp.ovh blogwp.b-cdn.net Auto DNS only
4、I will set up WordPress website to use BunnyCDN via LiteSpeed Cache plugin
LiteSpeed Cache CDN settings
Use CDN Mapping: ON
CDN URL: https://cdn2.blogwp.ovh/
Include Images: OFF
Include CSS: ON
Include JS: ON
Original URLs: //blogwp.ovh/
Note: in this tutorial, i don’t use QUIC.cloud CDN and Cloudflare CDN, only use Cloudflare DNS service. So make sure:
QUIC.cloud CDN: OFF
Cloudflare API: OFF
5、Check if BunnyCDN works
Amazon CloudFront CDN Settings:
1、Create an IAM User in AWS Console, log in AWS console and go to “My Security Credentials”
Click “Users” from the left-hand side
Click “Add user” button
Give a name to the user and check “Programmatic access”, click “Next:Permissions” button.
Click “Attach existing policies directly”, then search “CloudFrontFullAccess AWSCertificateManagerFullAccess”, now two existing policies will appear:
AWSCertificateManagerFullAccess
CloudFrontFullAccess
Check these two policies, click “Next: Tags” button.
Ignore the tags option & click “Next: Review” button.
Review details, if all is well, click “Create User” button.
Now your IAM user account is ready.
2、Install Amazon AWS CDN plugin
Go to the WPAdmin AWS CDN Setup page, input Access Key and Secret Key. Select “All Locations” under Price Class menu. Check “Instead of Amazon Cloudfront Domain name, I would like to use my custom domain: cdn.blogwp.ovh”, then click on “Create Distribution” button.
Note: if you want to use custom domain, you need to have one of these emails:
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
After click “Create Distribution” button, an email will been sent to one of these email addresses, you need to check & approve the email from Amazon for Certificate approval.
You will receive an email from Amazon Web Service like the following image shows, click on the link to approve the SSL certificate.
Click “I Approve” button.
Then you will see “You have APPROVED this validation request”
3、Verify if CloudFront CDN has been created
Open AWS console, go to CloudFront, check if CloudFront CDN has been created, but the CloudFront CDN not been created. After waiting for 5 minutes, i click on “Create Distribution” button again.
Then you will get message like this:
Now the CloudFront CDN has been created.
At the same time CloudFront will also give the domain name *.blogwp.ovh issues SSL certificate.
Now we have Let’s Encrypt SSL for blogwp.ovh, www.blogwp.ovh (via DigitalOcean OpenLiteSpeed WordPress)
And CloudFront Issued SSL for *.blogwp.ovh
And BunnyCDN Issued SSL for cdn2.blogwp.ovh
And we need to change the “General – Distribution Settings”
Distribution Settings (before)
Security Policy: TLSv1.1_2016
Distribution Settings (after)
Security Policy: TLSv1.2_2019 (recommended)
Change the “Origin Settings”
Origin Settings (before)
Minimum Origin SSL Protocol: TLSv1
Origin Protocol Policy: Match Viewer
Origin Settings (after)
Minimum Origin SSL Protocol: TLSv1.2
Origin Protocol Policy: HTTPS Only
Change the “Behaviors – Default Cache Behavior Settings”
Default Cache Behavior Settings (before)
Viewer Protocol Policy: HTTP and HTTPS
Allowed HTTP Methods: GET, HEAD, OPTIONS
Object Caching: Customize
Compress Objects Automatically: No
Default Cache Behavior Settings (after)
Viewer Protocol Policy: Redirect HTTP to HTTPS
Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Object Caching: Use Origin Cache Headers
Compress Objects Automatically: Yes
4、Add CNAME Record in Cloudflare DNS
5、Enable CloudFront CDN with LiteSpeed Cache plugin
LiteSpeed Cache CDN settings
Use CDN Mapping: ON
CDN URL: https://cdn.blogwp.ovh/
Include Images: ON
Include CSS: OFF
Include JS: OFF
Original URLs: //blogwp.ovh/
Note: in this tutorial, i don’t use QUIC.cloud CDN and Cloudflare CDN, only use Cloudflare DNS service. So make sure:
QUIC.cloud CDN: OFF
Cloudflare API: OFF
6、Check if CloudFront CDN works
My Cloudflare DNS settings (after use BunnyCDN + CloudFront CDN)
LiteSpeed Cache General Features:
Free QUIC.cloud CDN Cache
Object Cache (Memcached/LSMCD/Redis) Support+
Image Optimization (Lossless/Lossy)
Minify CSS, JavaScript, and HTML
Minify inline CSS/JS
Combine CSS/JS
Automatically generate Critical CSS
Lazyload images/iframes
Responsive Image Placeholders
Multiple CDN Support+
Load CSS/JS Asynchronously
Browser Cache Support+
Database Cleaner and Optimizer
PageSpeed score optimization
OPcode Cache Support+
HTTP/2 Push for CSS/JS (on web servers that support it)
DNS Prefetch
Cloudflare API
Single Site and Multisite (Network) support
Import/Export settings
Attractive, easy-to-understand interface
WebP image format support
Heartbeat control
General Features may be used by anyone with any web server (LiteSpeed, Apache, NGINX, etc.)
LiteSpeed Cache Exclusive Features
HTTP/2 support
HTTP/3 & QUIC support
Automatic page caching to greatly improve site performance
Automatic purge of related pages based on certain events
Private cache for logged-in users
Install LiteSpeed Cache Plugin
LiteSpeed Cache Plugin Settings
Cache tab settings
Enable Cache: ON
Cache Logged-in Users: ON
Cache Commenters: ON
Cache REST API: ON
Cache Login Page: ON
Cache favicon.ico: ON
Cache PHP Resources: ON
Cache Mobile: OFF
TTL tab settings
You can set the cache time here, but you don’t need to change it unless you have a specific reason.
Default Public Cache TTL: 604800
Default Private Cache TTL: 1800
Default Front Page TTL: 604800
Default Feed TTL: 604800
Default REST TTL: 604800
Purge tab settings
Purge All On Upgrade: ON
Serve Stale: ON
Excludes tab settings
Here you can set what to exclude from the cache, but basically you don’t have to change it.
Object tab settings
Here you can turn the object cache on and off. If the Memcached extension or Redis extension is enabled and the connection test is passed, change it to on.
Object Cache: ON
Method: Memcached
Default Object Lifetime: 360
Browser tab settings
Browser caching stores static files locally in the user’s browser, if you enable the browser cache, the cache will be saved in the user’s web browser, and you can expect faster display.
Browser Cache: ON
Browser Cache TTL: 31557600
Advanced tab settings
Instant Click: ON
CDN Settings
QUIC.cloud CDN: OFF
Use CDN Mapping: ON
CDN URL: https://cdn2.blogwp.ovh/
Include Images: OFF
Include CSS: ON
Include JS: ON
CDN URL: https://cdn.blogwp.ovh/
Include Images: ON
Include CSS: OFF
Include JS: OFF
Original URLs: //blogwp.ovh/
Included Directories: wp-content, wp-includes
Cloudflare API: OFF
Page Optimization > CSS Settings
CSS Minify: OFF
CSS Combine: OFF
Unique CSS File: OFF
CSS HTTP/2 Push: ON
Load CSS Asynchronously: OFF
Generate Critical CSS: OFF
Generate Critical CSS In Background: OFF
Inline CSS Async Lib: ON
Page Optimization > JS Settings
JS Minify: OFF
JS Combine: OFF
JS Combine External and Inline: OFF
JS HTTP/2 Push: ON
Load JS Deferred: OFF
Load Inline JS: Default
Page Optimization > Optimization Settings
HTML Minify: ON
DNS Prefetch Control: OFF
Remove Query Strings: ON
Load Google Fonts Asynchronously: OFF
Remove Google Fonts: ON
Remove WordPress Emoji: ON
Remove Noscript Tag: ON
Page Optimization > Localization Settings
Gravatar Cache: ON
Gravatar Cache Cron: OFF
Gravatar Cache TTL: 604800
LiteSpeed Cache Database Optimization:
Clean All
Post Revisions: Clean all post revisions
Auto Drafts: Clean all auto saved drafts
Trashed Posts: Clean all trashed posts and pages
Spam Comments: Clean all spam comments
Trashed Comments: Clean all trashed comments
Trackbacks/Pingbacks: Clean all trackbacks and pingbacks
Expired Transients: Clean expired transient options
All Transients: Clean all transient options
Optimize Tables: Optimize all tables in your database
Clean CSS/JS Optimizer: Purge all and clean all minified/combined CSS/JS data
LiteSpeed Cache Toolbox:
Purge Front Page: This will Purge Front Page only
Purge Pages: This will Purge Pages only
Purge 403 Error: Purge error pages, including 403 pages
Purge 404 Error: Purge error pages, including 404 pages
Purge 500 Error: Purge error pages, including 500 pages
Purge All – LSCache: Purge the LiteSpeed cache entries created by this plugin
Purge All – CSS/JS Cache: This will purge all minified/combined CSS/JS entries only
Purge All – Object Cache: Purge all the object caches
Purge All – Opcode Cache: Reset the entire opcode cache
Purge All: Purge the cache entries created by this plugin except for Critical CSS & LQIP caches
Empty Entire Cache: Clears all cache entries related to this site, including other web applications. This action should only be used if things are cached incorrectly.
Speed Tests Results
GTmetrix:
The speed optimization method can be summarized as: BunnyCDN + Amazon CloudFront + LiteSpeed Cache + Cloudflare DNS
Some hosting providers that support LiteSpeed Web Server:
KnownHost Fully Managed WordPress Hosting
KnownHost Shared Hosting
InterServer Web Hosting
NameHero Web Hosting
In this article, we learned how to Speed Up WordPress with BunnyCDN + Amazon CloudFront + LiteSpeed Cache + Cloudflare DNS. I hope you enjoyed this article.
If you have any questions, please comment below.