Fastlyを使用した速度改善

3.9K Views

June 05, 23

#Fastly #CDN #Response Time #Cache Management #Web Performance

スライド概要

wado_63

@wado_63

スライド一覧

株式会社スペースマーケットでフロントエンドエンジニアをしています。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 11.28MB)

関連スライド

FE_BEをTypeScriptに寄せた結果

wado_63 1.2K

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.3M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.1M

SQL滅ぶべし

株式会社ホクソエム 857K

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer

エピックゲームズジャパン 823.1K

各ページのテキスト

サブタイトルなしの Fastlyを活用した速度改善のお話中央寄せの場合

フロントエンドエンジニア佐伯 Slackアイコン画像 @wado̲63 （Slackで画像をコピー押してペースト好きなもの：カービィ、スヌーピー、お酒、ゲーム、コジコジ普段のお仕事：フロントエンドのアーキテクチャの設計レガシーな画面のリプレイスで貼れます!）

Fastly is 何

Fastly is 何・エッジクラウドプラットフォーム・物理的にユーザーに近い場所でいろいろとできます。・Compute@Egge (エンドユーザーの近くでサーバーレスコードの実行）・Image Optimizer（画像圧縮）・WAF（Web Application Firewall）・CDN（Contents Delivery Network）・今回はこれの話👆 © Spacemarket, Inc. All Rights Reserved. 6

なぜ平均応答時間の改善に取り組んだか

Googleのインデックス数が減ってしまう可能性 Google Search Central English Google Webmaster Central office-hours hangoutより一般的に言って、ダウンロード時間が 100 〜 500 ミリ秒くらいであれば（Googlebot は）クロールしやすい。1,000 2022年5月ごろのスペースマーケットの Google Botの応答時間ミリ秒、つまり 1 秒を超えると、サーバーが本当に遅いという兆候になりクロールに制限をかけるかもしれない。 © Spacemarket, Inc. All Rights Reserved. 9

10.

11.

キャッシュ対応できるように実装を修正

12.

13.

URLに対してHTMLの内容が同じになるように直す

14.

URLに対してHTMLの内容が同じになるように直す Before After /some/url/ html /some/url/ html /some/url/ html /some/url/ html ・１URLに対して複数の結果を返している状態・１URLに対して同じ結果を返している状態・Cookieなど見てHTMLを変えたりなど・HTMLの描画にCookieなどを使用しない・こうなるとURL単位でキャッシュを・URL単位でキャッシュすることができるすることができない © Spacemarket, Inc. All Rights Reserved. 14

15.

URLに対してHTMLの内容が同じになるように直す・修正パターン VCLを使用すれば出し分けできるがシステムが複雑になる。・SSRで出していたものをCSRに変更する・例：ログイン向けユーザーのグローバルヘッダー・例：閲覧履歴のリスト・ファーストビューに含まれるものはCLSを発生させやすいので注意・コンテンツの出し分けを止める現在のバナー旧バナー・例：アプリのインストールバナー・以前は閉じることが出来たが埋め込みに変更 © Spacemarket, Inc. All Rights Reserved. 15

16.

https://zenn.dev/spacemarket/articles/cdn-cache-abtest-ssr

17.

stale-while-revalidateを使用してキャッシュ対応

18.

stale-while-revalidateを使用してキャッシュ対応 stale-while-revalidateはキャッシュ状態の一つで、キャッシュを再検証している間、古いレスポンスの再利用が可能なことを示します。参考： https://developer.fastly.com/learning/concepts/stale/ Cache-Control: max-age=300, stale-while-revalidate=60, stale-if-error=86400 © Spacemarket, Inc. All Rights Reserved. 18

https://developer.fastly.com/learning/concepts/stale/

19.

stale-while-revalidateを使用してキャッシュ対応・スペースマーケットの例 Cache-Control: max-age=5400, stale-while-revalidate=259200, stale-if-error=76400 ・１時間半はfresh, 3日はstale, オリジンにエラーがあった場合は１日キャッシュを使用・コンテンツは比較的新しくしつつ、保持期間を長くしてキャッシュにヒットさせる・キャッシュ更新時にコンテンツの不整合は発生するが許容 © Spacemarket, Inc. All Rights Reserved. 19

20.

Surrogate Keyを使用してキャッシュを任意のタイミングでpurge ・Surrogate Key Surrogate-Key: room̲${roomUid} ・コンテンツのグループに割り当てるユニークな識別子。Headerに付与する・fastlyでSurogate Keyを指定することで任意のキャッシュをpurgeできる・purgeする際はsoft purgeとhard purgeが選べる・soft purge → キャッシュをstale-while-revalidateにする・hard purge → キャッシュをexpiredにする・Surrogate Keyを使ったpurgeの例・デプロイ時（soft purge) ・サービス運営側によるコンテンツの更新（soft purge）・ユーザーが編集したコンテンツの更新（hard purge） © Spacemarket, Inc. All Rights Reserved. 20

