Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kokoichi206 opened this issue Oct 23, 2022 · 4 comments

Comments

@kokoichi206
Copy link
Member

kokoichi206 commented Oct 23, 2022

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

調査チケット: #66

別チケットで調査済み

@kokoichi206
Copy link
Member Author

kokoichi206 commented Oct 23, 2022

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"

それっぽい値に設定する

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

Screen Shot 2022-10-23 at 12 57 29

@kokoichi206
Copy link
Member Author

kokoichi206 commented Oct 23, 2022

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
Copy link
Member Author

kokoichi206 commented Oct 23, 2022

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

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

@kokoichi206
Copy link
Member Author

kokoichi206 commented Oct 23, 2022

通信待ち時

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

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

スケルトンスクリーン

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

Links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant