前端优化

注意: 如果您拥有高级或高级 Citrix ADC 许可证,并且正在运行 Citrix ADC 10.5 或更高版本,则可以进行前端优化。

作为 Web 应用程序基础的 HTTP 协议最初是为了支持简单网页的传输和呈现而开发的。JavaScript 和级联样式表 (CSS) 等新技术,以及 Flash 视频和图形丰富的图像等新媒体类型,对前端性能(即浏览器级别的性能)提出了沉重的要求。

Citrix ADC 前端优化 (FEO) 功能可以通过以下方式解决此类问题并缩短网页的加载时间和渲染时间:

  • 减少请求的数量。
  • 渲染每个页面需要。
  • 减少页面响应中的字节数。

简化和优化提供给客户端浏览器的内容。

您可以自定义 FEO 配置,为您的用户提供最佳结果。Citrix ADC 支持针对桌面和移动用户的众多 Web 内容优化。下表介绍了 FEO 功能提供的前端优化,以及对不同类型的文件执行的操作。

由 FEO 功能执行的优化

网页优化 问题 Citrix ADC FEO 功能的功能 优势
内联 客户端浏览器通常会向服务器发送多个请求,以加载与网页相关联的外部 CSS、图像和 JavaScript。 CSS 内联,JavaScript 内联,CSS 组合 加载外部 CSS,图像和 JavaScript 内联 HTML 文件可以提高页面渲染时间。这种优化对于仅查看一次的内容以及缓存大小有限的移动设备是有益的。
缩小 从服务器获取的数据包括不必要的字符,如空格、注释和换行符。浏览器用于处理此类数据的时间会导致网站延迟。 CSS 缩小,JavaScript 缩小,删除 HTML 注释 缩小文件消耗更少的带宽,避免特殊处理造成的延迟。
图像优化 移动浏览器通常具有较慢的连接速度和有限的缓存内存。在移动客户端上下载映像消耗更多的带宽、处理时间和缓存空间,从而导致网站延迟。 JPEG 优化,CSS 图像内联,图像缩小到属性,GIF 到 PNG 转换,HTML 图像内联,WebP 图像转换,JPEG,GIF,PNG 到 JPEG-XR 图像转换 将图像减小到 Citrix ADC 的图像标签中指示的大小,从而使客户端浏览器能够更快地加载图像。
重新定位 外部 CSS、图像和 JavaScript 处理效率低下会增加页面加载时间。 图像延迟加载,CSS 移动到头,JavaScript 移动到尾 重新定位 HTML 元素,以减少网页的渲染时间,并使客户端浏览器能够更快地加载对象。
连接管理 许多浏览器对可以建立到单个域的同时连接的数量设置了限制。这可能会导致浏览器一次下载一个网页资源,导致浏览器时间更长。 域分片 克服了连接限制,通过允许客户端浏览器并行下载更多资源,从而缩短了页面呈现时间。

对不同文件类型执行的 Web 优化

Citrix ADC 可以在 CSS、图像、JavaScript 和 HTML 上执行 Web 优化。有关更多信息,请参阅Web 优化pdf。

注意: 前端优化功能仅支持 ASCII 字符。它不支持 unicode 字符集。

前端优化的工作原理

Citrix ADC 收到来自服务器的响应后:

  1. 解析页面的内容,在缓存中创建一个条目(如果适用),并应用 FEO 策略。

    例如,Citrix ADC 可以应用以下优化规则:

    • 删除 CSS 或 JavaScript 中存在的空格或注释。
    • 将一个或多个 CSS 文件合并为一个文件。
    • 将 GIF 图像格式转换为 PNG 格式。
  2. 重写嵌入的对象并将优化的内容保存在缓存中,其签名与用于初始缓存条目的签名不同。
  3. 对于后续请求,从缓存(而不是从服务器)中获取优化的对象,然后将响应转发到客户端。

删除无关信息,例如空格和注释。

浏览器可以在不检查服务器上是否可用的情况下使用缓存资源的时间段。

配置前端优化

或者,您可以更改前端优化全局设置的值。否则,首先创建指定要应用于嵌入对象的优化规则的操作。

配置操作后,创建策略,每个策略都具有指定要优化响应的请求类型的规则,并将操作与策略关联。

注意:Citrix ADC 仅在请求时评估前端优化策略,而不是在响应时评估。

