Applies To:
Show Versions
BIG-IP AAM
- 11.5.10, 11.5.9, 11.5.8, 11.5.7, 11.5.6, 11.5.5, 11.5.4, 11.5.3, 11.5.2, 11.5.1
Accelerating JavaScript and Cascading Style Sheet Files
Overview: Accelerating cascading style sheet, JavaScript, and inline image files
You can improve acceleration by reducing the sizes of cascading style sheet (CSS) and JavaScript files transferred across a network, and by improving the ability for browsers to render content. The BIG-IP® system uses inlining of CSS and JavaScript files to reduce the sizes of files transferred across a network, thus improving the acceleration of traffic, and uses minification, and reordering to improve the speed that browsers render content.
About minification of JavaScript and cascading style sheet content
Minification removes extraneous white spaces, comments, and unnecessary special characters from JavaScript and cascading style sheet (CSS) files, which reduces the file sizes. The BIG-IP® system supports two types of minification: minifying linked JavaScript and CSS files, and minifying embedded JavaScript and CSS content within HTML pages. The BIG-IP system caches only the minified documents.
About reordering cascading style sheet and JavaScript URLs and content
Reordering cascading style sheet (CSS) and JavaScript links within an HTML document can accelerate the perceived time in which a browser renders a web page. Although the actual time required to download the page remains approximately the same, the perceived time to display the page is faster.
When a CSS link appears at the top of the page, preceding the </head> element, a browser can progressively render the page to quickly display the content, especially beneficial for users who access content-rich pages by means of slower Internet connections.
When a JavaScript link appears at the end of the page, preceding the </body> element, a browser can download multiple components in parallel for each hostname and accelerate the perceived page rendering. You can specify each JavaScript link that you prefer to relocate to the end of the page, and, consequently, accelerate the perceived page rendering. Exceptions to reordering JavaScript information include JavaScript URLs and scripts that use document.write to insert content for the page.
About inlining documents and image data
Inlining replaces specified URLs to JavaScript and cascading style sheet (CSS) files with an inline copy of the document, and replaces specified URLs to external images with image data.
Within an HTML document, a specified link to an external JavaScript or CSS file is replaced with the style sheet content.
If a client requests an HTML document for which the response header contains a Cache-Control: private, Cache-Control: no-store, or Vary: User-Agent header, the BIG-IP® system removes the inline content from the response, and caches the inline content.
Inlining Conventions
When you use inlining functionality, the following conventions provide best results.
- Inlining objects typically include stable objects that change infrequently, objects that remain unchanged for several weeks.
- The file size for an inlining object is typically small, less than 2 KB.
- When an inlined object changes on the origin web server, the respective URL resource entry must be updated on the URL Resources page.
- For a user-defined acceleration policy that includes inlining functionality, you will want to use the default HTTP lifetime settings.
- On the Lifetime screen, configure the settings as follows:
- The duration of WebAccelerator Cache Settings must be less than Client Cache Settings.
- The expiration times for the inlined-content Client Cache Settings must occur concurrently with or after the parent Client Cache Settings.
