网站性能优化清单：图片、缓存、CDN 与 Core Web Vitals

「网站打开太慢」是企业最常见的网站投诉之一，但慢的原因往往不止一个。可能是首页放了几张未压缩的大图，可能是加载了十几个第三方脚本，也可能是服务器在另一个地区。性能优化最有效的方法，是先测量、再定位、最后按影响大小逐项处理，而不是一上来就换服务器。

一、先测量：Core Web Vitals 三项指标

Core Web Vitals（核心网页指标）是 Google 定义的一组用户体验指标，目前包括三项，也是性能讨论中最常用的共同语言：

• LCP（最大内容绘制）：页面主要内容出现需要多久，官方建议在 2.5 秒以内；
• INP（交互到下一次绘制）：用户点击或输入后页面多久有反应，官方建议在 200 毫秒以内，它在 2024 年 3 月取代了原来的 FID；
• CLS（累积布局偏移）：页面加载过程中元素跳动的程度，官方建议低于 0.1。

测量工具可以用浏览器自带的 Lighthouse、PageSpeed Insights，或者在网站里接入真实用户数据采集。要注意实验室数据和真实用户数据的区别：在办公室光纤网络下测得很快，不代表用户在地铁里用手机打开也快。国内项目建议在不同地区、不同网络条件下都测一遍。

二、图片：通常是收益最大的一项

在大多数企业官网上，图片占页面体积的比例最高，也最容易优化：

• 使用现代格式：WebP 已被主流浏览器广泛支持，AVIF 压缩率更高，可以作为优先格式并保留回退；
• 按显示尺寸输出：在手机上显示 400 像素宽的图片，不需要加载 3000 像素的原图，用 srcset 提供多种尺寸；
• 首屏以外的图片使用懒加载（loading="lazy"），但首屏主图不要懒加载，否则会拖慢 LCP；
• 为图片指定宽高或宽高比，避免加载后撑开布局导致 CLS 变差；
• 首屏大图可以使用 fetchpriority="high" 提示浏览器优先下载；
• 建立上传规范或后台自动压缩，防止后续编辑上传未处理的原图。

三、前端资源：JavaScript 和字体

JavaScript 是影响交互响应（INP）的主要因素。常见问题和处理方式：

• 第三方脚本过多：统计、客服、广告、地图、社交分享各一个，逐个评估是否必要，非必要的延迟到页面空闲后再加载；
• 整站打包成一个大文件：按页面拆分代码，只加载当前页面需要的部分；
• 内容型页面用了重型前端框架且纯客户端渲染：改为服务端渲染或静态生成，页面内容直接出现在 HTML 里，对搜索引擎和 AI 抓取也更友好；
• 中文字体文件很大：完整的中文字体可能有数兆字节，优先使用系统字体，确需品牌字体时做字符子集化，只包含实际用到的字；
• 字体加载期间文字不可见：设置 font-display: swap，先用系统字体显示。

四、缓存：让重复访问几乎零成本

缓存策略设计得当，回访用户和翻页访问的速度会有明显改善：

1. 带版本号或哈希的静态资源（JS、CSS、图片）设置长期缓存，例如一年，更新时文件名随之变化；
2. HTML 页面设置较短缓存或协商缓存，保证内容更新能及时生效；
3. 服务端对数据库查询结果、页面片段做缓存，减少每次请求的计算量；
4. 内容更新时主动清除相关页面缓存，而不是等缓存自然过期。

缓存配置错误的典型表现，是「后台改了内容，前台看不到」，或者反过来「每次打开都重新下载所有资源」。两种情况都值得在上线前专门测试。

五、CDN 与服务器

CDN 把静态资源分发到离用户更近的节点，对访客分布较广的网站效果明显。国内主流云厂商如阿里云、腾讯云都提供 CDN 服务，使用国内 CDN 需要域名已完成 ICP 备案，例如阿里云 CDN 的备案要求写明加速区域包含中国内地时域名必须有备案号。选择和配置时注意：

• 面向国内用户用国内节点，面向海外用户用覆盖目标地区的节点，两者都有时可以分线路解析；
• 开启 HTTP/2 或 HTTP/3 与 Brotli/Gzip 压缩；
• 动态页面也可以考虑边缘缓存，但要处理好登录态和个性化内容；
• 服务器本身的响应时间（TTFB）如果过长，CDN 也救不了，要排查数据库慢查询和后端逻辑。

六、常见的误区

• 只看首页分数，忽略了产品详情页、文章页这些真正承接流量的页面；
• 追求满分而过度优化，投入与收益不成比例，指标进入「良好」区间后优先级可以下降；
• 上线时优化过一次，之后内容运营不断上传大图、添加脚本，性能逐渐退化；
• 把移动端和桌面端混在一起看，移动端通常慢得多，而访客大多来自手机。

七、建立持续监控

性能不是一次性工作。建议把以下几件事纳入日常：

• 在发布流程中加入性能检查，关键页面指标明显变差时提醒；
• 定期查看真实用户数据，按页面类型和设备分组；
• 新增第三方脚本需要评估对性能的影响；
• 后台上传图片自动压缩和生成多尺寸。

性能优化的顺序是：先测量，找出最大的问题，解决它，再测量。凭感觉优化往往事倍功半。

大乐网络在网站交付时会把图片处理、缓存策略和基础性能检查作为标准环节。如果你的现有网站存在速度问题，可以先用上面的工具测一次，把结果按这份清单逐项对照。