How to Use Content Delivery Network (cdn). Cloudflare

by Engr Kh Mashiur Rahman | Feb 25, 2021 | IT ICT CAD CCTV

Cloudflare Content Delivery Network

Cloudflare Content Delivery Network configuration is very much critical. For any wrong configuration website will not work properly. Please contact me for CDN solutions

1. Cloudflare Content Delivery Network Plan

There are 4 CDN packages offered by Cloudflare which is listed below

1. Features (Free Plan with $0/m)
2. Features (Pro Plan with $20/m)
3. Features (Business Plan with $200/m)
4. 1.4. Features (Enterprise Plan Custom Price)

1.1. Features (Free Plan with $0)

• Fast, easy to use DNS
• Free automated SSL certificates
• Global content delivery network (CDN)
• Unlimited mitigation of DDoS attacks with up to 67 Tbps capacity
• Up to 100k Workers requests and 30 scripts
• 3 Page Rules

1.2. Features (Pro Plan with $20)

• Everything included in free, plus…
• Up to 100k Workers requests & 30 scripts
• 20 Page Rules
• Enhanced security -Web Application Firewall (WAF)
• Bot report and basic mitigation
• DDoS Alerts
• Want to learn mo
• Lossless image optimization
• Accelerated mobile page load speed
• Privacy first analytics

1.3. Features (Business Plan with $200)

• Everything included in Pro, plus…
• Web application firewall (WAF)
• SSL/TLS 1.2 and 1.3 with shared or single custom upload
• Bot analytics and advanced mitigation
• 50 Page Rules
• Minimum edge cache expire TTL at 30 minutes
• Analytics time-range at 15 minute scope
• Prioritized customer support: 24 x 7x 365 by chat and email
• 100% uptime SLA
• Waiting Room traffic regulation

1.4. Features (Enterprise Plan Custom Price)

• SSL/TLS 1.2 & 1.3 with shared or multiple custom upload
• 125 page rules
• Minimum edge cache expire TTL at 30 seconds or less
• Audit logs and Enterprise Raw Logs with destination integrations
• Analytics time-range at 1 minute scope
• Prioritized customer support: 24x7x365 by phone, chat, and email support
• 100% uptime SLA up to 25x reimbursemen
• Role-based account control
• Single Sign On support
• Network prioritization
• Enterprise Bot Management*
• Layer 3 Network DDoS protection with Magic Transit*
• Spectrum (for TCP / UDP)*
• SS L/ TLS for SaaS*
• China Network access*

At fist you need to signup in cloudflare.com.

2. How to Add your site

1. Review your DNS records
2. Change your nameservers
3. Configure your domain settings

3. Cloudeflare Configuration

1. Overview
2. Analytics
3. DNS
4. SSL
5. Firewall
6. Access
7. Speed
8. Caching
9. Workers
10. Rules
11. Network
12. Traffic

3. Add Subdomain

4. Email Configuration

4. FAQ/Help/Knowledgebase

5. Tutorials

2. Add your site

At first Add your site

Then select free option

Then click Continue

2.1. Review your DNS records

Please make sure A record is pointing to 162.215.248.215 at CloudFlare.

2.2. Change your nameservers

2.3. Configure your domain settings

Configure your domain settings to improve security, optimize performance, and get the most from your account.

3. Cloudeflare Configuration

3.1. Overview

It is summery of all settings

Question: I am using business plan for www.xyz.com. We have one more subdomain named www.shop.xyz.com. My first question: Will free plan of your CDN works in subdomain (www.shop.xyz.com)? My second question: Will all features of our existing business plan (CDN) will inherited into www.shop.xyz.com? Answer: Yes, your plan covers. Your subdomains will be on the same plan as your root domain

Tickets: On your Cloudflare dashboard: >>1.View open support tickets >> 2.Log in to your Cloudflare account. >>3.Select Help Center from Support dropdown. >>4.Click Sign In if it appears in the top-right corner; otherwise, click on your name or profile picture. >> 5.Click My Activities & Requests. support.cloudflare.com/hc/en-us/articles/200172476-Contacting-Cloudflare-Support

