已添加media属性仍存渲染阻塞资源？求Google Page Insights优化方案

我明白你已经给CSS链接加上了media属性，但还是被Page Insights提示存在渲染阻塞资源——这种情况我之前帮朋友排查过好几次，下面是几个实测有效的解决方案，帮你提升网站的Page Insights评分：

• 精准设置media属性，避免过度匹配
  你用了media="screen"和media="all"，但all会让浏览器认为这个CSS在所有场景下都必需，依然会阻塞渲染。如果某个CSS只针对打印场景，改成media="print"；如果是移动端专属样式，用media="(max-width: 768px)"这类精准的媒体查询。对于核心的屏幕样式，media="screen"是合理的，但如果是非首屏才用到的样式（比如底部 footer、弹窗样式），一定要拆分出来，给它设置非首屏触发的媒体查询，或者用异步加载。

• 提取并内联首屏关键CSS
  Page Insights对首屏渲染速度权重极高。你可以把首屏必须的CSS（比如页面基础布局、导航栏、首屏banner的样式）直接内联到HTML的<head>标签里，剩下的非关键CSS用异步方式加载。这样浏览器不用等待外部CSS下载完成，就能直接渲染首屏内容。
  示例代码：

  <head>
    <style>
      /* 首屏关键CSS：只保留首屏需要的样式 */
      body { margin: 0; font-family: system-ui, sans-serif; }
      .main-header { height: 60px; background-color: #2c3e50; color: white; }
      .hero-banner { min-height: 400px; background: #ecf0f1; }
    </style>
    <!-- 非关键CSS异步加载，加载完成后生效 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="print" onload="this.media='screen'">
    <!-- 给不支持JS的浏览器留后路 -->
    <noscript><link href="css/bootstrap.min.css" rel="stylesheet" media="screen"></noscript>
  </head>
  

• 用preload异步加载非关键CSS
  另一种可靠的异步加载方式是用rel="preload"配合onload事件，告诉浏览器预加载资源但不阻塞渲染，加载完成后再将其转为样式表：

  <link rel="preload" href="bodybg/bg8.css" as="style" onload="this.rel='stylesheet'">
  <noscript><link href="bodybg/bg8.css" rel="stylesheet" media="all"></noscript>
  

• 合并压缩CSS，减少请求与体积
  多个零散的CSS文件会增加HTTP请求次数，拖慢加载速度。把所有非关键CSS合并成一个文件，再用压缩工具去掉空格、注释、缩短冗余代码，大幅减少文件体积，加快下载速度。

• 移除未使用的CSS代码
  很多时候我们会引入完整的框架（比如Bootstrap），但实际只用到了其中一小部分样式。用Page Insights自带的“未使用的CSS”检测功能，或者专门的工具分析，把没用到的CSS代码删掉，减少不必要的资源加载。

• 用JavaScript动态加载样式表
  如果上面的方法都不适用，还可以用JS动态创建链接标签来加载CSS，完全避免阻塞渲染：

  function loadCSS(url) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.media = 'print'; // 先设为print避免阻塞
    document.head.appendChild(link);
    // 加载完成后切换到目标媒体类型
    link.onload = () => {
      link.media = 'screen';
    };
  }
  // 页面加载完成后再加载非关键CSS
  window.addEventListener('load', () => {
    loadCSS('bodybg/bg8.css');
  });
  

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