サポート

動画で覚えよう、モニタリング開始のためのセットアップ方法 (文・ビデオ解説)

動画で覚えよう、モニタリング開始のためのセットアップ方法 (ビデオ解説)

目的:ビデオを通じて、最初にSpeedCurveのアカウントを稼働させるためのステップについての理解

Written by Mark Zeman

settings video

翻訳概要:

SpeedCurveを始めるにあたり、ユーザーエクスペリエンスの監視を最大活用できることを考慮して、設定では関心の高いURLとサイトを登録するようにします。

URLの追加

ダッシュボードの一番上には、登録したサイト名が表示されます。ここには、URLを追加できます。 ここでは、The Vergeから別のURLを取得しましょう。ラベルは異なるURLをグループ化します。これはベンチマークで比較できるようにするために重要です。([00:00:30]) また、サイトでベーシック認証がある場合は、ここにユーザー名とパスワードを追加できます。エンタープライズプランの場合、スクリプトにウェブページを追加したり、URLに複数の手順を追加したり、フォームにログイン、カートに商品を追加したりすることができます。それらのすべてのアクションは非常に役に立ちます。([00:01:00])保存して、監視しているURLが複数になりました。

 

エリア設定とデバイス設定

どの地域を監視することも重要です。私はドイツを設定します。アジア太平洋地域でのパフォーマンスはどうなのかも調べたいと思っています。そのため、いくつかの地域を追加します。

次はブラウザ設定です。テスト結果が実際に役立つように、要素を追加していきます。2つの区分があり、デスクトップブラウザと、エミュレートしたモバイルブラウザがあります([00:01:30])。これらはChrome GIFツールでの設定とまったく同じです。実際のデバイスと同じように、デバイスのピクセル比率、ビューポート、ユーザーエージェント文字列をエミュレートします。iPhone 6を選び、Samsung Galaxy S3選んだら保存します。これで2つのブラウザが追加されました。

さて、この下にカスタムブラウザのプロファイルがあります([00:02:00])。これは念入りに性能を確かめるため、全設定を自分で変更する合に使用します。すべてのエミュレーションはChromeを使用しているので、(ブラウザエンジンを)Chromeのままにしておくことをおすすめします。必要に応じて、いくつかのプリセットから選択することも、カスタムで調整することもできます。 ここでは、ユーザーエージェント文字列、幅と高さ、デバイスのピクセル比率を編集できます。これはさまざまな幅をエミュレートしたい場合に有効で、デバイスごとの比較だけでなく、レスポンシブテストのためにも使用できます([00:02:30]部分)。

 

通信環境

同様にスピードを選ぶことができるので、ここで非常に速いファイバー接続をエミュレートするか、モバイル2Gに速度を落とすか、もしくはカスタムで待ち時間などを調整して、どのような種類の異なる接続タイプもエミュレートすることができます。その設定に「really slow 2G(本当に遅い2G)」といった名前をつけることができます、そして特定のブラウザプロファイラを追加することができます([00:03:00]部分) 。

 

チェック回数とベンチマーク

おそらく1日にこれ(既設定)以上の回数を監視したいと思うでしょう。ここを開いて追加することができます。これらの基本的な設定と実行ができたら、さらに多くのサイトを追加していきましょう。サイトを追加することは、ベンチマークの観点から非常に重要です。ここでは、TechCrunchのホームページのURLを取得し([00:03:30]部分)、2つのサイトを互いに比較します。TechCrunchのラベルはここでは「home」になるので、サイト間でそれらを比較することができます。

 

設定のコピー継承

一度サイトを追加すると、アカウントレベルで設定されているすべての設定を、このサイトで継承するかどうかを選択できるオプションが表示されます。先ほど追加したブラウザ、地域と時間設定です。 具体的な設定をするには、私たちはそれ(継承)をオフにします。このサイトでは、自分で作成したばかりのブラウザで実際に測定したいと思っています。設定を選んでいきます。すべての地域が必要か、それはイエスです。そして一日の回数は、単に監視するだけなので、正午だけにしましょう。さまざまな方法で異なるサイトの設定ができるため、開発サイトの場合は1日に何度も監視を行い、コンピュータのベンチマークを行う場合には、一日一回だけ監視を行うかもしれません。これはその設定を行う方法です([00:04:30]部分)。複数のサイトを追加したので、データを構築し始めると、それが非常に有用になっていきます。

 

レポート

これは、少し歴史のある複数のサイトを設定する例であり、これらの異なるサイト間でそのユーザーエクスペリエンスを比較することがどれほど有用かを確認できます。フィルムストリップビューのようなものを使って、他のチームメンバーやCEOにも興味を起こさせることができます。「見てください、私たちはコンピューターよりもこのくらい速い(遅い)です。パフォーマンスへの取り組みが必要です」。 また、複数のブラウザタイプを追加した場合、異なるビューポートで何が起きているかを実際に示すダッシュボードを最大限に活用することができます。 また、デザイン的に、ビューポートとブラウザの種類によってレスポンシブデザインがどのように機能しているかを知ることができます。
これがSpeedCurveを起動して実行するための基本です( [00:05:30]部分)ご質問がある場合は、お気軽にサポートにご連絡ください。バジェットやカスタムマトリックスの設定方法など、他の設定に関するビデオをまた作成します 。

 

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA