Applies To:
Show Versions
BIG-IP AAM
- 14.1.3, 14.1.2, 14.1.0, 14.0.1, 14.0.0, 13.1.5, 13.1.4, 13.1.3, 13.1.1, 13.1.0, 13.0.1, 13.0.0
Overview: Accelerating JavaScript, HTML, cascading style sheet, and inline image files
You can improve acceleration by reducing the number and sizes of cascading style sheet (CSS), HTML, and JavaScript files transferred across a network, and by improving the ability for browsers to render content. The BIG-IP® system uses inlining and concatenation of CSS, HTML, and JavaScript files to reduce the number and 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.
Task summary
About minification of JavaScript, HTML, and cascading style sheet content
- minifying linked JavaScript, HTML, and CSS files
- minifying embedded JavaScript, HTML, and CSS content within HTML pages
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.
About concatenation of JavaScript and cascading style sheet files
Concatenation combines a specified list of JavaScript (JS) or Cascading Style Sheet (CSS) files into a single concatenated file, which reduces the number of requests and responses, and the time required to transfer serialized files.
For each user-defined policy, you can specify lists of JS URLs and lists of CSS URLs for concatenation. Listings in each URL list appear in the specified order.
During the process of concatenation, the first JS and CSS URL within the HTML file that is specified in a JS or CSS URL list is replaced with the optimized URL, and each subsequent specified JS and CSS URL is removed. The TTL of a concatenated response is determined by the earliest expiration of the concatenated objects.
About DNS prefetching
DNS prefetching for HTTP
DNS prefetching improves page load time on HTML5 compliant browsers by resolving domain names to an IP address prior to a browser requesting content from third parties. When DNS pre-fetching headers are inserted by the BIG-IP® system, HTML5-compliant browsers can do DNS resolution of dynamic links in the background while other items are being downloaded. This feature allows users to configure lists of DNS prefetch domains by inserting the following link tag in the head of an HTML document:
<link rel="dns-prefetch" href="http://www.siterequest.com// ">
DNS prefetching for HTTPS
By default, DNS prefetching is always turned off for pages served in HTTPS to avoid leaking information about which particular document is served. Turning on Force Injection on HTTPS enables DNS prefetching specifically for the domains listed in a domain list. Turning on HTTPS Automatic Page Prefetch turns on DNS prefetching for the entire document served. Force Injection on HTTPS must be enabled in order to enable HTTPS Automatic Page Prefetch. Administrators are able to configure turning on and off DNS prefetching when serving over an HTTPS connection by inserting the following head tag:
<meta http-equiv="x-dns-prefetch-control" content="on">
