1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【初心者向け】AWSでSSL化後にページ読み込みが遅くなる問題を解決する方法

Posted at

【初心者向け】AWSでSSL化後にページ読み込みが遅くなる問題を解決する方法

背景

私はRailsで作成したアプリケーションをAmazon EC2にデプロイし、Route53でドメイン名を設定しました。さらにAWSのACMとALB(Application Load Balancer)を利用してHTTPS通信を実現したところ、以下の問題が発生しました。

  • httpsドメイン名でアクセスすると正常にレスポンスは返ってくるものの、初回のページロードが非常に遅い(約20秒)。

問題の詳細

  • 初回アクセス時、ページが完全に表示されるまでに約20秒かかる。
  • 一度ページが読み込まれた後は、リロードや画面遷移がスムーズに行える。

問題の調査

ChatGPTへの相談

ChatGPTに相談したところ、Chromeのデベロッパーツールを使用して詳細な情報を確認するようアドバイスを受けました。

デベロッパーツールでの確認

  1. Chromeのデベロッパーツールを開き、Networkタブを確認。
  2. ドメイン名へのリクエストに約20秒の遅延が発生していることを確認。

Timing情報の調査

  1. 遅延が発生しているリクエストをクリックし、「Timing」セクションを確認。
  2. Initial Connection」に時間がかかっていることを特定。

networkタブtimingセクション画像

解決策

原因の特定

ネット検索を行ったところ、以下の情報にたどり着きました。

  • ロードバランサー(ALB)のアベイラビリティゾーン選択時、プライベートサブネットを選択していることが原因で遅延が発生する場合がある。

参考記事:

たしかに、自分も同じような設定をしていたことを思い出しました。

  • 2つのアベイラビリティゾーンを選択する際、片方のゾーンはプライベートサブネットしかなかったため、結果としてプライベートサブネットを選択していました。

具体的な対応

  1. パブリックサブネットの作成

    • 新たにパブリックサブネットを作成しました。
  2. ALBのサブネット設定変更

    • AWSマネジメントコンソールでALBの設定を編集。
    • アベイラビリティゾーンのサブネットとして、新たに作成したパブリックサブネットを選択。

効果の確認

設定変更後、ページの読み込み速度が劇的に改善され、初回ロードの遅延が解消されました。

おわりに

ChromeのデベロッパーツールのNetworkタブを活用することで、問題の原因を特定できました。特に「Initial Connection」の遅延を調査することが鍵でした。

また、ChatGPTに質問するだけでなく、自ら「initial connection 遅い」と検索することで有用な解決策にたどり着けました。同様の問題に直面した際の参考になれば幸いです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?