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

by しーぴー

Slide 1

Slide 1 text

実践Webフロントパフォーマンスチューニング 2025年度 traP新歓オリエンテーション

Slide 2

Slide 2 text

自己紹介ー今日話す人しーぴー🍀 @cp20 代表・SysAd班長

Slide 3

Slide 3 text

おことわり

Slide 4

Slide 4 text

おことわり - マジのガチの実践をやります

Slide 5

Slide 5 text

おことわり - マジのガチの実践をやります - 普通にムズイです

Slide 6

Slide 6 text

おことわり - マジのガチの実践をやります - 普通にムズイです - 内容多すぎるので超削りました

Slide 7

Slide 7 text

おことわり - マジのガチの実践をやります - 普通にムズイです - 内容多すぎるので超削りました - フルバージョンはスライドで配ります

Slide 8

Slide 8 text

概要画像を軽くする 1 JavaScriptを削る 4 テキストを圧縮する 2 キャッシュを使う 5 フォントを削る 3

Slide 9

Slide 9 text

概要画像を軽くする 1 JavaScriptを削る 4 テキストを圧縮する 2 キャッシュを使う 5 フォントを削る 3 時間の都合でカット🙇

Slide 10

Slide 10 text

1. 画像を軽くする

Slide 11

Slide 11 text

1. 画像を軽くする

Slide 12

Slide 12 text

1. 画像を軽くする画像を圧縮する

Slide 13

Slide 13 text

1. 画像を軽くする画像を圧縮する画像を小さくする

Slide 14

Slide 14 text

1. 画像を軽くする画像を圧縮する画像を小さくする

Slide 15

Slide 15 text

1. 画像を軽くするー画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの)

Slide 16

Slide 16 text

1. 画像を軽くするー画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数)

Slide 17

Slide 17 text

1. 画像を軽くするー画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数) 268px 268px

Slide 18

Slide 18 text

1. 画像を軽くするー画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数) 268px 268px 1pxあたりの情報量 = 4byte RGBAでそれぞれ0～255の値を取るとしたとき

Slide 19

Slide 19 text

1. 画像を軽くするー画像を圧縮する - 画像の情報 →各ピクセルの色の情報 (を集めたもの) - 画像の容量 → 色の情報 × ピクセル数 (画素数) 268px 268px 1pxあたりの情報量 = 4byte RGBAでそれぞれ0～255の値を取るとしたとき 4×268×268=287296B≒280KB

Slide 20

Slide 20 text

1. 画像を軽くするー画像を圧縮するでも実際は...

Slide 21

Slide 21 text

1. 画像を軽くするー画像を圧縮する 62.1KBしかない！！！

Slide 22

Slide 22 text

1. 画像を軽くするー画像を圧縮する 62.1KBしかない！！！データが圧縮されているから

Slide 23

Slide 23 text

- 色々な画像圧縮アルゴリズム - PNG (可逆圧縮、透明度付き、デジタルイラストなどに効果的) - JPEG (非可逆圧縮、圧縮率を調整可能、写真などに効果的) - GIF (可逆圧縮、厳しい色制限、アニメーション可能) - HEIC (主に非可逆圧縮、Apple製品でよく使われる、Webでは非対応) - WEBP (可逆・非可逆圧縮、アニメーション可能、高圧縮率) - AVIF (可逆・非可逆圧縮、高圧縮率、処理が重い) 1. 画像を軽くするー画像を圧縮する

Slide 24

Slide 24 text

1. 画像を軽くするー画像を圧縮する PNG 62.1KB

Slide 25

Slide 25 text

1. 画像を軽くするー画像を圧縮する PNG 62.1KB GIF 26.3KB

Slide 26

Slide 26 text

1. 画像を軽くするー画像を圧縮する PNG 62.1KB GIF 26.3KB JPEG (q=95) 20.7KB

Slide 27

Slide 27 text

1. 画像を軽くするー画像を圧縮する PNG 62.1KB GIF 26.3KB JPEG (q=95) 20.7KB AVIF (q=95) 14.9KB

Slide 28

Slide 28 text

