とらのあなラボTechConferenceVol.2_静的コンテンツのキャッシュ戦略見直しとリリース改善

とらのあなラボTechConferenceVol.2におけるセッション「静的コンテンツのキャッシュ戦略見直しとリリース改善」の登壇資料です。

■イベント情報
https://yumenosora.connpass.com/event/241175/

■今後のイベントについてはこちら
https://yumenosora.connpass.com/

■虎の穴ラボ 採用サイト
https://yumenosora.co.jp/tora-lab

1. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 静的コンテンツのキャッシュ戦略見直しとリ リース改善
2. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 名前：大場 祥哉
 担当業務：虎の穴の情シス→EC開発(SEO)、スクラムマ スター
 業務使用言語：Java、Kotlin
 趣味：筋トレ、ラスカリスト
 自己紹介
 2
3. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. お話すること 1.静的コンテンツのキャッシュ戦略の見直し
 理由：通販サイトのページ読み込み速度を上げたい
 対策：CDNの構築&リリース時刻でのキャッシュバスター付与
 
 2.静的コンテンツリリースの自動化
 理由：静的コンテンツの手動アップロードをやめたい
 対策：GithubActionで自動アップロード

4. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ページ読み込み速度を改 善する目的
5. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ページ読み込み速度とは ページ読込速度の具体的な値は以下のツールで確認可能 - Google Chrome デベロッパーツールの Lighthouse - PageSpeed Insights ( https://pagespeed.web.dev/ ) - GTmetrix ( https://gtmetrix.com/ ) Webページを開いた際、画像、JS、CSSなどの全てのリソースがダウンロードされるま での速さ
6. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ページ読み込み速度の改善によるSEO 引用：： https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search?hl=ja
7. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ページ読み込み速度の改善によるLCP改善 LCP:ページ内にある最大コンテンツ(img,svg要素等)が表示されるまでの速度 引用元:https://developers.google.com/search/blog/2020/05/evaluating-page-experience?hl=ja 引用元:https://twitter.com/googlesearchc/status/1404886100087246848
8. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 外部流入増加による売上貢献 • 検索結果順位の向上
 ◦ ページ読込速度の改善
 ◦ Googleが提唱するCWV(Core Web Vitals) の LCPが改善
 2.検索順位が向上 1.読み込み速度改善 3.外部流入増加
9. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ページ読み込み速度改善による売上貢献 • 直帰率改善
 ◦ 読み込み速度が速ければ直帰率が下がる 
 ※2017年のGoogleリサーチ結果より 👉
 ◦ 直帰率が下がるため売上貢献に繋がる 引用元：https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/ 3.外部流入増加 4.直帰率低下
10. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 　　　　静的コンテンツのキャッシュ戦略の見直し @とらのあな通販
11. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 通販サイトのページ構成要素 参考：https://gtmetrix.com/reports/ecs.toranoana.jp/9MyKUhcj/ GTmetrixでページを構成する要素の比率をかんたんに出せる

12. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 静的コンテンツのチェックポイント3つ 
 画像、JavaScript、CSSに対して以下項目をチェック！！
 
 ☐ サーバ構成 ・・・CDNを利用しているか 
 ☐ HTTPヘッダのキャッシュ ・・・適切にキャッシュヒットするよう設定されているか 
 ☐ ファイル圧縮・・・次世代画像形式(WebPやAVIF)の利用、Minifyされているか 
 

13. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Chromeデベロッパーツールを使えば確認可能 - Preserve logの有効化 - Disable Cacheの無効化
14. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 画像ファイルのチェック ✅ サーバ構成 : OK 
 - 1.投稿用 AWS CloudFrontを導入済み 
 - 2.販促用 AWS CloudFrontを導入済み 
 ✅ レスポンスヘッダのキャッシュ設定: 要調整 
 - 1.投稿用 Cache-Control:max-age=600 , Etag , Last-modified 
 - 2.販促用 Cache-Control:max-age=0, Etag ,Last-modified 
 ✅ ファイル圧縮: 現在進行系
 - 1.投稿用 WebP自動変換導入予定 
 - 2.販促用 WebP自動変換する仕組みを導入済み(内製) 
 ２つの画像専用サーバ
 1. サークル様が投稿した作品表紙やサンプル画像 
 2. 通販運用チームが作成したバナーや販促画像 
 CDN CDN 2.販促画像用 1.投稿画像用
15. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. JavaScript、CSSのチェック □ サーバ構成 : NG 
 - CDNなし★要改善
 □ レスポンスヘッダのキャッシュ設定：NG 
 - EtagとLast-modified★要修正
 - Cache-Controlが無い★要修正
 □ ファイル圧縮 : NG 
 - JavaScript : バンドルツール導入を検討中
 - CSS : scssからのコンパイル時にMinifyを実施中
 フロントエンド側のWebサーバ(EC2)と同居 
 EC2_Instances （冗長構成） ALB
16. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. EtagとLast-Modifed EtagとLast-Modifed は 弱いキャッシュと呼ばれるもの ・Cache-Control: no-cache や max-age=0 と組み合わせる ・サーバに新しいファイルが無いか都度リクエストを投げる ・新しいファイルがあった場合に取得 反対の強いキャッシュ ・Cache-Control: max-age = n やExpireで期限を指定 ・設定された期間までブラウザキャッシュを保持する ・ほとんど更新されないリソースに最適
17. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. EtagとLast-Modifed 初回で情報を取得 Last-Modifed・・・ファイルの最終更新日時 Etag・・・ファイルサイズや最終更新日時等から生成されるハッシュ値 ２回目以降のリクエストに情報を載せる Last-Modifed・・・受け取った日時より新しいファイルがあれば返す Etag・・・差分が発生した場合にファイルを返す
18. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. EtagとLast-Modified 注意点 EtagとLast-Modifiedが 同時に設定された場合・・・ Etag が優先される
19. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Webサーバが冗長構成の場合に問題となりえる - 中身が同じファイルなのにlast-modfiedに若干の差異がある - レスポンスするサーバーによりetagが異なりキャッシュが効かない サーバA サーバB
20. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 同じファイルなのにキャッシュ利用がランダム ステータス200：リソースを再取得 (別のサーバがレスポンスした ) ステータス304：キャッシュを利用 (前回と同じサーバがレスポンスした )
21. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. もう一つの問題、レスポンスヘッダにCache-Controlが無い - Cache-Controlがない場合は heuristic expiration timeでキャッシュする可能性がある - 正確なキャッシュ有効期間がわからない為、ある程度近しい値を算出する - heuristic expiration timeの計算は ブラウザの実装によって異なる - Google ChromeはLast-ModifiedとDateの差の10%の値をキャッシュ有効期間とする - 古いファイルであるほどキャッシュ期間が長く設定される 例：レスポンスヘッダに Cache-Controlが無かった際のdateとlast-modifiedをもとにJSで計算 参考：https://zenn.dev/kawakawaryuryu/articles/75af6ae44d2939 (new Date('2022-03-24 18:25:22') - new Date('2022/3/9 08:38:09')) * 0.1 / 1000 / 60 / 60 // 36.978694444444436 → 15日前更新の場合は約 1日半の期間キャッシュが有効
22. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. キャッシュバスターについて https://ecs.toranoana.jp/ec/files/contentfiles/itemlist.css?date=20220324121049 - コンテンツを最新化しても意図せずブラウザキャッシュが利用されることで、リリース時にページが 崩れてしまうケースが多発 - 対策として静的コンテンツを更新する際にキャッシュバスターを付与をルール化 - クエリストリングとしてシステム時刻を動的に付与する - 今度はブラウザキャッシュが全く効かなくなる JS CSS 都度リクエスト
23. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. キャッシュ周りの問題点 問題1:EtagとLast-Modifiedで適切にキャッシュコントロールができてない 問題2:Cache-Controlが無い為、意図せずキャッシュされるケースがある ※問題2の対応としてキャッシュバスターを付与しているが、　 毎回リソースの取得が行われブラウザキャッシュを有効活用できていない
24. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. キャッシュ問題の解決策 1.Last-Modifiedを残してEtagだけを削除する →Last-Modifiedは異なったまま 2.冗長化Webサーバ上のリソースの更新日時をすべて合わせる →Cache-Controlが無い場合に対処できない 3.コンテンツ更新のタイミングでキャッシュバスターを付与 ※動的に変わる値ではなく、リリース日時などの固定値とする 問題 解決策1 解決策2 解決策3 EtagとLastModifiedがうまく機能してない △ ◯ ◯ Cache-Controlが無く意図せずキャッシュされる ケースがある ✕ ✕ ◯
25. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 質問受付中
26. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 静的コンテンツリリースの自動化 GithubAction
27. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. CMSを経由しないで静的コンテンツをリリースしたい CMS導入の経緯 - 今でこそ『虎の穴ラボ』があるものの、『虎の穴』従業員の大半は非エンジニア - ECリニューアル時に非エンジニアでも通販サイトの運用ができるように CMSを導入 - コーディングが出来なくてもGUI上でパーツを組み合わせてページが作れる CMS 非エンジニア
28. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. CMSを経由しないで静的コンテンツをリリースしたい エンジニア / デザイナーによるリリース作業 - エンジニア / デザイナーもCMSを経由してリリースしなければならない - GUI操作でファイルアップロード、コードのコピペ - 作業ミス(別ファイルや古いバージョンでの上書き )による障害リスク - 最悪誤ってファイルが削除されるなんてことも・・・ CMS エンジニア/デザイナ 非エンジニア もっと楽に リリースしたい ...!!
29. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 静的コンテンツリリース自動化のためにやること 1. CDNを構築する(JavaScript、CSSを高速に配信するため) 2. S3を構築する(CDNのオリジンサーバ) 3. GithubActionsでMainマージされたらS3に自動アップロード処理 エンジニア/デザイナー S3 CDN GitHub GitHub Actions
30. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Github Actionsでのリリース改善 AWS側の作業 1. Amazon S3バケットを作成 2. CloudFront で 新規作成したS3バケットをオリジンとするdistributionを作成 3. AWS IAMユーザーの作成 4. アクセスキーとシークレットアクセスキーを取得 GitHub側の作業 1. 取得したアクセスキーをGithub側に登録 2. ワークフローを新規作成
31. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. S3構築時の注意点 - パブリック・アクセスはブロック - OAI(Origin Access Identity)を利用 - S3バケットへのアクセスはCloudfrontのみを許可 S3 CDN
32. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. GitHub Actionsのワークフロー構文 トリガー - mainへのpush時 ジョブ： - mainをcheckout - アクセスキーを読込み - S3へファイルアップ name: S3 Contents Upload on: push: branches: main jobs: upload: runs-on: ubuntu-latest timeout-minutes: 5 steps: - name: Checkout uses: actions/checkout@v3 　　　 - name: Deploy 　　　 env: 　　　　　 AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_ACCESS_KEY_ID }} 　　　　　 AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY }} 　　　 run: aws s3 cp --recursive --region リージョン s3://バケット名
33. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. name：Actionの名前(任意) on：ワークフローのトリガーとなるイベント push：プッシュをトリガーとして設定 branches：mainブランチを対象とする name: S3 Contents Upload on: push: branches: main 1.トリガーの設定

34. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. jobs : 作業の内容を定義 build : ジョブの名前(好きに名前を付けられる) runs-on : 実行環境を指定 timeout-minutes : ジョブのタイムアウト設定 jobs: build: runs-on: ubuntu-latest timeout-minutes: 5 参考:https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#choosing-github-hosted-runners 2.ジョブの設定

35. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. steps : ジョブの中で実行される処理 
 name : stepの名前
 uses : Github の公開アクションやサードパーティのアクションを設定できる 
 action/checkoutで公開アクションを指定 
 
 steps: - name: Checkout uses: actions/checkout@v3 3. ステップの設定_checkout

36. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. env…環境変数の設定、GitHubで登録したアクセスキーのIDを設定 run…コマンドの実行 - name: Deploy env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY }} run: aws s3 cp --recursive --region リージョン s3://バケット名 4.ステップの設定_deploy
37. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. まとめ 読み込み速度改善 - 検索順位向上と直帰率改善に繋がり一石二鳥 - 静的コンテンツ配信において最適化できているか今一度見直しを - 冗長化構成でEtagでキャッシュコントロールができているか - レスポンスヘッダでCache-Controlヘッダが付与されないケースが無いか リリースの改善 - GitHubActionの活用で静的コンテンツのリリース作業負担が軽減 - サンプルコードを見ての通り記述内容も難しく無いので敷居が低め