Gravity Forms reCAPTCHA: lazy load po dotknięciu formularza 🚀

Formularz w stopce, który jest na każdej podstronie, ciągnie skrypt reCAPTCHA przy każdym wejściu i obniża wynik w PageSpeed. Większość odwiedzających go nie dotknie. Poniżej robię lazy load reCAPTCHA w Gravity Forms: skrypt ładuje się dopiero, gdy ktoś kliknie lub wejdzie klawiaturą w pole formularza 🤯

Dotyczy reCAPTCHA v2 (checkbox) w Gravity Forms. Wersja v3 działa inaczej i tego triku nie potrzebuje.

Pamiętaj, żeby zrobić test w Lighthouse przed zmianą i po niej, na tej samej stronie.

Krok 1: wyłącz domyślne ładowanie (PHP)

Bez tego kroku skrypt załaduje się dwa razy i pomiar nic nie pokaże. Gravity Forms rejestruje skrypt pod uchwytem gform_recaptcha. Wycinam jego znacznik <script> w filtrze script_loader_tag:

function my_theme_remove_gform_recaptcha_tag( $tag, $handle ) {
	return 'gform_recaptcha' === $handle ? '' : $tag;
}
add_filter( 'script_loader_tag', 'my_theme_remove_gform_recaptcha_tag', 10, 2 );

Dlaczego nie wp_dequeue_script w wp_footer? Gravity Forms drukuje ten skrypt w <head>, więc w stopce jest już za późno. Filtr znacznika działa niezależnie od tego, kiedy formularz dodaje skrypt.

Krok 2: załaduj skrypt na żądanie (JS)

window.addEventListener( 'load', () => {
	const container = document.querySelector( '.gform_wrapper' );
	let requested = false;

	if ( ! container ) {
		return;
	}

	container.addEventListener( 'focusin', ( event ) => {
		if ( requested || ! event.target.matches( 'input, select, textarea' ) ) {
			return;
		}

		if ( ! window.gform?.recaptcha?.needsRender() ) {
			return;
		}

		requested = true;

		const script = document.createElement( 'script' );
		script.src = 'https://www.google.com/recaptcha/api.js?hl=en&render=explicit';
		script.onload = () => gform.recaptcha.renderOnRecaptchaLoaded();
		document.head.appendChild( script );
	} );
} );

• needsRender() i renderOnRecaptchaLoaded() to metody obiektu gform.recaptcha z dokumentacji Gravity Forms
• focusin zamiast click: łapie też wejście Tabem, więc klawiatura nie omija ładowania
• flaga requested blokuje wielokrotne dodanie skryptu przy kilku szybkich kliknięciach
• do czasu pierwszego dotknięcia formularza Gravity Forms co 100 ms sprawdza, czy biblioteka reCAPTCHA już jest. To tani timer, ale nie znika, dopóki skrypt się nie załaduje

Checkbox pojawia się z krótkim opóźnieniem po pierwszym dotknięciu formularza. Przy formularzu w stopce nikt tego nie zauważy.

Uwagi

• Wtyczki cache i optymalizacji (WP Rocket, Autoptimize, Rocket Loader w Cloudflare) potrafią przestawić kolejność skryptów. Wyłącz je na stronach z formularzem, gdy checkbox się nie renderuje
• Formularz w popupie lub ładowany przez AJAX wymaga osobnego testu
• Społeczność Gravity Forms pytała o to w 2022 i 2023. Oba wątki zamknięto bez rozwiązania

Sprawdź u siebie i napisz w komentarzu, ile punktów Performance zyskałeś 👏