How To Guides

How To Guides

Deferred JavaScript

Overview

9.13 introduces the ability to defer all miva native JavaScript so that it gets loaded last on the page. This help the site to load faster for customers and will also get your site a higher page speed score in tools like Google Page Speed Insights

Implementation & Code Changes

There are three areas which require manual changes to allow the JavaScript to load deferred.

1. Searchfields (Preview as you type search box)
2. Attribute Machine
3. Image Machine

Searchfields

There is a checkbox under User Interface -> Search Settings -> Search Preview Settings for "Defer Loading of JavaScript"

Checking this box causes the follwoing files to get the async and deferred tags added:

• runtime.js
• runtime_ui.js
• ajax.js
• mivaevents.js

These files get loaded in the Head Tag on the page and look like this:

The async and defer tags added the the end of each file force them to be loaded last even though they appear higher in the page.

Additionally, when this setting is enabled the core JavaScript used for the search preview will be output with the async / defer tags added:

Also notice that the customizable inline javascript template related to searchfields now gets wrapped in an callback so that it does not run until the main searchfields javascript file is loaded. The searchfield main js file has an onLoad event which gets called once the file has fully loaded.

Attribute Machine

There are three changes required to make Attribute Machine use the new deferred JavaScript

1. Update Head Tag Item
2. Update Body Tag Item
3. Remove Script Tags From JavaScript Template

Update Head Tag Item

Navigate to PROD. In the main page template in the head tag find and update the following:

Update Body Tag Item

Then further down in the same main page template find and update the following:

Update JavaScript Template

Finally, remove the opening and closing <script> tags from the Head JavaScript Template

The result of all three of these changes is that the core Attribute Machine JS file now gets output with async / defer tags appended to it and the customizable JS template now gets output in a callback so it does not run until the main JS file is loaded:

Note: You'll want to repeat all three steps above on PATR (Missing Product Attributes) as that page also implements Attribute Machine.

Image Machine

Image Machine has 2 similar changes as attribute machine to allow it to output the JavaScript Deferred.

1. Update Head Tag Item
2. Update Body Tag Item
3. Remove Script Tags From JavaScript Template

Update Head Tag Item

Navigate to PROD. In the main page template in the head tag find and update the following:

Update Body Tag Item

On PROD -> Product Display Layout change the following:

Important Note: If you are using image machinge on category or search pages you will also have to make these changes there as well. The item tags will look like this:

Remove Script Tags From JavaScript Template

This results in the following output:

Mailchimp & Combination Facets

If you are using Mailchimp or Combination Facets, you manually add the async and defer attributes under JavaScript Asset Management.

A full list of template changes for 9.13 can be found here.