実践Webフロントパフォーマンスチューニング

2025年度 traP新歓オリエンテーションのLTで発表した内容です。5分のLTなので1章のみを話しました。

Transcript

1. 実践Webフロント パフォーマンスチューニング 2025年度 traP新歓オリエンテーション
2. 自己紹介 ー 今日話す人 しーぴー🍀 @cp20 代表・SysAd班長
3. おことわり
4. おことわり - マジのガチの実践をやります
5. おことわり - マジのガチの実践をやります - 普通にムズイです
6. おことわり - マジのガチの実践をやります - 普通にムズイです - 内容多すぎるので超削りました
7. おことわり - マジのガチの実践をやります - 普通にムズイです - 内容多すぎるので超削りました - フルバージョンはスライドで配ります
8. 概要 画像を軽くする 1 JavaScriptを削る 4 テキストを圧縮する 2 キャッシュを使う 5 フォントを削る 3
9. 概要 画像を軽くする 1 JavaScriptを削る 4 テキストを圧縮する 2 キャッシュを使う 5 フォントを削る 3 時間の都合でカット🙇
10. 1. 画像を軽くする
11. 1. 画像を軽くする
12. 1. 画像を軽くする 画像を圧縮する
13. 1. 画像を軽くする 画像を圧縮する 画像を小さくする
14. 1. 画像を軽くする 画像を圧縮する 画像を小さくする
15. 1. 画像を軽くする ー 画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの)
16. 1. 画像を軽くする ー 画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数)
17. 1. 画像を軽くする ー 画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数) 268px 268px
18. 1. 画像を軽くする ー 画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数) 268px 268px 1pxあたりの情報量 = 4byte RGBAでそれぞれ0～255の値を取るとしたとき
19. 1. 画像を軽くする ー 画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数) 268px 268px 1pxあたりの情報量 = 4byte RGBAでそれぞれ0～255の値を取るとしたとき 4×268×268=287296B≒280KB
20. 1. 画像を軽くする ー 画像を圧縮する でも実際は...
21. 1. 画像を軽くする ー 画像を圧縮する 62.1KBしかない！！！
22. 1. 画像を軽くする ー 画像を圧縮する 62.1KBしかない！！！ データが圧縮されているから
23. - 色々な画像圧縮アルゴリズム - PNG (可逆圧縮、透明度付き、デジタルイラストなどに効果的) - JPEG (非可逆圧縮、圧縮率を調整可能、写真などに効果的) - GIF (可逆圧縮、厳しい色制限、アニメーション可能) - HEIC (主に非可逆圧縮、Apple製品でよく使われる、Webでは非対応) - WEBP (可逆・非可逆圧縮、アニメーション可能、高圧縮率) - AVIF (可逆・非可逆圧縮、高圧縮率、処理が重い) 1. 画像を軽くする ー 画像を圧縮する
24. 1. 画像を軽くする ー 画像を圧縮する PNG 62.1KB
25. 1. 画像を軽くする ー 画像を圧縮する PNG 62.1KB GIF 26.3KB
26. 1. 画像を軽くする ー 画像を圧縮する PNG 62.1KB GIF 26.3KB JPEG (q=95) 20.7KB
27. 1. 画像を軽くする ー 画像を圧縮する PNG 62.1KB GIF 26.3KB JPEG (q=95) 20.7KB AVIF (q=95) 14.9KB
28. 1. 画像を軽くする ー 画像を圧縮する PNG 62.1KB GIF 26.3KB JPEG (q=95) 20.7KB WEBP (q=95) 13.5KB AVIF (q=95) 14.9KB ※この画像の例であり、画像によってはこの順位が入れ替わります
29. 1. 画像を軽くする ー 画像を圧縮する - quality を下げても圧縮できる (ただし劣化する) q=100 (可逆) 17.1KB q=80 7.5KB q=60 5.8KB q=40 4.8KB q=20 3.6KB 同じ画像を quality を変えながら WEBP で圧縮してみた例
30. 1. 画像を軽くする ー 画像を圧縮する - 具体的には sharp や ImageMagick を用いて変換する - quality による劣化の程度は Squoosh などで確認できる $ npx sharp-cli --format webp --quality 95 -i input.png -o output.webp sharp-cli を用いて画像を変換する例
31. 1. 画像を軽くする ー 画像を圧縮する 結論 画像はWEBP (or AVIF) にする 安定を取るなら quality は 95 とかがおススメです
32. 1. 画像を軽くする ー 画像を圧縮する Q. WEBP/AVIF 未サポートユーザーはどうするの？ A. だいたい無視しても良い (ほぼ全ての環境で使える) ※サポートしたい場合は Accept ヘッダーを見てサーバー側で画像を出し分ける処理が必要になります
33. 1. 画像を軽くする 画像を圧縮する 画像を小さくする
34. 1. 画像を軽くする ー 画像を小さくする 思い出すシリーズ
35. 1. 画像を軽くする ー 画像を小さくする
36. 1. 画像を軽くする ー 画像を小さくする 画像の大きさを半分にする →容量も半分になる！
37. 1. 画像を軽くする ー 画像を小さくする Science Tokyo 公式サイト (isct.ac.jp)
38. 1. 画像を軽くする ー 画像を小さくする Science Tokyo 公式サイト (isct.ac.jp)
39. 1. 画像を軽くする ー 画像を小さくする 299px 168px
40. 1. 画像を軽くする ー 画像を小さくする 299px 168px この画像の大きさは 1440px×810px
41. 1. 画像を軽くする ー 画像を小さくする 299px 168px この画像の大きさは 1440px×810px 無駄に大きい画像を読み込んでいる
42. 1. 画像を軽くする ー 画像を小さくする オリジナル 71.5KB
43. 1. 画像を軽くする ー 画像を小さくする オリジナル 71.5KB 可逆圧縮後 53.9KB
44. 1. 画像を軽くする ー 画像を小さくする オリジナル 71.5KB 可逆圧縮後 53.9KB リサイズ後 8.9KB
45. 1. 画像を軽くする ー 画像を小さくする - 画像を小さくするのはレンダリング負荷削減にも繋がる (特に大量の画像をレンダリングする場合
46. 1. 画像を軽くする ー 画像を小さくする 画面全体に画像を表示したいとき Science Tokyo 公式サイト (isct.ac.jp)
47. 1. 画像を軽くする ー 画像を小さくする 画面全体に画像を表示したいとき → 画像の大きさがデバイス (PC/スマホ) によってばらける Science Tokyo 公式サイト (isct.ac.jp)
48. 1. 画像を軽くする ー 画像を小さくする 画面全体に画像を表示したいとき → 画像の大きさがデバイス (PC/スマホ) によってばらける → PC用の画像はスマホには 大きすぎる (=無駄) Science Tokyo 公式サイト (isct.ac.jp)
49. 1. 画像を軽くする ー 画像を小さくする 画面幅によって 画像を出し分ける機能がある！
50. 1. 画像を軽くする ー 画像を小さくする imgタグのsrcset・sizes属性とpictureタグの使い方 レスポンシブイメージで画像表示を最適化 - ICS MEDIA 使いかたは↓の記事を読んでください
51. 1. 画像を軽くする ー 画像を小さくする - リサイズも sharp / ImageMagick でできます $ npx sharp-cli -i input.png -o output.png resize 350 350 sharp-cli を用いて画像をリサイズする例
52. 1. 画像を軽くする ー 画像を小さくする 結論 画像は表示サイズまで小さくする
53. 1. 画像を軽くする ー おまけ ページの読み込みを速くする → ファーストビューの読み込みを速くする → ファーストビュー以外を遅延読み込みする
54. 1. 画像を軽くする ー おまけ ページの読み込みを速くする → ファーストビューの読み込みを速くする → ファーストビュー以外を遅延読み込みする
55. 1. 画像を軽くする ー おまけ ページの読み込みを速くする → ファーストビューの読み込みを速くする → ファーストビュー以外の読み込みを遅らせる
56. 1. 画像を軽くする ー おまけ - 画面に映るまで画像の描画を遅延させる → loading=”lazy” - (ファーストビューの画像には付けない) - (ちゃんとCLSを抑制しないと効果薄)
57. 2. テキストを圧縮する
58. 2. テキストを圧縮する - テキスト = HTML/CSS/JS など - 意味のない空白を削る - プログラムの意味を変えずに短くする - 一般に minify と呼ばれる作業 - テキストを可逆圧縮する - gzip / deflate / brotli / zstd などの圧縮形式がある
59. 2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイル オリジナル 95.5KB
60. 2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイル オリジナル 95.5KB minify後 72.8KB
61. 2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイル minify後 72.8KB
62. 2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイル minify後 72.8KB gzip 16.0KB deflate 16.0KB zstd 16.2KB brotli 12.5KB
63. 2. テキストを圧縮する - 現代的なツールを使えば minify オプションはきっとある - ESBuild、Rollup、Parcelなどのバンドルツールはサポートしている - そうでない場合は html-minifier などを使おう
64. 2. テキストを圧縮する - 現代的なツールを使えば minify オプションはきっとある - ESBuild、Rollup、Parcelなどのバンドルツールはサポートしている - そうでない場合は html-minifier などを使おう - テキストの圧縮はミドルウェアでだいたいできる - だいたいのWebサーバー (リバースプロキシ) は圧縮をサポートしてる - 「(自分の使ってるサーバーライブラリ) text compression」で検索
65. 2. テキストを圧縮する 結論 テキストは minify + brotli 圧縮する
66. 1. 画像を軽くする ー 画像を圧縮する Q. brotli 未対応ユーザーはどうするの？ A. だいたい無視しても良い (ほぼ全ての環境で使える) ※サポートしたい場合は Accept-Encoding ヘッダーを見てサーバー側で圧縮方式を変える必要があります ※そして多くのミドルウェアはその機能をサポートしているはずです
67. 3. フォントを削る
68. 3. フォントを削る - Webフォントは雑に使うと重い (デカい) - 2～3MBは普通に突破しがち
69. 3. フォントを削る - Webフォントは雑に使うと重い (デカい) - 2～3MBは普通に突破しがち - ウェブセーフフォントを使うことも視野に - ウェブセーフフォント → デバイスに入っていてダウンロード不要
70. 3. フォントを削る - Webフォントは雑に使うと重い (デカい) - 2～3MBは普通に突破しがち - ウェブセーフフォントを使うことも視野に - ウェブセーフフォント → デバイスに入っていてダウンロード不要 - どうしてもWebフォントを使う場合はサブセット化する - サブセット化 = 使う文字 (例えば日本語のみ) だけを取り出すこと
71. 3. フォントを削る - Variable Fonts vs Normal Fonts - Variable Fonts = Font Weight (文字の太さ) が自由に変えられるフォント - 様々な Weight を使い分ける場合は Normal Fonts をパターン数使うより は軽くなる場合がある - しかしサイト内で使う Weight のパターン数を減らすことを Variable Fonts を使う前に検討するべき
72. 3. フォントを削る 結論 ウェブセーフフォントを使う Webフォントを使いたいときは最小限の構成で使う
73. 4. JavaScriptを削る
74. 4. JavaScriptを削る JavaScript の 1MB と画像の 1MB は全く等価ではない
75. 4. JavaScriptを削る - 意味を変えずに圧縮する - テキストとしての圧縮 (セクション2を参照) + JavaScript 特有の圧縮
76. 4. JavaScriptを削る - JavaScript 特有の圧縮 → mangling
77. 4. JavaScriptを削る - JavaScript 特有の圧縮 → mangling function calculateSum(a, b) { const result = a + b; return result; } console.log(calculateSum(5, 10)); function a(b, c) { const d = b + c; return d; } console.log(a(5, 10)); 意味は等価
78. 4. JavaScriptを削る - JavaScript 特有の圧縮 → mangling function calculateSum(a, b) { const result = a + b; return result; } console.log(calculateSum(5, 10)); function a(b, c) { const d = b + c; return d; } console.log(a(5, 10)); 意味は等価 107文字 75文字
79. 4. JavaScriptを削る - JavaScript 特有の圧縮 → mangling function calculateSum(a, b) { const result = a + b; return result; } console.log(calculateSum(5, 10)); function a(b, c) { const d = b + c; return d; } console.log(a(5, 10)); 意味は等価 107文字 75文字 mangling
80. 4. JavaScriptを削る - 具体的には Terser などのツールで mangling できる - 現代的なビルドツールには組み込まれていることが多い
81. 4. JavaScriptを削る - 意味を変えずに圧縮する - テキストとしての圧縮 (セクション2を参照) + JavaScript 特有の圧縮 - 使わないコードをなるべく含めない - ある場合しか使わないコードは遅延ロードさせる
82. 4. JavaScriptを削る 雑な実装の SPA (Single Page Application) だと... ユーザー ウェブサイト
83. 4. JavaScriptを削る 雑な実装の SPA (Single Page Application) だと... ページ1にアクセス ユーザー ウェブサイト
84. 4. JavaScriptを削る 雑な実装の SPA (Single Page Application) だと... ページ1にアクセス 全部のページのデータ ユーザー ウェブサイト
85. 4. JavaScriptを削る 雑な実装の SPA (Single Page Application) だと... ページ1にアクセス 全部のページのデータ ユーザー ウェブサイト 重い...
86. 4. JavaScriptを削る 理想のSPA実装はこんな感じ ユーザー ウェブサイト
87. 4. JavaScriptを削る 理想のSPA実装はこんな感じ ページ1にアクセス ユーザー ウェブサイト
88. 4. JavaScriptを削る 理想のSPA実装はこんな感じ ページ1にアクセス ページ1のデータ+α ユーザー ウェブサイト
89. 4. JavaScriptを削る 理想のSPA実装はこんな感じ ページ2にアクセス ユーザー ウェブサイト
90. 4. JavaScriptを削る 理想のSPA実装はこんな感じ ページ2にアクセス ページ2のデータ+α ユーザー ウェブサイト
91. 4. JavaScriptを削る 理想のSPA実装はこんな感じ ページ2にアクセス ページ2のデータ+α ユーザー ウェブサイト 軽い！
92. 4. JavaScriptを削る - SPA の場合ページをそれぞれ遅延ロードすると良い - Next.js とかは勝手にやってくれる
93. 4. JavaScriptを削る - 意味を変えずに圧縮する - テキストとしての圧縮 (セクション2を参照) + JavaScript 特有の圧縮 - 使わないコードをなるべく含めない - ある場合しか使わないコードは遅延ロードさせる - 軽量なライブラリを用いる - bundlephobia などでライブラリのサイズを調べられる - 各種 Bundle Analyzer で実際のサイズを調べる
94. 4. JavaScriptを削る - 重要な概念: Tree shaking
95. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ
96. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB
97. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB
98. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB これだけ使う
99. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB これだけ使う 無駄じゃね？？
100. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB これだけ使う 無駄じゃね？？ Tree shaking すると...
101. 4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数β 20KB 20KB これだけ使う 必要な分しかない！！ 関数α 関数γ 関数δ 10KB 40KB 30KB
102. 4. JavaScriptを削る Tree shaking 対応ライブラリと非対応ライブラリがある → Tree shaking 対応ライブラリを使おう！ 対応しているライブラリはだいたい README とかに書いてる
103. 4. JavaScriptを削る 結論 現代的なビルドツールを使う Tree shakable なライブラリを使う
104. 5. キャッシュを使う
105. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み
106. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み
107. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください
108. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください
109. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください データAあげます
110. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み キャッシュ
111. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください
112. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください データAください
113. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください データAください
114. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください データAください データAあげます
115. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください データAください データAあげます データAあげます
116. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください (2回目)
117. 5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、 次に使うときに素早く取り出せるようにする仕組み データAください (2回目) データAあげます (キャッシュ)
118. 5. キャッシュを使う - よく使うキャッシュ: ネットワークキャッシュ = ネットワーク越しのリソース 取得におけるキャッシュ - リソース = HTML、CSS、JS、画像、など
119. 5. キャッシュを使う ネットワークキャッシュを制御するもの Cache-Control (& Vary, Age, ETag)
120. 5. キャッシュを使う データAあげます 1日だけはキャッシュしていいよ～ (Cache-Control ヘッダ) - Cache-Control ヘッダのイメージ
121. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル
122. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル (not cached)
123. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル (not cached) リクエストされた
124. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh (not cached) リクエストされた
125. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh (not cached) リクエストされた 有効期限が切れた
126. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh stale (not cached) リクエストされた 有効期限が切れた
127. 5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh stale (not cached) リクエストされた 有効期限が切れた 有効期限が切れても キャッシュは消えない
128. 5. キャッシュを使う staleキャッシュって いつ使われるの？
129. 5. キャッシュを使う - staleキャッシュを使うには原則 revalidate が必要
130. 5. キャッシュを使う - staleキャッシュを使うには原則 revalidate が必要 - revalidate = サーバーにもう一度問い合わせを行うこと
131. 5. キャッシュを使う - staleキャッシュを使うには原則 revalidate が必要 - revalidate = サーバーにもう一度問い合わせを行うこと → revalidateするなら意味なくない...？
132. 5. キャッシュを使う - 実は、問い合わせをする ≠ リソースを取得する
133. 5. キャッシュを使う - 実は、問い合わせをする ≠ リソースを取得する - 問い合わせをする = キャッシュが最新のものと一致しているか確認する (違う場合はリソースそのものを取得する)
134. 5. キャッシュを使う それを実現するのが... ETag ヘッダ / 304 Not Modified ステータスコード
135. 5. キャッシュを使う それを実現するのが... ETag ヘッダ / 304 Not Modified ステータスコード キャッシュから導かれる一意な値
136. 5. キャッシュを使う staleキャッシュが最新のモノだった場合
137. 5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合
138. 5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE”
139. 5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE” 304 Not Modified
140. 5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE” 304 Not Modified 今のキャッシュが最新で それを fresh として良いの意味
141. 5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE” 304 Not Modified 最新のモノと ETagが同じことを確認 今のキャッシュが最新で それを fresh として良いの意味
142. 5. キャッシュを使う staleキャッシュが最新のモノでない場合
143. 5. キャッシュを使う staleキャッシュが最新のモノでない場合 revalidate する ETag=”ABCDE”
144. 5. キャッシュを使う staleキャッシュが最新のモノでない場合 revalidate する ETag=”ABCDE” 200 OK (リソースそのもの) 最新のモノと ETagが違うとき
145. 5. キャッシュを使う staleキャッシュが最新のモノでない場合 revalidate する ETag=”ABCDE” 200 OK (リソースそのもの) 最新のモノと ETagが違うとき ETag=”FGHIJ”
146. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
147. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
148. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
149. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
150. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private - no-store ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
151. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private - no-store - must-revalidate / stale-while-revalidate / stale-if-error ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
152. 5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private - no-store - must-revalidate / stale-while-revalidate / stale-if-error - 全部話します！！ ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う
153. 5. キャッシュを使う - 有効期限 (fresh である期間) を指定するディレクティブ → max-age / s-maxage (共有キャッシュ用) Cache-Control: max-age=86400, s-maxage=86400 有効期限を86400秒 (=1日) に指定する Cache-Control ヘッダ
154. 5. キャッシュを使う - max-age = 0 にすると最初から stale になる - no-cache は max-age=0 と基本同じ Cache-Control: no-cache _ キャッシュに明示的な revalidate が必要であることを示す Cache-Control ヘッダ
155. 5. キャッシュを使う - 共有キャッシュ / プライベートキャッシュ
156. 5. キャッシュを使う - 共有キャッシュ / プライベートキャッシュ 共有キャッシュ プライベートキャッシュ
157. 5. キャッシュを使う - キャッシュを共有してよいかを指定するディレクティブ - public (共有OK) / private (共有NG) Cache-Control: private リソースが共有部分でキャッシュできないことを示す Cache-Control ヘッダ (ユーザー固有のページ /me など)
158. 5. キャッシュを使う - キャッシュしてはいけないことを示すディレクティブ - no-store (no-cache とは別！) Cache-Control: no-store キャッシュしてはいけないことを示す Cache-Control ヘッダ
159. 5. キャッシュを使う - キャッシュの revalidate 戦略を指定するディレクティブ - must-revalidate - stale-while-revalidate - stale-if-error - etc… Cache-Control: max-age=604800, stale-while-revalidate=86400 1週間キャッシュでき、その後1日はレスポンスをキャッシュに使ってよいことを示す Cache-Control ヘッダ
160. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 freshキャッシュ
161. 5. キャッシュを使う データAください stale-while-revalidate=86400 を指定したときの動作
162. 5. キャッシュを使う データAください データAあげます (freshキャッシュ) stale-while-revalidate=86400 を指定したときの動作
163. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 stale になった (1日以内)
164. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 データAください
165. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 データAください データAあげます (staleキャッシュ)
166. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 データAください データAあげます (staleキャッシュ) データAください
167. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 データAください データAあげます (staleキャッシュ) データAください データAあげます
168. 5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 データAください データAあげます (staleキャッシュ) データAください データAあげます fresh に戻った
169. 5. キャッシュを使う stale-while-revalidate = staleキャッシュを使ってよい期間を指定する
170. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 freshキャッシュ
171. 5. キャッシュを使う データAください stale-if-error=86400 を指定したときの動作
172. 5. キャッシュを使う データAください データAあげます (freshキャッシュ) stale-if-error=86400 を指定したときの動作
173. 5. キャッシュを使う stale になった (1日以内) stale-if-error=86400 を指定したときの動作
174. 5. キャッシュを使う データAください stale-if-error=86400 を指定したときの動作
175. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください
176. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください エラーが起きました
177. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください エラーが起きました データAあげます (staleキャッシュ)
178. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 直った
179. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください
180. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください
181. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください データAあげます
182. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください データAあげます データAあげます
183. 5. キャッシュを使う stale-if-error=86400 を指定したときの動作 データAください データAください データAあげます データAあげます データAあげます fresh に戻った
184. 5. キャッシュを使う stale-if-error = サーバーがエラーになった時に staleキャッシュを使ってよい期間を指定する
185. 5. キャッシュを使う must-revalidate = staleキャッシュは revalidate なしで使えないことを示す (stale-while-revalidate, stale-if-error は許さない)
186. 5. キャッシュを使う - キャッシュの revalidate 戦略を指定するディレクティブ - must-revalidate - stale-while-revalidate - stale-if-error - etc… Cache-Control: max-age=604800, stale-while-revalidate=86400 1週間キャッシュでき、その後1日はレスポンスをキャッシュに使ってよいことを示す Cache-Control ヘッダ 意味わかるよね？
187. 5. キャッシュを使う オススメの Cache-Control 戦略 - 静的リソースは public, max-age=31536000 (1年) とか - ただしバージョンごとにファイル名などで区別がつかないとアプデの度に壊れる - ファイル名を固定したい場合は max-age=0, stale-while-revalidate=86400 など - 動的リソース (APIリクエストとか) は private, max-age=0 - 余裕があれば ETag を用意できると良いかも - 共有されてよいものなら public でも良い
188. 4. JavaScriptを削る 結論 Cache-Control を上手く使う
189. 5. キャッシュを使う ー おまけ - ここでは触れなかったキャッシュ (広い意味で) - JavaScript によるインメモリキャッシュ - ServiceWorker によるキャッシュ - PWA による事前ダウンロード - CDN でのキャッシュ (Webフロントなのかは不明) - リバースプロキシでのキャッシュ (もうWebサーバーかもしれない) - キャッシュは非常に奥深い (そして難しい)
190. まとめ
191. まとめ - セクション1 画像は WEBP かつ適切なサイズで配信する - セクション2 テキストは minify + brotli 圧縮する - セクション3 ウェブセーフフォントを使う - セクション4 現代的ビルドツールと軽いライブラリを使う - セクション5 Cache-Control を上手く使う
192. まとめ 難しすぎる！！
193. まとめ 実は、ここにある内容は全て 典型テクニック
194. まとめ このテクニックの上にさらに アプリ固有のチューニング が行われる
195. まとめ 無理すぎる...
196. まとめ ぜひ SysAd班 で一緒に学びましょう！！