1. 使用性能分析工具
- 按`F12`打开开发者工具，切换到“Performance”面板，点击“记录”按钮并刷新页面（生成详细加载报告）。
- 在报告中查看“First Contentful Paint”（首次内容绘制时间），标记超过500ms的元素（如未压缩的图片或CSS文件）。
2. 压缩图片资源
- 在“Network”面板中找到加载最慢的图片，右键点击链接→“Open in new tab”查看原始尺寸。
- 使用“Squoosh”扩展或在线工具压缩图片（将2MB以上JPG文件压缩至500KB以下，优先使用WebP格式）。
3. 合并外部请求
- 在“Network”面板中按文件类型排序，删除重复的CSS/JS文件（如同时加载`style.css`和`main.css`）。
- 右键点击冗余请求→“Block request domain”，阻止广告、统计等非必要资源的加载（减少HTTP请求数量）。
4. 启用缓存机制
- 在“Application”面板的“Manifest”中，设置关键资源为长期缓存（如CSS文件缓存时间设为30天）。
- 修改服务器配置，为静态资源添加`Cache-Control: max-age=31536000`标签（强制浏览器缓存一年）。
5. 优化JavaScript执行
- 在“Performance”报告中找到“Long Task”事件（超过50ms的任务），右键点击相关脚本→“Minify JavaScript”。
- 将内联脚本移至外部文件，在HTML底部添加script src="main.js" defer（避免阻塞渲染）。
6. 延迟加载非关键内容
- 在“Elements”面板中，为下方的广告横幅添加`loading="lazy"`属性（仅在进入视口时加载）。
- 使用link rel="preload" href="style.css"提前加载核心样式表（确保字体和布局优先显示）。
7. 消除渲染阻塞因素
- 在“Styles”面板中，禁用不必要的CSS动画（如`@keyframes`）和过渡效果（减少GPU压力）。
- 右键点击网页→“Inspect”→“Rendering”面板，关闭“CSS Transforms”和“Opacity”特效（加速重绘）。
8. 压缩HTML和CSS代码
- 在“Sources”面板中，使用快捷键`Ctrl+U`查看源代码，手动删除空格和注释（减小文件体积）。
- 安装“HTML Minifier”扩展，自动去除冗余标签和换行符（适合博客类静态页面）。
9. 优化字体加载策略
- 在“Network”面板中找到字体文件（如`.woff2`），右键点击→“Block request domain”改用系统字体（如用`Arial`替代自定义字体）。
- 在CSS中添加`font-display: swap;`声明（避免字体加载阻塞文本显示）。
10. 模拟移动网络测试
- 在“Performance”面板中，选择“Throttling”→“Fast 3G”，模拟弱网环境（检查资源加载顺序是否合理）。
- 使用“Lighthouse”工具生成报告，根据“Opportunities”建议优化图片懒加载和代码分块（提升移动端体验）。