要使策略生效,请将它们绑定到绑定点。您可以全局绑定策略,以便将其应用于流经 Citrix ADC 的所有流量,也可以将策略绑定到 HTTP 或 SSL 类型的负载平衡或内容交换虚拟服务器。绑定策略时,为其分配优先级。优先级数较低表示值越高。Citrix ADC 按照策略的优先级顺序应用策略。

必备条件

前端优化需要启用 Citrix ADC 集成缓存功能。此外,您必须执行以下集成缓存配置:

  • 分配缓存内存。
  • 设置默认缓存内容组的最大响应大小和内存限制。

有关配置集成缓存的更多信息,请参阅集成缓存

注意:“集成缓存”术语可以与 AppCache 互换使用;请注意,从功能角度来看,两个术语的含义相同。

使用命令行界面配置前端优化

在命令提示窗口中执行以下操作:

  1. 启用前端优化功能。

enable ns feature FEO

  1. 创建一个或多个前端优化操作。

add feo action <name> [-imgShrinkToAttrib] [-imgGifToPng] ...

示例:添加用于将 GIF 格式的图像转换为 PNG 格式的前端优化操作,并延长缓存有效期:

add feo action allact -imgGifToPng -pageExtendCache

  1. 为前端优化全局设置[可选] 指定非默认值。

set feo parameter [-cacheMaxage <integer>] [-JpegQualityPercent <integer>] [-cssInlineThresSize <integer>] [-inlineJsThresSize <integer> [-inlineImgThresSize <integer>]

示例:要指定缓存最大有效期:

set feo parameter -cacheMaxage 10

  1. 创建一个或多个前端优化策略。

add feo policy <name> <rule> <action>

示例:添加前端优化策略并将其与上述特殊操作关联:

`>add feo policy pol1 TRUE allact

add feo policy pol1 “(HTTP.REQ.URL.CONTAINS(“testsite”))” allact1`

  1. 将策略绑定到负载平衡或内容交换虚拟服务器,或将其全局绑定。
bind lb vserver <name> -policyName <string> -priority <num>

bind cs vserver <name> -policyName <string> -priority <num>

bind feo global <policyName> <priority> -type <type> <gotoPriorityExpression>

示例:将前端优化策略应用于名为“abc”的虚拟服务器:

> bind lb vserver abc -policyName pol1 -priority 1 -type NONE

示例:对到达 ADC 的所有流量应用前端优化策略:

> bind feo global pol1 100 -type REQ_DEFAULT

  1. 保存配置。保存 ns 配置

使用 GUI 配置前端优化

  1. 导航到“优化”>“前端优化”>“ 作”,单击“添加”,然后通过指定相关详细信息来创建前端优化操作。
  2. [可选] 指定前端优化全局设置。
  3. 导航到“优化”>“前端优化”,然后在右窗格的“设置”下,单击“更改前端优化 设置”,然后指定前端优化全局设置。
  4. 创建前端优化策略。
  5. 导航到“优化”>“前端优化”>“ 略”,单击“添加”,然后通过指定相关详细信息来创建前端优化策略。
  6. 将策略绑定到负载平衡或内容交换虚拟服务器。
    1. 导航到“化”>“前端计时”>“策略”。
    2. 选择前端优化策略,然后单击 策略管理器
    3. 前端优化策略管理器下,将前端优化策略绑定到负载平衡或内容交换虚拟服务器。

验证前端优化配置

仪表板实用程序以表格和图形格式显示摘要和详细统计信息。您可以查看 FEO 统计信息以评估您的 FEO 配置。

或者,您还可以显示 FEO 策略的统计信息,包括策略计数器在基于策略的 FEO 期间增加的点击次数。

注意 有关统计信息和图表的详细信息,请参阅 Citrix ADC 设备上的仪表板帮助。

使用命令行界面查看 FEO 统计信息

在命令提示符下,键入以下命令以分别显示 FEO 统计信息、FEO 策略点击和详细信息以及详细的 FEO 统计信息的摘要:

  • stat feo 注意:统计 feo 策略命令仅显示高级 FEO 策略的统计信息。
  • show feo policy name
  • stat feo -detail

查看 Citrix ADC 仪表板上的 FEO 统计信息

在仪表板 GUI 中,您可以:

  • 选择前端优化以显示 FEO 统计信息摘要。
  • 单击“图形视图”选项卡以显示 FEO 功能处理的请求速率。

示例优化

有关应用于 HTML 内容和 HTML 内容中嵌入的对象的内容优化操作示例,请参阅优化规则示例pdf。