1. 图像优化
- 启用图片懒加载：在HTML代码中为img标签添加`loading="lazy"`属性，或在CSS中使用`img { display: block; visibility: hidden; }`实现延迟加载。页面首次加载时仅请求可视区域内的图片，减少带宽占用。
- 压缩图片体积：使用工具（如TinyPNG、ImageOptim）压缩图片，将JPEG/PNG转换为WebP格式（在picture标签中设置`type="image/webp"`），可减少50%以上体积。
- 设置图片尺寸：在HTML中明确指定图片宽度和高度（如img src="example.jpg" width="600" height="400"），避免浏览器重新渲染导致的延迟。
2. 字体优化
- 使用字体显示策略：在CSS中添加`font-display: swap`（如`@font-face { font-display: swap; }`），确保字体加载失败时直接使用系统默认字体，避免空白期。
- 内联关键字体：将首页必需的字体文件通过`@import`或link href="..."内联到HTML头部，优先加载核心字体。
- 减少字体格式：禁用不必要的字体变体（如粗体、斜体），仅保留常规样式，降低文件大小。
3. 资源预加载与缓存
- 预加载关键资源：在HTML head 部分添加link rel="preload" href="style.css"，强制浏览器提前加载CSS，避免样式阻塞渲染。
- 缓存静态资源：配置服务器返回`Cache-Control: max-age=30d`头信息，使图片和字体文件在用户设备上长期缓存，减少重复请求。
4. 禁用不必要的视觉特效
- 关闭CSS动画：暂时移除页面中的`animation`和`transition`效果（如按钮悬停动画），降低渲染复杂度。
- 简化背景图：将全屏背景图替换为纯色或渐变，减少图像解码开销。
5. 测试与分析
- 使用Lighthouse工具：在Chrome开发者工具中打开“Lighthouse”面板，生成性能报告，查看“图像优化”和“字体显示时间”评分，根据建议调整配置。
- 监控网络请求：在“Network”面板中筛选`Img`和`Font`类型资源，检查加载顺序和耗时，优先优化体积大、加载慢的文件。
