Increase Speed and Security of CloudFlare using Sunny WordPress Plugin

What Is A Content Delivery Network?

If you are already using a content delivery network, you know there is a good decrease in page load times for your users. CloudFlare is the content delivery network of choice for LarryTalksTech. There are both Free and Pro versions of CloudFlare. LarryTalksTech uses the Free version.

For those of you not familiar with what a content delivery network is and how it works, here is a brief description:

Content delivery networks use multiple servers in many geographic locations to improve deliveries of static and streaming content. Global content requests automatically get routed to the closest servers, speeding up page loads, maximizing bandwidth, and providing the same content regardless of internet- or site-traffic spikes. Depending on traffic and number of nodes, the network’s algorithms select the best routing options to deliver best performance and avoid bottlenecks[1].

For the LarryTalksTech website, the benefits of using a Content Delivery Network are:

• Usually, faster access times and page loads for LarryTalksTech users
• Reduced dependence on Host Provider hardware
• Increased bandwidth as a result of the use of the CDN edge servers and better managed traffic
• Reduced downtime as content is replicated on many servers
• Increased security (like attacks from DDOS or SQL injections)

For more information about content delivery networks, read the article, Use A Content Delivery Network For Your Website, by clicking: HERE.

What CloudFlare Caches

CloudFlare provides analytical data to give its users feedback on how the content delivery network is performing. Here are their indicators[2]:

Fewer Servers Needed – The Fewer Servers Needed percentage is a estimate of how much less capacity you need in order to handle your website’s traffic because you’re using CloudFlare. This number is based on the requests and bandwidth saved by CloudFlare.
Bandwidth Saved – CloudFlare saves bandwidth by serving cached versions of your content from our data centers. This means that only a small number of requests actually go back to your origin server. The more content served by our edge servers, the more bandwidth you save.
Content Type Breakdown – This represents the breakdown by content type of all traffic flowing through CloudFlare for your site (including both cached and uncached responses).

For months, after starting my account with CloudFlare, LarryTalksTech ran slightly over 40% for Fewer Servers Needed, and Bandwidth Saved was nearly 40%. Beyond showing the amount of individual static content distributed by CloudFlare’s servers, the Content Type Breakdown isn’t much of a performance matrix.

By default, here is the static content extensions CloudFlare caches on its servers[3]:

Css, js, jpg, jpeg, gif, ico, png, bmp, pict, csv, doc, pdf, pls, ppt, tif, tiff, eps, ejs, swf, midi, mid, ttf, eot, woff, otf, svg, svgz, webp, docx, xlsx, xls, pptx, ps, class, and jar

I felt the results achieved were OK, but there should be more ways to speed CloudFlare. Dynamic content, such as html, can also be distributed. To accomplish this, requires adding some Page Rules to CloudFlare, and using are very well engineered program called Sunny.

Sunny

CloudFlare needs some specific configuration before Sunny can flex its muscles:

1. If you are using W3 Total Cache with CloudFlare, disable the integration in W3 Total Cache
2. Install the CloudFlare WordPress plugin
3. Create a Page Rule so the WordPress Admin Area has caching bypassed.
4. Create a Page Rule so the Preview Page is treated as the Admin Area
5. Create a Page Rule so the rest of the website is set to “cache everything”

When this is done here is what Sunny does[4]:

• Clear CloudFlare caches when a post / page / media attachment is updated, commented or trashed automatically
• Clear homepage / archives pages when the above happens
• Blacklist bad bot IPs which try to login with bad usernames

Now, all of this sounds horribly complex, but help is on the way in the form of an excellent tutorial written by Tang Ruffus (Sunny’s developer). The tutorial literally walks you through setting up a CloudFlare account, configuring your DNS servers for CloudFlare, some recommended settings for CloudFlare and WordPress, as well as the configuration and Page Rules needed for Sunny. The tutorial is a step by step process, and is so well written that someone with even moderate website management skills can setup both CloudFlare and Sunny…….just FOLLOW THE INSTRUCTIONS and NO SHORTCUTS!!!!!

Both the WordPress and Sunny plugins are FREE and available at your WordPress plugin area. Sunny is donation-ware, so please give something. Here is the link to the Sunny tutorial: https://www.wphuman.com/make-cloudflare-supercharge-wordpress-sites/ 

Here are some screen shots of two of Sunny’s preference panels (Note:  “Arrows and Circles” annotate key areas):

Summary

Caching “everything” on a website is a big deal. Using 24 hour results from CloudFlare’s performance indicators, Fewer Servers needed went from a little over 40% to the “current” range of 58% to 67%, and Bandwidth Saved moved from nearly 40% to a range of 43% to 53%.

Variations in the “current” performance levels do occur, and this is why I provided the ranges for “current” performance, as there are times when uncached data is distributed more than cached data. When this happens, both the numbers for Fewer Servers Needed and Bandwidth Saved, decrease. At this point, I have not had time to dig into the details about why the drop in performance takes place. I can speculate however, and it could be due to times when a CloudFlare server (or servers) is down for maintenance, or times when backups are being done on my website (remember, the Admin pages are not cached, and megabytes of uncached data are being downloaded). If I am correct, and I think I am, the amount of uncached data being transferred during the backups consistently and significantly skew the performance results that show a down-trend from “current” performance around the time when the backups occur.

In the end, regardless of some “real-or-not” performance blips, the overall performance of the site has improved a good deal by using Sunny and caching “everything”.  It’s well worth doing….

Sources

1. What is a content delivery network | http://whatismyipaddress.com/cdn
2. Analytics | Cloudflare.com
3. Which file extensions does CloudFlare cache for static content? | https://support.cloudflare.com/hc/en-us/articles/200172516-Which-file-extensions-does-CloudFlare-cache-for-static-content-
4. Sunny Tutorial | https://www.wphuman.com/make-cloudflare-supercharge-wordpress-sites/