In NetScaler 11.1
In Citrix ADC
In All products
Product Documentation
In NetScaler 11.1
In Citrix ADC
In All products
NetScaler 13.0 NetScaler 12.1 NetScaler 12.0 NetScaler 11.1 NetScaler 10.5
View PDF

Front end optimization

July 8, 2020
Contributed by:  S S

Note: Front end optimization is available if you have an Advanced or Premium Citrix ADC license and are running Citrix ADC release 10.5 or later.

The HTTP protocols that underlie web applications were originally developed to support transmission and rendering of simple web pages. New technologies such as JavaScript and cascading style sheets (CSS), and new media types such as Flash videos and graphics-rich images, place heavy demands on front-end performance, that is, on performance at the browser level.

The Citrix ADC front end optimization (FEO) feature addresses such issues and reduces the load time and render time of web pages by:

  • Reducing the number of requests.
  • Required for rendering each page.
  • Reducing the number of bytes in page responses.

Simplifying and optimizing the content served to the client browser.

You can customize your FEO configuration to provide the best results for your users. Citrix ADCs support numerous web content optimizations for both desktop and mobile users. The following tables describe the front-end optimizations provided by the FEO feature, and the operations performed on different types of files.

Optimizations performed by the FEO feature

Web Optimization Problem What Citrix ADC FEO feature does Benefits
Inlining Client browsers often send multiple requests to servers for loading external CSS, images, and JavaScript associated with the web page. CSS inline, JavaScript inline, CSS combine Loading the external CSS, images, and JavaScript inline with the HTML files improves page-rendering time. This optimization is beneficial for content that will be viewed only once, and for mobile devices that have limited cache sizes.
Minification Data fetched from servers includes inessential characters such as white spaces, comments, and newline characters. The time that browsers spend in processing such data creates website latency. CSS minification, JavaScript minification, Removal of HTML comments Minified files consume less bandwidth and avoid the latency caused by special processing.
Image optimization Mobile browsers often have slow connection speeds and limited cache memory. Downloading images on mobile clients consumes more bandwidth, processing time, and cache space, resulting in web site latency. JPEG optimization, CSS image inlining, Image shrink-to attributes, GIF to PNG conversion, HTML image inlining, WebP image conversion, JPEG, GIF, PNG to JPEG-XR image conversion Reduces the image to the size indicated in image tag by Citrix ADC, enabling client browsers to load images faster.
Repositioning Inefficient processing of external CSS, images, and JavaScript increases page-load time. Image lazy loading, CSS move to Head, JavaScript move to end Repositions HTML elements, to reduce rendering time for web pages and enable client browsers to load the objects faster.
Connection Management Many browsers set limits on the number of simultaneous connections that can be established to a single domain. This can cause browsers to download webpage resources one at a time, resulting in higher browsers time. Domain sharding Overcomes the connection limitation, which improves page-rendering time by enabling client browsers to download more resources in parallel.

Web Optimizations performed on different file types:

Citrix ADC can perform web optimizations on CSS, images, Javascript, and HTML. For more information, see Web Optimizations pdf.

Note: The front end optimization feature supports ASCII characters only. It does not support the unicode character set.

How front end optimization works

After the Citrix ADC receives the response from the server:

  1. Parses the contents of the page, creates an entry in the cache (wherever applicable), and applies the FEO policy.

    For example, a Citrix ADC can apply the following optimization rules:

    • Remove white spaces or comments present within a CSS or JavaScript.
    • Combine one or more CSS files to one file.
    • Convert GIF image format to PNG format.
  2. Rewrites the embedded objects and saves the optimized content in the cache, with a different signature than the one used for the initial cache entry.
  3. For subsequent requests, fetches the optimized objects from the cache, not from the server, and forwards the responses to the client.

Remove extraneous information such as white spaces and comments.

** Remove extraneous information such as white spaces and comments.

The period during which the browser can use the cached resource without checking to see if fresh content is available on the server.

Configure front end optimization

