F5 Logo MyF5
Search
  1. MyF5 Home
  2. Knowledge Centers
  3. BIG-IP AAM
  4. BIG-IP Acceleration: Implementations
  5. Accelerating JavaScript and Cascading Style Sheet Files
Manual Chapter : Accelerating JavaScript and Cascading Style Sheet Files

Applies To:

Show Versions Show Versions

BIG-IP AAM

  • 12.1.5, 12.1.4, 12.1.3, 12.1.2, 12.1.1, 12.1.0, 11.6.5, 11.6.4, 11.6.3, 11.6.2, 11.6.1
Manual Chapter
Table of Contents | << Previous Chapter | Next Chapter >>

Accelerating JavaScript and Cascading Style Sheet Files

Overview: Accelerating cascading style sheet, JavaScript, and inline image files

You can improve acceleration by reducing the number and 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 and concatenation of CSS 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

Minifying cascading style sheet and JavaScript files

You can use minification to remove whitespaces, comments, and unnecessary special characters from CSS and JavaScript files.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Expand the Policy Tree to a branch node or leaf node, and click the node.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. Select the Enable Javascript and CSS Minification check box.
  7. Click Save.
Minification is enabled to remove whitespaces, comments, and unnecessary special characters from CSS and JavaScript files.

Task summary for prefetching cascading style sheet, JavaScript, and inline image files

Perform these tasks to prefetch cascading style sheet (CSS) files, JavaScript files, and embedded images in externally linked CSS files.

Task summary

Specifying cascading style sheet, JavaScript, and image URL resources

You can specify the URL resources for cascading style sheet (CSS), JavaScript, and inline image files to use in inlining.
  1. On the Main tab, click Acceleration > Web Application > Policies > URL Resources .
    The URL Resources screen displays lists of URLs available to reorder.
  2. In the CSS URLs setting, add the CSS URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a CSS file, and click Add.
      For example, http://www.siterequest.com/css_file.css.
      The URL appears in the CSS URLs list.
  3. In the JavaScript URLs setting, add the JavaScript URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a JavaScript file, and click Add.
      For example, http://www.siterequest.com/javascript_file.js.
      The URL appears in the JavaScript URLs list.
  4. In the Image URLs setting, add the image URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for an image file, and click Add.
      For example, http://www.siterequest.com/image_file.png.
      The URL appears in the Image URLs list.
  5. Click Save.
Each CSS and JavaScript URL that you specified appears in the CSS URLs list and the JavaScript URLs list, respectively.

Creating Domain Lists for DNS Prefetching

DNS prefetching improves page load time by resolving domain names to an IP address before the user tries to follow a link. When DNS prefetching headers are inserted by the end client, HTML5 compliant browsers can do DNS resolution of dynamic links in the background while other items are being downloaded.
  1. On the Main tab, click Acceleration > Web Application > Policies > Domain Lists .
    The Policies screen displays a list of existing user-defined domain lists.
  2. In the Name field, type a descriptive and useful name for the domain list.
  3. Select a Sync Folder, if applicable.
  4. Type optional information that might help you later identify the associated video advertisement policy.
  5. Type domain names that you would like to add to your domain list.
  6. Click Save.
A domain list has been created to add to a DNS Prefetching acceleration profile.

Configuring DNS prefetching

Before you can enable DNS prefetching, you must create a Domain List. (You can do this by going to Acceleration > Web Application > Policies > Domain Lists > New Domain List.)
You can enable DNS prefetching to improve 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 prefetching 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.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Click a node in the Policy Tree.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. In the Advanced Assembly area, configure DNS Prefetch settings, as applicable.
    1. Select the Enable DNS Prefetch check box.
    2. For the Domain Lists setting, select a domain in the Available field, and move the entry to the Selected field using the Move button.
    3. Select the Force Injection on HTTPS check box.
    4. Select the HTTPS Automatic Page Prefetch check box.
    DNS prefetching is typically disabled on pages served over HTTPS to avoid leaking information about which particular document is served. Turning on Force Injection on HTTPS will enable DNS prefetching specifically for the domains listed in a domain list. Turning on HTTPS Automatic Page Prefetch will turn on DNS prefetching for the entire document served. Force Injection on HTTPS must be enabled in order to enable HTTPS Automatic Page Prefetch.
  8. Click Save.
  9. Publish the acceleration policy.
    1. Click Publish.
    2. In the Comment field, type a description.
    3. Click Publish Now.
