HTML defer Attribute

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The defer attribute is a boolean that determines whether a script should be fetched only after the HTML has been parsed.

Applicable Elements

The defer attribute can be used with the following elements:

HTML <script> defer Attribute

The <script> tag is used to embed a client-side script, such as JavaScript. It can either be embedded directly or through an external file using the src attribute.

The defer attribute, when used with the <script> element, determines whether the script should be fetched only after the HTML has been parsed.

Syntax

<script defer src="https://cdn.ampproject.org/v0.js"></script>

Usage

  • The defer attribute is a boolean that determines whether the script should be fetched only after the HTML has been parsed.
  • The <script> src attribute must be present. The defer attribute only applies to external scripts.
  • Scripts with the defer attribute will be executed in the exact order they appear in the document.
  • The defer attribute prevents scripts from blocking the document’s rendering until they are executed and evaluated. This improves the performance of the web page.
  • The defer attribute has no effect on module scripts.

There are several ways you can execute an external script:

  • If async only, then they are fetched asynchronously. See the async attribute.
  • If async is not present, but defer is present, then the script is executed after the page has finished parsing.
  • If neither async nor defer is present, then the script is fetched and executed immediately before the browser continues parsing the rest of the page.

Values

Values can include:

  • defer

Examples

An example showing a script being deferred until after parsing of the HTML:

<script defer src="https://cdn.ampproject.org/v0.js"></script>

Specification

The defer HTML specification for the <script> element is as follows:

Browser Support

The defer attribute has the following browser support:

Desktop

ChromeEdgeFirefoxIEOperaSafari
deferYesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
deferYesYesYesYesYesYes