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()irenderOnRecaptchaLoaded()to metody obiektugform.recaptchaz dokumentacji Gravity Formsfocusinzamiastclick: łapie też wejście Tabem, więc klawiatura nie omija ładowania- flaga
requestedblokuje 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ś 👏