DNS Prefetching is enabled to resolve domain names to an IP address before the user follows a link.

Task summary for inlining cascading style sheet, JavaScript, and inline image files

Perform these tasks to inline cascading style sheet (CSS) files, JavaScript files, and embedded images in externally linked CSS files.

Task summary

Specifying cascading style sheet, JavaScript, and image URL resources

You can specify the URL resources for cascading style sheet (CSS), JavaScript, and inline image files to use in inlining.
  1. On the Main tab, click Acceleration > Web Application > Policies > URL Resources .
    The URL Resources screen displays lists of URLs available to reorder.
  2. In the CSS URLs setting, add the CSS URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a CSS file, and click Add.
      For example, http://www.siterequest.com/css_file.css.
      The URL appears in the CSS URLs list.
  3. In the JavaScript URLs setting, add the JavaScript URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a JavaScript file, and click Add.
      For example, http://www.siterequest.com/javascript_file.js.
      The URL appears in the JavaScript URLs list.
  4. In the Image URLs setting, add the image URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for an image file, and click Add.
      For example, http://www.siterequest.com/image_file.png.
      The URL appears in the Image URLs list.
  5. Click Save.
Each CSS and JavaScript URL that you specified appears in the CSS URLs list and the JavaScript URLs list, respectively.

Inlining cascading style sheet files

Before you can apply inlining to cascading style sheet (CSS) files, you need to specify the CSS files in the URL Resources list.
You can use inlining to replace specified URLs to CSS files with an inline copy of the document.
Note: In order for content to be inlined, the inlined content must expire later than the parent content.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Expand the Policy Tree to a branch node or leaf node, and click the node.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure CSS inlining settings, as applicable.
    1. Select the Enable CSS Inlining check box.
    2. For the CSS Inlining URLs setting, select a CSS URL entry in the Available field, and move the entry to the Selected field using the Move button.
  8. Click Save.
  9. Publish the acceleration policy.
    1. Click Publish.
    2. In the Comment field, type a description.
    3. Click Publish Now.
CSS inlining is enabled to replace the specified URLs to CSS files with an inline copy of the document.

Inlining JavaScript files

Before you can apply inlining to JavaScript files, you need to have specified the JavaScript files in the URL Resources list.
You can use inlining to replace specified URLs to JavaScript files with an inline copy of the document.
Note: In order for content to be inlined, the inlined content must expire later than the parent content.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Expand the Policy Tree to a branch node or leaf node, and click the node.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure the JavaScript inlining settings, as applicable.
    1. Select the Enable JavaScript Inlining check box.
    2. For the JavaScript Inlining URLs setting, select a JavaScript URL entry in the Available field, and move the entry to the Selected field using the Move button.
  8. Click Save.
  9. Publish the acceleration policy.
    1. Click Publish.
    2. In the Comment field, type a description.
    3. Click Publish Now.
JavaScript inlining is enabled to replace the specified URLs to JavaScript files with an inline copy of the document.

Inlining image files

Before you can apply inlining to image files, you need to specify the image files in the URL Resources list.
You can use image inlining to replace specified URLs to external images with image data.
Note: In order for content to be inlined, the inlined content must expire later than the parent content.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Expand the Policy Tree to a branch node or leaf node, and click the node.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure the image inlining settings, as applicable.
    1. Select the Enable Image Inlining check box.
    2. In the Image Inlining Max Size field, type a preferred maximum size for an image.
      You can adjust the maximum size according to the maximum image size that you want to relocate. The default is 2 KB.
    3. For the Image Inlining URLs setting, select an image inlining URL entry in the Available field, and move the entry to the Selected field using the Move button.
  8. Click Save.
  9. Publish the acceleration policy.
    1. Click Publish.
    2. In the Comment field, type a description.
    3. Click Publish Now.
