Error 503 - Cloudflare

Introduccion

Error 503, that was the frustrating message I encountered when trying to access my blog a few days ago. I was taken aback, especially since it had been weeks since I last deployed any changes or updated the server hosting my site. Determined to get to the bottom of the issue, I rolled up my sleeves and dove into an investigation to uncover the root cause.

First Steps

Then I started by updating dependencies and packages, both in the code and on the server side, but everything remained the same. Next, I checked if the server was hitting any limits, whether bandwidth or CPU overload, but everything was normal, plus the website has very little traffic. Everything still seemed very strange.

I restarted the server (yeah, at this point I was getting a bit desperate), but that didn’t help either—still no improvement.

So, the only thing left was to check the third-party tools I use to help with the website. After reviewing everything, it seemed like everything was fine, but when I analyzed the network traffic with devtools, I realized that the 503 error was actually coming from Cloudflare. I started investigating to see if it was something temporary due to a service outage, but everything was fine there too. Then, I began disabling Cloudflare’s performance optimization options, but the situation stayed the same.

The Root Cause

I kept analyzing the request that was giving the 503 in the network tab of the Devtools and noticed a somewhat suspicious header: Cf-Speculation-Refused: prefetch refused: not eligible. I started searching online and found some information related to a new tool Cloudflare was offering called Speed Brain.

Speed Brain Tool

Speed Brain is a Cloudflare feature that uses the Speculation Rules API to prefetch web pages before a user navigates to them, improving performance for subsequent pages on the same site. It doesn’t affect the load time of the first page but enhances metrics like Largest Contentful Paint (LCP) and Time to First Byte (TTFB) for later pages. When enabled, Speed Brain adds a Speculation-Rules header to responses, prompting the browser to consider prefetching potential future navigations. Prefetches that fail return a 503 error, while successful ones return a 200 status code.

Resolution

The theory behind the potential improvement sounded great, but in my particular case, it was causing errors that made my website not display correctly. So, I disabled this tool (which, by the way, was enabled by default in the dashboard under Speed > Optimization > Content Optimization. Just toggle Speed Brain to Off), and everything went back to normal.

Conclusion

In short, after thoroughly investigating the reason for the 503 error on my site, I discovered that the cause was related to a new tool from Cloudflare called Speed Brain. Although its purpose is to improve performance by prefetching pages, in my case it generated problems that prevented the site from loading correctly. By disabling Speed Brain from the control panel, the error disappeared and everything went back to normal. This reinforces the importance of reviewing and adjusting advanced settings according to the specific needs of each project.