Cloudflare And Plugins
In a previous post we noted the difference speed can make in search engine ranking. The same content delivered in different ways was listed on the same domains but in different positions between desktop and mobile indexes. Site Speed Affects Ranking
Often people download plugin optimizers and add page cache plugins to speed up their sites. Caching is important and serves as one of the best methods of speeding up a site, but there are several points in which you may decide to cache content and where you decide to make that choice does matter.
Here are is a very simple diagram of a site and users who are asking that site for content. In the first image we have just a server running WordPress that uses a database. In the second we have added a plugin like Super Cache or what have you. The cache is on your server…which keeps the workload and delivery of content still on your server.
This is where folks usually stop and this isn’t the most effective measure. Adding a plugin doesn’t really move the workload it just allows the server to deliver older content but its still the server answering all the requests from visitors. Thats where a free service such as Cloudflare comes into play.
Cloudflare Assumes The Work Load
By putting Cloudflare in front of your server Cloudflare assumes the workload and it addresses the visitors. It provides copies of what your site has given it to many people and that moves the cache off of your server. No plugin needed. Even better … Cloudflare is free at this level.
Cloudflare also can offer you the use of Edge servers…these are servers on the edge of the cloud, closer to your visitors. Think of it like this … CLoudflare has a server in San Francisco, New York and London (they have many more but for our purposes think of these three) and you have a visitor in San Diego and another in Paris. The San Diego user is served content from San Francisco and the Paris visitor is served content from the London server. Since they are closer to these servers they get the info faster than they would if there was only a New York server. Also they get the info faster because there are fewer visitors per server than if there were only one server.
JetPack is a plugin that also offers services where they host your photos and media on their Edge servers for free much like Cloudflare. They are different servers and a different network but an additional service.
Cutting Page Load In Half
We already have everything to cut our page load in half. No editing of the site or optimizing the content … although thats all good to do. Consider the following real life speed test I ran on Ultimate SEO’s homepage today.
First just the server with no help.
Then we add Cloudflare and use it’s performance settings like Mirage and Edge servers
In the image above we’ve added cloudflare and removed the server cache. Cloudflare itself servers as our cache and with the Edge servers it moves copies of these files closer to the individual visitors also providing load balance benefits. Our server is only used when something isn’t cached or after it has aged too old.
This setup also provides us with DOS protection. As attackers would be hitting the Cloudflare network which is massive and able to absorb thousands of requests.
We cut our load time from 7.1 to 3.8 seconds with just that! The first step is the one that yields the most. In another test I removed Cloudflare and I turned on Jetpack and we received similar speeds at 3.7 and 3.6 seconds.
The goal is to load a page as fast as possible with 3 seconds serving as your redline. 4 seconds is decent but it is officially a second over the line. The average website loads in 7 seconds according to GTMetrix.com … but keep in mind the average server is not ranking in the top of search results. If you want to be number one, you have to stop thinking about what everyone else is doing.
Both Cloudflare and Jetpack
With both we get even better results…now our page loads in less than half the time!
In the image above Jetpack servers are green, Cloudflare servers are yellow and your original server remains red. In this configuration visitors barely have any interaction with your server directly.
I also added another favorite plugin to this mix and you can see additional savings via less Requests. Merge + Minify + Refresh combines JS and CSS files so that you can control the number of requests easier. Other more popular plugins are available but I specifically do not like the most popular one so I endorse Merge + Minify + Refresh.
The law of diminishing returns is in full force now. Adding additional optimizations can be done but their effectiveness will become negligible. Additional optimizations available also are redundant such as Leveraging Browser Caching … thats already in Cloudlare. Optimizing the database isn’t going to impact us much as we largely don’t even make calls to the Database or the server for that matter.
We’ve moved the work of rendering our site off of our server and we’ve cut load times from 7.1 seconds to 2.9 seconds and all for free.