Schema App JavaScript Deployment Overview

Introduction

Among the Schema App integration options, the primary method of deploying Schema Markup is through a JavaScript library, highlight.js. Once the JavaScript is integrated, it deploys markup to:

• Single URLs authored through the Schema App Editor
• Multiple URLs configured in Schema App’s Highlighter

Schema App's Highlighter templates map HTML elements to Schema.org types and properties on page load, generating and rendering markup dynamically. The script is designed to run in the background and does not block other browser requests on page load, allowing browsers to load other resources at the same time.

Highlight.js and its data is loaded asynchronously and does not impact the customer experience, specifically the First Paint, Time to First Byte, Largest Contentful Paint. The script is designed to run in the background and does not block other browser requests on page load, allowing browsers to load other resources at the same time. When the script executes its functionality, render blocking time, does have some impact on First Input Delay.

JavaScript Integration Methods

Schema App provides multiple JavaScript Integration Methods. In addition to directly including the JavaScript library in your page templates, you may use Tag Managers such as:

• Tealium
• Adobe Tag Manager
• Google Tag Manager

Over time, Schema App continues to add CMS plugins with options to integrate JavaScript as well.

When choosing your integration method, you should consider some of the benefits that Schema App offers through our JavaScript, such as: 

• Availability of markup for Google’s robots (or other crawler consumers)
• The immediacy of the markup when content changes
• Minimal impact to page performance
• Access to features like Linked Entity Recognition and Conditional Tags

JavaScript Page Impact

Render Blocking Time

At Schema App, we integrate with your website to add structured data. We know that part of your consideration on integration methods is the page performance impact or what is more specifically called impact to rendering time. To help you with this decision, we’ve put together details on how our JavaScript works and the impact to common metrics. We’ve also included the test results we’ve done to help estimate the impact to your page. 

The highlight.js script blocks other components from rendering while it is building the Schema Markup JSON-LD. This is necessary because to evaluate xpaths we need to have the page in a steady state so any scripts mutating the DOM must be stalled otherwise we can’t accurately pull in the content you have marked up. When we say the script is asynchronous we are referring to how highlight.js is loaded and how highlight.js makes any network requests (some examples are: the highlighter configuration, Linked Entity Recognition, and video markup). This means that, while other scripts and items are loading on your page, the highlight.js script isn’t blocking anything.

Impact on page performance metrics

Below are some common metrics that are used to measure page performance. As a general rule of thumb the faster these metrics are the better highlight.js performs so it’s beneficial to our scripts as well if a site performs well. We try to reduce our impact but we do have some impact on certain metrics.

Total Rendering Time Impact of JavaScript Integration Methods

The way to read the numbers below is in terms of the total time the highlight.js will block DOM mutations. The number does not necessarily indicate it will block all at once, rather it will perform xpath evaluations and in between doing that, other scripts can execute. Similarly, the Highlighter leaves a few hundred milliseconds in between its subsequent executions, allowing other scripts to execute. Subsequent executions will only have an impact if areas marked up have mutated or if highlights evaluated prior did not produce a value.

Below is the analysis of the different JavaScript integration methods available with Schema App.  We’ve outlined some of these considerations in the Pros and Cons below. 

For a comprehensive comparison of all integrations, see Performance Impact of Integration Methods.

NOTE: JavaScript may not be the best integration option for websites with existing page performance issues. If the JavaScript options outlines above do not provide an adequate solution, you may want to consider the Crawler + Server-side Integration.

Our Testing Approach

Below is the approach we took to measure the page speed impact. 

1. Collect a sample of  page URLs for various client sites that use Highlight JS, and a list that use Highlight JS + Caching (i.e. view the window.schema_highlighter contents in the console, and if it contains 'output:false' this is a JS + Caching page).

2. For each URL, open an incognito session in your Google Chrome, and navigate to the Performance tab in Developer Tools 
   

3. Go to https://cdn.schemaapp.com/javascript/highlight.js and copy all the content on the page

4. Press the record button in the top left, and paste the contents of highlight.js into the console below.

5. Monitor the console to see when the markup has been logged (i.e., at the sendPageStateToFirehose() step), and stop recording.

6. Find the length in ms of each task performed by highlight.js by scrolling through the Performance tab timeline, and get the sum of each task. Please note that depending on the template and URL, there may be many additional calls to evaluateTemplates().
   

7. Repeat steps 3-5 a few times for each URL you test, and record the average of each URL.

8. Collect each result and calculate the average overall.
   
   If you're interested in assessing the impact of Schema App on page speed, you can go to the Performance tab and click the "Reload" button. Once the run is complete, go to the Bottom-Up tab and search for "Highlighter". The highlight.js activity will show you the total time.
   

Ways to reduce page speed impact

If Highlight.js fails to match when evaluating a Highlighter template on the first attempt, the library continues to monitor the page in case the content is loaded asynchronously by JavaScript after highlight.js has run. In this process, there is a wait time that retries several times, decaying over time. This may cause an impact on page performance if the library needs to retry often.  Here are a number of ways our Customer Success team reduces the number of retries, thereby reducing page speed impact.

1. Conditional tags: The use of conditional tags checks the existence of certain content before marking it up. If the content does not exist, the page is not marked up, and there will be no need for retries. 

2. Avoid marking up slow-loading content such as widgets and embedded reviews.

3. Ensure markup is always up-to-date. If the content has been removed or the template for a page has been changed on the website, please notify your Customer Success Manager so we can remove the associated content. This can be found during Maintenance and Monitoring based on errors, warnings, or missing properties. 

Where an initial attempt to evaluate Highlighter templates may take a given amount of time (e.g. 5 - 20ms), each retry duration would be a fraction of the initial attempt (e.g. 1 - 3 ms). 

Additional Resources

• Schema App Integrations
• Performance Impact of Integration Methods
• Schema App Crawler Deployment Overview

Javascript Integration through Tag Manager

• Highlighter Deployment Options with JavaScript
• Considerations for JavaScript Tag Deployment (Google Tag Manager; Adobe Launch)
• How to: Set Up Google Tag Manager for Schema App