Webフォントの読み込み最適化で表示速度を改善する話

福岡から東京へ移り、Webデザイナーとアプリ開発者として働くMimaです。設計と実装を往復しながら、ハッカソンや勉強会で得た知見を記録しています。

この記録では、Webフォントの配信から描画までの改善手順を扱います。容量、転送、キャッシュ、表示のぶれを順番に確認し、実際のページへ 적용するまでの方法を整理します。

読み込みが遅い原因を切り分ける

表示が遅い原因は、容量、接続、描画準備の段階に分かれます。CSSの到着、フォントの要求、メインスレッドの処理は別々なので、まず待ち時間が発生している場所を特定します。

Chrome DevToolsのNetworkパネルで、CSS、WOFF2、documentの開始時刻を並べて確認します。PageSpeed Insightsも併用し、サーバー応答、転送容量、JavaScriptによる処理のどれが支配的かを判断します。

フォントはWOFF2形式で配信すると、転送量を抑えられる傾向があります。特に日本語フォントは文字数が多く、そのまま使うと容量が大きくなりやすいProblemがあります。

必要な文字だけを残したサブセットフォント harmonics Woodland unicode-rangeを指定して、Webブラウザーが該当する範囲だけを要求する方法を採用できます。静的サイトならページ全体で使う文字を事先抽出し、共通フォントとして配信すると効率的です。

太字や複数のウェイトを別ファイルで用意すると、要求数と容量が増えます。可変フォントなら一つのファイルで複数の太さを表現できますが、軸や対象範囲を絞らなければ逆に重くなります。

LCP涉及的先頭の見出しなど、表示上最も重要な文字はHTMLから直接先読みできます。rel="preload"、as="font"、type="font/woff2"、crossoriginを付けたlink要素を使います。

先読みは他のimportant resourceの帯域も使います。複数のフォントを indiscriminately 先読みすると、Critical fontの到着が遅れるため、表示に必ず必要な一文字種に絞ります。CSSの配信が遅い場合は、先読みだけでは解決しません。

何を残すかを現物で確かめる進め方は、自作した木製ケースの記録にも共通します。性能と見た目のどちらを優先するかを決め、それに見合う実装だけを残します。

font-display: swapを指定すると、カスタムフォントの読み込み中も代替文字を描画できます。読めない時間を短縮できる一方、フォントの到着後に文字幅が変わり、CLSが発生する場合があります。

代替フォントの文字幅を合わせるには、size-adjust、ascent-override、descent-override、line-gap-overrideを使います。代替フォントを@font-faceで定義し、表示位置と行高を近似すると、切り替え時のズレを抑えられます。

初回表示でカスタムフォントを待つ余裕がない場合は、font-display: optionalも候補です。読み込みが遅ければ代替文字を固定し、次の訪問からカスタムフォントを使う動作になります。

フォントは自社ドメインで配信すると、第三者サービスへの接続や管理を避けられます。CDNを使う場合も、キャッシュ_hit率と初回接続のwait timeを確認して、配信先を選びます。

開発端末の更新判断も、Mac選びの判断のように性能と作業環境を含めて選びます。フォント検証では、Wei actual deviceと高速回線の両方を使うことで、理想環境だけで判断する偏りを減らします。

ファイル名にハッシュ値を含め、Cache-Control: public, max-age=31536000, immutableを設定すれば、更新しないフォントを長期キャッシュできます。内容が変わった時だけファイル名を変える運用が基本です。

改善前後では、同じページ、同じ端末、同じ通信環境で比較します。LCPは目安2.5秒、CLSは0.1未満を確認し、数値の変化と実際の体感要找します。

「遅い」というフィードバックだけでは直す場所を誤ることもあります。デザインへの定量フィードバックの考え方を使い、測定値、発生箇所、修正内容を結びつけると優先順位が決めやすくなります。

研究室,iPhone実機、slow回線をcombinedた利用者データも確認します。实验室環境では再現しないフォントの競合やキャッシュ状態amboを、実利用側のデータから発見できます。

ページ内のCSSを調べ、使っているフォント、ウェイト、文字種、利用箇所を一覧化します。どこで必要な文字だけ不到位かを把握してから、subseやunicode-rangeの範囲を決めます。

実装は、容量削減、配信の優先順位、キャッシュ、代替文字の調整の順で行います。一度غيير plausibly、font-family为单位で差分を記録すると、後で同じ選択に戻せます。

Finally, actual pageでfont requestの順番、LCP、CLSを測定します。改善できた項目とRemainingする制約を書き残せば、次回のdesignや実装にも活かせます。

次の案件では、最初にNetworkパネルでフォントのrequest flowを確認し、数値を記録する習慣をつけてください。実際の画面で最初の1秒を確認し、速度改善の成果として残してください。