on
5 minutes to read
Does reCaptcha slow down your website?
reCaptcha is a popular captcha solution. It’s hard to imagine anyone who hasn’t solved or seen at least one reCaptcha. It’s arguably effective against automated spam bots. There are third-party services (such as 2Captcha) that can solve reCaptcha challenges for as little as 0.02 cents each. Not all spam bots use these services, so reCaptcha still works for many.
Best of all, it’s free. However, reCaptcha has drawbacks, including accessibility issues (only with reCaptcha v2), a slower website, and privacy concerns.
Slow websites are a big problem because they have a huge impact on your website and business. Here are some of them:
- Bad SEO
- Bad user experience
- Inaccessibility
- Loss of revenue
- Damage to your business reputation
In this article we will focus on the performance aspect, how reCaptcha slows down your website and what you can do about it.
How does reCaptcha slow down your website?
Any included JavaScript, CSS or font file will slow down your website. This is unavoidable. It’s best to keep it to a minimum as it’s good for search engine ranking and user experience. As you may know, reCaptcha is a JavaScript based widget. You can integrate reCaptcha V3 into your website by including a JavaScript file, a callback function to handle the token, and a button with reCaptcha attributes.
Our testing will be done on the complete contact form we created in our previous article. In that article, we integrated OOPSpam as a spam filter instead of reCaptcha. This time we will use reCaptcha as spam protection. Let’s see the page performance before and after reCaptcha integration.
The form is quite simple with 3 fields and basic styling. To see a clear difference and less noise, we stay away from using CMS systems like WordPress.
We will use the tool Lighthouse to evaluate the performance. Lighthouse is available in any Chromium-based browser (Chrome, Brave, etc.).
The result may be different for you. Note that we test on a local PHP server for demonstration purposes. Fast hosting with CDN and performance tuning can improve page speed.
As soon as we integrate reCaptcha and set it up, we immediately notice an increase in network hits and data transfers.
| # of network requests | Compressed transferred data | Uncompressed transferred data | Page Loaded In | |
|---|---|---|---|---|
| Before reCaptcha | 5 | 35.6 kB | 37.3 kB | 285 ms |
| After reCaptcha | 13 | 565 kB | 1.3 MB | 1.56 seconds |
| an increase of | 160% | 1487.08% | 3385.25% | 447.37% |
- # of network requests : The number of network requests.
- Compressed transferred data : The compressed size of all uploaded & downloaded resources.
- Uncompressed transferred data : The uncompressed size of all uploaded & downloaded resources.
The browser first downloads compressed data, then decompresses it before using it to process and display relevant details on the page.
From the table above, we can see that there is a 447.37% increase in page load speed. In sophisticated systems like WordPress, this can slow down your website considerably.
A single page website with a simple form loaded in 1.56 seconds. In any website, you want to keep the load time under three seconds, considering most people leave a page that takes more than 3 seconds to load.
Faster website with and without reCaptcha
It’s possible to improve website speed while using reCaptcha. You can achieve this by using caching, CDN, and delaying other unnecessary CSS and JavaScript files. The key component of reCaptcha integration is to include the reCaptcha JavaScript file only on pages where reCaptcha is needed. If you are using WordPress, you can add a code snippet to your WordPress theme’s functions.php file to prevent reCaptcha from loading its files on other pages.
Don’t load reCaptcha’s JavaScript file on every page. Only where you need it.
Replacing reCaptcha with the server-side spam filtering options like OOPSpam API or OOPSpam WordPress plugin is another way to get a fast-loading website. Unlike reCaptcha or any other captcha solution, the backend based spam filters work in your server and never interact with your users or load any resources on the client side. With OOPSpam there are no cookies, no JavaScript and no challenges for your visitors to solve.
