Cloudflare Turnstile vs Google reCAPTCHA: Web Performance & Core Web Vitals Impact

The Hidden Performance Cost of CAPTCHAs

Spam protection is essential for website comment forms, login portals, and newsletter signups. However, traditional Google reCAPTCHA scripts introduce massive performance penalties—downloading over 300KB of obfuscated JavaScript, initiating multiple third-party tracking connections, and locking the main thread for 100–300ms.

Performance Comparison: Turnstile vs. reCAPTCHA v3

How to Integrate Cloudflare Turnstile with Next.js & React

// components/ContactForm.tsx
'use client';
import { useState } from 'react';
import { Turnstile } from '@marsidev/react-turnstile';

export default function ContactForm() {
  const [token, setToken] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token) return alert('Please complete the verification check.');

    const res = await fetch('/api/verify-form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });

    if (res.ok) alert('Message sent successfully!');
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <input type="email" placeholder="Your Email" required className="w-full p-3 bg-slate-800 rounded" />
      <textarea placeholder="Your Message" required className="w-full p-3 bg-slate-800 rounded" />
      <Turnstile
        siteKey="0x4AAAAAAABBBBBBBCCCCCDDD"
        onSuccess={(t) => setToken(t)}
      />
      <button type="submit" className="px-6 py-2 bg-rose-600 text-white rounded font-bold">
        Send Message
      </button>
    </form>
  );
}