移动端页面加载优化求助：PageSpeed提示需Defer unused CSS（关联reCAPTCHA）

Hey there! Totally get why that extra 1-second load time from the reCAPTCHA CSS is bugging you—especially with 93% of your visitors on mobile, every millisecond directly impacts user experience. Since reCAPTCHA is a non-negotiable component for you, here are practical, actionable fixes to tackle that unused CSS issue without ditching it:

1. 延迟加载reCAPTCHA资源直到需要时 #

Instead of loading reCAPTCHA (and its associated CSS) on page load, wait until the user is about to trigger an action that requires verification (like clicking a submit button). This way, the CSS only gets requested when it’s actually needed, avoiding initial page load blocking.

Here’s a quick JavaScript example to implement this:

// Target your submit button (replace with your actual button ID)
const submitBtn = document.getElementById('submit-btn');

submitBtn.addEventListener('click', async function() {
  // Check if reCAPTCHA is already loaded
  if (!window.grecaptcha) {
    // Dynamically load the reCAPTCHA script
    const script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY';
    
    await new Promise((resolve) => {
      script.onload = resolve;
      document.body.appendChild(script);
    });
  }

  // Execute reCAPTCHA verification once loaded
  grecaptcha.ready(async () => {
    const token = await grecaptcha.execute('YOUR_SITE_KEY', { action: 'submit' });
    // Attach the token to your form and submit it
    document.getElementById('recaptcha-token').value = token;
    document.getElementById('your-form').submit();
  });
});

This ensures the reCAPTCHA CSS is only fetched right before it’s needed, cutting out that 1-second block from your initial page load.

2. 内联关键CSS并延迟加载完整样式文件 #

Use your browser’s Coverage panel (Chrome DevTools > More Tools > Coverage) to identify exactly which parts of the reCAPTCHA CSS are actually used on your page. Then inline those critical styles in your <head> section, and delay loading the full external CSS file.

Here’s how to structure this in your HTML:

<!-- Inline only the critical reCAPTCHA CSS rules you identified -->
<style>
.g-recaptcha {
  /* Your extracted critical styles here */
}
/* Add other used rules from the styles__ltr.css file */
</style>

<!-- Preload and delay the full CSS file -->
<link rel="preload" href="https://www.gstatic.com/recaptcha/releases/v154/styles__ltr.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- Fallback for users with disabled JavaScript -->
<noscript>
  <link rel="stylesheet" href="https://www.gstatic.com/recaptcha/releases/v154/styles__ltr.css">
</noscript>

This way, your page only loads the essential CSS upfront to render reCAPTCHA correctly when it does appear, and the full file loads in the background without blocking initial rendering.

3. 考虑切换到reCAPTCHA v3（隐形验证） #

If your use case allows it, reCAPTCHA v3 operates in the background without requiring user interaction (no "I’m not a robot" checkbox). This often results in lighter resource loads and more efficient timing, since it doesn’t need to render visible UI elements immediately.

You’ll need to adjust your backend logic to handle the score-based verification that v3 provides, but it can significantly reduce frontend resource overhead—including cutting down on unnecessary CSS load times.

4. 利用浏览器缓存 #

Ensure that your server is setting proper cache headers for the reCAPTCHA CSS file. While this won’t eliminate the initial load time, it will make subsequent visits faster for returning users, which helps with overall performance metrics over time.

内容的提问来源于stack exchange，提问作者Kuba