Zenn
Open3

Font読み込みとページスピードに関して

CSS
HTML
font
dogbasedogbase

前提

  • HTML+SCSS+JSで数ページの静的サイトを作成
  • アニメーションが少し入る程度
  • PageSpeed Insightsで90以上かつCLSが0というのが要件
  • 英字のフォントと日本語フォントが必要
dogbasedogbase

試したこと

Google Fontsを使ってWebフォントを導入

90以上は難しい

例

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;400;600&display=swap" rel="stylesheet">

フォントをローカルに落として、@font-faceを定義して利用

サブセット化を行なって、woff2で300kb程度にした。

例

@font-face {
  font-family: 'Bebas Neue';
  font-weight: 400;
  src: url("/public/fonts/bebasneue/BebasNeue-Regular.woff2") format('woff2'),
  url("/public/fonts/bebasneue/BebasNeue-Regular.woff") format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  font-weight: 400;
  src: url("/public/fonts/ibmplexsansjp/IBMPlexSansJP-Regular.woff2") format('woff2'),
  url("/public/fonts/ibmplexsansjp/IBMPlexSansJP-Regular.woff") format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  font-weight: 600;
  src: url("/public/fonts/ibmplexsansjp/IBMPlexSansJP-Medium.woff2") format('woff2'),
  url("/public/fonts/ibmplexsansjp/IBMPlexSansJP-Medium.woff") format('woff');
  font-display: swap;
}

スコアは85程度くらい。

フォントの動的読み込み

とにかく日本語のフォントのサイズが重いのが原因になるのでそれをどうにかしなくてはいけない。

サブセット化をより細かく行なってサイズを減らすことも1つの案ではある。

デザイン上、FVでは日本語のフォントが不要だったため、FVが読み込まれたのちに日本語フォントを読み込むようにすることでFVの表示速度を高めることができた。

JSはそこまでやることないので素で書いている。

document.addEventListener('DOMContentLoaded', () => {
  function loadFont(fontName, fontWeight, woff2Url, woffUrl) {
    const font = new FontFace(fontName, `url('${woff2Url}') format('woff2'), url('${woffUrl}') format('woff')`, {weight: fontWeight});
    font.load().then(function (loadedFont) {
      document.fonts.add(loadedFont);
    }).catch(function (error) {
      console.error(`${fontName}の読み込みに失敗しました`, error);
    });
  }


  if (document.querySelector('.fv').complete) {
    loadFont("args");
  } else {
    document.querySelector('.fv').addEventListener('load', function () {
      loadFont("args");
    });
  }
});

dogbasedogbase

対策案

要件にもよるが対策案

  • font-dispaly: optional
    • fallbackのフォントになることがほとんどなので大概のケースでは使えないかもしれない
  • サブセット化
    • あらかじめ使う文字がわかっている場合は使える
  • 動的読み込み
    • FVで1つのフォントだけしか使わない時などは良い
  • weightを絞る
    • 日本語フォントで400, 600を使うデザインだったが600だけであればpreloadして使えば95点くらいはできたので動的読み込みと組み合わせるとありかもしれない
  • ローカル(システム)フォントを使う
    • デザイン上可能ならこれがいちばん良い。
    • パフォーマンスが求められるような要件であればある程度デザインとトレードオフなのでデザイン段階で実装を考えておかないといけない。