3.2. Analytics

There are some analytics information can see under below 5 sub menus. Nothing to configure here

1. Traffic
2. Security
3. Performance
4. DNS
5. Workers

3.3. DNS

DNS management : Some of your DNS only records are exposing IPs that are proxied through Cloudflare. Make sure to proxy all A, AAAA, and CNAME records pointing to proxied records to avoid exposing your origin IP. You can change IP also here.

View Cloudflare nameservers: Will show your assigned Cloudflare nameservers.

Custom Nameservers: You can set custom nameserver from here

DNSSEC: Option to Enable DNSSEC (Default)

CNAME Flattening: Chose any option > Flatten CNAME at root (Default) or Flatten all CNAMEs

3.4. SSL

Setup your SSL from here in below submenus

1. Overview
2. Edge Certificates
3. Client Certificates
4. Origin Server
5. Custom Hostname

3.4.1. Overview

In SSL/TLS tab of business plan which SSL/TLS encryption mode should select? Off/Flexible/Full (Default) / Full Strict. Part 1: SSL certificates support.cloudflare.com/hc/en-us/articles/360024787372-End-to-end-HTTPS-with-Cloudflare- . Part 2: SSL certificates support.cloudflare.com/hc/en-us/articles/203295200-End-to-end-HTTPS-with- Part 3: SSL options support.cloudflare.com/hc/en-us/articles/200170416-End-to-end-HTTPS-with-Cloudflare-Part-3-SSL-optionsCloudflare-Part-2-SSL-certificates. Make sure to choose ‘Full’ if you are already using SSL.

Question: In SSL/TLS tab, SSL/TLS Recommender value should be On(Default)/Off? Answer: I can’t advised to keep this off or on. it will depends in your circustances

Question: Is you SSL certificate is good. How many types of SSL certificate you have? What is the difference between Free and Business plan SSL?

Answer:

3.4.2. Edge Certificates

Manage & purchase SSL certificates that will be served to your web visitors. Your plan includes a shared Cloudflare called Universal SSL certificate. To get a dedicated certificate purchase from us with custom hostnames

3.4.3. Client Certificates

Secure & authenticate your APIs and web applications with client certificates. Block traffic from devices that do not have a valid client SSL/TLS certificate with mTLS rules.

3.4.4. Origin Certificates

Generate a free TLS certificate by Cloudflare to install on your origin server. Origin Certificates are only valid for encryption between Cloudflare & your origin server.

3.4.5.Custom Hostnames

Manage the hostnames & SSL certificates for third parties that CNAME to your domain.

3.5. Firewall

1. Overview
2. Managed Rules
3. Firewall Rules
4. Bots
5. Tools

3.5.1. Overview

It will show overall report of firewall. e.g. block, Challenge, Events by service,

3.5.2. Managed Rules

Web Application Firewall: On/Off (Default) >> Provides enhanced security through a built-in ruleset to stop a wide range of application attacks. support.cloudflare.com/hc/en-us/articles/200172016-Understanding-the-Cloudflare-Web-Application-Firewall-WAF-

Question:  In Firewall Tab, should I On Web Application Firewall. Answer: It will totally depends on your circumstances. We higly recommend having this configured as it adds a extra security layer to your website. I can only say that enabling Cloudflare WAF can prevent a large amount of possible attacks on your site. Please bare in mind that you could see false positives (legitimate traffic being blocked due the WAF sensitivity)

3.5.3. Firewall Rules

Firewall Rules: Control incoming traffic to your zone by filtering requests and based on location, IP , user agent, URI, and more.

Question. In Firewall Tab, where can I find rules docs?

3.5.4. Bots

Here you can configure Bots Analytics, Bot Management for Enterprise, Requests by detection source etc

3.5.5. Tools

Rate Limiting: Enable Rate Limiting Button >> Protect your site or API from malicious traffic by blocking client IP addresses that hit a URL pattern and exceed a threshold you define.

User Agent Blocking: Create Blocking Rule Button >> Create a rule to block or challenge a specific User Agent from accessing your zone.

