谷歌测速遇CSS渲染阻塞警告，咨询default.css异步加载方案

Hey there, let's work through that Google PageSpeed warning about render-blocking CSS and figure out how to async load your default.css properly.

First, let's unpack what that warning is telling you:

消除首屏内容中的渲染阻塞型JavaScript与CSS。您的页面存在1个阻塞型CSS资源，这会导致页面渲染延迟。页面首屏内容必须等待该资源加载完成后才能渲染。建议延迟或异步加载阻塞资源，或将这些资源的关键部分直接内联到HTML中，优化CSS……

In plain terms: The browser holds off rendering your page's first screen until it finishes downloading and processing default.css, which slows down how fast users see your content. Here's how to fix it:

Core Fixes for Render-Blocking CSS #

• Inline Critical CSS: Pull out only the CSS that's required to render the above-the-fold (first screen) content, then paste it directly into a <style> tag in your HTML <head>. This lets the browser render the initial view right away without waiting for an external file. The rest of your styles (like default.css) can be loaded asynchronously.
• Async Load Non-Critical CSS: For default.css, here are the most reliable, browser-friendly methods to load it without blocking rendering:

Methods to Async Load default.css #

Let's go through each approach step by step:

1. Media Type Swap (Most Widely Supported)

This trick works on every modern browser and even older ones like IE11:

<link rel="stylesheet" href="default.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="default.css"></noscript>

• media="print" tells the browser this CSS isn't needed for screen rendering initially, so it doesn't block the page load.
• Once the file finishes loading, the onload event swaps the media type to all, applying the styles to your screen content.
• The <noscript> tag ensures users with JavaScript disabled still get the full styles.

2. Preload + Onload Trigger

Using preload tells the browser to fetch the CSS file early (without blocking rendering), then we convert it to a regular stylesheet once loaded:

<link rel="preload" href="default.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="default.css"></noscript>

• rel="preload" prioritizes fetching default.css so it's ready faster, but doesn't apply it automatically.
• The onload attribute changes the link's relation to stylesheet once loaded, which applies the styles.
• Again, the noscript fallback covers users who have JS turned off.

3. Dynamic JS Injection

If you prefer a JavaScript-based approach (though the above methods are more straightforward), you can create the stylesheet element dynamically:

(function() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'default.css';
  document.head.appendChild(link);
})();

• Place this script at the end of your <body> tag so it runs after the initial HTML is parsed, avoiding any render blocking.

Extra Tips to Optimize Further #

• Minify Your CSS: Always minify default.css (remove unnecessary whitespace, shorten selectors where safe) to reduce file size and speed up load time, even when loading asynchronously.
• Test Thoroughly: Run PageSpeed Insights again after making changes to confirm the warning is gone. Also, check your page for any flickering—if you see that, you probably missed some critical CSS that should be inlined in the <head>.

内容的提问来源于stack exchange，提问作者Павел Кушнеревич