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

by 虎の穴ラボ株式会社

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. お話すること 1.静的コンテンツのキャッシュ戦略の見直し  理由：通販サイトのページ読み込み速度を上げたい  対策：CDNの構築&リリース時刻でのキャッシュバスター付与    2.静的コンテンツリリースの自動化  理由：静的コンテンツの手動アップロードをやめたい  対策：GithubActionで自動アップロード 

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ページ読み込み速度とはページ読込速度の具体的な値は以下のツールで確認可能 - Google Chrome デベロッパーツールの Lighthouse - PageSpeed Insights ( https://pagespeed.web.dev/ ) - GTmetrix ( https://gtmetrix.com/ ) Webページを開いた際、画像、JS、CSSなどの全てのリソースがダウンロードされるまでの速さ

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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.直帰率低下

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

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.投稿画像用

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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で期限を指定・設定された期間までブラウザキャッシュを保持する・ほとんど更新されないリソースに最適

Slide 17

Slide 17 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. EtagとLast-Modifed 初回で情報を取得 Last-Modifed・・・ファイルの最終更新日時 Etag・・・ファイルサイズや最終更新日時等から生成されるハッシュ値２回目以降のリクエストに情報を載せる Last-Modifed・・・受け取った日時より新しいファイルがあれば返す Etag・・・差分が発生した場合にファイルを返す

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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日半の期間キャッシュが有効

Slide 22

Slide 22 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. キャッシュバスターについて https://ecs.toranoana.jp/ec/files/contentfiles/itemlist.css?date=20220324121049 - コンテンツを最新化しても意図せずブラウザキャッシュが利用されることで、リリース時にページが崩れてしまうケースが多発 - 対策として静的コンテンツを更新する際にキャッシュバスターを付与をルール化 - クエリストリングとしてシステム時刻を動的に付与する - 今度はブラウザキャッシュが全く効かなくなる JS CSS 都度リクエスト

Slide 23

Slide 23 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. キャッシュ周りの問題点問題1:EtagとLast-Modifiedで適切にキャッシュコントロールができてない問題2:Cache-Controlが無い為、意図せずキャッシュされるケースがある ※問題2の対応としてキャッシュバスターを付与しているが、　毎回リソースの取得が行われブラウザキャッシュを有効活用できていない

Slide 24

Slide 24 text

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が無く意図せずキャッシュされるケースがある ✕ ✕ ◯

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. CMSを経由しないで静的コンテンツをリリースしたい CMS導入の経緯 - 今でこそ『虎の穴ラボ』があるものの、『虎の穴』従業員の大半は非エンジニア - ECリニューアル時に非エンジニアでも通販サイトの運用ができるように CMSを導入 - コーディングが出来なくてもGUI上でパーツを組み合わせてページが作れる CMS 非エンジニア

Slide 28

Slide 28 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. CMSを経由しないで静的コンテンツをリリースしたいエンジニア / デザイナーによるリリース作業 - エンジニア / デザイナーもCMSを経由してリリースしなければならない - GUI操作でファイルアップロード、コードのコピペ - 作業ミス(別ファイルや古いバージョンでの上書き )による障害リスク - 最悪誤ってファイルが削除されるなんてことも・・・ CMS エンジニア/デザイナ非エンジニアもっと楽にリリースしたい ...!!

Slide 29

Slide 29 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 静的コンテンツリリース自動化のためにやること 1. CDNを構築する(JavaScript、CSSを高速に配信するため) 2. S3を構築する(CDNのオリジンサーバ) 3. GithubActionsでMainマージされたらS3に自動アップロード処理エンジニア/デザイナー S3 CDN GitHub GitHub Actions

Slide 30

Slide 30 text

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. ワークフローを新規作成

Slide 31

Slide 31 text

Slide 32

Slide 32 text

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://バケット名

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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.ジョブの設定 

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Copyright (C) 2022 Toranoana Inc. All Rights Reserved. まとめ読み込み速度改善 - 検索順位向上と直帰率改善に繋がり一石二鳥 - 静的コンテンツ配信において最適化できているか今一度見直しを - 冗長化構成でEtagでキャッシュコントロールができているか - レスポンスヘッダでCache-Controlヘッダが付与されないケースが無いかリリースの改善 - GitHubActionの活用で静的コンテンツのリリース作業負担が軽減 - サンプルコードを見ての通り記述内容も難しく無いので敷居が低め