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, pemuatan reCAPTCHA secara asinkron umumnya direkomendasikan.
<script async src="https://www.google.com/recaptcha/api.js">
Saat memuat reCAPTCHA secara asinkron, perlu diingat bahwa reCAPTCHA tidak boleh digunakan hingga selesai dimuat. Misalnya, kode berikut mungkin jeda:
<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 cukup untuk mencegah terjadinya perlombaan
kondisi tertentu. Atau, Anda dapat mencegah kondisi perlombaan 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 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 merasa perlu menggunakan callback onload; callback onload dieksekusi 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 tidak memungkinkan untuk memuat reCAPTCHA secara asinkron, sertakan preconnect
untuk reCAPTCHA sangat direkomendasikan. Hal ini akan meminimalkan
jumlah waktu download skrip untuk memblokir parser.
Menggunakan petunjuk resource
Menyertakan petunjuk resource berikut dalam <head> dokumen akan
mengurangi jumlah waktu yang dibutuhkan untuk
menyampaikan sumber daya 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 informasi untuk menentukan apakah tindakan pengguna adalah sah. Ini adalah terutama benar ketika menggunakan versi reCAPTCHA yang tidak bergantung pada tantangan. Oleh karena itu, menunggu untuk memuat reCAPTCHA hingga tindakan tertentu yang dibatasi terjadi (misalnya, pengiriman formulir) umumnya tidak direkomendasikan.