Pendo uses CSS selectors in web application installs to attach guides to elements on a page. This article covers the specific performance concerns of using CSS for guide targeting, on applications with the Pendo install script or browser extension installations.
CSS rules are also used for Feature tagging, but don't have the same performance considerations. For more information about CSS rules for Feature tagging, Using CSS selectors in Feature tagging.
Guide targeting with CSS
First, make sure that your selector is correctly identifying the intended element on your page. You can verify this by previewing your guide to confirm that it displays in the desired position. Also, check that you aren't getting any warnings about multiple element matches or unstable selectors. A selector might evaluate quickly but still return unexpected results, leading to inconsistent guide display results.
After building a guide that successfully attaches to a target element, it's important to consider the speed of the selector. CSS selectors are evaluated frequently in your application to determine when and where to show the guide. Too many slow selectors can cause guide display issues or performance problems within your application.
The CSS strength bar in Visual Design Studio provides real-time feedback on the performance of your selectors. Your goal should be to have each selector in the green, meaning less than 5ms processing time, for the smallest impact on your application. At this level, the Pendo agent can manage many guides without a noticeable impact on your application’s performance.
If you find that your guides are consistently failing to display or if your application seems slower due to Pendo’s presence on the page, the performance of your selectors may be the cause.
Improving CSS selector performance
CSS selectors are generally extremely fast. However, some types of selectors can take longer for the Pendo agent to process, such as :contains rules, custom HTML attribute selectors, and elements in shadow roots. As page size increases, the time it takes to evaluate these selectors can scale accordingly.
There are several ways to improve these selectors for more efficient DOM queries. The reason these selectors can be slow is that they may need to evaluate the entire page to find matches. If you increase the specificity of the selector, you can skip some of that heavy processing.
From a Pendo performance standpoint, consider the selector efficiency hierarchy below:
- IDs (for example,
#nav) - Classes, for example,
.button) - Tag names (for example,
div) - Element combinators (for example,
div span,.header > .button) - Elements in shadow roots (for example,
div::shadow li) - Custom HTML attributes (for example,
[data-value=100) - Contains rules (for example,
div:contains("Welcome"))
To improve the performance of your selector, try using selectors higher on this list. Being more specific with your CSS can help bypass unnecessary page calculations when locating your target element.
Example
For example, imagine you have a badge with a contains rule to match a specific element’s text. Your current selector is a:contains("New feature") and is currently red in the performance bar.
You might have used this selector because this <a> element has a dynamic class that changes frequently. In this case, the element is always a link tag inside of an unordered list <ul>, and you can safely change your selector to ul a:contains("New feature"). After this change, the selector's performance improves and moves the strength indicator into yellow.
Instead of matching the text across every element on the page, you are now only evaluating the <a> tags that are within a <ul> tag. This is better, though you want to make this selector even faster before you publish the guide.
You realize that this specific element is located in the navigation bar, so you try a selector based on the ancestor element with a fixed class name: .nav-bar a:contains("New feature"). With that, you’re in the green!
By using the performance bar in the Designer, you can experiment with selector combinations to build the most efficient rule for your page. You don’t need to entirely avoid the slower selector types, though combining them with faster selectors can greatly improve page performance.