Front End Optimization (10.

5 +)

2015-01-16 04:55:03 UTC

2015 Citrix Systems, Inc. All rights reserved. Terms of Use | Trademarks | Privacy Statement

Contents

Front End Optimization (10.5 +)...........................................................................

How Front End Optimization Works ...........................................................

Configuring Front End Optimization...........................................................

Sample Optimization ............................................................................

11

ns-feo-con
Due to technical difficulties, we are unable to display this topic. Citrix is currently fixing
this problem. In the meantime, you can view this topic online:
http://support.citrix.com/proddocs/index.jsp?lang=en&topic=/ns-optimization-10-5-map/n
s-feo-con.html

How Front End Optimization Works

After the NetScaler ADC receives the response from the server:
1. The ADC forwards the response to the client.
2. The ADC optimizes the HTML content, and then applies the specified optimization rules
to the embedded objects.
For example, a NetScaler 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.

For the details of optimization rules, see Front End Optimization.

3. The ADC rewrites the embedded objects and saves the optimized content in the cache.
4. For subsequent requests, the ADC fetches the optimized objects from the cache, not
from the server, and forwards the response to the client.

Configuring Front End Optimization

To configure front end optimization, start with creating actions that specify the
optimization rules to be applied to the embedded objects.
Note: Optionally, specify the front end optimization global settings.
After configuring the action, create a policy that specifies the rule on which optimization
must be performed and associate the action with the policy.
Now, bind the policy to a load balancing or content switching virtual server of type HTTP or
SSL. You can also bind the policy globally so that it applies to all traffic that flows through
the NetScaler.
Note: The NetScaler ADC evaluates front end optimization policies at request time only,
and not at response time.
Prerequisites
Front end optimization requires the integrated caching feature of NetScaler 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.

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
2. Add a front end optimization action.
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
3. [Optional] Specify the front end optimization global settings.

Configuring Front End Optimization

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
4. Create a front end optimization policy.
add feo policy <name> <rule> <action>
Example: To add a front end optimization policy and associate it with the above
specified allact 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.
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
6. Save the configuration.
save ns config

Configuring Front End Optimization

Configuring front end optimization by using the

configuration utility
1. Enable the front end optimization feature using the command line interface.
2. Create a front end optimization action.
Navigate to Optimization > Front End Optimization > Actions, click Add and create a
front end optimization action by specifying the relevant details.
3. [Optional] Specify the front end optimization global settings.
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.
Navigate to Optimization > Front End Optimization > Policies, click Add and create a
front end optimization policy by specifying the relevant details.
5. Bind the policy to a load balancing or content switching virtual server.
a. Navigate to Optimization > Front End Optimization > Policies.
b. Select a front end optimization policy and click Policy Manager.
c. Under Front End Optimzation Policy Manager, bind the front end optimization policy
to a load balancing or content switching virtual server.

Parameter Descriptions (of commands listed in the

CLI procedure)
enable ns feature
No parameters provided in this topic or the command has no parameters. View
description(s) in command reference Top

add feo action

name
The name of the front end optimization action.
imgShrinkToAttrib
Shrink image dimensions as per the height and width attributes specified in the <img>
tag.
imgGifToPng
7

Configuring Front End Optimization

Convert GIF image formats to PNG formats.
View description(s) in command reference Top

set feo parameter

cacheMaxage
Maximum period (in days), for cache extension.
Default value: 30
Minimum value: 0
Maximum value: 360
JpegQualityPercent
The percentage value of a JPEG image quality to be reduced. Range: 0 - 100
Default value: 75
Maximum value: 100
cssInlineThresSize
Threshold value of the file size (in bytes) for converting external CSS files to inline CSS
files.
Default value: 1024
Minimum value: 1
Maximum value: 2048
View description(s) in command reference Top

add feo policy

name
The name of the front end optimization policy.
rule
The rule associated with the front end optimization policy.
action
The front end optimization action that has to be performed when the rule matches.
View description(s) in command reference Top

Configuring Front End Optimization

