デプロイ後の検証環境でレイテンシーを意図的に生み出す方法２選

この記事について

現在所属するチームでSLI/SLOの運用をリードしています。

(その話もしたいので、別の記事で書きますね)

弊社ではプロダクトに対して複数のSLI/SLOを設定し監視しています。
その中の１つに、リクエストに対してレスポンスを返すのにかかる時間の遅延(レイテンシー)の指標があります。レイテンシーが上昇することによるユーザー影響やそれの改善の意義について説明するのは難しいなと感じています。他にもそう思う方がいらっしゃるのでないでしょうか？

今回はそういうことに困っている方に向けてTipsを２つ紹介したいと思います。

先に結論を３つ

• レイテンシーの影響を説明するには実際に遅さを体感してもらうことにあるのでツールを使ってレイテンシー上昇によるユーザー体験の悪化を体感してもらおう
• HTTP通信を使用したAPIのレイテンシーを生み出す場合は「Requestly」を使う
• GraphQL通信を使用したAPIのレイテンシーを生み出す場合は「mitmproxy」を使う

レイテンシーによる影響

WebアプリケーションにおけるAPIのレイテンシーがユーザー体験に与える影響は以下のようにまとめられます。

API遅延時間	ユーザー体験・ビジネスへの影響
1秒未満	ほぼ問題なし。違和感は少ない。
1〜3秒	ユーザーのストレス増加。離脱率が約32%増加。
3〜5秒	明確な不満が生じ、離脱率は約90%増加。
5〜10秒	多くのユーザーが利用を諦め、離脱率は最大123%増加。
10秒超	ほとんどのユーザーが離脱。再訪率やブランドイメージも大幅悪化。

※参考文献は末尾に記載

複数の媒体でレイテンシーがユーザー体験に関わっていることを示していますが、データだけでは改善に踏み切れません。レイテンシーが高いことによるユーザー影響の悪化は数値で見ても実感しにくいためです。
そのため実際の測定結果を見せるだけでなく、実際にアプリの機能を遅延させて体感してもらいましょう。「百聞は一見にしかず」です！

それを実現するツールを２つ紹介します。

Requestly

ブラウザ上のHTTP/HTTPSリクエストを自由に制御できるGUIベースのツールです。Chromeの拡張機能として使用できます。

https://chromewebstore.google.com/detail/requestly-api-client-mock/mdnleldcmiljblolnjhpnblkcekpdkpa

設定方法としては以下の手順です。

1. Requestly を開く (Chrome の拡張機能アイコン → Requestly → 「Open Requestly」)
2. 新しいルールを作成 (「+ New Rule」 → Delay Request Rule を選択)
3. ルールを設定する

項目	内容
Rule Name	Delay Example API
URL Pattern	https://example.com/hoge (制御したいAPIのパスを追加する)
Delay Time	2000（単位: ミリ秒。ここでは2秒）

1. 画面上部の「Save Rules」を押せば設定完了です

有料版であればリクエストボディの条件や特定の GraphQLクエリ だけ遅らせることも可能です。もし無料版で実施したい場合は次の方法で実施してみてください。

mitmproxy

HTTP / HTTPS 通信をインターセプト（傍受）・可視化・改変・スクリプト制御できる中間者プロキシツールです。こちらであれば、無料でリクエストボディの条件や特定の GraphQLクエリ だけ遅らせることも可能です。

https://mitmproxy.org/

ただし、Requestlyよりも導入は複雑です。

設定方法としては以下の手順です。

1. 以下のコマンドを実行し、インストールする

$ brew install mitmproxy
$ mitmproxy --version # インストールできていることを確認する

2. コマンドを実行し証明書のセットアップする

# mitmproxyを一度起動する
$ mitmproxy

# すると、初回起動時に以下のようなログが出る。ログが出たら、CTRL+Cで終了してOK
Generated new CA certificate ...

3. 以下のコマンドを実行する

# この中に mitmproxy-ca-cert.pem という証明書ファイルがあります。
$ open ~/.mitmproxy

4. 以下の手順で証明書のインストールを実施する

   1. このファイルをダブルクリック
   2. キーチェーンアクセスが開く
   3. 「システム」 キーチェーンに追加する
   4. 「この証明書を常に信頼」に設定（右クリック→情報を見る→信頼を「常に信頼」へ変更）

5. ブラウザにプロキシを設定する
   macOSの場合、「システム設定 → ネットワーク → Wi-Fi → 詳細 → プロキシ → 手動設定」の流れで画面を操作後、以下の情報を入力する

HTTP プロキシ：127.0.0.1
ポート：8080

※ HTTPS プロキシも同様の情報を入力してください

6. 遅延処理を実装する

たとえば GetUser という GraphQL クエリだけ 3 秒遅延させたい場合は以下のような処理を書きます。

# delay_get_user_query.py
from mitmproxy import http
import json
import time

def request(flow: http.HTTPFlow) -> None:
    if flow.request.pretty_url.endswith("/graphql") and flow.request.method == "POST":
        try:
            body = json.loads(flow.request.get_text())
            operation_name = body.get("operationName", "")
            if operation_name == "GetUser":
                time.sleep(3) # GetUser queryを３秒遅延させる
        except Exception as e:
            print("Error parsing body:", e)

※ mitmproxyがpythonのみに対応しているため、pythonで遅延処理を実装する必要があります

7. 処理を実行する

実行コマンドは以下のとおりです。

$ mitmproxy -s delay_get_user_query.py

mitproxyはmitmwebというwebインターフェースもあるので、そちらもぜひ使ってみてください。

https://mitmproxy.org/#mitmweb

実際に体感してもらった

弊社で開発しているWebアプリケーションのとあるGraphQLを対象に遅延処理を実装しました。
以下のように２秒遅延する挙動を実現できました。

遅延なしの場合	２秒遅延させた場合

２秒遅延するとカレンダー表示が遅く、ユーザ体験を悪化させていることがわかります。
このような体験を生まないように日々改善に取り組んでいます。

まとめ

比較表は以下の通りです

項目	Requestly	mitmproxy
GUI	◎（完全GUI）	△（CLI中心）
コード不要	◎	△（スクリプト書く必要あり）
インストール	Chrome拡張のみ	Python経由でCLI
HTTPS対応	証明書不要	証明書インストール必要

紹介した２つのツールを使用することで、どの処理がボトルネックなのか、レイテンシーが上昇するとどのくらいユーザに影響が出るのかをシミュレーションすることができます。

それにより新たなUI/UXの作成やパフォーマンス改善など新たな施策の立案につながります。

これらを活用し、プロダクトをより良いものにしていきましょう！

参考文献

https://prtimes.jp/main/html/rd/p/000000253.000013569.html

https://www.xr-lifedig.com/beginner/250312_01/

https://webtan.impress.co.jp/e/2014/07/08/17757

https://fleek.xyz/blog/learn/importance-of-latency-modern-web/

https://www.thinkwithgoogle.com/intl/ja-jp/