1. 画像を軽くするー画像を圧縮する PNG 62.1KB GIF 26.3KB JPEG (q=95) 20.7KB WEBP (q=95) 13.5KB AVIF (q=95) 14.9KB ※この画像の例であり、画像によってはこの順位が入れ替わります

Slide 29

Slide 29 text

1. 画像を軽くするー画像を圧縮する - quality を下げても圧縮できる (ただし劣化する) q=100 (可逆) 17.1KB q=80 7.5KB q=60 5.8KB q=40 4.8KB q=20 3.6KB 同じ画像を quality を変えながら WEBP で圧縮してみた例

Slide 30

Slide 30 text

1. 画像を軽くするー画像を圧縮する - 具体的には sharp や ImageMagick を用いて変換する - quality による劣化の程度は Squoosh などで確認できる $ npx sharp-cli --format webp --quality 95 -i input.png -o output.webp sharp-cli を用いて画像を変換する例

Slide 31

Slide 31 text

1. 画像を軽くするー画像を圧縮する結論画像はWEBP (or AVIF) にする安定を取るなら quality は 95 とかがおススメです

Slide 32

Slide 32 text

1. 画像を軽くするー画像を圧縮する Q. WEBP/AVIF 未サポートユーザーはどうするの？ A. だいたい無視しても良い (ほぼ全ての環境で使える) ※サポートしたい場合は Accept ヘッダーを見てサーバー側で画像を出し分ける処理が必要になります

Slide 33

Slide 33 text

1. 画像を軽くする画像を圧縮する画像を小さくする

Slide 34

Slide 34 text

1. 画像を軽くするー画像を小さくする思い出すシリーズ

Slide 35

Slide 35 text

1. 画像を軽くするー画像を小さくする

Slide 36

Slide 36 text

1. 画像を軽くするー画像を小さくする画像の大きさを半分にする →容量も半分になる！

Slide 37

Slide 37 text

1. 画像を軽くするー画像を小さくする Science Tokyo 公式サイト (isct.ac.jp)

Slide 38

Slide 38 text

1. 画像を軽くするー画像を小さくする Science Tokyo 公式サイト (isct.ac.jp)

Slide 39

Slide 39 text

1. 画像を軽くするー画像を小さくする 299px 168px

Slide 40

Slide 40 text

1. 画像を軽くするー画像を小さくする 299px 168px この画像の大きさは 1440px×810px

Slide 41

Slide 41 text

1. 画像を軽くするー画像を小さくする 299px 168px この画像の大きさは 1440px×810px 無駄に大きい画像を読み込んでいる

Slide 42

Slide 42 text

1. 画像を軽くするー画像を小さくするオリジナル 71.5KB

Slide 43

Slide 43 text

1. 画像を軽くするー画像を小さくするオリジナル 71.5KB 可逆圧縮後 53.9KB

Slide 44

Slide 44 text

1. 画像を軽くするー画像を小さくするオリジナル 71.5KB 可逆圧縮後 53.9KB リサイズ後 8.9KB

Slide 45

Slide 45 text

