Apache の処理の仕方を見直し、画像の表示に時間がかかっている問題を解消する

[kokoichi206]

apache の処理の仕方を変更し、問題を解消する

調査チケット: #66

別チケットで調査済み

[kokoichi206]

KeepAlive 関連の設定

off

『Slow web responses to mobile devices clog my apache workers』を参考にして、apache の Keep-alive を off にしてみる

全ての画像取得が 1 秒ほどで返ってくるようになった？

1001316

アクセス先	時間 (ms)
メイン HTML ドキュメント	2.2
members API	44.6
写真 jpeg	4.6 ~ 1001

apache ログ

106.133.20.197 - - [23/Oct/2022:03:42:03 +0000] "GET /performance/ HTTP/2.0" 200 705 2230 "-" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:03 +0000] "GET /api/v1/members?gn=sakurazaka&key=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 HTTP/2.0" 200 1366 44629 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"

106.133.20.197 - - [23/Oct/2022:03:42:04 +0000] "GET /imgs/sakura/uemurarina.jpeg HTTP/2.0" 200 12648 4611 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:04 +0000] "GET /imgs/sakura/ozekirika.jpeg HTTP/2.0" 200 14994 5084 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/saitoufuyuka.jpeg HTTP/2.0" 200 14197 7090 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/tamurahono.jpeg HTTP/2.0" 200 11898 7199 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/watanaberika.jpeg HTTP/2.0" 200 14780 269262 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/moriyarena.jpeg HTTP/2.0" 200 14476 269361 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/kobayashiyui.jpeg HTTP/2.0" 200 13741 273637 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/oozonorei.jpeg HTTP/2.0" 200 13445 273325 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/moritahikaru.jpeg HTTP/2.0" 200 13760 9180 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/sugaiyuuka.jpeg HTTP/2.0" 200 13839 277030 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/koikeminami.jpeg HTTP/2.0" 200 13656 277235 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/inouerina.jpeg HTTP/2.0" 200 12184 11003 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/moriyaakane.jpeg HTTP/2.0" 200 14183 627009 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/sekiyumiko.jpeg HTTP/2.0" 200 12267 627029 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/yamasakiten.jpeg HTTP/2.0" 200 11934 631452 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/masumotokira.jpeg HTTP/2.0" 200 13409 631381 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/oonumaakiho.jpeg HTTP/2.0" 200 14334 631296 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/habumizuho.jpeg HTTP/2.0" 200 10689 634197 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/endouhikari.jpeg HTTP/2.0" 200 12645 634460 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/haradaaoi.jpeg HTTP/2.0" 200 13848 993654 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/matsudarina.jpeg HTTP/2.0" 200 12903 993760 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/watanaberisa.jpeg HTTP/2.0" 200 12880 993768 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/takemotoyui.jpeg HTTP/2.0" 200 13349 997281 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/kousakamarino.jpeg HTTP/2.0" 200 13624 997406 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"
106.133.20.197 - - [23/Oct/2022:03:42:06 +0000] "GET /imgs/sakura/fujiyoshikarin.jpeg HTTP/2.0" 200 48561 1001316 "https://kokoichi0206.mydns.jp/performance/" "Mozilla/5.0 (Linux; Android 13; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36"

それっぽい値に設定する

以下のように設定してみた。

[kokoichi206]

Timeout を変更

KeepAlive の対応で、apache の返す処理自体は早くなった気がする（ブラウザ確認）。
ただ、アプリからアクセスした際には、いまだに遅いまま（何かアクセス以外で時間かかってそう）。

そこで、Android の API 呼び出し部分にもログを仕込み時間を調査した。

Interceptor を用意し、Retrofit に噛ませる

internal class LoggingInterceptor : Interceptor {
    @Throws(IOException::class)
    override fun intercept(chain: Interceptor.Chain): Response {
        val request: Request = chain.request()
        val t1 = System.nanoTime()

        val response: Response = chain.proceed(request)

        Log.d("hoge", "${response.request.url}, ${(t2 - t1) / 1e6}, ${response.headers}")
        Timber.tag("hoge").d("${(t2 - t1) / 1e6} m sec")

        return response
    }
}

val okHttpClient = OkHttpClient.Builder()
    .addInterceptor(LoggingInterceptor())
    .build()
return Retrofit.Builder()
    .baseUrl(Constants.BASE_URL)
    .client(okHttpClient)
    .addConverterFactory(GsonConverterFactory.create())
    .build()
    .create(SakamichiApi::class.java)

結果

apache 処理時間	Retrofit 処理時間
40.265 m sec	12580.46725 m sec

Connection Timeout を設定してみる

以下のように、Retrofit 作成時に connectionTimeout を指定。

val okHttpClient = OkHttpClient.Builder()
    // ここ！
    .connectTimeout(500, TimeUnit.MILLISECONDS)
    .addInterceptor(LoggingInterceptor())
    .build()
return Retrofit.Builder()
    .baseUrl(Constants.BASE_URL)
    .client(okHttpClient)
    .addConverterFactory(GsonConverterFactory.create())
    .build()
    .create(SakamichiApi::class.java)

結果

apache 処理時間	Retrofit 処理時間
42.866 m sec	931.092245 m sec

方針的に良さそうだが、画像は遅いまま。
現状、jetpack compose 用の coil を使って画像読み込みしているが、そこに Timeout 情報がないからか。

→ apache の方に Timeout を持たせたら？

[kokoichi206]

ConnectionTimeout を設定したら解決するということは、モバイルの時のみなぜかコネクションが閉じてない、っていうことっぽい。

9bde471e-56a8-4506-9db9-479a6563952a.mp4

[kokoichi206]

通信待ち時

通信を待っている間の UI について、こちらの記事を参考に考えてみた。

スケルトンスクリーン なるものが今きてるっぽい？

スケルトンスクリーン

• ユーザーに対し、あらかじめ『どれくらいの大きさの要素』が『どれくらいの数』くるかを想定できる、という意味でも、ユーザーに安心を与えられると思うので使ってみる。
• また、グラデーションがあることで、通信中であることも示せている。

Links

• Creating a Custom Animated Shimmer Effect with Jetpack Compose
• 待機状態のUIについて整理してみる(デザイン編)