Volete accelerare i tempi di caricamento delle vostre pagine ottimizzando il momento in cui reCAPTCHA viene caricato? Rinviando lo script reCAPTCHA a dopo il caricamento del contenuto della pagina, è possibile migliorare la velocità iniziale della pagina e l'esperienza dell'utente. Questo approccio garantisce che i contenuti essenziali vengano visualizzati rapidamente, mentre le funzioni di sicurezza vengono caricate senza problemi in background.
Questa guida vi mostrerà come ritardare il caricamento dei reCAPTCHA per migliorare le prestazioni.
Capire il rinvio della sceneggiatura
Quando reCAPTCHA si carica normalmente, può mettere temporaneamente in pausa il caricamento di altre risorse. Rinviando il caricamento dello script, si permette ai contenuti critici della pagina, come testo e immagini, di caricarsi per primi. In questo modo si crea un'esperienza più fluida per gli utenti, mantenendo i vantaggi di sicurezza di reCAPTCHA.
Aggiunta del codice Defer
Per rinviare il caricamento di reCAPTCHA, aggiungete questo snippet di codice al vostro sito. Se avete bisogno di aiuto per aggiungere codice personalizzato, consultate il nostro tutorial sull'aggiunta di snippet di codice.
Questo codice funziona identificando lo script reCAPTCHA e aggiungendo entrambi i codici defer e async attributi. Questi attributi indicano al browser di:
- Caricare lo script in modo asincrono, senza bloccare altre risorse
- Eseguire lo script solo al termine del caricamento della pagina
Utilizzo con hCAPTCHA
Se si utilizza hCAPTCHA invece di reCAPTCHA, utilizzare questa versione alternativa:
function wpf_hcaptcha_add_async_defer( $tag, $handle ) {
if ( strpos( $tag, 'hcaptcha.com/1/api.js?onload=wpformsRecaptchaLoad' ) !== false ) {
$tag = str_replace( ' src', ' defer async="async" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'wpf_hcaptcha_add_async_defer', 99, 2 );
E questo è tutto ciò che serve per rinviare il JavaScript di reCAPTCHA. Poi, volete cambiare anche il tema di reCAPTCHA? Consultate il nostro tutorial sulla modifica del tema di CAPTCHA per maggiori dettagli.