1. 画像を軽くするー画像を小さくする - 画像を小さくするのはレンダリング負荷削減にも繋がる (特に大量の画像をレンダリングする場合

Slide 46

Slide 46 text

1. 画像を軽くするー画像を小さくする画面全体に画像を表示したいとき Science Tokyo 公式サイト (isct.ac.jp)

Slide 47

Slide 47 text

1. 画像を軽くするー画像を小さくする画面全体に画像を表示したいとき → 画像の大きさがデバイス (PC/スマホ) によってばらける Science Tokyo 公式サイト (isct.ac.jp)

Slide 48

Slide 48 text

1. 画像を軽くするー画像を小さくする画面全体に画像を表示したいとき → 画像の大きさがデバイス (PC/スマホ) によってばらける → PC用の画像はスマホには大きすぎる (=無駄) Science Tokyo 公式サイト (isct.ac.jp)

Slide 49

Slide 49 text

1. 画像を軽くするー画像を小さくする画面幅によって画像を出し分ける機能がある！

Slide 50

Slide 50 text

1. 画像を軽くするー画像を小さくする imgタグのsrcset・sizes属性とpictureタグの使い方レスポンシブイメージで画像表示を最適化 - ICS MEDIA 使いかたは↓の記事を読んでください

Slide 51

Slide 51 text

1. 画像を軽くするー画像を小さくする - リサイズも sharp / ImageMagick でできます $ npx sharp-cli -i input.png -o output.png resize 350 350 sharp-cli を用いて画像をリサイズする例

Slide 52

Slide 52 text

1. 画像を軽くするー画像を小さくする結論画像は表示サイズまで小さくする

Slide 53

Slide 53 text

1. 画像を軽くするーおまけページの読み込みを速くする → ファーストビューの読み込みを速くする → ファーストビュー以外を遅延読み込みする

Slide 54

Slide 54 text

1. 画像を軽くするーおまけページの読み込みを速くする → ファーストビューの読み込みを速くする → ファーストビュー以外を遅延読み込みする

Slide 55

Slide 55 text

1. 画像を軽くするーおまけページの読み込みを速くする → ファーストビューの読み込みを速くする → ファーストビュー以外の読み込みを遅らせる

Slide 56

Slide 56 text

1. 画像を軽くするーおまけ - 画面に映るまで画像の描画を遅延させる → loading=”lazy” - (ファーストビューの画像には付けない) - (ちゃんとCLSを抑制しないと効果薄)

Slide 57

Slide 57 text

2. テキストを圧縮する

Slide 58

Slide 58 text

2. テキストを圧縮する - テキスト = HTML/CSS/JS など - 意味のない空白を削る - プログラムの意味を変えずに短くする - 一般に minify と呼ばれる作業 - テキストを可逆圧縮する - gzip / deflate / brotli / zstd などの圧縮形式がある

Slide 59

Slide 59 text

2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイルオリジナル 95.5KB

Slide 60

Slide 60 text

2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイルオリジナル 95.5KB minify後 72.8KB

Slide 61

Slide 61 text

2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイル minify後 72.8KB

Slide 62

Slide 62 text

2. テキストを圧縮する https://www.isct.ac.jp/ja の HTMLファイル minify後 72.8KB gzip 16.0KB deflate 16.0KB zstd 16.2KB brotli 12.5KB

Slide 63

Slide 63 text

2. テキストを圧縮する - 現代的なツールを使えば minify オプションはきっとある - ESBuild、Rollup、Parcelなどのバンドルツールはサポートしている - そうでない場合は html-minifier などを使おう

Slide 64

Slide 64 text

2. テキストを圧縮する - 現代的なツールを使えば minify オプションはきっとある - ESBuild、Rollup、Parcelなどのバンドルツールはサポートしている - そうでない場合は html-minifier などを使おう - テキストの圧縮はミドルウェアでだいたいできる - だいたいのWebサーバー (リバースプロキシ) は圧縮をサポートしてる - 「(自分の使ってるサーバーライブラリ) text compression」で検索

Slide 65

Slide 65 text

2. テキストを圧縮する結論テキストは minify + brotli 圧縮する

Slide 66

Slide 66 text

1. 画像を軽くするー画像を圧縮する Q. brotli 未対応ユーザーはどうするの？ A. だいたい無視しても良い (ほぼ全ての環境で使える) ※サポートしたい場合は Accept-Encoding ヘッダーを見てサーバー側で圧縮方式を変える必要があります ※そして多くのミドルウェアはその機能をサポートしているはずです

Slide 67

Slide 67 text

3. フォントを削る

Slide 68

Slide 68 text

3. フォントを削る - Webフォントは雑に使うと重い (デカい) - 2～3MBは普通に突破しがち

Slide 69

Slide 69 text

3. フォントを削る - Webフォントは雑に使うと重い (デカい) - 2～3MBは普通に突破しがち - ウェブセーフフォントを使うことも視野に - ウェブセーフフォント → デバイスに入っていてダウンロード不要

Slide 70

Slide 70 text

3. フォントを削る - Webフォントは雑に使うと重い (デカい) - 2～3MBは普通に突破しがち - ウェブセーフフォントを使うことも視野に - ウェブセーフフォント → デバイスに入っていてダウンロード不要 - どうしてもWebフォントを使う場合はサブセット化する - サブセット化 = 使う文字 (例えば日本語のみ) だけを取り出すこと

Slide 71

Slide 71 text

3. フォントを削る - Variable Fonts vs Normal Fonts - Variable Fonts = Font Weight (文字の太さ) が自由に変えられるフォント - 様々な Weight を使い分ける場合は Normal Fonts をパターン数使うよりは軽くなる場合がある - しかしサイト内で使う Weight のパターン数を減らすことを Variable Fonts を使う前に検討するべき

Slide 72

Slide 72 text

3. フォントを削る結論ウェブセーフフォントを使う Webフォントを使いたいときは最小限の構成で使う

Slide 73

Slide 73 text

4. JavaScriptを削る

Slide 74

Slide 74 text

4. JavaScriptを削る JavaScript の 1MB と画像の 1MB は全く等価ではない

Slide 75

Slide 75 text

4. JavaScriptを削る - 意味を変えずに圧縮する - テキストとしての圧縮 (セクション2を参照) + JavaScript 特有の圧縮

Slide 76

Slide 76 text

4. JavaScriptを削る - JavaScript 特有の圧縮 → mangling

Slide 77

Slide 77 text

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)); 意味は等価

Slide 78

Slide 78 text

Slide 79

Slide 79 text

Slide 80

Slide 80 text

4. JavaScriptを削る - 具体的には Terser などのツールで mangling できる - 現代的なビルドツールには組み込まれていることが多い

Slide 81

Slide 81 text

4. JavaScriptを削る - 意味を変えずに圧縮する - テキストとしての圧縮 (セクション2を参照) + JavaScript 特有の圧縮 - 使わないコードをなるべく含めない - ある場合しか使わないコードは遅延ロードさせる

Slide 82

Slide 82 text

4. JavaScriptを削る雑な実装の SPA (Single Page Application) だと... ユーザーウェブサイト

Slide 83

Slide 83 text

4. JavaScriptを削る雑な実装の SPA (Single Page Application) だと... ページ1にアクセスユーザーウェブサイト

Slide 84

Slide 84 text

4. JavaScriptを削る雑な実装の SPA (Single Page Application) だと... ページ1にアクセス全部のページのデータユーザーウェブサイト

Slide 85

Slide 85 text

4. JavaScriptを削る雑な実装の SPA (Single Page Application) だと... ページ1にアクセス全部のページのデータユーザーウェブサイト重い...

Slide 86

Slide 86 text

4. JavaScriptを削る理想のSPA実装はこんな感じユーザーウェブサイト

Slide 87

Slide 87 text

4. JavaScriptを削る理想のSPA実装はこんな感じページ1にアクセスユーザーウェブサイト

Slide 88

Slide 88 text

4. JavaScriptを削る理想のSPA実装はこんな感じページ1にアクセスページ1のデータ+α ユーザーウェブサイト

Slide 89

Slide 89 text

4. JavaScriptを削る理想のSPA実装はこんな感じページ2にアクセスユーザーウェブサイト

Slide 90

Slide 90 text

4. JavaScriptを削る理想のSPA実装はこんな感じページ2にアクセスページ2のデータ+α ユーザーウェブサイト

Slide 91

Slide 91 text

4. JavaScriptを削る理想のSPA実装はこんな感じページ2にアクセスページ2のデータ+α ユーザーウェブサイト軽い！

Slide 92

Slide 92 text

4. JavaScriptを削る - SPA の場合ページをそれぞれ遅延ロードすると良い - Next.js とかは勝手にやってくれる

Slide 93

Slide 93 text

4. JavaScriptを削る - 意味を変えずに圧縮する - テキストとしての圧縮 (セクション2を参照) + JavaScript 特有の圧縮 - 使わないコードをなるべく含めない - ある場合しか使わないコードは遅延ロードさせる - 軽量なライブラリを用いる - bundlephobia などでライブラリのサイズを調べられる - 各種 Bundle Analyzer で実際のサイズを調べる

Slide 94

Slide 94 text

4. JavaScriptを削る - 重要な概念: Tree shaking

Slide 95

Slide 95 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ

Slide 96

Slide 96 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB

Slide 97

Slide 97 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB

Slide 98

Slide 98 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB これだけ使う

Slide 99

Slide 99 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB これだけ使う無駄じゃね？？

