2023.07.28[Fri]
[シリーズ連載] SpeedCurve 利用例

SpeedCurve 利用例 サードパーティーの影響を調査する

  • パフォーマンス

目次

茄子です。
前回は Custom Metrics について解説しました ( https://techlab.q-co.jp/articles/97/ )
今回はサードパーティーの影響の調査・除外の設定について解説します。

サードパーティーとは

念のため言葉の確認をしておきます。
ここでいうサードパーティーとは、サイト内の行動計測や集計・プラグイン機能として読み込んでいるチャットやシミュレーター等のためのスクリプト及び画像等のアセットのことです。
これらのリソースは多くの場合、提供している会社の配信用ドメイン(CDN)から配信されています。またページの機能としては必須ではないものも多いため、その影響を排除した状態のパフォーマンスを継続的に計測することで、自分たちのコントロールできる範囲でのパフォーマンスを確認することができます。
あるいはサードパーティーの有無によってどれだけの差があるかを知ることで、機能の取捨選択に役立つというケースもあるかもしれません。

設定

設定はドメインのフィルターによってされます。
まずは FIRST PARTY に自分たちのサイトのドメインを登録します。画像等のアセットが別ドメインである場合は、それも登録します。

次に REQUEST GROUPS にサードパーティーを登録します。登録しなくてもファーストパーティーかそうでないかは判別されますが、ここに登録すると個別にまとめてくれて、Favoritesなどのフィルターに利用することができます。

Settingsからも登録できますが、Synthetic -> First & Third Party に行くと分類可能なものに関しては分類がされていて、その右手に TRACK HISTORY というボタンがあるのでこちらを押すと勝手に追加してくれますのでこちらが楽です。

最初のSettingsから行くとこのような設定画面になります。
Known Third Partyとして多くのこういったスクリプトの提供サービスは登録されていますのでプルダウンから選択します。

FIRST PARTYとは切り離したい機能や、配信サーバーを自作したりしている場合には、Custom Request Group も設定可能です。ここの設定はドメインの先のパスやファイル名一致でも可能です。

確認

Synthetics -> First & Third Party タブにはこのような比較のグラフ、追跡しているサードパーティーに関するグラフが作られます。以前の記事 ( https://techlab.q-co.jp/articles/92/#First%20&%20Third%20Party ) も参考にしてください。

Favorites で自作できるグラフでは、このようにRequest Groupのデータを使うことができます。

サードパーティーを除外した計測を実施する

ここまでは、計測結果の中でサードパーティーを分類する、という切り口でした。
それとは別に、初めからサードパーティーを除外した計測を実施することも可能です。ただし、追加で実施する場合その分のテスト回数を必要とするので、コストは増えます。

このように Settings -> SITES のURLのリストにある </> マークの中で設定が可能です。見せられない部分が多いですが、内容は block  flag=1 でクエリストリングによるフラグ発火のスクリプトをブロックし、blockDomainsExcept  first-party.com としてファーストパーティー以外のドメインのリソースをブロックしています。
(公式ドキュメント: https://support.speedcurve.com/docs/synthetic-scripting-guide#request-manipulation )

(こちらも見せられない部分が多くてすみません)
こういったスクリプトは遅延読み込みになっていることが多いので Web Vitals や、この画像内の INITIAL の数値には大きな影響はありませんが、DOM Content Loaded で 0.2 ~ 0.3秒、Fully Loaded で 10~15 秒の差がありました。特に Full Load 周りの指標がぼやけずに見られることは、コードの変更の細かい影響が非常にわかりやすくなります。

終わりに

サードパーティーの影響を確認する方法を紹介しました。

設定方法も簡単ですので、お使いの際は是非設定しておくことをおすすめします。

Share

  1. 01 SpeedCurve 利用例 概要編 >
  2. 02 SpeedCurve 利用例 Syntheticsタブ編 >
  3. 03 SpeedCurve 利用例 Favoritesタブ編 >
  4. 04 SpeedCurve 利用例 計測結果の比較 >
  5. 05 SpeedCurve 利用例 デプロイのタイミングに線を引く >
  6. 06 SpeedCurve利用例 Custom Metrics >
  7. 07 SpeedCurve 利用例 サードパーティーの影響を調査する
Shopify Flowを利用して、購入があった際条件を付けオーダーにタグをつける方法Shopify FlowでMAを組み顧客にメールを送らなくても、Shopify標準のMA機能で顧客にメールを送ることは可能