阿里云最新上云解决方案：网站静态资源访问加速解决方案

2024年5月3日14:28:35 发表评论

购买可领取：[阿里云2000元代金券]

本方案使用阿里云CDN产品来分发OSS上的网站静态文件，不仅可以降低源站的负载压力，还能够提升网站的访问性能，同时还能在高并发场景下为您节约成本，体验本方案预计费用约为5元。

素材.jpg

一、方案背景

网站加载时长每增加1秒，用户可能就会增加10%的流失。以手机淘宝为例，其页面秒开率基本都达到80%以上。网站的加载时长不只影响体验，还会影响业务效果。优化网站加载速度，首要措施是网站静态资源加速。阿里云CDN在全球拥有3200多个节点，将网站静态资源分发到CDN节点后，您的用户始终会通过最近距离的节点获取资源，从而大幅减少网站加载时间，该方案同样适用于大文件下载加速的场景。

网站静态资源访问加速解决方案1.jpg

二、网站性能的影响

不同地域的用户访问网站时，部分用户会因为地域较远导致访问速度较慢。以访问未经过性能加速的网站为例，有64.6%的站点加载时间都超出1s，平均完全加载用时为3.3s。

网站静态资源访问加速解决方案2.png

各项研究表明，用户对于网站的性能是非常敏感的，具体如下：

跳出率：根据Google的研究表明，如果一个网站的加载时间从1秒增加到3秒，其跳出率将增加32%；如果加载时间从1秒增加到5秒，其跳出率将增加90%。
转化率：根据Akamai的研究表明，47%的用户期望网站在2秒内加载完成，40%的用户将在3秒内放弃网站，1秒钟的延迟可能导致7%的转化率下降。
销售额：根据Amazon的研究表明，每增加100毫秒的加载时间，销售额将减少1%。
这些数据表明，网站性能对于用户的体验影响深远，在用户跳出率、转化率及销售额等指标上均有影响，从而网站的性能提升尤为关键。

三、如何提升网站性能

如果不使用阿里云CDN+OSS的技术方案提升网站性能，则需要优化网站本身、选择适当的托管方案以及采用一些网络技术等方案进行改进，这些方案能提升的性能还取决于用户地理分布、网站当前状态等因素。针对用户跨地域访问，在没有配置CDN加速的情况下，需要投入较高的时间和成本为用户提供服务。通过各类方案的对比，我们推荐您使用阿里云CDN+OSS的技术方案提升网站性能。

传统方案	VS	阿里云 CDN
直接连接到云服务；完全依赖运营商网络和路由；缺少网络优化方案；用很高的成本支撑全球用户接入	效率和成本	通过边缘云骨干网络进一步优化中间一公里的传输效率和应用程序安全接入；基于CDN的边缘计算服务实现算力下移，就近计算，进一步缩短延时提升并发，降低中心云压力。

四、推荐方案

通过阿里云CDN+OSS的技术方案提升网站性能，将网站的静态资源（JS文件、CSS文件、图片、音视频文件等）存储在OSS上，CDN会将OSS源站的文件提前缓存到CDN全球加速节点，用户请求访问或下载资源时，可以就近获取到CDN节点上已缓存的资源，从而实现资源访问加速。整体的方案架构如下图所示。

网站静态资源访问加速解决方案3.jpg

五、性能优势

以2 MB大小的测试文件为例，不设置CDN加速和设置CDN加速的网站性能对比如下：

网站静态资源访问加速解决方案4.png

不设置CDN加速时，页面加载时间在各时间段内的占比如下：

≥8s：12.5%
5s - 8s：12.5%
3s - 5s：17.7%
1s - 3s：21.9%
< 1s：35.4%

其中有64.6%的站点加载时间都超出1s，平均加载用时3.3s，通过CDN加速后，平均加载用时为833.05ms，提升了74.7%。

在高并发的场景下，通过CDN能够将静态资源缓存在各个节点上，减少对源站的直接请求，不仅降低了带宽费用，还降低了源站的流量费用。以访问中等复杂度的页面需要1 MB流量为例，购买表格中不同规格的下行流量包，使用CDN加速静态资源，在忽略回源费用的情况下，相对于直接使用OSS下行流量，费用至少会降低75.5%，对应支持的每天用户访问次数可参考表格内容。请根据网站的具体访问情况选择合适的资源包，对应价格请以官方信息为准。

网站静态资源访问加速解决方案5.jpg

网站静态资源访问加速部署教程

方案概览

在当前互联网快速发展的时代，网站已成为企业与用户沟通的重要桥梁。不同地域的用户访问网站时，部分用户会因为地域较远导致访问速度较慢，影响用户体验，同时随着网站流量的不断增加，站点的响应速度也会出现下降的问题。其中网站的静态资源，如JS文件、CSS文件、图片、大文件或音视频等，这些内容的加载速度直接决定用户浏览网站的整体体验。

为了确保不同地域的用户能够流畅地访问网站，您可以使用阿里云CDN产品来分发OSS上的文件，不仅可以降低源站的负载压力，还能够提升网站的访问性能。同时，在高并发的场景下，通过CDN能够将静态资源缓存在各个节点上，减少对源站的直接请求，不仅降低了带宽费用，还降低了源站的流量费用。以购买1个月和6个月有效期的100GB下行流量包费用为例，使用CDN加速静态资源，在忽略回源费用的情况下，相对于直接使用OSS下行流量，费用分别降低了75.5%和97.5%。具体请以官方资源包价格为准。