Slide 100

Slide 100 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数α 関数β 関数γ 関数δ 10KB 20KB 40KB 30KB 100KB これだけ使う無駄じゃね？？ Tree shaking すると...

Slide 101

Slide 101 text

4. JavaScriptを削る - 重要な概念: Tree shaking ライブラリA 関数β 20KB 20KB これだけ使う必要な分しかない！！関数α 関数γ 関数δ 10KB 40KB 30KB

Slide 102

Slide 102 text

4. JavaScriptを削る Tree shaking 対応ライブラリと非対応ライブラリがある → Tree shaking 対応ライブラリを使おう！対応しているライブラリはだいたい README とかに書いてる

Slide 103

Slide 103 text

4. JavaScriptを削る結論現代的なビルドツールを使う Tree shakable なライブラリを使う

Slide 104

Slide 104 text

5. キャッシュを使う

Slide 105

Slide 105 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組み

Slide 106

Slide 106 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組み

Slide 107

Slide 107 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAください

Slide 108

Slide 108 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAください

Slide 109

Slide 109 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAくださいデータAあげます

Slide 110

Slide 110 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みキャッシュ

Slide 111

Slide 111 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAください

Slide 112

Slide 112 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAくださいデータAください

Slide 113

Slide 113 text

Slide 114

Slide 114 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAくださいデータAくださいデータAあげます

Slide 115

Slide 115 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAくださいデータAくださいデータAあげますデータAあげます

Slide 116

Slide 116 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAください (2回目)

Slide 117

Slide 117 text

5. キャッシュを使う - キャッシュ : よく使うデータを一時的に保存して、次に使うときに素早く取り出せるようにする仕組みデータAください (2回目) データAあげます (キャッシュ)

Slide 118

Slide 118 text

5. キャッシュを使う - よく使うキャッシュ: ネットワークキャッシュ = ネットワーク越しのリソース取得におけるキャッシュ - リソース = HTML、CSS、JS、画像、など

Slide 119

Slide 119 text

5. キャッシュを使うネットワークキャッシュを制御するもの Cache-Control (& Vary, Age, ETag)

Slide 120

Slide 120 text

5. キャッシュを使うデータAあげます 1日だけはキャッシュしていいよ～ (Cache-Control ヘッダ) - Cache-Control ヘッダのイメージ

Slide 121

Slide 121 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル

Slide 122

Slide 122 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル (not cached)

Slide 123

Slide 123 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル (not cached) リクエストされた

Slide 124

Slide 124 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh (not cached) リクエストされた

Slide 125

Slide 125 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh (not cached) リクエストされた有効期限が切れた

Slide 126

Slide 126 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh stale (not cached) リクエストされた有効期限が切れた

Slide 127

Slide 127 text

5. キャッシュを使う - ネットワークキャッシュのライフサイクル fresh stale (not cached) リクエストされた有効期限が切れた有効期限が切れてもキャッシュは消えない

Slide 128

Slide 128 text

5. キャッシュを使う staleキャッシュっていつ使われるの？

Slide 129

Slide 129 text

5. キャッシュを使う - staleキャッシュを使うには原則 revalidate が必要

Slide 130

Slide 130 text

5. キャッシュを使う - staleキャッシュを使うには原則 revalidate が必要 - revalidate = サーバーにもう一度問い合わせを行うこと

Slide 131

Slide 131 text

5. キャッシュを使う - staleキャッシュを使うには原則 revalidate が必要 - revalidate = サーバーにもう一度問い合わせを行うこと → revalidateするなら意味なくない...？

Slide 132

Slide 132 text

5. キャッシュを使う - 実は、問い合わせをする ≠ リソースを取得する

Slide 133

Slide 133 text

5. キャッシュを使う - 実は、問い合わせをする ≠ リソースを取得する - 問い合わせをする = キャッシュが最新のものと一致しているか確認する (違う場合はリソースそのものを取得する)

Slide 134

Slide 134 text

5. キャッシュを使うそれを実現するのが... ETag ヘッダ / 304 Not Modified ステータスコード

Slide 135

Slide 135 text

