一、基础设置调整
1. 启用省流模式：点击右上角三个点 → 进入“设置” → 在“隐私与安全”中开启“减少数据使用量” → 自动延迟加载非关键资源。
2. 关闭预读取功能：在设置中找到“预测性网络动作” → 取消勾选 → 阻止浏览器预先加载页面下方内容。
3. 手动刷新页面：按 `Ctrl+F5`（Mac用 `Cmd+Shift+R`） → 强制重新请求资源 → 测试懒加载效果。
二、开发者工具调试
1. 模拟网络环境：按 `Ctrl+Shift+I` 打开开发者工具 → 切换到“Network”面板 → 设置限速为100kb/s → 观察资源加载顺序。
2. 修改请求优先级：在“Network”面板右键点击图片/视频请求 → 选择“Block Request” → 验证是否延迟加载。
3. 检查懒加载标记：查看网页源代码 → 搜索 `loading="lazy"` 属性 → 确认关键资源已启用标准懒加载。
三、插件辅助方案
1. 安装专用扩展：在扩展商店搜索“Lazy Load” → 选择支持视频的插件（如“LoLa”）→ 启用后自动处理未设置懒加载的资源。
2. 配置例外规则：在插件设置中添加白名单 → 对特定网站禁用懒加载 → 保证重要内容优先显示。
3. 调试控制台反馈：按 `Ctrl+Shift+J` 打开控制台 → 查看插件日志 → 修复因拦截导致的加载错误。
四、代码级优化
1. 注入自定义脚本：在控制台输入以下代码：
javascript
document.querySelectorAll('img, video').forEach(el => {
el.setAttribute('loading', 'lazy');
});
→ 手动为所有图片视频添加懒加载属性。
2. 修改HTML结构：在网页源码中将 img 标签改为 img loading="lazy" → 保存后刷新 → 提升首屏加载速度。
3. 验证资源占位：检查网页是否用占位符（如1x1像素gif）替代原资源 → 确保懒加载前不消耗带宽。
五、性能监测与优化
1. 分析核心指标：在开发者工具“Lighthouse”面板运行审计 → 查看“首次内容绘制”和“速度指数” → 对比优化前后数据。
2. 捕获资源瀑布图：在“Network”面板开始加载时录制 → 观察图片/视频请求时间轴 → 调整懒加载策略。
3. 设置加载阈值：在扩展设置中调整“延迟加载时间” → 根据设备性能设置触发条件 → 平衡体验与省流效果。
