Windows
macOS
Android
iOS
大促开始后，用户打开商品页，浏览器往往要先下载商品图片、样式表、脚本、字体和图标，随后才会请求库存、购物车或支付接口。对于分布在不同国家的访问者，网站全球访问提速不应先从盲目扩容应用服务器开始，而应优先检查这些可重复使用的静态资源。
原因很直接：静态资源通常体积大、请求数量多，而且同一文件可以被大量用户反复读取。只要缓存和传输路径设计合理，改善会覆盖商品列表、详情页、活动页等多个入口；动态接口则需要继续单独处理数据库、会话和风控逻辑。
为什么静态资源是大促优化的第一落点
以常见商品详情页为例，高清图片可能占据页面传输量的主要部分，多个脚本和字体还会增加请求数。如果用户位于墨西哥、南非或新西兰，而源站在亚洲，文件每次都回源，延迟、丢包和跨境链路拥塞都会被放大。
图片、CSS、JavaScript 和字体一般具有较明确的版本特征，适合缓存；库存、价格、优惠券和结算结果则可能随时变化，不应使用同样长的缓存策略。将两类内容混在一起优化，既可能造成数据过期，也会错过最容易产生收益的静态部分。
先建立一套可执行的静态资源方案
1. 盘点页面真正加载了什么
- 用 Chrome DevTools 的 Network 面板打开商品详情页，按 Size 和 Waterfall 排序，记录体积最大的图片、脚本、字体及其响应时间。
- 分别测试未登录首页、商品页、购物车页和活动落地页，避免只看首页得出片面结论。
- 按文件类型统计总传输量、请求数量和缓存命中情况，优先处理体积大且重复出现的资源。
2. 选择合适的图片格式和尺寸
商品图不应直接把原始相机图片交给浏览器。可根据展示尺寸生成多档图片，并通过响应式图片让移动端下载较小版本。WebP 在多数现代浏览器中有较好兼容性，AVIF 通常能进一步降低体积，但编码耗时和旧环境兼容性需要评估。建议保留适当的 JPEG 或 PNG 作为回退，而不是一次性删除旧格式。
缩略图、列表图和详情大图应使用不同尺寸；超过展示区域所需分辨率的图片，只会增加下载时间。对首屏外图片使用懒加载，但主视觉图不宜延迟到用户滚动后才请求。
3. 压缩并拆分脚本和样式
对文本类静态文件启用 Brotli 或 Gzip，具体效果取决于内容类型和压缩级别。不要把所有页面逻辑打进一个超大脚本：结算页不需要下载博客组件，活动页也不必加载后台管理代码。按路由拆分后，首次访问需要下载的内容更少，后续页面还能复用已经缓存的公共模块。
4. 设置可验证的缓存策略
带内容哈希的文件名适合较长缓存，例如 product.7c91a.webp 或 checkout.42d8f.js。服务端可为这类文件返回较长的 Cache-Control 时间，并在文件内容变化时生成新名称。没有版本标识的文件不宜无限期缓存，否则发布新样式后，部分用户可能继续看到旧页面。
同时检查 ETag、Last-Modified 和 Cache-Control 是否互相冲突。缓存时间较长并不等于发布不可控，关键是构建流程能否稳定替换引用、清理旧文件并回滚到上一版本。
优化传输路径，但不要忽视源站配置
内容分发网络可以把静态文件放到更接近访问者的节点，减少跨洲回源次数。选择服务时，应重点比较目标国家覆盖、缓存规则可控性、失效速度、日志完整性和异常回源能力，而不是只看节点数量。对于主要用户集中在拉丁美洲的商店，需实际观察当地运营商和移动网络下的访问表现。
协议方面，HTTP/2 能复用连接，HTTP/3 在部分高丢包或移动网络环境中可能更有优势，但最终效果取决于浏览器、网络和服务端支持情况。无论采用哪种协议，域名解析、证书握手、首字节时间和文件下载时间都应分开记录，才能判断瓶颈究竟在连接建立还是资源本身。
| 问题表现 | 优先检查 | 适合的处理方式 |
|---|---|---|
| 图片下载慢 | 尺寸、格式、回源距离 | 响应式图片、WebP 或 AVIF、边缘缓存 |
| 请求数量过多 | 脚本拆分和第三方组件 | 删除无用依赖、延迟非关键组件 |
| 更新后仍显示旧内容 | 文件名和缓存头 | 内容哈希、版本化发布、定向失效 |
| 页面打开后仍卡顿 | 主线程任务和动态接口 | 再检查脚本执行、接口响应及数据查询 |
大促前后的验证顺序
- 在大促前至少准备一个与正式页面结构相同的预发布版本，确认图片、脚本和字体均能从缓存路径正常返回。
- 使用不同地区的监测点，分别记录首字节时间、首屏图片完成时间和页面主要内容显示时间。测试结果会受时段、运营商和设备影响，应看多次结果的趋势。
- 发布少量资源版本后，检查新旧文件是否被正确区分，再逐步扩大流量。不要在高峰期首次修改全部缓存规则。
- 大促期间观察缓存命中率、回源流量、错误率和静态文件带宽；如果静态资源正常而下单失败，应转向接口、数据库或支付链路排查。
常见问题
静态资源优化能解决所有全球访问问题吗？
不能。它主要改善页面资源传输和首屏体验，库存、购物车、支付等动态请求仍可能受接口距离、数据库或风控系统影响。
所有文件都应该设置很长的缓存时间吗？
不应该。带版本或内容哈希的文件适合长缓存；经常原地覆盖的文件应使用较短策略或可靠的重新验证机制。
图片压缩后画质下降怎么办？
为列表图、缩略图和详情图设置不同质量档位，并在真实设备上检查文字、纹理和商品边缘。不要只依据文件大小决定格式。
什么时候才需要扩容源站？
当缓存命中后，动态接口仍出现高延迟、错误率上升或计算资源持续饱和时，再针对应用、数据库和连接池扩容。前提是已经确认问题不是静态资源反复回源。
因此，跨境大促中的网站全球访问提速，应先把图片、脚本、样式和字体变成可压缩、可缓存、可就近交付的资源，再处理动态业务链路。这样的顺序更容易验证，也更不容易因临时扩容而掩盖真正瓶颈。