Souhaitez-vous accélérer le temps de chargement de vos pages en optimisant le moment où le reCAPTCHA se charge ? En reportant le script reCAPTCHA après le chargement du contenu de votre page, vous pouvez améliorer la vitesse initiale de la page et l'expérience de l'utilisateur. Cette approche garantit que votre contenu essentiel s'affiche rapidement tandis que les fonctions de sécurité se chargent de manière transparente en arrière-plan.
Ce guide vous montrera comment retarder le chargement du reCAPTCHA pour de meilleures performances.
Comprendre le report de l'application des scripts
Lorsque reCAPTCHA se charge normalement, il peut temporairement interrompre le chargement d'autres ressources. En différant le script, vous permettez au contenu essentiel de votre page, comme le texte et les images, de se charger en premier. Cela crée une expérience plus fluide pour vos utilisateurs tout en maintenant les avantages de sécurité de reCAPTCHA.
Ajout du code Defer
Pour différer le chargement du reCAPTCHA, ajoutez cet extrait de code à votre site. Si vous avez besoin d'aide pour ajouter un code personnalisé, veuillez consulter notre tutoriel sur l'ajout d'extraits de code.
Ce code fonctionne en identifiant le script reCAPTCHA et en ajoutant les deux éléments suivants defer et async attributs. Ces attributs indiquent au navigateur de :
- Charger le script de manière asynchrone, sans bloquer les autres ressources
- Exécuter le script seulement après que la page ait fini de se charger
Utilisation de hCAPTCHA
Si vous utilisez hCAPTCHA au lieu de reCAPTCHA, utilisez cette version alternative :
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 );
C'est tout ce dont vous avez besoin pour différer le JavaScript de reCAPTCHA. Ensuite, vous souhaitez également changer le thème de reCAPTCHA ? Consultez notre tutoriel sur la modification du thème CAPTCHA pour plus de détails.