提升电商网站加载速度应成为2020年的优先事项。尽管性能优化可能耗时且昂贵，但部分快速修复措施也能带来显著改善。
页面速度至关重要。正如Chromium博客于2019年11月所述，谷歌Chrome团队计划在今年对加载缓慢的网站进行标识：
未来，Chrome可能会通过清晰标识区分加载速度快慢的网站。这可能以多种形式呈现，我们将尝试不同方案以确定最佳用户体验方式。
该标识旨在识别因代码编写导致整体加载缓慢的网站，主要依据历史延迟数据。此外，我们可能会扩展此功能，根据用户设备和网络状况，识别对特定用户而言加载缓慢的页面。
谷歌表示将识别加载缓慢的网站。来源：Chromium博客。
此前我曾讨论过HTML缓存和隔离慢速资源等优化思路。本文将重点讲解如何定位最慢页面，并应用简单修复措施加速加载。
Google Analytics可报告网站中加载最慢的页面及用户访问路径。我们可以指示Web浏览器“预取”（prefetch）这些页面，使其在用户点击时极速加载。
具体流程如下。
定位慢速页面
在Google Analytics中，前往行为 > 网站速度 > 页面计时。选择数据视图并按“平均页面加载时间”排序。
要在Google Analytics中查看加载缓慢的页面，请前往行为 > 网站速度 > 页面计时。点击图片以放大。
列表将优先显示最慢页面。若已启用增强型电子商务，最后一列“页面价值”会对各页面归因收入进行标准化，这是商家需重点关注的关键指标。
接下来，需了解引导访客到达慢速页面的内部路径。为此可创建自定义报告。首先，观察行为 > 行为流中的典型用户路径。
此处展示了访客最常访问的路径。（该报告也有助于识别导致最大访客流失的页面。）
前往行为 > 行为流以查看典型的用户路径。点击图片以放大。
创建自定义报告：前往自定义 > 自定义报告 > 新建自定义报告。设置标题（如截图中的“慢速页面路径”），维度选择“上一页路径”、“页面”和“退出页面”，指标选择“页面价值”和“平均页面加载时间”。
在自定义 > 自定义报告 > 新建自定义报告处创建自定义报告。点击图片以放大。
生成的报告与行为 > 网站速度 > 页面计时类似，但额外包含了典型用户会话中的上一页信息。
Google Analytics中的自定义报告包含了典型用户会话中的上一页。点击图片以放大。
下一步是应用核心概念：Web浏览器提示（hints）。
Web浏览器提示
“提示”是指令Web浏览器提前加载资源和链接的技术，能大幅提升页面速度。并非所有浏览器都支持每种提示，其中三种主流类型为“预加载”、“预取”和“预渲染”。
预加载需在HTML文档HEAD部分包含代码，例如：
<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="myfont.woff2">预加载指令强制浏览器在文档发现资源前提前下载。典型场景是隐藏在CSS文件中的字体：预加载可在后台预先下载字体，使其立即可用，避免浏览器先解析CSS再下载字体的延迟。
更多预加载信息及浏览器支持情况，请参阅CanIUse.com相关文章。
预取需在HTML文档HEAD部分包含代码，如下所示：
<link rel="prefetch" href="page-2.html">此提示允许浏览器获取用户下一步可能需要的资源。只要带宽充足，浏览器将在渲染当前页面后执行此操作。
本文将详细介绍如何通过预取技术加速慢速页面。
了解更多预取技术及浏览器支持信息请点击此处。
预渲染曾是强大指令，现已弃用。它允许对目标页面进行资源预取并渲染，需在HTML文档HEAD中添加：
<link rel="prerender" href="slow-page.html">当Chrome遇到预渲染提示并执行“无状态预取”（类似但不执行JS或相关渲染）时，该操作会过度消耗资源。
了解更多预渲染技术及仍支持的浏览器信息请点击此处。
序列预测模型
我们可以手动插入提示，要求浏览器预取最耗时的后续页面。根据前述Google Analytics数据，可知哪些页面适合添加此链接。
然而，示例报告识别出约20,000个潜在序列，为所有序列插入提示将耗费大量时间。
相反，可构建模型利用上一页和当前页预测用户最可能点击的下一页，进而对其进行预取。
如前文所述，虽可训练复杂神经网络，但更快捷简单的方法是使用三位计算机科学教授提出的“紧凑预测树”。根据其论文：
给定一组训练序列，序列预测问题旨在仅通过观察目标序列的前项来找到下一个元素。相关应用广泛，包括网页预取、消费品推荐、天气预报和股票市场预测等。
为实现这一点，可使用GitHub仓库中的工具。
操作相对简单：插入训练数据，指定预测目标，即可获取最佳匹配结果。
来自Google Analytics自定义报告的训练数据示例如下：
let data = [ ['/previous-page1', '/current-page1', '/next-slow-page1'], ['/previous-page2', '/current-page2', '/next-slow-page2'], ['/previous-page3', '/current-page3', '/next-slow-page1'], ['/previous-page4', '/current-page1', '/next-slow-page2'], ['/previous-page2', '/current-page3', '/next-slow-page3'], ['/previous-page3', '/current-page2', '/next-slow-page4'], ['/previous-page4', '/current-page1', '/next-slow-page1'], ]测试目标页面的方法如下：
let target = [ ['/previous-page2', '/current-page3'] ];最终预测结果为：
console.log(predictions) // [['/next-slow-page3]']整合实施
为保持简洁，应在所有页面（或指向待改进页面的页面）中包含一个JavaScript文件。该脚本将获取当前页面的引荐来源路径及当前URL路径，预测用户最可能点击的下一页。
随后，只需插入带有预测结果的浏览器提示即可。
link rel="prefetch" href="/next-slow-page3我在GitHub上的示例页面包含实现该功能的代码。
以下代码行用于导入库文件：
script src="index.js"原始仓库代码曾遇到问题，幸得数字营销顾问David Sottimano协助修改，使其可作为单个脚本运行。以上即为其提供的index.js文件。
同时感谢营销技术专家兼工程师Michelle Robbins，她在近期网络研讨会中向我介绍了紧凑预测树。