一、使用Chrome开发者工具分析代码
1. 审查元素模式：按 `Ctrl+Shift+I` 打开开发者工具 → 点击“Elements”标签 → 展开网页DOM结构 → 直接删除或注释掉多余标签（如空div、重复脚本）。
2. 查看网络请求：在“Network”标签中过滤CSS和JS文件 → 禁用未使用的样式表或脚本 → 减少页面加载资源。
3. 检测重复代码：右键点击某段代码 → 选择“Copy selector” → 在全局搜索该选择器 → 合并相同样式的冗余规则。
二、利用Lighthouse生成优化报告
1. 生成性能报告：在开发者工具中点击“Lighthouse” → 选择“Performance”类别 → 查看“Remove unused code”建议 → 删除未调用的函数和变量。
2. 压缩关键CSS：根据报告提示 → 将核心样式内联到HTML头部 → 移除未使用的@media查询和动画代码。
3. 清理第三方脚本：在“Network”标签中找到外部JS文件 → 检查是否包含未使用的库（如jQuery未调用$函数）→ 替换为轻量化方案。
三、自动化工具辅助优化
1. 安装Webpack插件：在扩展商店搜索“Webpack”工具 → 自动分析依赖关系 → 打包时剔除未引用的模块。
2. 使用Tree Shaking技术：在JavaScript文件中定义但未使用的函数会被自动删除 → 配合ES6模块语法效果更佳。
3. 压缩HTML标签：在“Sources”标签中启用“Minify”功能 → 自动删除空格、换行和默认属性值 → 减小文件体积。
四、视觉化检测冗余内容
1. 高亮未使用元素：在“Elements”面板右键点击元素 → 选择“Delete element” → 观察页面是否变化 → 无影响则确认冗余。
2. 检查隐藏内容：使用“:hover”伪类测试交互区域 → 删除不可见的占位符（如display:none的div）。
3. 对比开发版本：在“Sources”标签切换“Workspace”和“Content scripts” → 对比本地代码与线上版本差异 → 删除过时的代码段。
五、服务器端与客户端协同优化
1. 开启Gzip压缩：进入Chrome设置 → 高级 → 勾选“接收压缩数据” → 服务器返回的HTML/CSS/JS自动压缩。
2. 设置缓存策略：在“Network”标签中标记静态资源 → 右键选择“Cache” → 设置长期缓存减少重复传输。
3. 懒加载非关键内容：在“Sources”标签插入`loading="lazy"`属性 → 图片和视频仅在视口出现时加载 → 避免初始代码臃肿。