2025年html前端图片,字体,CSS,JS,压缩,INP等6个方向优化性能

<script type="module"> 
  // 导入web-vitals库（用于监听核心指标）
  import {onLCP, onINP, onCLS} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js';

  // 发送数据到后端（优先用sendBeacon，兼容性差时降级为fetch）
  const send = (name, value, id) => {
    navigator.sendBeacon?.('/rum', JSON.stringify({ 
      name,  // 指标名称（如LCP）
      value, // 指标数值（如2000毫秒）
      id,    // 指标唯一ID（用于去重）
      url: location.pathname // 当前页面路径
    })) || fetch('/rum', { 
      method: 'POST', 
      keepalive: true, // 确保页面卸载时仍能发送数据
      body: JSON.stringify({ name, value, id, url: location.pathname }) 
    });
  };

  // 监听并发送指标
  onLCP(({ value, id }) => send('LCP', value, id));
  onINP(({ value, id }) => send('INP', value, id));
  onCLS(({ value, id }) => send('CLS', value, id)); 
</script>

<img
  src="/images/hero.avif"        <!-- 现代格式主图 -->
  alt="首页英雄图"                <!-- 无障碍描述 -->
  width="1200" height="800"      <!-- 固定尺寸（避免布局偏移） -->
  fetchpriority="high"           <!-- 首屏高优先级加载 -->
  decoding="async"               <!-- 异步解码（不阻塞主线程） -->
  loading="eager"                <!-- 首屏图立即加载（默认） -->
  style="
    content-visibility: auto;    <!-- 仅可见时渲染 -->
    contain-intrinsic-size: 800px 1200px; <!-- 预占尺寸（优化CLS） -->
  " 
  onerror="this.src='/images/hero.jpg'" <!-- 降级方案（AVIF加载失败时用JPG） -->
/>

<!-- 预连接字体托管域名（减少DNS查询+TCP握手时间） -->
<link rel="preconnect" href="https://your-cdn.example" rel="external nofollow"  crossorigin>

<!-- 预加载子集化字体（仅首屏所需） -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/Inter-Subset.woff2" rel="external nofollow"  crossorigin>

<style> 
  /* 定义目标字体 */
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Subset.woff2') format('woff2'); /* 子集化字体文件 */
    font-display: swap; /* 优先显示备选字体，加载完成后替换 */
    font-weight: 400; /* 明确字重（避免重复加载） */
  }

  /* 字体回退链：优先用系统字体，再用Inter */
  html { 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; 
  } 
</style>

<!-- 预加载并应用首屏关键CSS -->
<link rel="preload" href="/css/above-the-fold.css" rel="external nofollow"  rel="external nofollow"  as="style">
<link rel="stylesheet" href="/css/above-the-fold.css" rel="external nofollow"  rel="external nofollow" >

<!-- 异步加载非首屏CSS（加载完成后自动生效） -->
<link 
  rel="preload" 
  href="/css/app.css" rel="external nofollow"  rel="external nofollow"  
  as="style" 
  onload="this.onload=null;this.rel='stylesheet'" <!-- 加载完成后改为样式表 -->
>

<!-- 无JS场景降级（直接加载完整CSS） -->
<noscript><link rel="stylesheet" href="/css/app.css" rel="external nofollow"  rel="external nofollow" ></noscript>

// 1. 路由级拆分（加载报表页面时才加载对应JS）
import('~/pages/heavy-report.js').then(({ render }) => render());

// 2. 组件级懒加载（React示例）
const Chart = React.lazy(() => import('./Chart')); // 图表组件懒加载
// 使用时配合Suspense（加载中显示占位）
// <Suspense fallback={<div>加载中...</div>}><Chart /></Suspense>

// 3. 仅当元素可见时激活（减少首屏hydration耗时）
const mountWhenVisible = (el, mount) => {
  const io = new IntersectionObserver((entries) => {
    // 元素可见时执行激活逻辑，并停止监听
    if (entries.some(e => e.isIntersecting)) { 
      io.disconnect(); 
      mount(); // 比如执行ReactDOM.hydrateRoot()
    }
  });
  io.observe(el); // 监听元素可见性
};
// 使用：当#comment组件可见时，才激活它
mountWhenVisible(document.getElementById('comment'), () => {
  import('./Comment').then(({ init }) => init());
});

<!-- 预连接API域名（减少后续请求的连接时间） -->
<link rel="preconnect" href="https://api.example.com" rel="external nofollow"  crossorigin>

<!-- 预加载可能访问的下一路由（如用户点击"详情"前提前加载） -->
<link rel="prefetch" href="/article/detail" rel="external nofollow"  as="document" />

// 1. 拆分非紧急任务（现代浏览器方案）
if ('scheduler' in window && scheduler.postTask) {
  // 后台优先级执行非紧急任务（不影响交互）
  scheduler.postTask(() => doNonUrgentWork(), { priority: 'background' });
} else {
  // 兼容方案：延迟执行（让出主线程）
  setTimeout(doNonUrgentWork, 0);
}

// 2. React低优先级更新（不阻塞点击交互）
import { startTransition } from 'react';

button.addEventListener('click', () => {
  // 标记为低优先级：点击后先响应按钮状态，再执行筛选
  startTransition(() => {
    setFilter('popular'); // 筛选"热门"列表（非紧急）
  }); 
});

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }], // 性能评分最低0.9（满分1.0）
        "resource-summary:total": ["error", { "maxNumericValue": 300000 }], // 资源总大小≤300KB（300000字节）
        "script-treemap-data": ["warn", { "maxLength": 350000 }] // 脚本总大小≤350KB（警告阈值）
      }
    }
  }
}