Single Page reCAPTCHA – 10 pts.

10-to-12-point Speed Boost Mobile

Assumes reCAPTCHA exists in the Template

Overview

This guide outlines the process of improving mobile speed by dynamically loading Google reCAPTCHA only on pages where forms are present, rather than globally loading it in the template. By loading reCAPTCHA only on necessary pages, you can reduce unnecessary script loading and improve page performance.

---

Steps to Implement Single Page reCAPTCHA Loading

1. Audit Your Site for Forms

• Objective: Identify all the pages where forms are used, specifically focusing on those that require reCAPTCHA.
• Why?: You can move reCAPTCHA from being loaded in the global template to only the pages where forms exist, reducing unnecessary loading and improving mobile speed.

2. Create recaptcha-init.js

• Purpose: This JavaScript file dynamically loads the reCAPTCHA API and executes it.
• Instructions: Replace the script.src and grecaptcha.execute values with your site’s custom Google reCAPTCHA site key.

Example:

// recaptcha-init.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?render=6Lcnf7MnAAAAAKtH_VHDnaLMFLy9mO1a0_d_mFWK';
  script.onload = function() {
    grecaptcha.ready(function() {
      grecaptcha.execute('6Lcnf7MnAAAAAKtH_VHDnaLMFLy9mO1a0_d_mFWK', {action: 'submit'}).then(function(token) {
        var response = document.querySelectorAll("[id=token_generate]");
        for (var e = 0; e < response.length; e++) {
          var responseItem = response[e];
          responseItem.value = token;
        }
      });
    });
  };
  document.head.appendChild(script);
})();

• Explanation: This script dynamically loads the Google reCAPTCHA API and inserts the generated token into the hidden token_generate input field on the form.

3. Upload recaptcha-init.js

• Location: Upload this file to the /assets/js/ folder on your server using an FTP client or browser-based file uploader (Firefox is recommended for compatibility).

4. Add reCAPTCHA Script to Specific Pages with Forms

• Where to Add: On each page where a form exists that requires reCAPTCHA, add the following line within the page’s script section:

<script src="/assets/js/recaptcha-init.js"></script>

• Instructions:
  • Go to the page where the form requiring reCAPTCHA is located.Navigate to the section for adding scripts (Content / Scripts / New Content / Custom Code / Custom Code).Add the script for loading recaptcha-init.js:

<script src="/assets/js/recaptcha-init.js"></script>

5. Re-use the Script Across Other Pages

• Once the custom reCAPTCHA script is created and added to one page, you can re-use it on other pages that require the same functionality.
• Navigate to Content / Scripts / Used Content and select the previously added Custom Code (reCAPTCHA script) to include it on other pages with forms.

---

Enabling $section(scripts)$ in the Template

To make sure the reCAPTCHA script is only loaded on the necessary pages, use $section(scripts)$ in your template:

1. Locate $section(scripts)$ in the Template

• Open the global template for your website.
• Find $section(scripts)$, which is responsible for dynamically injecting page-specific scripts.

2. Uncomment $section(scripts)$

• If the section is commented out, uncomment it to enable script injection. This ensures that scripts added via $section(scripts)$ are only loaded on pages where they are explicitly defined.

3. Place $section(scripts)$ in the Correct Location

• Best Practice: Place $section(scripts)$ at the bottom of the page, after the main JavaScript files, but before any SCHEMA or structured data scripts.

Example placement:

htmlCopy code<script src="assets/js/foundation.js"></script>
<script src="assets/js/scripts.js"></script>
<!-- Loads scripts only on pages that define a section script -->
$section(scripts)$
<script type="application/ld+json">

---

Final Step: Test Your Forms

Once you’ve completed the setup, thoroughly test your forms to ensure that:

• The forms submit successfully with the reCAPTCHA token.
• The reCAPTCHA script loads only on pages where it is required.
• No unnecessary scripts are loaded on pages without forms, improving the overall mobile performance.