Zone Lockdown: Create Lockdown Rule Button >> Lock down a specific URL on zone to specific IP addresses. This is useful for protect an admin or protected area from non-specified IP addresses.

3.6. Access

1. Control user access to applications
2. Simplify contractor onboarding & offboarding
3. Audit user login and activity

Cloudflare Access: Enable Access Button. With Access, you can secure access to internal applications without a VPN.

Question: In Access tab should I Enable Access?

3.7. Speed

1. Overview
2. Optimization
3. Browser Insight

3.7.1. Overview

Result: Visitors to your website see content in 1.4 seconds on Cloudflare. That’s 61% faster!

Automatic Platform Optimization: Install this plugin to your website to effect

• First Contentful Paint :3.2 s
• First Contentful Paint with Automatic Platform Optimization : 1.3 s

3.7.2. Optimization

Image Resizing: On/OF > You can resize, adjust quality, and convert images to WebP format. This allows you to adapt images to your site’s layout and your visitors’ screen sizes, quickly and easily, without maintaining a server-side image processing pipeline. developers.cloudflare.com/images

Question: Should I on image Resizing in Optimization Tab? Ans. You are the Business plan, so you will be allowed to enable it. If you require WebP images/format, you can enable it.

Polish: Lossless / Off / Lossy >>Select Lossless for Improve image load time by optimizing images hosted on your domain. Polish optimizes resources cached in the Cloudflare edge network, not on your origin. WebP images are all stored on our network in our cache.. support.cloudflare.com/hc/en-us/articles/360000607372-Using-Cloudflare-Polish-to-compress-images#12345686

Question: In polish section should I check WebP?