Image inlining is enabled to replace specified URLs to external images with image data.

Task summary for reordering cascading style sheet and JavaScript files

Perform these tasks to reorder cascading style sheet (CSS) files and JavaScript files in externally linked CSS files.

Task summary

Specifying cascading style sheet and JavaScript resources

You can specify the URL resources for cascading style sheet (CSS) and JavaScript files to use in reordering.
  1. On the Main tab, click Acceleration > Web Application > Policies > URL Resources .
    The URL Resources screen displays lists of URLs available to reorder.
  2. In the CSS URLs setting, add the CSS URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a CSS file, and click Add.
      For example, http://www.siterequest.com/css_file.css.
      The URL appears in the CSS URLs list.
  3. In the JavaScript URLs setting, add the JavaScript URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a JavaScript file, and click Add.
      For example, http://www.siterequest.com/javascript_file.js.
      The URL appears in the JavaScript URLs list.
  4. Click Save.
Each CSS and JavaScript URL that you specified appears in the CSS URLs list and the JavaScript URLs list, respectively.

Reordering URLs to cascading style sheet files

Before you can reorder URLs with this procedure, you must first specify each cascading style sheet (CSS) URL that you want to reorder in the HTML page in the URL Resources list.
You can enable progressive rendering of content as an HTML page loads, by configuring a user-defined policy to reorder links to CSS files.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Click a node in the Policy Tree.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure CSS reordering settings, as applicable.
    1. Select the Enable CSS Reordering check box.
    2. In the CSS Reorder Cache Size field, type a preferred cache size.
      You can adjust the cache size according to the number of CSS links that you want to relocate. The default is 8 KB.
    3. For the CSS Reorder URLs setting, select a CSS URL entry in the Available field, and move the entry to the Selected field using the Move button.
    Important: If you configure CSS reordering in a policy with Enable Content Assembly on Proxies enabled, you cannot also select the Always proxy requests for the node option. If you select the Always proxy requests for the node option and enable Enable Content Assembly on Proxies, then CSS reordering becomes disabled.
  8. Click Save.
  9. Publish the acceleration policy.
    1. Click Publish.
    2. In the Comment field, type a description.
    3. Click Publish Now.
CSS information is moved to the start of the HTML page (preceding the </head> element) to enable progressive rendering as the page loads.

Reordering URLs to JavaScript files

Before you can use this procedure, you must first specify each JavaScript URL that you want to reorder in the HTML page in the URL Resources list.
You can give browsers the ability to download objects in parallel, by configuring a user-defined policy that reorders links to JavaScript files.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Click a node in the Policy Tree.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure JavaScript reordering settings, as applicable.
    1. Select the Enable JavaScript Reordering check box.
    2. In the JavaScript Reorder Cache Size field, type a preferred cache size.
      You can adjust the cache size according to the number of JavaScript links that you want to relocate. The default is 8 KB.
    3. For the JavaScript Reorder URLs setting, select a JavaScript URL entry in the Available field, and move the entry to the Selected field using the Move button.
  8. Click Save.
  9. Publish the acceleration policy.
    1. Click Publish.
    2. In the Comment field, type a description.
    3. Click Publish Now.
JavaScript information is moved to the end of the HTML page (preceding the </body> element), giving browsers the ability to download objects in parallel. Exceptions to reordering JavaScript information include JavaScript URLs and scripts that use document.write to insert content for the page.

Task summary for concatenating cascading style sheet and JavaScript files

Perform these tasks to concatenate Cascading Style Sheet (CSS) files and JavaScript (JS) files in externally linked CSS files.

Task summary

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.

Specifying Cascading Style Sheet and JavaScript resources

