Dokumen ini membahas praktik terbaik untuk memuat tag skrip reCAPTCHA. Informasi ini berlaku untuk reCAPTCHA v2 dan v3.
Memuat reCAPTCHA secara asinkron
Semua versi reCAPTCHA dapat dimuat secara asinkron. Memuat reCAPTCHA secara asinkron tidak memengaruhi kemampuannya untuk mengidentifikasi traffic yang mencurigakan. Karena manfaat performa skrip asinkron, memuat reCAPTCHA secara asinkron sangat direkomendasikan.
<script async src="https://www.google.com/recaptcha/api.js">
Saat memuat reCAPTCHA secara asinkron, perhatikan bahwa reCAPTCHA tidak dapat digunakan hingga pemuatan selesai. Misalnya, kode berikut mungkin akan rusak:
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// If reCAPTCHA is still loading, grecaptcha will be undefined.
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
Dalam beberapa situasi, menyesuaikan pengurutan skrip sudah cukup untuk mencegah kondisi race. Atau, Anda dapat mencegah kondisi race dengan menyertakan
cuplikan kode berikut di halaman yang memuat reCAPTCHA. Jika Anda menggunakan grecaptcha.ready() untuk menggabungkan panggilan API, tambahkan cuplikan kode berikut untuk memastikan bahwa reCAPTCHA dapat dipanggil kapan saja.
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// How this code snippet works:
// This logic overwrites the default behavior of `grecaptcha.ready()` to
// ensure that it can be safely called at any time. When `grecaptcha.ready()`
// is called before reCAPTCHA is loaded, the callback function that is passed
// by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
// loaded.
if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
Sebagai alternatif, situs yang menggunakan API v2 mungkin akan bermanfaat untuk menggunakan
callback onload; callback onload dijalankan saat reCAPTCHA selesai
dimuat. Callback onload harus ditentukan sebelum memuat skrip reCAPTCHA.
<script>
const onloadCallback = function() {
console.log("reCAPTCHA has loaded!");
grecaptcha.reset();
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>
Jika memuat reCAPTCHA secara asinkron tidak memungkinkan, Anda sebaiknya menyertakan petunjuk resource preconnect untuk reCAPTCHA. Tindakan ini akan meminimalkan
durasi download skrip memblokir parser.
Menggunakan petunjuk resource
Menyertakan petunjuk resource berikut dalam <head> dokumen akan mengurangi jumlah waktu yang diperlukan untuk mengirimkan resource yang digunakan oleh reCAPTCHA. Petunjuk resource preconnect menginstruksikan browser untuk membuat
koneksi awal dengan asal pihak ketiga.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Pemuatan Lambat
Secara umum, semakin banyak konteks yang dimiliki reCAPTCHA tentang sebuah halaman, semakin baik informasinya dalam menentukan apakah tindakan pengguna sah. Hal ini terutama berlaku saat menggunakan versi reCAPTCHA yang tidak bergantung pada verifikasi login pengguna. Oleh karena itu, menunggu untuk memuat reCAPTCHA hingga tindakan dibatasi tertentu terjadi (misalnya, pengiriman formulir) umumnya tidak direkomendasikan.