Product Documentation

Front End Optimization

Jun 18, 2015
Note: Front end optimization is available if you have an Enterprise or Platinum NetScaler license and are running NetScaler 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 NetScaler 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. NetScaler 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 NetScaler 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 NetScaler, 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

The following table lists the web optimizations that the NetScaler ADC performs on CSS, Images, JavaScript, and HTML:

Object

Optimization

CSS

  • Minify* linked CSS files.
  • Combine multiple linked CSS files that are present within the <head> tag into a single CSS file.
  • Convert linked CSS files to inline CSS files.
  • Convert CSS import rule to linked CSS.
    Note: This optimization works if you have not defined the scope and media attributes for the <import> tag and when the <import> tag immediately follows the <style> tag.
  • Within a linked CSS file, convert linked images to inline images.
  • Move a CSS present within the <body> tag of an HTML page to the <head> tag.
    Note: The <head> tag must already be present within the HTML script.

Images

  • Optimize JPEG images by removing extraneous bytes.
  • Reduce image size by weakening the image quality to a value specified in FEO parameters.
  • Image shrink to attributes.
  • Convert linked images to inline images.
    Note: For animated images in GIF format, only this optimization is supported.
  • Convert non-animated images in GIF format to PNG format.
  • Reduce the image size to that specified on the web page, if the size specified on the web page is smaller
  • Convert images in GIF, PNG, JPEG format to WebP format
  • Convert images in JPEG format to JPER-XR format
  • Lazy loading.

JavaScript

  • Minify* linked JavaScript
  • Convert linked JavaScript to inline JavaScript.
  • Move JavaScript present in the <body> tag to the end of the <body> tag.
    Note: The size of the <body> tag must be lesser than 64 Kbytes.
  • Extend cache expiry period.**
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 NetScaler 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 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.
  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.