使用云眼 Web 实验提高网站性能的最佳做法

云眼About 7 min

使用云眼 Web 实验提高网站性能的最佳做法

本主题介绍如何：

  • 解决页面加载缓慢和页面闪烁等性能问题
  • 改善访客体验

云眼 Web 实验努力确保代码段为网站访问者提供最佳体验，但一些最佳做法可以帮助确保最佳网站性能。如果担心性能问题或页面闪烁，请查看以下指南。

如果想了解更多信息，请查看[关于优化客户端实验性能的白皮书]。

使用正确的代码段放置

预览模式使用的代码段与活动站点上生产中使用的代码段不同，预览代码段往往比生产代码段慢。因此，不建议在查看优化 Web 实验的性能影响时使用预览模式。

将代码段作为第一个脚本标记放在页面头部，但放在所有字符集声明、元标记和 CSS 包含之后。

如果在版本代码中使用 jQuery ，并且 jQuery 已经本机包含在页面上，请将代码段直接放在 jQuery 之后。

在服务器响应中包含代码段

将代码段直接包含在服务器的响应中。请勿通过任何代码管理器传递代码段，也不要通过客户端脚本注入代码段。

同步部署代码段

同步安装代码段有助于防止页面闪烁。异步加载消除了页面加载时间的任何延迟，但大大增加了闪烁的机会。详细了解同步和异步代码段加载，包括两种加载类型的优缺点。

使用预连接和预加载标签

将预连接和预加载标签添加到头部顶部的"cdn.eyeofcloud.comopen in new window"，以实现更快的同步加载。建议使用预连接提前打开与事件终结点的连接。 event.eyeofcloud.com

在下面的示例中，替换为代码段。 //cdn.eyeofcloud.com/js/12345678.js

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="preload" href="//cdn.eyeofcloud.com/js/12345678.js" as="script">
            <link rel="preconnect" href="//event.eyeofcloud.com">
            <!-- Add other meta information here -->
            <!-- Add stylesheets here -->
            <script src="//cdn.eyeofcloud.com/js/12345678.js"></script>
            <!-- Add scripts and other content here -->
        </head>
        <body>

遵循 jQuery 建议（如果网站使用 jQuery）

云眼 Web 实验代码段不需要运行 jQuery ，因此可以从代码段和网站中删除 jQuery 。如果在 jQuery 中编写实验代码，则必须使 jQuery 库1.11.3（最小值）可用于代码段。

建议在页面上同步地在云眼 Web 实验代码段上方原生包含 jQuery 。云眼 Web 实验可以使用此库立即执行，而不会闪烁页面。

缩小任何 jQuery 并从快速、受信任的来源加载它。此加载时间对页面加载时间和实验执行几乎没有影响。如果愿意，可以继续使用 jQuery ，但这不是必需的。

使用 holdEvents 和 sendEvents API

将 云眼 Web 实验的 holdEvents 和 sendEvents API 与 hold/send 事件 API 结合使用，在初始页面加载时保留事件，并在页面加载完成后以合并的批次形式发送事件。这始终减少了页面加载时间。

如果选择不使用 holdEvents 和 sendEvents API ，建议使用预连接。

增加缓存过期时间 （TTL）

将代码段的缓存过期时间（TTL）增加到对实验速度有意义的时间，例如10或20分钟。较长的缓存过期时间可提高站点性能。默认设置为2分钟。

尽量减少项目中的页面和事件数量

默认情况下，在项目中定义的所有页面和事件都包含在基本代码段中。此外，定义要包含在自定义摘要中的所有网页都将在网页上投放的代码段中，无论它们是否附加到正在运行的实验中。

为了帮助保持较小的整体代码段大小，请避免创建不希望运行实验的网页，并归档所有未使用的网页。尝试将项目中的页面和事件数量限制为执行有效实验所需的最小值。还可以通过自动页面修剪从代码段中排除未使用的页面。

摘要不会包含未使用的受众群体和实验，因此归档未使用的受众群体和实验不会影响代码段大小。此外，将 A/B 测试作为独立的实验对象或在个性化广告系列下运行不会减小代码段大小或提高效果。所有实验和广告系列在代码段中都使用相同的 JSON 数据模型表示。每个实验限制为最大 1,048,572 字节。

使用自定义代码段

创建自定义代码段以减小代码段的大小并提高网站性能。

使用自定义代码和扩展在云眼 Web 实验中提供实质性更改

增加代码段大小会降低网站性能。代码段大小增加的主要原因之一是使用未缩小的 JavaScript, CSS 或 jQuery 代码，如果正在测试大量的网站更改（如页面重新设计），则可以将其添加到网站中。

目前，有三个选项可用于在云眼 Web 实验中提供实质性的网站更改。在最小化代码段大小方面，最佳选择是：

  • 使用可视化编辑器进行更改，而不是大量的 JavaScript 、 CSS 或 jQuery 代码

  • 缩小大块自定义版本代码或共享代码

  • 使用大量未缩小的 JavaScript 、 CSS 或 jQuery 代码（此选项增加片段大小最多）

若要在云眼 Web 实验中提供大量站点更改，建议结合使用自定义代码和扩展来同步（用于首屏更改）和异步（用于首屏更改）部署不同的代码块：

  • 使用扩展将首屏更改定义为同步

  • 使用自定义版本代码将剩余的页面更改定义为异步

可以同步或异步加载到实验中调用的扩展的每个实例。根据需要创建任意数量的扩展，在一个版本中使用多个扩展，甚至在一个版本中多次使用同一扩展。

使用显示/隐藏元素在云眼 Web 实验部分之外提供实质性更改的选项通常对于减小代码段大小和提高性能更有效。

使用显示/隐藏元素在优化 Web 实验之外提供实质性更改

要在云眼 Web 实验之外提供实质性的网站更改（如页面重新设计），例如在重定向实验中，最佳选择是在本机 HTML 页面中嵌入所有图像和 HTML 块。然后，使用显示/隐藏创建要测试的页面的版本。

另一种选择是使用云眼 Web 实验重定向测试。还可以将大型代码块作为缩小代码托管在外部公共文件中，并将其调用到实验中。

在成功减少代码段大小和提高性能方面，这些选项中的每一个都比使用自定义代码和扩展的选项更有效，以便在云眼 Web 实验中提供实质性更改。

使用分析来定位测试

使用分析工具识别代表访问者的流量，以便可以针对大多数访问者优化网站。例如，如果发现大部分流量来自移动设备，则可以将实验定位到移动用户。

使用时间进行首次绘画，而不是使用时间进行交互

如果要测量跳出率，请使用首次绘制时间（TTFP）指标，而不是交互时间（TTI）。TTFP 可以测量，而 TTI 的可测量性较低，因为许多因素会影响访问者在页面准备就绪后与页面实际交互的时间。

Last update:
Contributors: zhangweixue,“zhangweixue”