Answer. If you require WebP images/format, you can enable it. As far as I am aware, it should not affect anything. As the document above states: `WebP is a modern image format providing superior lossless and lossy compression for images.>> We also recommend you turn ON Polish, which helps with image compression

Automatic Platform Optimization for WordPress: Install this plugin. APO increases the cache ratio for your site at the Cloudflare Edge. Improve the performance of your WordPress site. Automatic Platform Optimization for WordPress serves your WordPress site from Cloudflare’s edge network and caches third party fonts. Get the benefits of a static site without any changes to how you manage your site. This results in consistent, fast TTFB and content loading faster.

Question: Should I check Cache By Device Type?

support.cloudflare.com/hc/en-us/articles/229373388-Understand-Cache-by-Device-Type-Enterprise-plans-only-

Enhanced HTTP/2 Prioritization: On / Off (Default) >> Optimizes the order of resource delivery, independent of the browser. Greatest improvements will be experienced by visitors using Safari and Edge browsers.

Question. In Speed Optimization Tab, should I keep On/Off for Enhanced HTTP/2 Prioritization

Answer: Of course, so enhanced HTTP2 Prioritization – what it does is that it will put an order of requests that loads the website faster. We definitely recommend it to be ON unless your website is not compatible
We always suggest customers test to see everything is working well, and only then decide to keep it on.

TCP Turbo: Enabled >> Reduce latency and throughput with custom-tuned TCP optimization

Mirage: On / Off >>Improve load time for pages that include images on mobile devices with slow network connections.

Rocket Loader™: On / Off (Default)>> Improve the paint time for pages which include JavaScript

Answer: I see. We do recommend that you try to turn Rocket Loader on and see if it helps. In terms of page speed, sometimes it depends a lot on how your website is programmed, these optimizations will help, but are only part of the solution.

Question: In Speed Optimization Tab, should I keep On/Off for Rocket Loader™

Answer: Rocket Loader, of course. So Rocket Loader improves the order of loading the assets in your page, by letting images and styles load faster than non-essential Javascript. In this case, I would really recommend you test using a page speed test, such as Google’s Page Speed

Railgun™: Railgun Setting. >> Accelerate delivery of dynamic content. Note: Requires software installation at your host.

Prefetch URLs: Cloudflare will prefetch any URLs included in the prefetch HTTP header

AMP Real URL: On/Off (Default)>> Display your site’s actual URL on your AMP pages, instead of the traditional Google AMP cache URL. AMP Real URL is especially useful to customers with AMP traffic from primary search results like e-commerce, job boards, and ad-supported sites. If this is your use case. support.cloudflare.com/hc/en-us/articles/360029367652-Understanding-Amp-Real-URL

Question: Should I on AMP Real URL ? Ans. You can certainly enable it.

Mobile Redirect: Select a Subdomain >> Redirect visitors that are using mobile devices to a mobile-optimized website.

3.7.3. Browser Insight

Core Web Vital: Show your reports and fix of Largest Contentful Paint, First Input Delay, Cumulative Layout Shift etc

Page Metrics: Show page load time e.g. Total: 591ms, DNS: 46ms, TCP: 194ms, Request: 6ms, Response: 288ms, Processing: 40ms

Configurations: On/Off (Default) >> Measure your website’s performance by On and load time for your users.

3.8. Caching

1. Overview
2. Tiered Cache
3. Configuration

3.8.1. Overview

IT will show Cache Performance reports

3.8.2. Tiered Cache

Enabling Tiered Caching: Argo is a product that uses optimized routes across Cloudflare 200+ data centers to deliver responses to your users more quickly, reliably, and securely.

3.8.3. Configuration

Purge Cache: Custom Purge / Purge Everything >> Clear cached files 

Caching Level : No query string / Ignore query string / Standard (Default)

Browser Cache TTL: 30M/ 1H/ 2H/ 3H/ 4H(Defautl)>>Determine the length of time Cloudflare instructs a visitor’s browser to cache files. During this period, the browser loads the files from its local cache, speeding up page loads.

CSAM Scanning Tool: Set email address

Always Online : On/ Off

Question: Should we click on Update Button?

Development Mode: On / Off (Default) >> Enabling this feature can significantly increase origin server load.

Enable Query String Sort : For enterprise plan

3.9. Workers

Run JavaScript on the edge (Workrs): Run JavaScript Service Workers in hundreds of Cloudflare data centers around the world

Workers KV: Store application data in the Cloudflare network and access your key-value pairs from Workers. developers.cloudflare.com/workers

Question. In Workers tab, how to Manage Worker? How it effect a website?

Answer: So, workers are a program that you code and it runs on our cloudflare edge servers. You can do endless things with Workers, you can program different behaviors for your website with it.

3.10. Rules

There are tow submenu under this menu

1. Pages Rules
2. Transform Rules

3.10.1. Page Rules

It is especially useful in securing critical pages like login page, wp-admin area, etc. To implement click on button Create Page Rules

(1) Page Rules : To secure wordpress login page

domain.com/wp-login.php*
Setting: Security Level; High

(2) Page Rules : Exclude WordPress Dashboard from Cloudflare and Enable High Security

Now click Add a setting to create new Page Rules

Page URL: domain.com/wp-admin*
Settings: Security Level; High
Cache Level; Bypass
Disable Performance
Disable Apps

(3) Page Rules: To Force HTTPS

http://*domain.com/*
Setting: Always use HTTPS

Question. In Rules tab, where can I find rules docs?

Answer:

Understanding and Configuring Cloudflare Page Rules (Page Rules Tutorial) support.cloudflare.com/hc/en-us/articles/218411427-Understanding-and-Configuring-Cloudflare-Page-Rules-Page-Rules-Tutorial-
Recommended Page Rules to Consider support.cloudflare.com/hc/en-us/articles/224509547-Recommended-Page-Rules-to-Consider

3.10.2. Transform Rules

Transform Rules: Use Transform Rules to transform your traffic. This includes URL Normalization, URL Rewrites, and Header Modifications

3.11. Network

HTTP/2: On / Off (Default) >> Set On

HTTP/3: On / Off (Default) >> Set On

Question: Should I on HTTP/2 or HTTP/3?

0-RTT Connection Resumption: On / Off >> Improves performance for clients who have previously connected to your website.

Question: Should I on it

gRPC: On/ Off (Default)

WebSockets : On (Default) / Off

Onion 3outing: On (Default) / Off

Pseudo IPv4 : Off

IP Geolocation: On (Default) / Off

Maximum Upload Size : 100Mb (Default)

3.12. Traffic

Argo: Enable Agro >>Argo is a service that uses optimized routes across the Cloudflare network to deliver responses to your users more quickly, reliably, and securely. Argo increases the routing speed of a request after it reaches the Cloudflare Edge > cloudflare.com/products/argo-smart-routing , support.cloudflare.com/hc/en-us/articles/115000224552-Configuring-Argo-through-the-UI

Question: Should I Enable Agro?

Answer. You could enable Argo. It is payment system

4. Add Subdomain

Question: If I use subdomain, which record type I need to add, A record/ CNAME?

Answer: That depends on the configuration of your hosting provider. For example, if they provide a IP, you need to use a A record. If they provide a domain, you likely need to CNAME to it

Question: In DNS tab, there are few A records showing, but in free version I found a lot of A Record and CNAME. Can you explain me this issue?

Answer: So, every website can have a different configuration. It does not depend on your plan.

5. Email Configuration

Question: Generally I received mail according to configuration of cPanel. But after adding your CDN network, I get email in webmail but I can not download email through outlook. Are there any different configurations under CDN network to download mail in outlook?You can see below our hosting email configuration information

Username: mashiur@xyz.com
Password: *
Incoming Server: mail.xyz.com
IMAP Port: 993
POP3 Port: 995
Outgoing Server: mail.xyz.com
SMTP Port: 465
Username: mashiur@xyz.com

FAQ

Questions: How can I get support from cloudflare?

1.View open support tickets >> 2.Log in to your Cloudflare account. >> 3.Select Help Center from Support dropdown.
4.Click Sign In if it appears in the top-right corner; otherwise, click on your name or profile picture.

Once logged in click on the ‘Add Website’ button, it will go to Select a plan page. Select ‘Basic $0’ It will then go to the Quick Scan page and then it will redirect to Review your DNS records.

Can you please let me know which subdomain are you referring to ?

Actually it is same process for all the domains and subdomain, since you are adding the CloudFlare CDN from CloudFlare side so to confirm on CloudFlare CDN on the subdomain you can contcat and check once with CloudFlare support

Question: How to activate CDN? Should it configure by me. Or it is configured automatically. How can I ensure / check it from my end

Answer: Could you please provide the Domain name in which you want to activate the CDN ? I see that the CDN is not activated for autogarment.com The A record of autogarment.com pointing to Bluehost server IP 162.241.253.102

Check : https://www.whatsmydns.net/#A/autogarment.com

If you want to activate the CDN, you can login here :

my.bluehost.com/hosting/cloudflare

Enter the Email address, check the option (I have read and agree to abide by CloudFlare’s Terms of Service) and click on the Next button.

Clicked on Next should i do any other thing 3:46 pmSA email will sent to the email address entered with subject line as: [Cloudflare]: Welcome to Cloudflare, in partnership with Bluehost. They will email a password reset link. Once password is reset login at:

dash.cloudflare.com

Once logged in click on the ‘Add Website’ button, it will go to Select a plan page. Select ‘Basic $0’.

Rest code: d97af5c16d24c848eb8e465f5f6924351bbab7453a9ef0e2636b72ccba7

It will then go to the Quick Scan page and then it will redirect to Review your DNS records. And Propagation time can vary depending on the geographical location. Nameserver changes can typically take 0 to 24 hours to take effect, but they are known to take as long as 48 hours to go into full effect.

Hotlink Protection prevents your images from being used by other sites. Hotlink protection has no impact on crawling, but it will prevent the images from being displayed on sites such as Google images, Pinterest, etc.

FAQ

Question: May I know which plan of CDN is suitable for ecommerce site built with WordPress

Answer: If you order a plus or higher plan, it comes with Jetpack Professional, which is a CDN andI usually recommend using one CDN as each CDN functions differently (drh)

Tutorials

Copy below url and paste it into browser