Applies To:

Show Versions Show Versions

Manual Chapter: Accelerating JavaScript and Cascading Style Sheet Files
Manual Chapter
Table of Contents   |   << Previous Chapter   |   Next Chapter >>

Overview: Accelerating Cascading Style Sheet and JavaScript files

Reordering Cascading Style Sheet (CSS) and JavaScript (JS) 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, which is especially beneficial for users who access content-rich pages by means of slower Internet connections.

When a JS link appears at the end of the page, preceding the </body> element, a browser can download multiple components in parallel for each host name and accelerate the perceived page rendering. You can specify each JS link that you prefer to relocate to the end of the page, and, consequently, accelerate the perceived page rendering. Exceptions to reordering JS information include JS URLs and scripts that use document.write to insert content for the page.

Specifying Cascading Style Sheet and JavaScript URL resources

You can specify the URL resources for Cascading Style Sheet (CSS) and JavaScript (JS) files to use in CSS and JS reordering.
  1. On the Main tab, click WebAccelerator > Policies > URL Resources. The URL Resources screen displays lists of Cascading Style Sheet (CSS) and JavaScript (JS) 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 setting, add the JS URLs that you want to use.
    1. In the Name field, type a name.
    2. In the URL field, type a URL for a JS 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 JS URL that you specified appears in the CSS URLs list and the JavaScript URLs list, respectively.
You now need to select each reordering CSS and JS URL for the applicable policy node in the policy's Assembly screen.

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 WebAccelerator > 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 32 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.
  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 (JS) 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 JS files.
  1. On the Main tab, click WebAccelerator > 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 JS links that you want to relocate. The default is 32 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 JS information include JS URLs and scripts that use document.write to insert content for the page.
Table of Contents   |   << Previous Chapter   |   Next Chapter >>

Was this resource helpful in solving your issue?




NOTE: Please do not provide personal information.



Incorrect answer. Please try again: Please enter the words to the right: Please enter the numbers you hear:

Additional Comments (optional)