Optionally, you can change the values of the front end optimization global settings. Otherwise, begin by creating actions that specify the optimization rules to be applied to the embedded objects.

After configuring actions, create policies, each with a rule specifying a type of request for which to optimize the response, and associate the actions with the policies.

Note: The Citrix ADC evaluates front end optimization policies at request time only, not at response time.

To put the policies into effect, bind them to bind points. You can bind a policy globally, so that it applies to all traffic that flows through the Citrix ADC, or you can bind the policy to a load balancing or content switching virtual server of type HTTP or SSL. When you bind a policy, assign it a priority. A lower priority number indicates a higher value. The Citrix ADC applies the policies in the order of their priorities.

Prerequisites

Front end optimization requires the Citrix ADC integrated caching feature to be enabled. Additionally, you must perform the following integrated caching configurations:

  • Allocate cache memory.
  • Set the maximum response size and memory limit for a default cache content group.

For more information on configuring integrated caching, see Integrated Caching.

Note: The term Integrated Cache can be interchangeably used with AppCache; note that from a functionality point of view, both terms mean the same.

To configure front end optimization by using the command line interface

At the command prompt, do the following:

  1. Enable the front end optimization feature.

enable ns feature FEO

  1. Create one or more front end optimization actions.

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

Example: To add a front end optimization action for converting images in GIF format to PNG format and to extend cache expiry period:

add feo action allact -imgGifToPng -pageExtendCache

  1. [Optional] Specify non-default values for front end optimization global settings.

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

Example: To specify the cache maximum expiry period:

set feo parameter -cacheMaxage 10

  1. Create one or more front end optimization policy.

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

Example: To add a front end optimization policy and associate it with the above specifiedallact action:

`>add feo policy pol1 TRUE allact

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

5. Bind the policy to a load balancing or content switching virtual server, or bind it globally.

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

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

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

Example: To apply the front end optimization policy to a virtual server named “abc”:

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

Example: To apply the front end optimization policy for all the traffic reaching the ADC:

> bind feo global pol1 100 -type REQ_DEFAULT

  1. Save the configuration. save ns config

Configure front end optimization by using the GUI

  1. Navigate to Optimization > Front End Optimization > Actions, click Add and create a front end optimization action by specifying the relevant details.
  2. [Optional] Specify the front end optimization global settings.
  3. Navigate to Optimization > Front End Optimization, and on the right-pane, under Settings, click Change Front End Optimization settings and specify the front end optimization global settings.
  4. Create a front end optimization policy.
  5. Navigate to Optimization > Front End Optimization > Policies, click Add and create a front end optimization policy by specifying the relevant details.
  6. Bind the policy to a load balancing or content switching virtual server.
    1. Navigate to Optimization > Front End ptimization > Policies.
    2. Select a front end optimization policy and click Policy Manager.
    3. Under Front End Optimzation Policy Manager, bind the front end optimization policy to a load balancing or content switching virtual server.

Verify front end optimization configuration

The dashboard utility displays summary and detailed statistics in tabular and graphic formats. You can view the FEO statistics to evaluate your FEO configuration.

Optionally, you can also display statistics for an FEO policy, including the number of hits that the policy counter increments during policy based FEO.

Note For more information about statistics and charts, see the Dashboard help on the Citrix ADC appliance.

View FEO statistics by using the command line interface

At the command prompt, type the following commands to display a summary of FEO statistics, FEO policy hits and details, and detailed FEO statistics, respectively:

  • stat feo Note: The stat feo policy command displays statistics only for advanced FEO policies.
  • show feo policy name
  • stat feo -detail

View FEO statistics on Citrix ADC dashboard

In the dashboard GUI, you can:

  • Select Front End Optimization to display a summary of FEO statistics.
  • Click the Graphical View tab to display the rate of requests processed by the FEO feature.

Sample optimization:

Refer to the Sample pdf for some examples of content optimization actions that are applied on HTML content and the embedded objects within the HTML content.

Front end optimization

July 8, 2020
Contributed by:  S S

In this article

Edit this article