How to Implement AMP with CloudFlare

Visitors can browse a site at top speeds by integrating CloudFlare on your website. CloudFlare is a Content Delivery Network (CDN) that sends traffic via its global network which will automatically optimize the delivery of your site content. Today  we would like to guide you on How to Implement AMP with CloudFlare in this guide.

We assume that you have already installed AMP plugin’s on your website, If not then read

Step-By-Step Guide to Implementing AMP on WordPress

Step-By-Step Guide for How to Insert ADS between post content in AMP

Guide to E-Commerce for AMP

Implementing AMP with CloudFlare

Creating a Page Rule in Cloudflare:
Page rules will help you harden security, enhance performance, Improve User Experience and minimise bandwidth usage on your domain. Page Rules makes your site safer and faster, and you can use them to redirect all of your traffic to HTTPS, or to another domain. For using AMP with Cloudflare you have add Page Rule in Cloudflare, Just follow the below easy instructions for successful implementation

• Login to Your CloudFlare Account
• Navigate to Page Rules tab
  
• Click on 
• Add URL pattern: *yourdomain.com/*/amp/
• Add A below Setting
  • Disable Apps
  • Disable Performance
  • Keep SSL Full set as ON (If your site is not fully using SSL, then leave it at default)

• Now, Login to your WordPress Admin Panel –> Cache Plugin Settings
• Turn OFF the HTTPS protocol rewrite

This is what you get with that setting OFF: <script src=”https://cdn.ampproject.org/v0.js” async=””></script>

Setting it to ON results in the following which doesn’t validate: <script src=”//cdn.ampproject.org/v0.js” async=””></script>