web-performance-optimization

Web 性能优化 - 提升网站加载速度与用户体验

技能概述

帮助开发者系统性地优化网站和 Web 应用性能，通过测量分析、问题诊断、优化实施和效果验证，提升加载速度、改善 Core Web Vitals 指标，增强用户体验和 SEO 排名。

适用场景

1. 网站加载缓慢

当用户反馈网站打开慢、跳出率高时，通过 Lighthouse 审计和性能分析定位瓶颈，针对 JavaScript 包体积、图片资源、服务器响应等问题进行系统性优化。

2. Core Web Vitals 不达标

面对 LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）等指标不达标的情况，提供针对性的优化方案，帮助提升 Google 搜索排名。

3. 资源包体积过大

当 JavaScript 或 CSS 包体积影响加载性能时，通过代码分割、按需加载、移除未使用依赖等方式减少包体积，提升 Time to Interactive（TTI）。

核心功能

1. 性能测量与诊断

使用 Lighthouse、Chrome DevTools 等工具建立性能基线，分析 Core Web Vitals 指标，识别大文件、渲染阻塞资源、长任务等性能瓶颈，为优化提供数据支持。

2. 资源优化实施

针对图片、JavaScript、CSS 等资源实施优化：转换现代图片格式（WebP、AVIF）、实现代码分割、添加延迟加载、配置缓存策略、优化关键渲染路径。

3. 效果验证与监控

优化前后对比 Lighthouse 评分和 Core Web Vitals 指标，验证优化效果，建立持续监控机制，确保性能改进长期稳定。

常见问题

我的网站加载太慢，应该从哪里开始优化？

首先运行 Lighthouse 审计建立性能基线，重点检查三个关键指标：LCP（应在 2.5 秒以内）、FID（应在 100 毫秒以内）、CLS（应小于 0.1）。通常从优化图片体积、减少 JavaScript 包大小、实施代码分割这几个高回报的优化入手。

LCP、FID、CLS 分别代表什么？如何优化？

LCP（Largest Contentful Paint）衡量页面主要内容加载速度，可通过预加载关键资源、优化首屏图片、使用 CDN 来改善；FID（First Input Delay）衡量页面交互响应速度，主要通过减少 JavaScript 执行时间、代码分割来优化；CLS（Cumulative Layout Shift）衡量页面视觉稳定性，需要为图片和动态内容预留空间来避免布局跳动。

如何有效减少 JavaScript 包体积？

使用 webpack-bundle-analyzer 分析包的组成，移除未使用的依赖，用更轻量的库替代重型库（如用 date-fns 替代 moment.js），实现路由级和组件级代码分割，将非关键功能延迟到页面交互后再加载。