- Cloudflare CDN integration with WordPress
- w3 total cache
- KeyCDN
I tried with the keycdn free trial as 25GB free traffic 1 month with a credit of 1$ in few while ago.
How to integrate with CDN in WordPress?
You can install a CDN enabler plugin in WordPress by Keycdn. and enter the CDN URL there in the field of CDN URL.
create a pull zone and enter your website url. then CDN URL will be displayed just copy that paste at your WordPress dashboard relative path.
in automize plugin replace on the CDN base URL //cdn.example.com/.
Push one is different we have to upload the content to CDN directly.
We can also integrate CDN with auto optimize and wp super cache and w3 total cache.
Their CDN costs 0.04$ for 1 GB, but google CDN pricing costs 0.10-0.20$, Akamai CDN Microsoft’s. Max CDN
Cloudflare offers also free trials but someone needs to call you after filling the contact form.
Two main reasons Use CDN
- Increase page speed
- Lower the server costs.
let me skip about CDN for images, videos. now I am writing about CDN Deliver for CSS & JS files.
There is JSdevier plugin called in WordPress. deliver a free open source platform.
Hosting CSS and js at google drive, dropbox and google app engine works for small custom made websites.
Cloudflare CDN caching
is CloudFlare cache really working? if we enable CloudFlare caching as 3 options no query string, query string, and standard.
In google page speed insights didn’t display external CSS or js resource. but some time GT Metrix did that.
CloudFlare doesn’t integrate with auto optimize. because the base URL of CloudFlare CDN not identical. I have test CloudFlare caching again perfectly with another website.
Amazon CloudFront and google cloud CDN are bit costly when compared to other CDN providers.
CloudFlare speed settings>> auto minify js, CSS, HTML check this.
Rocket loader functionality: loads JS automatically.
How to turn off Cloudflare caching?
create a page rule enter your domain as website.com/* wildcard applicable all pages start with.
select bypass cache.
How to enable google CDN?
google Load balancer is must be activated before adding cdn in google cloud compute engine. the load balancer also has some pricing.
Combining all external sources into one done by autoptimize rather w3tc.
| CDN Provider | Cost per GB |
| KeyCDN | 0.12/GB |
| Max CDN | |
| //need to buy server | |
| Cloudflare | //Different model
$20 -200 months |
| AmazonCloudFrontt | $0.140 |
| Microsoft | |
| Prices are just indicative, these changes upon packages, discounts etc.
NOTE: Ameria cheap, Asia High, Africa too High. Here I am mentioning Asia Server price |
|
How to Implement SelfHosted CDN WitH WordPress?
You know just look at these resources
are 26 static components that are not on CDN.
wp-includes/js/dist/vendor/wp-polyfill-fetch.min.js?ver=3.0.0
wp-includes/js/dist/vendor/wp-polyfill-node-contains.min.js?ver=3.26.0-0
wp-includes/js/dist/vendor/wp-polyfill-formdata.min.js?ver=3.0.12
wp-includes/js/dist/vendor/wp-polyfill-element-closest.min.js?ver=2.0.2
wp-includes/css/dist/block-library/style.min.css?ver=5.0.3
wp-content/plugins/show-hidecollapse-expand/assets/css/genericons/genericons.css?ver=5.0.3
wp-content/plugins/show-hidecollapse-expand/assets/css/bg-show-hide.css?ver=5.0.3
wp-content/tablepress-combined.min.css?ver=11
wp-content/themes/studio-pro/style.css?ver=2.1.3
wp-includes/js/jquery/jquery.js?ver=1.12.4
wp-content/themes/genesis/lib/js/html5shiv.min.js?ver=3.7.3
wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4
wp-includes/js/jquery/ui/effect-slide.min.js?ver=1.11.4
wp-includes/js/jquery/ui/effect-highlight.min.js?ver=1.11.4
wp-includes/js/jquery/ui/effect-fold.min.js?ver=1.11.4
wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4
wp-content/plugins/show-hidecollapse-expand/assets/js/bg-show-hide.js?ver=5.0.3
wp-includes/js/hoverIntent.min.js?ver=1.8.1
wp-content/themes/genesis/lib/js/menu/superfish.min.js?ver=1.7.5
wp-content/themes/genesis/lib/js/skip-links.min.js?ver=2.8.1
wp-content/uploads/2018/08/google-play-badge-300×116.png
WordPress is bloated with other plugin sources.
1st We have to Set a Subdomain.
DNS Records:
cdn.maindomain,com Points Maindomain.com as CNAME Record Not A record.
Next step Adjsutig root document for the subdomain to main domain directory (works as a generic mirror).
Set Cookie Domain
you can set the cookie domain to only your non-static domain to prevent WordPress cookies from being sent with each request to static content on your subdomain.
wp-config.php
define( ‘COOKIE_DOMAIN’, ‘www.example.com’ );
2nd step Using Plugin W3 Total cache:
- CDN feature on in the General Settings section and select Generic Mirror in the CDN Type
- W3 Total Cache’s CDN settings
- static files such as image attachments, theme files, CSS and JS files
4.W3 Total Cache’s CDN settings and click on Modify Attachment URLs
W3 Supercache same Process applies.
Conclusion:
Reduces the latency(fast speed) involved in serving assets, (faster speed) But More TCP connections /DNS Lookups (Slow speed). (one extra addition to your ads (Adsense), etc)
with SSL V3 multiplexing, there are No more TCP COnnection all resources pushed into one request which is big size.
self-hosted CDN not equal to real CDN.