如何在React项目中按网络速度加载对应CSS，优化First Contentful Paint(FCP)？

Gmail在网络缓慢时会展示颜色、图标及动画更少的基础页面。我希望自己的React项目实现类似功能。项目拥有两个全局SCSS文件：index.scss和index-lite.scss。如何在网络缓慢时加载更简洁的CSS文件，以提升First Contentful Paint(FCP)速度？

以下是主index.ts组件代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configure } from 'axios-hooks';

import App from './components/App';
import API from './utils/api';
import store from './store';
import './index.scss';  // or import './index-lite.scss';


configure({ axios: API });

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

方法一：利用浏览器网络状态API动态加载 #

浏览器的navigator.connection API可以直接获取当前网络的有效类型，我们可以用它判断是否加载轻量版CSS：

1. 移除index.ts中静态的CSS导入，替换为动态加载逻辑：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configure } from 'axios-hooks';

import App from './components/App';
import API from './utils/api';
import store from './store';

// 判断是否为慢速网络
const isSlowNetwork = () => {
  if (!navigator.connection) return false;
  // 将2G、慢速2G归类为慢速网络
  const slowConnectionTypes = ['slow-2g', '2g'];
  return slowConnectionTypes.includes(navigator.connection.effectiveType);
};

// 动态导入对应CSS文件
if (isSlowNetwork()) {
  import('./index-lite.scss');
} else {
  import('./index.scss');
}

configure({ axios: API });

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

注意：部分旧版浏览器不支持navigator.connection，可以添加降级逻辑，默认加载正常版本CSS。

方法二：基于页面加载时长判断 #

如果不想依赖网络API，也可以通过页面初始化的耗时来判断网络状况，超时则切换到轻量CSS：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configure } from 'axios-hooks';

import App from './components/App';
import API from './utils/api';
import store from './store';

// 记录页面加载起始时间
const loadStartTime = performance.now();

// 延迟判断加载时长
setTimeout(() => {
  const loadDuration = performance.now() - loadStartTime;
  // 超过1.5秒视为加载缓慢，可根据实际情况调整阈值
  if (loadDuration > 1500) {
    import('./index-lite.scss');
  } else {
    import('./index.scss');
  }
}, 0);

configure({ axios: API });

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

方法三：在HTML中提前加载CSS（最优FCP提升方案） #

如果想要最大化提升FCP，建议在public/index.html中直接添加判断逻辑，提前插入CSS链接，避免等待React初始化：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script>
      function loadAppropriateCSS() {
        const cssLink = document.createElement('link');
        cssLink.rel = 'stylesheet';
        
        // 判断网络状态
        const isSlow = navigator.connection && ['slow-2g', '2g'].includes(navigator.connection.effectiveType);
        // 注意：这里的路径是打包后的CSS文件路径，需根据项目打包配置调整
        cssLink.href = isSlow ? '/static/css/index-lite.[hash].css' : '/static/css/index.[hash].css';
        
        document.head.appendChild(cssLink);
      }
      loadAppropriateCSS();
    </script>
    <!-- 其他头部内容 -->
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

这种方式的优势是CSS加载时机更早，不会阻塞React初始化，对FCP的优化效果最明显。需要注意的是，打包后的CSS文件名通常带有哈希值，需要确保路径正确（比如使用Create React App时，可通过%PUBLIC_URL%变量或者手动匹配哈希）。

额外优化要点 #

• 精简index-lite.scss：移除所有非必要的动画、阴影、复杂渐变，减少图标和自定义字体的引用，确保文件体积足够小。
• 配合组件懒加载：除了CSS，对非首屏组件使用React.lazy和Suspense进行懒加载，进一步降低初始加载负担。
• 测试验证：用Chrome DevTools的Network面板模拟慢速网络（如Slow 3G），验证两种CSS是否正确加载，并对比FCP指标的变化。

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