bind lb vserver
name
Name for the virtual server. Must begin with an ASCII alphanumeric or underscore (_)
character, and must contain only ASCII alphanumeric, underscore, hash (#), period (.),
space, colon (:), at sign (@), equal sign (=), and hyphen (-) characters. Can be changed
after the virtual server is created.
CLI Users: If the name includes one or more spaces, enclose the name in double or single
quotation marks (for example, "my vserver" or 'my vserver').
policyName
Name of the policy to bind to the virtual server.
View description(s) in command reference Top

bind cs vserver
name
Name of the content switching virtual server to which the content switching policy
applies.
policyName
Name of the content switching policy to bind to the content switching virtual server Must
begin with an ASCII alphanumeric or underscore (_) character, and must contain only
ASCII alphanumeric, underscore, hash (#), period (.), space, colon (:), at sign (@), equal
sign (=), and hyphen (-) characters. Cannot be changed after a policy is created.
To bind a content switching policy, you need a content-based virtual server (content
switching virtual server) and an address-based virtual server (load balancing virtual
server). You can assign multiple policies to the virtual server pair.
Note: When binding a CS virtual server to a default LB virtual server, the Policy Name
parameter is optional.
The following requirement applies only to the NetScaler CLI:
If the name includes one or more spaces, enclose the name in double or single quotation
marks (for example, "my policy" or 'my policy').
View description(s) in command reference Top

bind feo global

policyName
Name of the front end optimization policy.
View description(s) in command reference Top

Configuring Front End Optimization

save ns config
No parameters provided in this topic or the command has no parameters. View
description(s) in command reference Top

10

Sample Optimization
The following table lists some examples of content optimization actions that are applied on
HTML content and the embedded objects within the HTML content.
Optimization rule

Sample

Collapse white spaces within an

HTML page

Before:
<title>Hello,

world! </title>

After:
<title>Hello, world!</title>
Combine CSS

Before:
<link rel="stylesheet" type="text/css" href="sheet/abc.css">
<link rel="stylesheet" type="text/css" href="sheet/xyz.css">
After:
<link rel="stylesheet" type="text/css" href="sheet/abc.css+xyz.css">

11

Sample Optimization
Inline CSS

Before
<html>
<head>
<link rel="sheet" href="abc.css"/>
</head>
<body>
<div class="abc xyz"/>
Hi!
</body>
</html>
Note: abc.css contains
.Alice {location: Australia;}
.Tom {location: Asia;}

After
<html>
<head>
<style>
.Alice {location: Australia;}
.Tom {location: Asia;}
</style>
</head>
<body>
<div class="abc xyz">
Hi!
</div>
</body>
</html>

12

Sample Optimization
Move CSS to head

Before:
<html>
<head>
</head>
<body>
<script src="abc.js" type="text/javascript"></script>
<div class="monday tuesday>
Hi!
</div>
<style type="text/css">
.foo { day: wednesday; }
</style>
<link rel="stylesheet" type="text/css" href="styles/all_styles.css">
</body>
</html>
After:
<html>
<head>
<style type="text/css">
.foo { day: wednesday; }
</style>
</head>
<body>
<script src="abc.js" type="text/javascript"></script>
<div class="monday tuesday>
Hi!
</div>
<link rel="stylesheet" type="text/css" href="styles/all_styles.css">
</body>
</html>

Minify JavaScript

Before:
/* Remove this comment */
document.write("abc " + state);
state += 1; // Update this.
After:
document.write("abc "+state);state+=1;

13

Sample Optimization
Convert linked JavaScript to
inline JavaScript

Before
<html>
<head>
<script type="text/javascript" src="abc.js"></script>
</head>
<body>
<div>
Hi!
</div>
</body>
</html>
Note: abc.js contains
/* contents of abc JavaScript file */
After
<html>
<head>
<script type="text/javascript">
/* contents of abc JavaScript file */
</script>
</head>
<body>
<div class="abc">
Hi!
</div>
</body>
</html>

14