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

  • 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
Manual Chapter
Table of Contents | << Previous Chapter | Next Chapter >>

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.

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

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

Task list

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 minification, reordering, and 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.

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.

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.

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.

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