WordPress站点Google Page Speed字体预加载错误技术求助

Hey Liam, sorry to hear you've been hitting walls with this font preloading issue—let’s walk through actionable fixes that actually work, based on my experience troubleshooting this for WordPress sites.

Common Root Causes & Solutions #

1. Add Preload Tags Safely via Your Theme’s Functions.php #

Editing header.php directly is risky (theme updates will wipe your changes), so use WordPress hooks instead. Add this code to your child theme’s functions.php file:

function add_font_preload() {
    // Replace with your font URL and format
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/assets/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'add_font_preload', 1);

• Key Notes:
  • Use get_stylesheet_directory_uri() to get the correct child theme path (avoids broken URLs if you move your site).
  • The crossorigin attribute is non-negotiable for most fonts—PageSpeed will flag it if missing, even if the path is correct.
  • Match the type attribute to your font format (woff2 is the most efficient, stick with it if possible).

2. Verify Font Paths & Format Compatibility #

Double-check that:

• The font URL is accessible (copy-paste it into your browser to confirm it loads—404 errors are a silent killer here).
• You’re using a modern format (woff/woff2). Older formats like TTF/OTF aren’t optimized for preloading and can trigger errors.
• If your fonts are hosted externally (like Google Fonts), use the official preload link from their embed code—don’t manually construct the URL (CDN paths can change unexpectedly).

3. Fix Crossorigin Attribute Issues #

If you’re preloading fonts from a different domain (including subdomains or CDNs), the crossorigin attribute must be set correctly:

• For public, freely available fonts (like Google Fonts), use crossorigin="anonymous".
• If your fonts require authentication (rare for WordPress), use crossorigin="use-credentials".
• Omitting this will cause browsers to block the preloaded font, leading to PageSpeed errors.

4. Clear Cache & Disable Conflicting Plugins #

Caching plugins (WP Rocket, W3 Total Cache, Cloudflare) often modify or strip preload tags. Try:

• Clearing all site and CDN cache after adding preload code.
• Disabling your cache plugin temporarily to test if the preload tag appears in your site’s source code (view page source to check).
• If using WP Rocket, go to File Optimization > Preload Fonts and add your font URLs there—this ensures the plugin doesn’t override your manual settings.

5. Check for Duplicate Preload Tags #

Sometimes themes or plugins automatically add preload tags for fonts, leading to duplicates. Use your browser’s dev tools (Network tab > Fonts) to see if the same font is being preloaded multiple times. If so, disable the automatic preload in your theme/plugin settings before adding your own.

Final Troubleshooting Step #

After implementing a fix, run a new PageSpeed Insights test. If the error persists, check the Diagnostics tab for specific details—PageSpeed usually tells you exactly which font is failing and why (e.g., "Preload key request does not use crossorigin").

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