I recently got into CloudFlare as my preferred CDN (content delivery network) as a way to speed up my website and make it load faster. At the time, I was looking for a good CDN that was pretty decent with a free option. Many current CDNs cost money so I wanted to spend some time to find one that I really liked. So I went and searched for a good CDN and eventually came up with CloudFlare. Using a good CDN is really important for those good speed scores from Google. I feel like many like myself are constantly chasing those high speed scores along with producing good content. This is a lot of work because some websites just have a lot of heavy JS and CSS on them that weighs the pages down. Not to mention those web pages with tons of images due to sliders, tabs and infinite scrolling. Whatever is causing the slowdown, CloudFlare can really help you deal with some of these speed slowing issues. If you have a slow website and need a CDN, I highly recommend CloudFlare.
What is a CDN?
A CDN, or content delivery network is basically a server that literally handles the delivery of the content of your website. The idea is that instead of having your server or hosting deal with all of the traffic that your website is getting, a CDN can help offload some of that traffic. You are letting a CDN handle the stress of the traffic that might be too much for your server to handle. In many cases, most of us with our simple websites are running off shared hosting somewhere. Many websites online are not really heavy applications that serve up large amounts of dynamic data. Most websites are just simple and basic, serving just information. Meaning that the websites are purely informational, not engaged in any kind of e-commerce transaction, which are more complicated. Most people going online are looking to accomplish one of two things. They are either looking for information, or wanting to buy something (e-commerce). Whether your website is either one of these, you can still benefit from a CDN.
Why Use a CDN?
A CDN helps speed your website by acting as a proxy for the traffic that your website receives. Once the CDN receives this traffic, the CDN can optimize how the page is rendered to your users. CloudFlare can optimize page rendering in many ways. Some of the ways include page caching, deferring JS (Rocket Loader), or minimizing HTML, CSS, and JS. I will discuss each one in the following sections. Each optimization method provides a different way of making your website run faster. Once I set up CloudFlare on my website and ran speed score tests, I noticed a difference. I noticed that the scores went up a lot. On some pages, there was a +20-30 point boost. The only thing that I would say about setting up CloudFlare, is to be careful of making changes to your DNS (Domain Name Server) records. This involves changing your name servers on either your web hosting or domain registrar (EX: GoDaddy). Usually setup is simple and should require just changing your name servers. Any additional changes to your DNS is usually provided by your web hosting. This part can be pretty technical so again proceed with caution and make sure that you have backups if you modify your DNS and need to revert in case something goes wrong.
CloudFlare CDN Market Share
We tend to choose things based on how popular they are and how many people are using them. Just like how WordPress currently has about 43% of the CMS market share, CloudFlare too is used on 19.2% of all websites. This is a large number of websites and is the reason why you should also use CloudFlare. The most popular options tend to be the best ones because they have a lot of users who have evaluated these options and know if they are good or not. That is why I do not recommend using any CDN that does not have the backing of the online community. Without enough users, there is no way to know if these other CDNs are better than CloudFlare or not. So I would just stick with the best CDN and use it instead of trying to experiment with other options out there. Your website is too important to settle for anything less. The best part is that I am going to describe the various free features that come with CloudFlare. Cloudflare has an impressive set of free features that fill in the gaps that either your web hosting or website leave behind.
Page Caching: Why Is It Important? Are Your Pages Overly Cached?
Caching is the idea that when people visit your website, they will save a version of your web pages onto their computer. Then, the next time that they visit your website, they will see the saved version that is stored on their computer. Of course, this version only lasts for a period of time unless the cache is cleared. This makes page loading faster because users are just retrieving something that they already have instead of asking for a brand new page from the server. This is called browser cache. Whenever you clear your browser cache or cookies, these are usually deleted to clean up space on your browser. Similar to deleting files on your computer, clearing browser cache and cookies is part of maintenance to prevent too many files from collecting on your computer. With CloudFlare, they provide CDN caching that caches your assets (CSS/JS files and images) to different servers. Then when users access your website, the CDN cache will serve the file closest to them. Usually the server where your website resides would serve the file. Depending on the distance from your website’s hosting server and your users, this could be a greater distance than from your users to the CDN cache.
Sometimes your caching can be an issue when updating your website. The cache is so strong that even clearing it from the server will not clear it. You will either have to do a hard refresh on your browser or clear your cache from your browser. Caching in general is very good for what it does. However, it can interfere with your development because caching assumes that your pages will not change for a certain period of time. During this time, the cache stays with your user. Then after this time has exceeded, the cache will automatically clear. So there is a certain period of time before the cache expires. This is why you should be aware of how long cache lasts so that users can still see your website updates without having to clear their browser cache.
Rocket Loader: Deferring JS and Increasing Page Speed Scores
Your website might be using a lot of JS and it most likely is if it is using a very complicated template. If so, then I recommend that you enable Rocket Loader, which defers loading of your JS. What this means is that the JS is loaded when it is encountered during page load, but not executed until after the page is rendered. This is important as it allows the rest of the page to render without waiting for any JS to load and execute first. I like deferring JS overloading it asynchronously because asynchronous loading means that the JS is loaded and then the page continues to load. Once the JS is fully loaded, then it is executed. This might still block page rendering because the JS might execute even if the page has not been fully rendered. With defer though, the JS is only executed once the page has fully loaded, causing no blocking at all. The issue with deferring JS is that there could be some JS functionality that might not work if it is deferred. So keep that in mind while testing out Rocket Loader. From what I have seen, Rocket Loader works well on very heavy JS web pages. Enabling this increased my page speed scores because it took a lot of the JS and stopped it from being a “render-blocking resource”. You might have seen this when running Page Speed Insights to check your page speed scores.
Source Code Minimization: Lowering File Sizes
Another good feature of CloudFlare is that it can minimize your HTML, CSS and JS files. How CloudFlare does this is through the removal of any extra lines and whitespace in your files. In doing so, the size of your files decreases, making this smaller. These files will load faster to your users now because their file size is smaller than it was before. Sometimes you will see files with the word “min” in their file name. What this means is that the file has been minimized so that it only contains the code in it and nothing else. CloudFlare does this for you and makes it really easy to cut down the size of your files. As websites become more complex, the amount of code that is written to build them increases. This is why it is so important to enable file minification so that your web pages can load faster and therefore increase your page speed scores.
Free SSL Certificate
If your website needs an SSL certificate to secure it, then definitely use CloudFlare because even the free version offers SSL. With all of the data breaches and loss of sensitive user information, SSL has become even more important than before. If you have a WordPress website and want to set it up with SSL, try using Really Simple SSL. This plugin ensures that all of your pages will be accessed via SSL. So if someone tries to access your website using “http”, the plugin will redirect it to “https”. Even if you are not running an e-commerce website that needs to encrypt sensitive user credit card information during checkout, you still need SSL. Any website that uses account login information needs SSL. So I was surprised that CloudFlare provides SSL for free. This is just another point for CloudFlare when it is already so good. This really does make CloudFlare the total package, all of this for free.
Bot Fight Mode: Use Only If Necessary
I tried using this and it only slowed the pages down. What Bot Fight Mode does is check to see if a lot of bots are accessing your website. If you are getting inundated with bots, then this feature will attempt to reduce the amount of bots flooding your website with traffic. I use WordFence to protect my WordPress websites from bot traffic. WordFence is running in the background all of the time and sends out e-mails to notify me about all of the IP addresses that are flooding the website. So at this time, I do not see a real need for Bot Fight Mode. I think that this might be useful in the future where you have more traffic and that traffic will attract more bots. For websites with a little traffic, you do not need to enable this feature so soon. Looks like from what I remember, there is some JS that detects bots and other traffic that is not from a legitimate human. This works very similarly to reCaptcha where it runs on the background of all of your pages and tries to determine if your visitor is a real human being, or just a bot. Again, since I have WordFence, I do not have a current need for either CloudFlare’s Bot Fight Mode or Google’s reCaptcha.
I took a look at other CDNs like Bunny CDN and Netlify but chose CloudFlare because of its popularity. I immediately saw the difference that CloudFlare made, especially with Rocket Loader on. Then I knew that I had no need to look around for any other CDNs. You know that I love free stuff and CloudFlare is simply amazing with their free option. I suppose that other CDNs might also work but I would not chance it. I just want to reiterate that choosing the most popular option means that it is both vetted and has tons of support. So I will stick with CloudFlare and highly recommend it for anyone who is needing a CDN.
Many of my articles here have to do with my recommendations with getting your website to run faster. As people become more demanding of information, we have the responsibility of supplying it as fast as possible. This is where a lot of things that I have talked about come in. GeneratePress, Gutenberg block editor and CloudFlare are all just pieces that make a website run fast and speedy. I enjoy sharing what I have learned with you because I hope that it helps you. I hope that what you learn here can make your websites faster for your users.