Search
+1 (617) 7782998 | info@iispeed.com

Defer javascript execution

Defer Javascript until after the page loads to avoid render blocking and parallize processing

  • Visitors should get the fastest loading pages possible, and should not have to wait for any javascripts to finish processing before being displayed the content that they came to see.
  • Deferring JavaScript is part of the content prioritization optimizations, and helps SEO efforts as page speed as considered a ranking factor. This optimization weights especially heavy for Mobile search engine optimization efforts. Derring JavaScript optimizes the time it takes for the page load event to fire which probably is what is measured to weigh into the ranking considerations on search engines.
  • Content prioritization and optimizing the above the fold render time is what Google's PageSpeed Insights recommends, and makes both your visitors and the search engine's crawlers happy.

How it works

Defer JavaScript tries to defer JavaScript execution until page load. It defers this by changing the type and src attributes of <script> elements on the HTML page to pagespeed_orig_type and pagespeed_orig_src respectively. It also adds a new type attribute whose value is set to text/psajs. A window.onload handler is added to the HTML, which executes all the deferred scripts.

Defer JavaScript doesn't defer a script tag if it has the pagespeed_no_defer attribute. This is useful when a script tag needs to be executed while loading the page. For example, a script tag may be updating the main content dynamically as a slideshow of images in the visible content of the page. Usage:

<script pagespeed_no_defer="">...</script>

Example

The effect of this optimization can be observed our PageSpeed Examples page.

Limitations

Parent variables accessed from an iframe may be undefined when Defer JavaScript is used.

All JavaScript code is downloaded and executed serially, whereas without Defer JavaScript the browser tries to download JavaScripts in parallel as much as possible.

Calls to document.write fail in cases where they span multiple script tags. An example is:

<script>document.write('<div>')</script>
<span></span>
<script>document.write('</div>')</script>
Without Defer JavaScript the span would have been created inside the div. With Defer JavaScript the span would have been created outside and after the div.

Any document.body.appendChild calls will always get appended to the bottom of the page.

Requirements

Defer JavaScript is supported for browser versions of chrome 15+, safari5+, Firefox3.6+ and IE9+. For other user agents the filter is turned off automatically.

Risks

Warning: Defering JavaScript can often dramatically improve the rendering speed of a site, but careful evaluation is required to ensure the site continues to operate properly. The limitations are described below.

This filter is considered high risk. JavaScript whose logic depends on the state of the DOM may behave differently when Defer JavaScript is turned on.

If JavaScript is written to expect user actions before the page is loaded completely, such scripts will behave differently with Defer JavaScript. For example, if an alert is placed at the start of the page, then with Defer JavaScript the alert would appear only after the page is loaded completely.

User actions that trigger events such as onclick onkeypress will not be handled until the page is rendered completely.

Content in the page will reflow if visible elements are inserted in the page by JavaScript.

The pagespeed_no_defer attribute can change the order of script execution because those scripts using it are executed inline while those not using are deferred. This can cause errors if these scripts depend on each other in any way.

Configuration

For PageSpeed on IIS and PageSpeed on ATS

Enable
pagespeed EnableFilters defer_javascript

Disable
pagespeed DisableFilters defer_javascript

Risk Classification

High

Examples that demonstrate optimization in real time are available here.

PageSpeed optimization, powered by the official Google PageSpeed SDK

Share View Comments
.
Some content on this website represents a modified version of the official Google PageSpeed documentation