You can specify the URL resources for Cascading Style Sheet (CSS) and JavaScript (JS) files to use in concatenating.
  1. On the Main tab, click Acceleration > Web Application > Policies > URL Resources .
    The URL Resources screen displays lists of URLs available to reorder.
  2. In the CSS URLs setting, add the CSS URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a CSS file, and click Add.
      For example, http://www.siterequest.com/css_file.css.
      The URL appears in the CSS URLs list.
  3. In the JavaScript URLs setting, add the JavaScript URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a JavaScript file, and click Add.
      For example, http://www.siterequest.com/javascript_file.js.
      The URL appears in the JavaScript URLs list.
  4. Click Save.
Each CSS and JavaScript URL that you specified appears in the CSS URLs list and the JavaScript URLs list, respectively.

Creating a Cascading Style Sheet concatenation set

You can create a concatenation set for Cascading Style Sheet (CSS) URLs to use in optimization.
  1. On the Main tab, click Acceleration > Web Application > Policies > Concatenation Sets .
    The Concatenation Sets screen displays lists of URLs available to reorder.
  2. In the CSS Set Name field, type the name of the concatenation set.
  3. For the Concatenation Set Type setting, select CSS.
  4. For the URLs setting, select a CSS URL entry in the Available CSS URLs field, and move the entry to the Selected field using the Move button.
  5. Click Save.
Each CSS URL that you specified for optimization appears in the concatenation set.

Concatenating Cascading Style Sheet files

Before you can apply concatenation to Cascading Style heet (CSS) files, you need to specify each CSS URL in a Concatenation Set.
Concatenation combines a specified list of 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.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Click a node in the Policy Tree.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure the CSS Concatenation Sets, as applicable.
    1. Select the URL Concatenation check box.
    2. For the CSS Concatenation Sets setting, select a URL Concatenation entry in the Available field, and move the entry to the Selected field using the Move button.
The selected CSS Concatenation Sets combine the specified list of cascading style sheet (CSS) files into a single concatenated file.

Creating a JavaScript concatenation set

You can create a concatenation set for JavaScript (JS) URLs to use in optimization.
  1. On the Main tab, click Acceleration > Web Application > Policies > Concatenation Sets .
    The Concatenation Sets screen displays lists of URLs available to reorder.
  2. In the JavaScript Set Name field, type the name of the concatenation set.
  3. For the Concatenation Set Type setting, select JavaScript.
  4. For the URLs setting, select a JavaScript URL entry in the Available JavaScript URLs field, and move the entry to the Selected field using the Move button.
  5. Click Save.
Each JavaScript URL that you specified for optimization appears in the concatenation set.

Concatenating JavaScript files

Before you can use this procedure, you need to specify each JavaScript URL that you want to optimize in a Concatenation Set.
Concatenation combines a specified list of JavaScript (JS) files into a single concatenated file, which reduces the number of requests and responses, and the time required to transfer serialized files.
  1. On the Main tab, click Acceleration > Web Application > Policies .
    The Policies screen displays a list of existing acceleration policies.
  2. Click the name of a user-defined acceleration policy.
  3. Expand the Policy Tree to a branch node or leaf node, and click the node.
  4. From the Matching Rules menu, choose Acceleration Rules.
  5. On the menu bar, click Assembly.
    The screen refreshes to show assembly options.
  6. From the Content Assembly Options list, select Advanced.
  7. Configure the JavaScript Concatenation Sets, as applicable.
    1. Select the URL Concatenation check box.
    2. For the JavaSscript Concatenation Sets setting, select a URL Concatenation entry in the Available field, and move the entry to the Selected field using the Move button.
The selected JavaScript Concatenation Sets combine the specified list of JavaScript files into a single concatenated file

Implementation results

The system is configured to accelerate cascading style sheet, JavaScript, and inline image files.

Table of Contents | << Previous Chapter | Next Chapter >>
Contact Support Contact Support

Have a Question?

Support and Sales >

About F5

Education

F5 Sites

Support Tasks




©2023 F5 Networks, Inc. All rights reserved.


Trademarks Policies Privacy California Privacy Do Not Sell My Personal Information