PageSpeed Insights中CSS阻塞问题未解决，寻求可行优化方案

Hey there, let's work through this PageSpeed headache you're dealing with. You've already checked off the key steps—inline critical CSS, tested both the rel-based approach and a custom script for loading non-critical styles—but those stylesheets are still getting flagged as render-blocking. Here are some actionable fixes to try out:

• Leverage the media="print" + switch to media="all" trick
  Browsers don't block rendering for stylesheets marked with media="print", so we can use this to our advantage. We'll load the stylesheet with this media type first, then switch it to all once it's loaded so the styles take effect. Update your script like this:

  var loadCSSFiles = function() {
    var links = ["//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", "../styles-secondary.css"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, i;
    for (i = 0; i < links.length; i++) {
      linkElement = document.createElement("link");
      linkElement.rel = "stylesheet";
      linkElement.href = links[i];
      // Start with print media to avoid render blocking
      linkElement.media = "print";
      headElement.appendChild(linkElement);
      // Switch to all media once loaded
      linkElement.onload = function() {
        this.media = "all";
      };
    }
  };
  // Keep your existing trigger logic
  var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) {
    raf(loadCSSFiles);
  } else {
    window.addEventListener("load", loadCSSFiles);
  }
  

  PageSpeed typically recognizes this pattern as non-blocking since it explicitly signals the browser that the styles aren't needed for initial render.

• Check for hidden blocking dependencies
  Sometimes even dynamically loaded CSS gets flagged if synchronous JavaScript on your page depends on those styles—like scripts that read element dimensions or style properties before the CSS loads. Audit your page scripts to see if any code runs before DOMContentLoaded that accesses elements styled by your secondary sheets. If you find any, delay that logic until after the CSS has finished loading.

• Try preload with an onload switch to stylesheet
  Using preload lets the browser fetch the resource early without blocking render, then we convert it to a stylesheet once it's ready. We'll also add a fallback for browsers that don't support preload:

  var loadCSSFiles = function() {
    var links = ["//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", "../styles-secondary.css"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, fallbackLink, i;
    for (i = 0; i < links.length; i++) {
      // Preload the style resource
      linkElement = document.createElement("link");
      linkElement.rel = "preload";
      linkElement.href = links[i];
      linkElement.as = "style";
      linkElement.onload = function() {
        this.rel = "stylesheet";
      };
      headElement.appendChild(linkElement);
      
      // Fallback for browsers without preload support
      fallbackLink = document.createElement("link");
      fallbackLink.rel = "stylesheet";
      fallbackLink.href = links[i];
      fallbackLink.media = "print";
      headElement.appendChild(fallbackLink);
    }
  };
  // Keep your existing trigger logic
  var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) {
    raf(loadCSSFiles);
  } else {
    window.addEventListener("load", loadCSSFiles);
  }
  

  This combines the speed of preloading with the non-blocking behavior of the print media fallback, making it robust across different browsers.

• Verify PageSpeed's test context
  It's possible PageSpeed is testing a cached version of your page, or there's a difference between mobile and desktop test results. Try clearing the test cache, run separate tests for mobile and desktop, and double-check that your dynamic loading logic isn't being overridden or blocked by other scripts on the page.

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