5. キャッシュを使うそれを実現するのが... ETag ヘッダ / 304 Not Modified ステータスコードキャッシュから導かれる一意な値

Slide 136

Slide 136 text

5. キャッシュを使う staleキャッシュが最新のモノだった場合

Slide 137

Slide 137 text

5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合

Slide 138

Slide 138 text

5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE”

Slide 139

Slide 139 text

5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE” 304 Not Modified

Slide 140

Slide 140 text

5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE” 304 Not Modified 今のキャッシュが最新でそれを fresh として良いの意味

Slide 141

Slide 141 text

5. キャッシュを使う revalidate する staleキャッシュが最新のモノだった場合 ETag=”ABCDE” 304 Not Modified 最新のモノと ETagが同じことを確認今のキャッシュが最新でそれを fresh として良いの意味

Slide 142

Slide 142 text

5. キャッシュを使う staleキャッシュが最新のモノでない場合

Slide 143

Slide 143 text

5. キャッシュを使う staleキャッシュが最新のモノでない場合 revalidate する ETag=”ABCDE”

Slide 144

Slide 144 text

5. キャッシュを使う staleキャッシュが最新のモノでない場合 revalidate する ETag=”ABCDE” 200 OK (リソースそのもの) 最新のモノと ETagが違うとき

Slide 145

Slide 145 text

5. キャッシュを使う staleキャッシュが最新のモノでない場合 revalidate する ETag=”ABCDE” 200 OK (リソースそのもの) 最新のモノと ETagが違うとき ETag=”FGHIJ”

Slide 146

Slide 146 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 147

Slide 147 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 148

Slide 148 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 149

Slide 149 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 150

Slide 150 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private - no-store ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 151

Slide 151 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private - no-store - must-revalidate / stale-while-revalidate / stale-if-error ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 152

Slide 152 text

5. キャッシュを使う - レスポンス時※ の Cache-Control の主要なディレクティブ - max-age / s-maxage - no-cache - public / private - no-store - must-revalidate / stale-while-revalidate / stale-if-error - 全部話します！！ ※リクエスト時の Cache-Control もあってややこしいが、ここではレスポンス時のもののみを扱う

Slide 153

Slide 153 text

5. キャッシュを使う - 有効期限 (fresh である期間) を指定するディレクティブ → max-age / s-maxage (共有キャッシュ用) Cache-Control: max-age=86400, s-maxage=86400 有効期限を86400秒 (=1日) に指定する Cache-Control ヘッダ

Slide 154

Slide 154 text

5. キャッシュを使う - max-age = 0 にすると最初から stale になる - no-cache は max-age=0 と基本同じ Cache-Control: no-cache _ キャッシュに明示的な revalidate が必要であることを示す Cache-Control ヘッダ

Slide 155

Slide 155 text

5. キャッシュを使う - 共有キャッシュ / プライベートキャッシュ

Slide 156

Slide 156 text

5. キャッシュを使う - 共有キャッシュ / プライベートキャッシュ共有キャッシュプライベートキャッシュ

Slide 157

Slide 157 text

5. キャッシュを使う - キャッシュを共有してよいかを指定するディレクティブ - public (共有OK) / private (共有NG) Cache-Control: private リソースが共有部分でキャッシュできないことを示す Cache-Control ヘッダ (ユーザー固有のページ /me など)

Slide 158

Slide 158 text

5. キャッシュを使う - キャッシュしてはいけないことを示すディレクティブ - no-store (no-cache とは別！) Cache-Control: no-store キャッシュしてはいけないことを示す Cache-Control ヘッダ

Slide 159

Slide 159 text

5. キャッシュを使う - キャッシュの revalidate 戦略を指定するディレクティブ - must-revalidate - stale-while-revalidate - stale-if-error - etc… Cache-Control: max-age=604800, stale-while-revalidate=86400 1週間キャッシュでき、その後1日はレスポンスをキャッシュに使ってよいことを示す Cache-Control ヘッダ

Slide 160

Slide 160 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 freshキャッシュ

Slide 161

Slide 161 text

5. キャッシュを使うデータAください stale-while-revalidate=86400 を指定したときの動作

Slide 162

Slide 162 text

5. キャッシュを使うデータAくださいデータAあげます (freshキャッシュ) stale-while-revalidate=86400 を指定したときの動作

