如何让Lighthouse正确识别字体的非阻塞加载方式？

Let’s break down your two Lighthouse font loading issues and fix them step by step:

1. Getting Lighthouse to Recognize Your Lazy-Loaded Fonts #

Lighthouse might be missing your font lazy load implementation for a few key reasons—here’s how to address it:

• Add font-display: swap to all your @font-face rules
  This is non-negotiable for Lighthouse. Even if you’re lazy loading fonts, without this property, the browser will wait for the font to load before rendering text, and Lighthouse will flag it as blocking. Make sure every @font-face definition includes it:

  @font-face {
    font-family: 'YourFont';
    src: url('your-font.woff2') format('woff2');
    font-display: swap;
  }
  

• Adjust your lazy load trigger timing
  If your font lazy load only fires after a scroll or user interaction, Lighthouse’s crawler (which simulates a first load without user input) won’t trigger it. Instead, load fonts right after DOMContentLoaded for above-the-fold content, and reserve lazy loading only for fonts used in off-screen sections.

• Ensure your lazy load logic doesn’t exclude crawlers
  Some lazy load scripts skip loading fonts for bots, but Lighthouse’s crawler might get caught in this filter. Double-check your code to ensure it doesn’t block font loading for automated tools—Lighthouse needs to see the lazy load in action to recognize it.

2. Marking WebFontLoader-Loaded Roboto as Non-Blocking in Lighthouse #

Your WebFontLoader setup is solid, but Lighthouse is flagging it due to fixable render-blocking behavior:

• Use WebFontLoader’s built-in fontdisplay option
  Google Fonts supports the font-display parameter directly via WebFontLoader. Add this to your config, and Google will return CSS with font-display: swap automatically—no need to write custom @font-face rules:

  import WebFont from 'webfontloader';
  WebFont.load({
    google: {
      families: ['Roboto:300,400,500'],
      fontdisplay: 'swap' // This is the key line
    }
  });
  

• Preconnect to Google Fonts servers
  Add these links to your <head> to cut down on DNS lookup and connection time. This makes font loading faster in Lighthouse’s default simulated 3G environment, so it won’t flag the load as blocking:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  

• Inline critical font styles (optional but impactful)
  If your above-the-fold content uses Roboto, inline the corresponding @font-face rules directly in your <head>’s <style> tag. This lets the browser start loading the font immediately, without waiting for external CSS to download.

• Check Lighthouse’s network simulation settings
  When you test locally with a hard refresh, you’re using a fast connection, but Lighthouse defaults to 3G. If you want to verify your fix in a faster environment, you can adjust the network throttling in Lighthouse’s settings—but optimizing for 3G is better for real-world users.

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