当我们进行性能优化，我们在优化什么（LightHouse优化实操）

进行性能优化时，主要围绕 LightHouse 提供的四大核心指标 展开，包括性能（Performance）、无障碍（Accessibility）、最佳做法（Best Practice）和搜索引擎优化（SEO）。以下是具体优化方向和实操方法：

性能指标直接影响页面加载速度和交互体验，包含以下六项关键指标：

1. Largest Contentful Paint（LCP，最大内容渲染）

   优化目标：缩短最大文本或图片的渲染时间。

   手段：

   压缩图片（如使用WebP格式），减少首屏资源体积。

   预加载关键资源（如首屏图片、字体），通过 <link rel="preload"> 实现。

   延迟加载非关键资源（如广告、第三方脚本），示例代码如下：

   <script>setTimeout(() => { const script = document.createElement('script'); script.src = '广告或特效脚本地址'; document.head.appendChild(script);}, 7000); // 延迟7秒加载</script>

2. Total Blocking Time（TBT，总阻塞时间）

   优化目标：减少主线程被长任务阻塞的时间。

   手段：

   拆分大型JS文件，按需加载（如单页面仅加载必要JS）。

   合并压缩JS文件，使用工具如 uglify-js：

   uglifyjs file1.js file2.js -o merged.min.js

   启用服务器Gzip压缩，配置示例：

   location ~* .(js|css)$ { gzip on; gzip_comp_level 5;}

3. First Contentful Paint（FCP，首次内容渲染）

   优化目标：加速页面任意内容首次出现在屏幕的时间。

   手段：

   减少首屏CSS体积，拆分非关键CSS并异步加载。

   使用内联关键CSS，示例：

   <style>/* 首屏关键样式 */</style><link rel="stylesheet" href="非关键样式.css" media="print" onload="this.media='all'">

4. Speed Index（SI，速度指数）

   优化目标：提升页面内容可见填充速度。

   手段：

   优化图片加载策略（如懒加载、占位图）。

   使用CDN加速静态资源分发。

5. Time to Interactive（TTI，可交互时间）

   优化目标：缩短页面完全可交互的时间。

   手段：

   减少第三方脚本（如统计代码、广告）对主线程的占用。

   使用Web Worker处理复杂计算任务。

6. Cumulative Layout Shift（CLS，累积布局偏移）

   优化目标：减少页面元素意外移动的频率。

   手段：

   为图片和媒体元素声明固定宽高，避免布局抖动。

   避免动态插入内容（如广告）导致页面重排。

性能优化工具示例：

• LightHouse报告生成：在Chrome开发者工具中打开LightHouse，选择移动端/桌面端模拟，生成性能评分报告。
  

无障碍优化确保所有用户（包括残障人士）能高效访问内容，关键点包括：

• 标签完整性：

  为图片添加 alt 属性，为交互元素（如按钮）添加 aria-label。

  示例：

  <img src="logo.svg" alt="公司Logo"><button aria-label="关闭弹窗">×</button>
• 颜色对比度：

  背景色与前景色对比度需符合WCAG标准（如黑白对比度至少4.5:1）。

• 语义化HTML：

  使用正确标签（如 <header>、<nav>）提升屏幕阅读器兼容性。

最佳做法聚焦代码健康度和安全性，核心措施包括：

• HTTPS协议：

  强制使用HTTPS，避免混合内容（HTTP/HTTPS混用）。

• CSP安全策略：

  通过 <meta> 标签限制资源加载来源，防止XSS攻击：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
• 代码规范：

  避免使用废弃API（如 document.write），使用ES6+语法。

SEO优化提升页面在搜索引擎中的可见性，关键标签包括：

• 结构化数据：

  添加 <title>、<meta name="description"> 和 <meta name="keywords">。

  示例：

  <title>页面标题</title><meta name="description" content="页面描述，长度建议120-160字符">
• 移动端适配：

  使用Viewport标签确保移动端正确渲染：

  <meta name="viewport" content="width=device-width, initial-scale=1">
• 站点地图与Canonical标签：

  通过 <link rel="canonical"> 指定页面唯一URL，避免重复内容问题。

通过上述优化，可显著提升LightHouse评分（如性能从50分提升至90分），最终实现 更快的加载速度、更低的资源消耗、更高的用户满意度。优化需持续迭代，结合LightHouse报告定位瓶颈，逐步完善。