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.
What is the actual impact? Render Blocking Time.
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 request (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.
Will it impact page performance key 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 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 Integration methods available with Schema App. We’ve outlined some of these considerations in the Pros and Cons below.
At Schema App, we are committed to working with your teams to identify the best integration for your unique tech stack.
Our Testing Approach
Below is the approach we took to measure the page speed impact.
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).
For each URL, open an incognito session in your Google Chrome, and navigate the Performance tab in Developer tools
Press the record button in the top left, and paste the contents of highlight.js into the console below.
Monitor the console to see when the markup has been logged (i.e. at the sendPageStateToFirehose() step), and stop recording.
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().
Repeat steps 3-5 a few times for each URL you test, and record the average of each URL.
Collect each result and calculate the average overall.
Ways to reduce page speed impact
Conditional tags: 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.
Avoid marking up slow loading content such as widgets and embedded reviews.
Ensure markup is always up to date. If 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).
Adobe Experience Manager Connector
AEM Connector: How it works
Was this article helpful?
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
We appreciate your effort and will try to fix the article