前端静态站点性能优化：体积、缓存与渲染

发布日期：2026-03-30

先做“体积体检”

静态站点的性能瓶颈通常来自：图片/字体过大、CSS 未压缩、重复资源等。建议你先用浏览器 DevTools 或构建工具看每个资源的大小与下载耗时。

图片：尽量使用 WebP/AVIF，并控制尺寸（不要上传超出展示尺寸的原图）。
CSS/JS：压缩与合并，避免无用样式。
字体：只保留需要的字重；能用系统字体就别引入自定义字体。

缓存策略：让重复访问更快

静态站点最划算的优化通常是缓存。关键是：对带 hash 的静态资源使用长缓存，对 HTML 使用短缓存。

# 思路示例（具体看你的服务器/Nginx/对象存储策略）
static/*: Cache-Control: public, max-age=31536000, immutable
index.html: Cache-Control: public, max-age=0, must-revalidate

渲染层：减少“等待”

尽量把关键 CSS 放在首屏需要的最小范围。
为图片/媒体设置尺寸，减少布局抖动。
减少阻塞渲染：避免把大量样式/脚本放在页面最前面。

可执行的检查清单

首屏是否发生明显的闪烁/跳动？
是否存在重复的 CSS/字体请求？
是否有明显超大的资源（例如几 MB 的图片）？
缓存是否生效（刷新后网络请求是否显著减少）？

如果你愿意把实际页面的“资源瀑布图”截图给我，我可以按你当前情况给出更具体的优先级建议。