Live Assist Performance Troubleshooting – CBA Live Assist Help Center

Common Causes of Performance Issues
Analyzing Results of Performance Improvements
- Screenshot Performance
- Screenshot Frequency
Basic Pseudo-Element Styles

Common Causes of Performance Issues

The following are the most common causes of performance issues when using Live Assist, along with some possible ways to remedy the issues.

Important: You need to fully test any of these techniques before you use them in a production environment, to make sure that Live Assist continues to render an accurate representation of the web page in all supported browsers.

Large DOM

The Live Assist screen-capturing mechanism involves analyzing each node in the DOM, which means that larger pages take longer to process. In order for Live Assist to determine that they don't need to be included in the screenshot, even elements that are invisible or off-screen need to be analyzed.
If the reason for the large DOM is that there are a lot of hidden, invisible, or off-screen elements, you can improve the performance by telling Live Assist that the elements, and all of their children, don't need to be analyzed or rendered. You can achieve this by adding the assist-screenshare-ignore CSS class to each element.

Example: In the following snippet, the second div and its child element are not processed. If there is a situation where the element is moved on-screen, you can programmatically remove the assist-screenshare-ignore class, and Live Assist then renders the element as normal.

<body>
<div style="top: 20px; left: 20px">
<span>This element is rendered by Live Assist</span>
</div>
<div class="assist-screenshare-ignore" style="top: -1000px; left: -1000px">
<span>This element is ignored by Live Assist</span>
</div>
</body>

Large Number of Pseudo-Elements

When rendering pseudo-elements (for example, ::before or ::after), Live Assist has to analyze every CSS attribute, in case the attribute has been applied to the element. It is often the case that a pseudo-element only has a few commonly-used styles applied (for example, border, background, or font) and there is no reason to check for the rest. In this case, it is possible to tell Live Assist to work in basic pseudo-element rendering mode, where it only checks for a predefined list of pseudo-element styles, rather than all of them. This setting is applied to the configuration object that is passed into AssistSDK.startSupport as follows:

var config = {
"destination": "agent1",
"basicPseudoElementRendering": true
};
AssistSDK.startSupport(config);

See also: The complete list of CSS attributes that form the basic pseudo-element styles. If a web page contains pseudo-elements whose styles mostly fall within this list, but with a few exceptions, you can specify the basicPseudoElementRendering property as an array of style attributes to add to the list, rather than a boolean.

Example: The following configuration tells Live Assist to render pseudo-elements using the basic list, and to also include box-shadow.

var config = {
"destination": "agent1",
"basicPseudoElementRendering": ["box-shadow"]
};
AssistSDK.startSupport(config);

Constantly-Mutating Elements

Live Assist triggers a screenshot whenever something in the DOM changes. If there are elements that change often, this might trigger enough screenshots to negatively affect the usability of the page.

For example, there may be a menu where each item's border color changes on mouse-over, or a form where an input element's class-list changes every time the user types a character. You can tell Live Assist to ignore these class-list changes by adding the class names to the mutation blacklist. This prevents insignificant temporary DOM mutations from triggering screenshots.

You can set this blacklist as part of the configuration object that is passed into AssistSDK.startSupport as follows:

var config = {
"destination": "agent1",
"mutationBlacklist": {
"classes": ["menu-item-active", "form-element-modified"]
}
};
AssistSDK.startSupport(config);

For any class name that appears in the classes array, the addition or removal of this class to or from any element on the page no longer triggers a screenshot. If you want to blacklist specific elements, regardless of which attributes are changing, you can use the elements array in the blacklist. For example, there may be an insignificant element whose background is constantly changing, and there is no reason for the agent to see it every time it changes. You can add the element's ID to the blacklist as follows:

var config = {
"destination": "agent1",
"mutationBlacklist": {
"classes": ["menu-item-active", "form-element-modified"],
"elements": ["changing-background-el"]
}
};
AssistSDK.startSupport(config);

If there are one or more elements that are constantly being animated, you can blacklist the animation by name, as follows:

var config = {
"destination": "agent1",
"mutationBlacklist": {
"classes": ["menu-item-active", "form-element-modified"],
"elements": ["changing-background-el"],
"animations": ["spinning-animation"]
}
};
AssistSDK.startSupport(config);

Note: The mutation blacklist doesn't prevent elements from appearing in the screenshot—it just stops these DOM mutations from being the reason that a screenshot is triggered.

Analyzing Results of Performance Improvements

In order to accurately determine whether the changes have any effect, you can analyze the messages that are output to the consumer-side browser console log.

Screenshot Performance

The first two issues mentioned above concern the time taken to perform a single screenshot. It is possible to configure Live Assist to record this by setting the trace property as follows:

var config = {
"destination": "agent1",
"trace": true
};
AssistSDK.startSupport(config);

The timing is then printed to the console each time Live Assist renders the screen, for example:

Parsing took: 114ms
Capturing took: 123ms

Screenshot Frequency

The third issue mentioned above concerns the frequency at which Live Assist triggers screenshots. The following console message occurs each time this happens, so it can be used to determine whether screenshots are happening too often.

Capture screen and send

Basic Pseudo-Element Styles

Attribute names ending in a hyphen are shorthand for the whole set. For example, background- includes background-color, background-size, and background-image.

background-
border-
bottom
color
counter-
direction
display
font-
height
left
letter-spacing
line-height
margin-
opacity
padding-
position
right
text-align
text-decoration
text-transform
top
transform
transform-origin
visibility
width