CloudFlare Plus SSL To Make Your WordPress Fast And Secure

CloudFlare is a famous CDN ( content delivery network ) provider in the world. A lot of company use their service. The amazing service they provide can make your website very fast and more secure if you use it correctly. And it provide a free plan for you to use. It is the only one provider who can let you use it without cost.

1. CloudFlare Overview.

how cloudflare cdn works

1.1 Why CloudFlare Is Fast?

From above picture we can see that because cloudflare has cdn nodes all over the world, so if your web server use that network, your web content will be cached in all those cdn nodes server. So when a user browse your domain, cloudflare will provide the cached content from the nearest node to the client user, this can increase response speed and decrease original web server pressure.

cloudflare working process

1.2 Why CloudFlare Is Secure?

Without cloudflare, client user can access your web server directly. This expose your web server ip to all the clients. It is dangerous because hacker can attack your web server at anytime.

With cloudflare, client user do not know your server ip because your domain will be resolved by cloudflare dns server, and cloudflare will choose a dynamic node to serve the request, so the ip address is also changed dynamically.

2. How To Use CloudFlare With WordPress?

  1. Register a cloudflare account follow this link.
  2. Install cloudflare wordpress plugin follow instruction in this page.
  3. Then after about one day or less, your website will be cached by cloudflare, you can use to test the page speed. You can see the page speed is improved.

3. How To Use CloudFlare SSL To Make Website More Secure.

Https is a security protocol above http. Google has announced that it will rank a https website a little higher than http. So change your website to https is very good to improve page SEO.

Cloudflare provide three kind of SSL mode. You can find detail introduction in page

  1. Flexible SSL : Use https between client user and cloudflare, but use http between cloudflare and your web server.
  2. Full SSL : Use https between both client user, cloudflare and your web server. You can install either Certificate Authority signed or cloudflare signed or self signed certificate in your web server.
  3. Origin CA : Like full SSL, but this mode use Cloudflare-issued SSL certificate only.

No matter which mode you use, cloudflare provide a public certificate which is used between client user and cloudflare.

3.1 Steps To Enable Cloudflare SSL.

  1. Login cloudflare dashboard.
  2. Click Crypto icon at top, in this page you can choose which SSL mode to use. For simplicity we just select Flexible mode.
    cloudflare crypto ssl mode
  3. Then turn on Always use HTTPS and Automatic HTTPS Rewrites option at bottom.
    always use https
    automatic https rewrites
  4. Now when you input http url in web browser, you can find browser change it to a secure https url.
    https url

3.2 Fix Https Mixed Content Error.

When you browse web page using https, if you find image not shown, css or js missing in the https page, you can right click web page in chrome and click Inspect menu item to see the error messages in inspector console. You may find below error messages.

Mixed Content: The page at … was loaded over HTTPS, but request … This request has been blocked; the content must be served over HTTPS.

image css js file missing after enable cloudflare flexible sslThis error message means the page contains some url which start with http not https, you can use below method to resolve this.

  1. Use cloudflare Full SSL mode.  This need to install certificate in your web server and change the original web server to support https. You can use a wordpress plugin Really Simple SSL to implement this.
  2. Use another wordpress plugin SSL Insecure Content Fixer in your website. This plugin will replace all http to https in your page before they send back from web server to cloudflare.
  3. If the error still exist, you should check whether you had installed any wordpress cache plugin like wp super cache, reactive or delete those cache plugin may resolve the error. If you use cloudflare, i think you had better not use wp super cache, sometimes it will throw confusing issue.

3.3 Make Yoast Generated Sitemap Url Use Https.

After above configuration, you can see that when you input url like in a web browser, it will be changed to

But if you use SEO tool ( such as Yoast ) to generate sitemap xml, and when you use to see the sitemap content, you will find that all sitemap xml content url still use http:// as the prefix.

You need follow below steps to make the Yoast generated sitemap xml url to use https:// prefix instead of http://.

  1. Login WordPress admin console as administrator.
  2. Click Settings —> General menu item in left navigation panel.
  3. Change both WordPress Address ( URL ) and Site Address ( URL ) value start with https:// prefix and save the settings. Then after a while, you can see the Yoast SEO tool generated sitemap xml url changed to https:// started.
    change site address url start with https
0 0 vote
Article Rating
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x