I recently discovered some features of Clourflare interfering with the way my photography website loads. I want to explain what happened, how I discovered it, and how I fixed it. I also want to take a moment to clarify that this is in no way meant to dissuade anyone from using Cloudflare as I still do and love the benefits it provides. It’s just a matter of not all features working for every website.
What is Cloudflare?
Cloudflare is a middleman web service between your website and those that see it. Because they’re a middleman type service, they are able to add features your website host may charge you for or not offer at all. Some features of Cloudflare are free, but many others are not. I only use the free features for the time being, however.
Some of the fantastic features of Cloudflare include improved security, caching, and optimizations for your website. Google had recently changed their search algorithm to prioritize secure websites using a SSL Certificate for encryption. Without this, websites are ranked lower. Cloudflare offers this for free in two ways. One is that it can implement their own security certificate so that your website meets these requirements. The other way this is offered is the ability to generate your own certificate from their services and install it on your own website.
Caching is an essential feature for websites because it stores a copy of it on their servers for faster loading. It also helps keep your website accessible if your website host goes down. There may be times where new content or styles don’t change when your website is cached because those changes may not have been cached right away. In the end, this feature helps speed things up.
Finally, a major benefit Cloudflare offers are various methods of optimizing your website. The intention is to speed up the website even more, however these features are what broke my website.
The problem I experienced was the homepage of my website not properly loading. The header loaded fine, but the photographs that appear would not and the mobile version of the navigation menu would appear at the bottom. This didn’t occur every time my website loaded, but it was often. It also didn’t occur on mobile browsers either.
My website is build on WordPress and uses plugins and themes to determine features and look/style. Sometimes, these plugins and themes conflict with one another. At first, I thought this was the problem. I began troubleshooting by disabling plugins one at a time and trying to load my website. You can imagine the frustration and time spent on this, especially when nothing changed during my trial and error. I began to suspect my theme was problematic and started setting up a duplicate website for testing purposes. I ran into some frustrating behaviors with my web host’s file manager trying to copy files and gave up for the time being. Then I decided to dig into the source code and look for error messages.
I decided to open the Chrome Browser’s developer tools and looking at the console for the loading activity of my website. This logs every action a website takes when it loads or is interacted with. It also alerts you about errors in the website loading. Finally, I had taken my first step towards progress!
In order to access the developer tools in Chrome, click the 3 vertical dots in the upper right corner of Chrome. Then click more tools. At the bottom of the next list, click developer tools. This will expand a panel on the right side of the browser window. By default, it will display the Elements tab. This shows the html source code of the website. This isn’t useful for what I was trying to do. On the top of this panel, a series of tabs are listed. Clicking Console will display the log of activity along with error messages associated with it.
The top of the console showed an error, however. The error was a parsing error and mentioned unable to load on a poor connection. It also referred to a Cloudflare URL. For one, I wasn’t on a poor connection, so this concerned me. A parsing error indicates something wasn’t able to load or be processed. The direct mention of Cloudflare gave me the clearest clue to the problem I could have ever gotten. Additionally, the fact this error was on top meant it was encountered first and it’s likely that this failing to load could be related to the warnings further down.
I tried to Google search the error, but didn’t find any direct matches. I did find a WordPress forum discussing a similar parsing error and the thread was regarding an optimization plugin. I decided to explore Cloudflare’s settings on my account and found several speed settings enabled — I had enabled them to score higher on a website ranking test. I didn’t think anything of these settings affecting my website negatively.
I decided to turn them off one at a time and try to replicate my problem. The settings I ended up disabling are Auto Minify and Rocket Loader. I can’t say for certain that all of the optimization settings were required to be turned off, however.
Unfortunately, this problem means that my website can’t take advantage of Cloudflare’s optimization features to speed up the website without breaking the way it loads. I don’t suspect the website was broken for everyone and in fact, many people had commented to me how professional it looks. Regardless, if it breaks for me, it’s likely to break for someone else and I had to find a solution. Disabling the optimization features was that solution and it will force me to be more critical about how I generate future content in order to improve the website’s performance. With the optimization features turned off, Website Grader had determined my homepage is 11 Mb in size and takes 4 seconds to load. That may not sound like a lot, but it can impact those on slower connections of on mobile significantly. I may be taking time to compress some of my photos further to reduce these numbers to provide a better experience for all.