Fastlyを使用した速度改善

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

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

本日のお品書き ・Fastly is 何 ・なぜ平均応答時間の改善に取り組んだか ・キャッシュ対応できるように実装を修正 ・オリジンシールドの話 ・レスポンス速度の変化 © Spacemarket, Inc. All Rights Reserved. 4

Fastly is 何

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

CDN（Contents Delivery Network） ・ウェブコンテンツをインターネット経由で配信するために最適化されたネットワーク ・CSSやJSなどの静的ファイルの配信によく使われる ・様々な地域に分散されたサーバーの集まり ・同じ内容のデータのコピーを保有して、ユーザーに最も近いサーバーからレスポンス可能。 © Spacemarket, Inc. All Rights Reserved. 7

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

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

平均応答時間をどのように改善するかの調査 LPを使用して実験 キャッシュ適用後 ・SSRで100ms~200msの応答速度 ・一般ユーザーとGoogle Botの乖離が狭まる ・Google botで絞ると1000msとなっていた ・純粋な速度改善より、キャッシュが有効と判断 → 社内でのキャッシュの重要性が認知される © Spacemarket, Inc. All Rights Reserved. 10

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

キャッシュ対応できるように実装を修正 ・URLに対してHTMLの内容が同じになるように直す ・stale-while-revalidateを使用してキャッシュ対応 ・キャッシュ設定時のポイント・注意事項 © Spacemarket, Inc. All Rights Reserved. 12

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

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

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

VCLを使ったコンテンツのABテスト 気になる方はZennの記事をご覧ください © Spacemarket, Inc. All Rights Reserved. 16

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

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

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/

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

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

キャッシュ設定時のポイント ・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

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

オリジンシールドの話

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

オリジンシールド導入前 POPは複数存在するため、 恩恵を受けれるユーザー、恩恵を受けられないユーザーが発生します。 IAD オリジン サーバー TYO ITM POP © Spacemarket, Inc. All Rights Reserved. 25

オリジンシールド導入後 オリジンシールドはオリジンサーバーの手前にPOPをさらに配置することで、抜け漏れをなくします。 IAD オリジン サーバー NR T TYO POP ITM （オリジンシールド） POP © Spacemarket, Inc. All Rights Reserved. 26

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

レスポンス速度の変化

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

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

Search Consoleの比較 去年の５月 今年の４月 © Spacemarket, Inc. All Rights Reserved. 31

お知らせ © Spacemarket, Inc. All Rights Reserved. 32

お知らせ ・採用情報はこちらから ・フロントエンドエンジニア ・バックエンドエンジニア ・モバイルアプリエンジニア ・インフラエンジニア © Spacemarket, Inc. All Rights Reserved. など、積極採用中です。 33