フォントとアセットの容量を削減する

[ReoHakase]

理由

Lighthouseレポートによると、14MB近く通信しないと読み込みができていないようなので、削減したい。 6.5MBあるフォントファイルは両方しっぽり明朝

https://github.com/vercel/next.js/issues/45080#issuecomment-1411917581

CSS files provided by Google Fonts (https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap) have woff2 files split by unicode ranges. Downloading otf files and using @next/font/local is not an option for CJK.

Google Fontsを利用すると、ユニコードの範囲により分割された.woff2ファイル(一番いい圧縮アルゴリズムを使ってる)を必要な部分だけ読み込めるから、容量がとても少なく済む(~1%) e.g. Noto Sans JPは太さRegularが119分割されている

/* [119] */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansjp/v52/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj757Y0rw_qMHVdbR2L8Y9QTJ1LwkRmR5GprQAe69m.119.woff2) format('woff2');
  unicode-range: U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}

---

---

課題

https://github.com/vercel/next.js/issues/45080#issuecomment-1535150448