21.

キャッシュ設定時のポイント・max-ageを3700s以上に設定する・3700s未満だとキャッシュが一時的なメモリキャッシュとなりすぐに無くなってしまう。結果としてstale-while-revalidateが効かない。・確認は Fastly-Debug: 1 のHeaderをつけてcurlコマンドで確認・Surrogate-Controlや、Surrogete-Keyなどのfastlyで処理されるHeaderを確認できる・curlコマンドなどで確認することで、新規アクセス時にキャッシュが作られるか確認できる・setCookieがResponse Headerに含まれていないか注意 © Spacemarket, Inc. All Rights Reserved. 21

22.

キャッシュ設定時の注意事項・一つ間違えばインシデントに繋がる可能性・キャッシュは一部のアクセスが多いページに絞って使う・テストでSSR時のリクエストに認証情報が含まれないこと保証する・開発時ではSSRのネットワークリクエストをログとして出力してキャッシュしてはいけない内容が混ざらないか確認できるようにしておく・PRテンプレートにチェックリストを追加 © Spacemarket, Inc. All Rights Reserved. 22

23.

オリジンシールドの話

24.

オリジンシールドの話・POP(Points of presence)について・fastlyの配信拠点・国内だと東京と大阪で４拠点（TYO、NRT、HND、ITM）・fastlyのキャッシュはPOPごとに管理されている・経由したPOP次第でキャッシュあり・なしが変わってしまう・Google Botは海外のPOPを使用しているため、国内のユーザーとキャッシュを共有できない・それを解決するのがオリジンシールド © Spacemarket, Inc. All Rights Reserved. 24

25.

26.

27.

オリジンシールドの話・注意点・POPごとにVCL（Varnish Configuration Language ）が動作するので、 Edge POPのみで処理が走るようにするなど修正が必要・POPが増えることでオリジンサーバーへ繋がるまでの経路が増え、 Fastlyの料金体系はトラフィック量で決まるので、キャッシュにヒットしない場合は料金があがる可能性があり © Spacemarket, Inc. All Rights Reserved. 27

28.

レスポンス速度の変化

29.

Google botの平均応答時間の改善（リプレイスも含む） - 2022年5月 1400ms - 2022年6月 1200ms スペース詳細v2移行とキャッシュ対応 - 2022年8月 700ms まとめv2移行 - 2023年3月 500ms 検索＆まとめキャッシュ対応 - 2023年4月 300ms オリジンシールド導入でキャッシュ最適化 © Spacemarket, Inc. All Rights Reserved. 29

30.

Google botの平均応答時間の改善（リプレイスも含む） - 2022年5月 1400ms - 2022年6月 1200ms スペース詳細ページリプレイスとキャッシュ対応 - 2022年8月 700ms まとめページリプレイス - 2023年3月 500ms 検索＆まとめキャッシュ対応 - 2023年4月 300ms オリジンシールド導入でキャッシュ最適化 © Spacemarket, Inc. All Rights Reserved. 30

31.

32.

33.

34.