Slide 163

Slide 163 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作 stale になった (1日以内)

Slide 164

Slide 164 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作データAください

Slide 165

Slide 165 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作データAくださいデータAあげます (staleキャッシュ)

Slide 166

Slide 166 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作データAくださいデータAあげます (staleキャッシュ) データAください

Slide 167

Slide 167 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作データAくださいデータAあげます (staleキャッシュ) データAくださいデータAあげます

Slide 168

Slide 168 text

5. キャッシュを使う stale-while-revalidate=86400 を指定したときの動作データAくださいデータAあげます (staleキャッシュ) データAくださいデータAあげます fresh に戻った

Slide 169

Slide 169 text

5. キャッシュを使う stale-while-revalidate = staleキャッシュを使ってよい期間を指定する

Slide 170

Slide 170 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作 freshキャッシュ

Slide 171

Slide 171 text

5. キャッシュを使うデータAください stale-if-error=86400 を指定したときの動作

Slide 172

Slide 172 text

5. キャッシュを使うデータAくださいデータAあげます (freshキャッシュ) stale-if-error=86400 を指定したときの動作

Slide 173

Slide 173 text

5. キャッシュを使う stale になった (1日以内) stale-if-error=86400 を指定したときの動作

Slide 174

Slide 174 text

5. キャッシュを使うデータAください stale-if-error=86400 を指定したときの動作

Slide 175

Slide 175 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAください

Slide 176

Slide 176 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAくださいエラーが起きました

Slide 177

Slide 177 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAくださいエラーが起きましたデータAあげます (staleキャッシュ)

Slide 178

Slide 178 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作直った

Slide 179

Slide 179 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAください

Slide 180

Slide 180 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAください

Slide 181

Slide 181 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAくださいデータAあげます

Slide 182

Slide 182 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAくださいデータAあげますデータAあげます

Slide 183

Slide 183 text

5. キャッシュを使う stale-if-error=86400 を指定したときの動作データAくださいデータAくださいデータAあげますデータAあげますデータAあげます fresh に戻った

Slide 184

Slide 184 text

5. キャッシュを使う stale-if-error = サーバーがエラーになった時に staleキャッシュを使ってよい期間を指定する

Slide 185

Slide 185 text

5. キャッシュを使う must-revalidate = staleキャッシュは revalidate なしで使えないことを示す (stale-while-revalidate, stale-if-error は許さない)

Slide 186

Slide 186 text

Slide 187

Slide 187 text

5. キャッシュを使うオススメの Cache-Control 戦略 - 静的リソースは public, max-age=31536000 (1年) とか - ただしバージョンごとにファイル名などで区別がつかないとアプデの度に壊れる - ファイル名を固定したい場合は max-age=0, stale-while-revalidate=86400 など - 動的リソース (APIリクエストとか) は private, max-age=0 - 余裕があれば ETag を用意できると良いかも - 共有されてよいものなら public でも良い

Slide 188

Slide 188 text

4. JavaScriptを削る結論 Cache-Control を上手く使う

Slide 189

Slide 189 text

5. キャッシュを使うーおまけ - ここでは触れなかったキャッシュ (広い意味で) - JavaScript によるインメモリキャッシュ - ServiceWorker によるキャッシュ - PWA による事前ダウンロード - CDN でのキャッシュ (Webフロントなのかは不明) - リバースプロキシでのキャッシュ (もうWebサーバーかもしれない) - キャッシュは非常に奥深い (そして難しい)

Slide 190

Slide 190 text

まとめ

Slide 191

Slide 191 text

まとめ - セクション1 画像は WEBP かつ適切なサイズで配信する - セクション2 テキストは minify + brotli 圧縮する - セクション3 ウェブセーフフォントを使う - セクション4 現代的ビルドツールと軽いライブラリを使う - セクション5 Cache-Control を上手く使う

Slide 192

Slide 192 text

まとめ難しすぎる！！

Slide 193

Slide 193 text

まとめ実は、ここにある内容は全て典型テクニック

Slide 194

Slide 194 text

まとめこのテクニックの上にさらにアプリ固有のチューニングが行われる