对电商网站来说，糟糕的页面性能可能会增加交易放弃率。一直以来，人们会使用CDN进行缓存从而缩短页面加载时间，但即便实施了强大的缓存，消费者在通过移动网络访问这些网站时可能仍然会需要频繁等待。

最近诞生了一种名为“早期提示”（Early Hints）的全新行业标准，目前该标准已被最流行的网络浏览器所采用。这项技术可以帮助网络浏览器在渲染网站时预载网站资产（例如图片缩略图和CSS数据）。为此，必须对网站的托管基础设施进行配置，以便向浏览器告知应检索哪些资产。为了支撑这种流量，Akamai边缘服务器也开始支持早期提示功能。

本文将概括介绍一种可提高大型电商零售商网页性能的架构。该架构的特点是在Akamai边缘服务器和一系列核心计算区域间，以协同工作的方式提供服务。具体来说，该架构会依靠Akamai EdgeWorkers来智能地处理请求，并依靠HarperDB来存储资产URL。这些服务被配置为可返回整个网站页面上出现的所有图片缩略图URL的早期提示。在移动网络上测试实施情况时，我们发现页面渲染时间可从3秒以上缩短到2秒，提高了1/3。

早起提示和HarperDB工作流

用户对电商网站上的页面提出请求，请求由Akamai边缘服务器处理。
边缘服务器上的EdgeWorker将请求中的页面URL发送到HarperDB集群。该数据库维护着每个页面的缩略图URL记录（不是缩略图本身，而是这些缩略图的URL）。
EdgeWorker从HarperDB接收页面的缩略图URL。
边缘服务器向用户浏览器发送HTTP 103响应。
用户浏览器收到103响应后，用收到的URL请求缩略图。

克服挑战

· 延迟敏感性

找出造成高延迟的来源，并尽量减少这些组件对延迟的影响。

当浏览器渲染网页时，会对页面内容提出初始请求，然后对页面上出现的资产（如图片、样式表和JavaScript）提出一系列后续请求。如果初始请求需要时间让源进行处理（也称为“服务器思考时间”），那么浏览器就需要等待，因为在收到响应前，浏览器无法针对后续需要的资产提出请求。

有了早期提示，边缘基础设施就会以异步的方式通知浏览器，让浏览器知道自己应该在源处理初始请求的同时提前去获取这些资产。为此，边缘基础设施会为这些资产发送HTTP 103响应。该响应包含资产的URL，浏览器可以提前开始处理后续请求，同时继续等待源处理初始请求完成后返回HTTP 200响应。或者，浏览器也可以从自己的缓存中加载这些资产（如果存在的话）。

这种工作流程与另一种类似的技术“服务器推送”（Server Push）其实并不相同。服务器推送是由边缘直接向浏览器推送重要资产，同时等待源服务器的“思考时间”。无论浏览器本地缓存中是否已经存储了这些资产，服务器推送都会发送相关响应，这样就会产生不必要的流量。

在实施EdgeWorkers和HarperDB集群时，对这两个服务之间的连接进行调整可以进一步降低延迟。例如，在测试中，对Global Traffic Management的路由行为而言，优先考虑地理位置的近似性而非负载因素，是一种更有益的做法。这可以通过调整Load Imbalance Factor实现。

· 扩展电商产品目录

在维持低延迟的同时扩大电商产品目录的规模。

这个解决方案需要支撑的电商产品目录规模可达数百万项，这也给早期提示功能的配置带来了挑战。因为在为特定页面请求分配早期提示URL的EdgeWorker中，不可能容纳如此多的项目。因此，我们决定将此记录保存在另一个支持现有源基础设施的数据库集群中。之所以选择HarperDB，是因为它可以支持网站的扩展和速度要求。

早期提示和HarperDB设计示意图

该解决方案使用Akamai EdgeWorkers配置早期提示，并创建了一个分布在10个Akamai核心计算区域的HarperDB集群。该HarperDB集群维护着电商网站每个页面的产品缩略图URL记录。Akamai边缘服务器负责将这些缩略图URL返回给用户的浏览器。

1.用户请求访问电商网站上的产品页面。该请求的URL可能如下：

https://www.example.com/products/example-product/

2.请求由Akamai边缘服务器处理。在请求生命周期的不同阶段，Akamai EdgeWorker可对请求执行逻辑处理。在本解决方案中，EdgeWorker由onClientRequest事件触发。

3.边缘服务器还为电商网站保留了页面内容和资产的缓存，缓存中的内容不会从电商网站源站点检索。

4.处理请求：

EdgeWorker向HarperDB集群发出HTTPS子请求。该请求将通过Akamai Global Traffic Management路由到与Akamai边缘服务器延迟最低的HarperDB实例。请求会将原始URL（如https://www.example.com/products/example-product/）作为参数传递。
Akamai边缘服务器会向用户浏览器返回一个HTTP 103响应。该响应包含产品缩略图的URL以及页面上使用的关键JS和CSS文件列表。用户浏览器会对这些资产提出额外请求。
任何存储在边缘服务器缓存中的页面内容和资产都会在HTTP 200响应中返回给浏览器。如果页面请求与缓存中的内容相匹配，则不会使用早期提示来预载资产。取而代之的是使用标准的预加载链接元素。

5.HarperDB集群中的缩略图URL记录会根据电商网站源的新信息定期更新。

· 系统和组件

1.Akamai边缘服务器：距离用户最近的Akamai边缘服务器。该边缘服务器会缓存电商网站的页面内容和资产。这些服务器上运行的EdgeWorkers负责对请求和响应执行逻辑处理。

2.Akamai EdgeWorkers：在请求及响应的生命周期内，负责在Akamai边缘服务器上执行可配置的JavaScript。在本解决方案中，EdgeWorker负责检索特定电商网站页面的缩略图URL。EdgeWorker可以借助Akamai Early Hints API以编程方式通知边缘服务器，并将缩略图的HTTP 103响应发送到用户浏览器。

3.HarperDB集群：安装在10个核心计算区域内的分布式数据库集群。该集群将电商页面URL映射到特定页面上出现的图片缩略图URL。该集群充当了EdgeWorker缩略图URL请求的源。

4.Global Traffic Management：将EdgeWorker的早期提示子请求路由到HarperDB集群。

5.电商基础设施：电商网站的现有源Web服务器。