Jak usunąć zbędny kod reCaptcha ze strony internetowej opartej na Wordpress

Na jednej ze stron internetowych opartych o system zarządzania treścią WordPress z szablonem Divi, zastosowaliśmy formularz kontaktowy wyposażony w mechanizm do potwierdzania tożsamości użytkowników, czyli reCAPTCHA w wersji V3. Samo zabezpieczenie oferowane przez Google uważam za jedno z lepszych rozwiązań antyspamowych, które całkiem nieźle radzi sobie z wykrywaniem zachowań użytkowników na stronach, dzięki czemu analizuje normalny ruch a ten generowany przez boty blokuje.

Jednak ten wpis nie dotyczy samego zabezpieczenie a tego, co zostało po nim w kodzie stronie po usunięciu formularza komntaktowego. Jak się okazało podczas testów wydajności, które w dzisiejszych czasach mają fundamentalne znaczenie w procesie pozycjonowania stron, analizowana strona cały czas ładowała odnośnik do kodu JavaScript. Niestety szczególnie widoczne było to w testach PageSpeed Insight, gdzie mocno ograniczało to prędkość ładowania strony internetowej a tym samym obniżało punktację.

Mogliśmy pozbyć się pozostałości po reCAPTCHA na dwa sposoby. Pierwszym z nich i łatwiejszym jest zastosowanie bardzo ciekawego modułu Asset CleanUp: Page Speed Booster, który pokazuje wszystkie pliki CSS czy JavaScript i pozwala je wyłączać dla całej witryny lub wybranej podstrony (zrzut powyżej). Drugim to dodanie odpowiedniego kodu do pliku functions.php i ten sposób wybraliśmy, ponieważ optymalizacja strony polegająca na instalowaniu kolejnych modułów nie jest najlepszym pomysłem.

function project_dequeue_recaptcha() {
wp_dequeue_script( 'recaptcha-v3' );
wp_deregister_script( 'recaptcha-v3' );
wp_dequeue_script( 'et-core-api-spam-recaptcha' );
wp_deregister_script( 'et-core-api-spam-recaptcha' );
}
add_action( 'wp_print_scripts', 'project_dequeue_recaptcha' );

W takim razie przejdźmy do zastosowanego rozwiązania. Plik functions.php znajduje się w katalogu naszej skórki. Jeśli korzystamy na przykład z popularnego motywu Twenty Nineteen, to wspomniany plik znajdziemy na naszym serwerze w takiej lokalizacji: /wp-content/themes/twentynineteen. Jednak edycja tego pliku nie jest dobrym pomysłem, ponieważ przy każdej aktualizacji stracimy nasze zmiany.

Najlepszym rozwiązaniem jest stworzenie motywu potomnego (child theme), w którym będziemy umieszczali zmiany dotyczące głównego motywu. I tak też robimy z plikiem functions.php, który zmodyfikowany uzupełnia funkcje PHP głównego modułu o kod przez nas wprowadzony. Zastosowane przez nas rozwiązanie przyniosło oczekiwany efekt. Zbędny plik JavaScript nie jest już ładowny przez motyw a 30 dodatkowych punktów w teście PageSpeed Insight pokazuje, że warto było popracować nad tym zagadnieniem.

Troszeczkę się rozpisałem ale mam nadzieję, że przy okazji przybliżyłem Wam temat motywów potomnych, którego poznanie jest niezbędne podczas pracy z motywami WordPress.