L’impacte de Google reCAPTCHA en el rendiment web: anàlisi i solucions

És imprescindible tenir una eina de Captcha a la teva web, per evitar els maleïts bots.

Google reCAPTCHA és una eina molt utilitzada, i “gratis”, però pot tenir un impacte significatiu en la velocitat de càrrega i el rendiment general de la web. Darrerament m’he trobat moltes webs que patien aquesta “malaltia”.

Us explico com afecta reCAPTCHA al rendiment web, per què passa i quines solucions podem implementar per mitigar-ne els efectes negatius sense sacrificar la seguretat i rebre SPAM.

L’impacte mesurable de reCAPTCHA en el rendiment

La implementació de Google reCAPTCHA en una web pot tenir conseqüències importants en les mètriques de rendiment. Les dades que he analitzat mostren un impacte quantificable i rellevant en la velocitat de càrrega i les puntuacions de rendiment.

Reducció en les puntuacions de PageSpeed

La integració de reCAPTCHA pot provocar una caiguda considerable en les puntuacions de PageSpeed Insights:

Un cas documentat mostra com una pàgina amb una puntuació inicial de 93 a PageSpeed Insights va descendir a 50 punts després d’implementar reCAPTCHA, una pèrdua de 43 punts.

He trobat que incloure el script de reCAPTCHA v3 en la càrrega de la pàgina va provocar que la puntuació mòbil baixés de 89 a 60 punts.

I fent servir Lighthouse vaig detectar que reCAPTCHA era un dels factors que més perjudicava el rendiment, mantenint puntuacions properes als 50 punts.

Ironía màxima que Google saboteji a Google.

Augment del pes de càrrega i de les peticions

L’impacte negatiu es deu principalment a l’augment del pes de la càrrega inicial:

  • Tot i que el script principal de reCAPTCHA no és especialment pesat (850 B), descarrega recursos addicionals: un script secundari de 353 kB (137 kB transferits) i un arxiu CSS de 26 kB.
  • La integració estàndard de reCAPTCHA afegeix almenys dues peticions HTTP addicionals i uns 128 KB de dades a la càrrega inicial de la pàgina.

Per què reCAPTCHA alentéix els llocs web?

Per entendre completament l’impacte de reCAPTCHA, cal analitzar les causes tècniques que provoquen aquesta ralentització.

Càrrega innecessària de scripts

El principal problema radica en com s’implementa reCAPTCHA per defecte:

  • Si no es configura correctament, reCAPTCHA carrega els seus scripts a totes les pàgines del lloc, encara que no sigui necessari.
  • La presència d’aquests scripts comporta crides a servidors externs de Google, que s’han de descarregar i processar abans que la pàgina es consideri completament carregada.

Impacte en mètriques crítiques de Core Web Vitals

reCAPTCHA afecta especialment mètriques importants per al SEO:

  • Largest Contentful Paint (LCP): pot retardar la representació del contingut principal.
  • Time to Interactive (TTI): augmenta el temps d’execució de JavaScript, endarrerint la interactivitat.
  • First Input Delay (FID): pot bloquejar el fil principal i generar retards en la resposta a les interaccions.

Problemes addicionals en connexions lentes

Els usuaris amb connexions a internet lentes experimenten problemes particulars:

  • En connexions 2G, les peticions a l’API de reCAPTCHA s’aborten als 5 segons, impedint completar formularis.
  • No hi ha documentació oficial per modificar aquest temps d’espera, empitjorant la situació en zones amb infraestructura limitada.

    • Solucions per optimitzar reCAPTCHA sense perdre seguretat

    Hi ha diverses estratègies efectives per mitigar l’impacte negatiu de reCAPTCHA mantenint la protecció contra bots.

    Implementació de Lazy Loading

    La tècnica més eficaç és carregar reCAPTCHA només quan sigui necessari:

    • En lloc de carregar els scripts automàticament, podem implementar “lazy loading” per carregar reCAPTCHA només quan l’usuari interactua amb el formulari.

    Un exemple seria:

    let reCaptchaLoaded = false;
