Webアプリケーションのページ上の特定の要素にガイドを添付できます。PendoはCSSセレクターを使用して、Webアプリケーションページの要素にガイドを添付します。
この記事では、Pendoのインストールスクリプトとブラウザ拡張機能の両方に関連するCSSセレクターを使用して、Webアプリケーションの要素にガイドをターゲットする方法について説明します。
CSSルールはフィーチャーのタグ付けにも使用されますが、パフォーマンスに関する考慮事項は同じではありません。フィーチャーのタグ付け用のCSSルールの詳細については、フィーチャーのタグ付けでCSSセレクターを使用するを参照してください。
CSSによるガイドのターゲティング
CSSセレクターがページ上の目的の要素を正しく識別していることを確認します。
- ガイドをプレビューして、目的の位置に表示されることを確認します。
- 複数の要素の一致や不安定なセレクターに関する警告が表示されていないことを確認します。セレクターはすぐに評価される可能性がありますが、予期しない結果が返され、ガイドの表示結果に一貫性がなくなる可能性があります。
CSSセレクターの速度
ターゲット要素に正常に添付されるガイドを構築した後、セレクターの速度を考慮します。CSSセレクターはアプリケーション内で頻繁に評価され、ガイドをいつどこに表示するかを決定します。遅いセレクターが多すぎると、アプリケーション内でガイドの表示に問題が発生したり、パフォーマンスに問題が生じる可能性があります。
ビジュアルデザインスタジオでは、選択範囲の下に色分けされたCSS強度バーが表示され、セレクターの速度に関するフィードバックがリアルタイムで提供されます。アプリケーションのパフォーマンスへの影響を最小限に抑えるために、各CSSセレクターが緑色のバー3本で検証されることを目指します。緑色に色分けされた3つの強度バーを持つCSSセレクターは、処理時間が5ミリ秒未満です。このCSSセレクターの処理時間により、Pendoはアプリケーションのパフォーマンスに目立った影響を与えることなく、多くのガイドを管理できます。
ガイドが常に表示されない場合や、Pendoの存在によってアプリケーションが遅くなっているように見える場合、セレクターの速度が原因である可能性があります。
CSSセレクターの速度を改善する
CSSセレクタは一般に高速です。しかし、:contains ルール、カスタムHTML属性セレクター、シャドウルート内の要素など、一部のセレクターはPendoの処理に時間がかかることがあります。さらに、ページサイズが大きくなると、これらのセレクターを評価する時間もそれに応じて長くなる可能性があります。
これらのCSSセレクターをより効率的にDOMクエリに改善する方法はいくつかあります。これらのセレクターが遅くなる理由は、一致するものを見つけるためにページ全体を評価する必要がある場合があるからです。セレクターの特異性を高めると、その処理の一部を回避することができます。
Pendoのパフォーマンスの観点から、以下のCSSセレクター効率の階層を考慮してください。
- ID、例えば
#nav - クラス、例えば
.button - タグ名、例えば
div - 要素コンビネーター、例えば
div spanや.header > .button - シャドウルート内の要素、例えば
div::shadow li - カスタムHTML属性、例えば
[data-value=100 - ルールが含まれる場合、例えば
div:contains("Welcome")
CSS セレクターのパフォーマンスを向上させるには、この階層の上位にあるセレクターを使用してみてください。CSSセレクターをより具体的にすることで、ターゲット要素を見つけるための不要なページ計算を回避できます。
例：
例えば、現在のバッジのCSSセレクタールールがa:contains("New feature")でパフォーマンスバーで赤い場合、階層を評価して、使える要素や上位の階層があるかどうかを確認しましょう。
この例では、<a> 要素が頻繁に変更される動的なクラスを持っているため、このセレクターを使用した可能性があります。この場合、要素は常に<ul>内のリンクタグであり、セレクターをul a:contains("New feature")に変更できます。この変更後、セレクターのパフォーマンスが向上し、強度インジケーターが黄色に移動します。
ページ上のすべての要素にわたってテキストを一致させる代わりに、<ul>タグ内にある<a>タグのみを評価するようになりました。改善されましたが、CSS セレクターの速度を向上させるためにさらにできることがいくつかあります。
例えば、この特定の要素がナビゲーションバーに配置されている場合、代わりに固定クラス名を持つ祖先要素に基づくCSSセレクター.nav-bar a:contains("New feature")を選択することができます。これは、CSSセレクターのパフォーマンスを緑に向上させます。
ビジュアルデザインスタジオのパフォーマンスバーを使用することで、セレクターの組み合わせを試し、ページに最も効率的なルールを開発することができます。遅いセレクタータイプを完全に回避する必要はありません。遅い選択タイプと高速なセレクターを組み合わせることで、ページのパフォーマンスが大幅に向上する可能性があります。