方式	资源包类型	资源包流量/有效期	费用	支持的访问次数/天	使用CDN费用降低
直接使用OSS	下行流量	100GB/1个月	49元	3413次/天	75.50%
CDN+OSS	下行流量	100GB/1个月	12元	3413次/天	75.50%
直接使用OSS	下行流量	500GB/1个月	247元	17067次/天	76.90%
CDN+OSS	下行流量	500GB/1个月	57元	17067次/天	76.90%
直接使用OSS	下行流量	1TB/1个月	505元	34952次/天	78.60%
CDN+OSS	下行流量	1TB/1个月	108元	34952次/天	78.60%

方案架构

将网站的静态资源（JS文件、CSS文件、图片、音视频文件等）存储在OSS上，CDN会将OSS源站的文件提前缓存到CDN全球加速节点，用户请求访问或下载资源时，可以就近获取到CDN节点上已缓存的资源，从而实现资源访问加速。整体的方案架构如下图所示。

网站静态资源访问加速解决方案6.png

本方案的技术结构包括以下基础设施和云服务：

对象存储 OSS：存储网站静态资源文件。
内容分发网络 CDN：加速访问对象存储 OSS中存储的资源。

部署准备

1.如果您还没有阿里云账号，请访问阿里云账号注册页面，根据页面提示完成注册并完成个人实名认证。阿里云账号是您使用云资源的付费实体，因此是部署方案的必要前提。
2.为阿里云账号充值。为节省成本，本方案默认选择使用按量付费，使用按量付费资源需要确保账户余额不小于100元。完成本方案的部署及体验，预计费用约为5元。
3.您已经拥有了至少一个域名，且域名已经备案。如果未备案，可登录阿里云ICP代备案管理系统完成备案。
4.开通对象存储OSS、内容分发网络CDN。

一键部署

一键部署基于阿里云资源编排服务ROS（Resource Orchestration Service）实现，ROS模板已定义好脚本，可自动化地完成云资源的创建和配置，提高资源的创建和部署效率。ROS模板完成的内容包括：

操作步骤
您可以通过下方提供的ROS一键部署链接，来自动化地完成这些资源的创建和配置：

创建1个对象存储OSS Bucket。
绑定1个自定义域名。
配置1个CDN加速服务。
添加1个CNAME记录。

1.一键部署资源。

单击一键部署，并选择地域。
在配置页面修改资源栈名称，配置加速区域、加速域名及存储空间名称，单击下一步，然后单击创建开始一键配置。其中加速域名不能设置为顶级域名。
当资源栈信息页面的状态显示为创建成功时表示一键配置完成。

2.开启CDN缓存自动刷新。

登录OSS管理控制台。
进入目标Bucket后，选择Bucket 配置 > 域名管理。
在目标域名中，单击OSS 域名绑定列下的未绑定，在弹出面板输入域名信息，单击提交。
在目标域名中，在CDN 缓存自动刷新列，选择所有支持的操作，然后单击确定。
当您在OSS对文件进行修改后，可以触发CDN缓存的自动刷新。

完成及清理

图片及音视频文件方案验证**

图片及音视频文件主要是通过OSS进行存储，通过CDN实现资源加速。您可以通过OSS控制台或者阿里云SDK等形式将文件上传到OSS的Bucket，然后通过浏览器访问对应的CDN资源地址验证缓存策略及加速效果。

1.访问文件查看静态资源缓存策略。
以访问图片文件为例，在浏览器访问对应的URL，可以得到以下响应信息，说明文件是从CDN节点上下载到的，并且缓存时间也按预期设置为30天。

网站静态资源访问加速解决方案7.png

2.访问包含图片的网站验证静态资源加速效果。
使用阿里云应用实时监控服务ARMS的即时拨测功能，监测点覆盖全国主要城市，测试文件大小为2 MB，验证通过CDN加速和不设置CDN加速的图片访问性能。最初静态资源没有缓存至CDN加速节点时，访问性能会相对较慢。当静态资源缓存至CDN加速节点后，则由加速节点直接响应，设置CDN加速后的访问性能会更好。具体见下面数据。

网站静态资源访问加速解决方案8.png

图中左侧为未设置CDN加速的访问性能，右侧为设置CDN加速后的访问性能。通过本次拨测数据可以看到，设置CDN加速后的完全加载用时提升了约74.7%。

清理资源
在本方案中，您创建了1个OSS Bucket、1个CDN加速。测试完方案后，您可以参考以下规则处理对应产品的资源，避免继续产生费用。
一键删除OSS Bucket和CDN加速。

登录ROS控制台。
在左侧导航栏，选择资源栈。
在资源栈页面的顶部选择部署的资源栈所在地域，找到资源栈，然后在其右侧操作列，单击删除。
在删除资源栈对话框，选择删除方式为释放资源，然后单击确定，根据提示完成资源释放。

JS、CSS文件方案验证

JS、CSS文件会根据业务的实际情况更新版本，与图片及音视频这类不常更新的静态文件不太相同。您可以通过以下操作完成文件的版本控制、文件上传及文件访问。

1.文件版本控制。
JS、CSS文件可以通过文件路径中的版本号（例如js/0.0.1/app.js）或者查询参数的方式（app.js?v=0.0.1）确保用户可以获取到当前版本的文件。在实际的开发流程中，使用非覆盖式发布的情况更为常见，通过文件路径中的版本号的方式可以有效地控制缓存并进行版本追踪，同时方便进行回滚操作。

在OSS中，可以通过创建对应版本号的目录存放对应版本的文件，就可以完成文件的版本控制。

2.文件上传到OSS。
文件版本更新后，您可以根据具体场景选择使用OSS控制台、阿里云SDK、ossutil、ossbrowser或者API等方式将最新版本的文件上传到OSS Bucket。本文以使用命令行工具ossutil为例，介绍如何将文件夹内的文件上传到OSS Bucket。