document.getElementById('your-input-field').addEventListener('focus', function() {
    if ( !reCaptchaLoaded ) {
        var recaptchaScript = document.createElement('script');
        recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
        document.body.appendChild(recaptchaScript);
        reCaptchaLoaded = true;
    }
});

    Aquest codi carrega el script de reCAPTCHA només quan l’usuari enfoca un camp del formulari, evitant càrregues innecessàries. És una solució complexa técnicament, i amb possibles problemes.

    Limitació a pàgines específiques

    Una altra estratègia eficaç és restringir reCAPTCHA només a les pàgines on realment sigui necessari:

    • A WordPress, es pot configurar perquè només es carregui a les pàgines amb formularis.
    • Això pot requerir editar arxius del tema o usar plugins que permetin controlar la càrrega dels scripts.
    • També es possible fer servir el Script Manager de Perfmatters.

    Consideracions en la implementació del lazy loading

    Tot i que el lazy loading aporta beneficis, cal tenir en compte algunes limitacions:

    • Amb reCAPTCHA v3, pot afectar la puntuació de risc en tenir menys temps per analitzar el comportament de l’usuari.
    • En connexions molt lentes, pot haver-hi un petit retard entre la interacció i la disponibilitat del reCAPTCHA.

    solucions

    Alternatives a Google reCAPTCHA amb millor rendiment

    Si després d’optimitzar-lo, el rendiment encara no és acceptable, hi ha alternatives més lleugeres i igualment segures.

    hCaptcha: equilibri entre privadesa i rendiment

    hCaptcha s’ha convertit en una alternativa popular:

    • Millor privadesa: no rastreja l’usuari com Google, compatible amb el RGPD.
    • Adoptat per empreses com Cloudflare.
    • Permet ajustar el nivell de dificultat per equilibrar seguretat i experiència d’usuari.
    • És de franc per webs petites.
    • Té plugin per WordPress.

    Cloudflare Turnstile: nova generació

    Una alternativa recent i prometedora:

    • No requereix interacció de l’usuari: funciona de forma invisible.
    • Més lleuger i ràpid que reCAPTCHA.
    • Seguretat basada en l’anàlisi del comportament.
    • És de franc per webs petites.

    Honyepot: simple i transparent

    • No requereix interacció de l’usuari: funciona de forma invisible.
    • Més lleuger i ràpid que reCAPTCHA.
    • Integrat de forma nativa a Gravity Forms.
    • És de franc sempre.

    Solucions integrades en plugins

    Per a WordPress, alguns plugins ofereixen protecció sense penalitzar el rendiment:

    • WPForms ofereix Tokens de Formulari, una solució invisible.
    • Altres opcions: WordPress Zero Spam, CleanTalk, Akismet.

    Conclusió: equilibrant seguretat i rendiment

    Implementar Google reCAPTCHA sense optimitzar pot afectar greument el rendiment, reduint fins a 43 punts la puntuació a PageSpeed. Però aquest impacte es pot mitigar amb tècniques com el lazy loading i la limitació a pàgines específiques.

    Us recomano fer servir alternatives, Google reCAPTCHA és letal pel bon rendiment de la vostra web.

    La millor opció per a la majoria de webs és implementar reCAPTCHA amb càrrega intel·ligent. Si encara s’observa impacte, alternatives com hCaptcha o Cloudflare Turnstile poden oferir un millor equilibri entre seguretat i velocitat.

    DISCLAIMER: Un Captcha no és infalible. A més de tenir un % d’errors, sempre hi haurà el pesat de “Pedro” o la “Sara Vega”, que si et volen enviar SPAM, ho podran fer. O fan servir una “granja de clics”, o bots molt avançats, o tenen molt de temps i omplen el formulari a mà. L’SPAM és inevitable.