読み込み中のテキスト表示

Silktide は、カスタムフォントのダウンロード中もテキストが読みやすく表示されるかをチェックします。フォントの設定によっては、フォントファイルが届くまでブラウザーがテキストを完全に非表示にするため、訪問者には単語が何も表示されていないページだけが見えることがあります。

重要な理由

フォントファイルは大きいことが多く、ダウンロード中は、明示的な指定がない限りブラウザーがそのフォントのテキストを非表示として描画することがあります。遅い接続では、この「見えないテキストのちらつき」が数秒続くことがあります。画像やレイアウトは表示されてページが読み込まれたように見えるのに、何も伝えていない状態です。訪問者はテキストを読めず、ナビゲーションなどのテキストベースの操作も実質的に利用できません。

厄介なのは、テキスト自体はすでに存在していることです。フォントごとに CSS を1行追加するだけで、カスタムフォントの準備が整うまでフォールバックフォントで表示するようブラウザーに指示できます。

修正方法

1. 各 @font-face ルールに font-display: swap を追加します。これにより、テキストはシステムフォントですぐに表示され、カスタムフォントが届くと切り替わります。

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; /* フォールバックテキストをすぐに表示 */
}

2. ホスティングサービスから読み込んでいるフォントの場合は、そのサービスの設定を使用します。たとえば、スタイルシートの URL に display=swap パラメーターを追加する方法や、通常はこの設定がすでに含まれている最新の埋め込みコードを使用する方法があります。
3. カスタムフォントと比率が似ているフォールバックフォントを選び、切り替え時の移動をできるだけ小さくします。レイアウトシフトも参照してください。

Silktide によるテスト方法

1. 速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
2. ページで使用されている各カスタムフォントを調べ、そのフォントの読み込み中も @font-face ルールによってテキストが表示され続けるかをチェックします。
3. テキストを非表示にする各フォントファイルについて、テキストが非表示になっていた時間の推定値を報告します。
4. 短縮できる可能性のある合計時間に基づいてページを評価します。約100ミリ秒では評価が下がり、200ミリ秒以上では低い評価になります。

トラブルシューティング

フォントがサードパーティのスタイルシートから提供されている

他のサービスがホストしているスタイルシートは編集できませんが、通常はリクエスト方法を変更することで修正できます。ほとんどのフォントサービスでは、URL に表示オプションを指定できるか、更新された埋め込みコードを提供しています。プロバイダーがこの設定方法を提供していない場合は、ルールを自分で管理できるよう、フォントのセルフホスティングを検討してください。

テキストが非表示になっているのを見たことがない

フォントがキャッシュされている場合や接続が速い場合は、表示されない時間が短すぎて気付けません。このチェックは、低速なネットワークを使用する初回訪問者にとって重要です。また、知っておくべきトレードオフもあります。swap を使用すると、訪問者には一時的にフォールバックフォントが表示されます。短時間フォントが変わるほうが、テキストが表示されないよりもほとんどの場合は望ましい状態です。

アイコンフォントを使用している

アイコンフォントを切り替えると、アイコンが表示されるべき場所にプレースホルダー文字が表示され、壊れているように見えることがあります。アイコンフォントでは、短いブロック期間（font-display: block）を設けるか、フォントを SVG アイコンに置き換えるほうが適している場合があります。

詳細情報

• font-display (MDN)
• フォントのベストプラクティス (web.dev)
• レイアウトシフト
• Web Vitals