ウェブフォント読み込み中のテキストの表示にとは？PageSpeed Insights対策の完全ガイド

9 min 11 views

ウェブサイトの表示速度を改善しようとPageSpeed Insightsで診断を行った際、「ウェブフォント読み込み中のテキストの表示」という警告が出てしまい、どう対処すべきか困っている方も多いのではないでしょうか？

この記事では、ウェブフォントの読み込みに関する問題を根本から理解し、効果的な解決方法を詳しく解説していきます。実際のコード例も交えながら、初心者の方でも分かりやすく説明しますので、ぜひ最後までお読みください。

目次

ウェブフォント読み込み中のテキスト表示とは何か？

まずは基本的な概念から整理していきましょう。ウェブフォントとは、サーバー上に配置されたフォントファイルを読み込んで、ウェブページで使用するフォントのことです。

通常、私たちがウェブサイトを見る際には、利用している端末のOS（WindowsやMacなど）にあらかじめインストールされているシステムフォントが使用されます。しかし、ウェブフォントを使用することで、ユーザーの環境に関係なく、デザイナーが意図したとおりの美しいフォントでサイトを表示することができるんです。

ただし、ここで問題となるのが「読み込み時間」です。システムフォントは即座に表示されますが、ウェブフォントはインターネット経由でダウンロードする必要があるため、どうしても時間がかかってしまいます。

FOIT（Flash of Invisible Text）の問題

ウェブフォントの読み込み中に何も表示されない状態のことを「FOIT（Flash of Invisible Text）」と呼びます。この状態では、ユーザーは文字が見えないため、ページが正しく動作しているのか不安になってしまいます。

特に、文字が重要な情報を含んでいる場合、この「見えない時間」は非常に大きな問題となります。そこで、PageSpeed Insightsでは「ウェブフォント読み込み中のテキストの表示」という項目で、この問題を指摘してくれるわけです。

PageSpeed Insightsでの診断結果の意味

PageSpeed Insightsで「ウェブフォント読み込み中のテキストの表示」という警告が表示される場合、以下のようなメッセージが表示されます：

フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。

これは、ウェブフォントが読み込まれるまでの間、代替フォントを表示することで、ユーザーがテキストを読めるようにしましょう、という意味です。

スコアへの影響について

実は、この警告項目は「診断」セクションに分類されており、**PageSpeed Insightsのスコア自体には直接的な影響がありません**。つまり、この警告が出ていても100点のスコアを取ることは可能です。

しかし、ユーザーエクスペリエンスの観点からは非常に重要な問題ですので、可能な限り対策を講じることをお勧めします。

font-display: swapの仕組みと効果

この問題の最も効果的な解決策が、CSSの**font-display: swap**プロパティを使用することです。

font-displayプロパティの値

font-displayプロパティには以下の値を設定できます：

  • auto：ブラウザのデフォルト動作（通常はblock）
  • block：ウェブフォントが読み込まれるまでテキストを非表示（FOIT）
  • swap：すぐに代替フォントを表示し、ウェブフォントが読み込まれたら切り替える
  • fallback：短時間（約100ms）待機後、代替フォントを表示
  • optional：ネットワーク状況に応じて、ウェブフォントの使用を判断

最も推奨されるのは**swap**で、これによりユーザーは即座にテキストを読むことができ、ウェブフォントが読み込まれ次第、より美しいフォントに切り替わります。

実装例

@font-face {
    font-family: 'MyWebFont';
    src: url('mywebfont.woff2') format('woff2'),
         url('mywebfont.woff') format('woff');
    font-display: swap;
}

このように**font-display: swap**を追加するだけで、ウェブフォントの読み込み中も代替フォントでテキストが表示されるようになります。

具体的な実装方法

ここからは、実際によく使われるウェブフォントの種類別に、具体的な実装方法を解説していきます。

Font Awesomeの場合

Font Awesomeは非常に人気のあるアイコンフォントです。しかし、CDNから読み込む場合、デフォルトではfont-display: swapが設定されていないため、警告が表示されることがあります。

問題のあるパターン

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.1.0/css/all.css" crossorigin="anonymous">

このような外部CSSファイルを読み込む方法では、font-displayの設定を後から変更することはできません。

解決策

Font Awesomeの場合、以下のような独自のCSSファイルを作成することで対応できます：

.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot");
    src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
         url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff2") format("woff2"),
         url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff") format("woff"),
         url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.ttf") format("truetype");
}

このファイルを作成し、元のFont AwesomeのCSSの代わりに読み込むことで、font-display: swapが適用され、警告が解消されます。

Google Fontsの場合

Google Fontsは現在、URLパラメータでfont-displayを指定することができます。

従来の方法

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700" rel="stylesheet">

改善された方法

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese" rel="stylesheet">

URLの末尾に**&display=swap**を追加することで、font-display: swapが適用されます。

FONTPLUS（フォントプラス）の場合

日本の商用フォントサービスであるFONTPLUSでも、同様の対策が可能です。

<script type="text/javascript" src="//fontplus.jp/accessor/script/fontplus.js?xxxxxxxxxxx%3D&box=xxxxxxxxxxx%3D&aa=1&ab=2&display=swap" charset="utf-8"></script>

スクリプトタグのsrcの末尾に**&display=swap**を追加することで対応できます。

よくある問題とその解決方法

@font-faceの上書きができない問題

多くの方が陥りがちな問題として、外部CSSで既に定義されている@font-faceを、後から読み込むCSSで上書きしようとしても、うまくいかないことがあります。

これは、@font-faceルールが後から同じ定義をしても上書きされない仕様によるものです。この場合、以下のような対策が必要になります：

  1. 外部CSSファイルをダウンロードして編集する
  2. 独自のCSSファイルを作成して置き換える
  3. CDNのパラメータを利用する（可能な場合）

複数のフォントファイルがある場合

Font Awesomeのように、複数のフォントファイル（solid、regular、brandなど）を使用している場合、すべてのファイルにfont-display: swapを設定する必要があります。

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fa-regular-400.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("fa-solid-900.woff2") format("woff2");
}

パフォーマンスをさらに向上させるための最適化テクニック

font-display: swapを設定するだけでなく、以下のような最適化テクニックを併用することで、ウェブフォントの読み込み速度をさらに向上させることができます。

preloadを使用した先読み

ウェブフォントファイルを事前に読み込むことで、表示速度を向上させることができます。

<link rel="preload" as="font" type="font/woff2" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" crossorigin>

フォントファイルの軽量化

使用しないアイコンや文字セットを削除することで、ファイルサイズを大幅に削減できます。

Font Awesomeの場合

数千個のアイコンが含まれているFont Awesomeですが、実際に使用するアイコンは数個程度という場合が多いです。IcoMoonなどのサービスを使用して、必要なアイコンだけを含むカスタムフォントを作成することをお勧めします。

Google Fontsの場合

Google Fontsでは、必要な文字セットだけを選択して読み込むことができます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap&subset=japanese" rel="stylesheet">

**subset=japanese**を指定することで、日本語文字だけを読み込むことができます。

CDNとキャッシュの活用

高速なCDNを使用することで、ウェブフォントの読み込み速度を向上させることができます。また、適切なキャッシュ設定により、リピーターユーザーにとっての表示速度を大幅に改善できます。

ウェブフォントの必要性を再考する

ここまで対策方法を説明してきましたが、そもそもウェブフォントは本当に必要なのでしょうか？

アイコンフォントの代替案

Font Awesomeのようなアイコンフォントは確かに便利ですが、以下のような代替案も検討できます：

  • SVGアイコン：より軽量で、カスタマイズも容易
  • 画像アイコン：WebP形式などの次世代フォーマットを使用
  • CSS shapes：シンプルなアイコンはCSSだけで作成可能

テキストフォントの代替案

美しいフォントを使用したい気持ちは理解できますが、以下の点も考慮することが重要です：

  • システムフォントの活用：modern system font stackを使用
  • 可読性の重視：デザイン性より読みやすさを優先
  • 部分的な使用：見出しなど重要な部分のみに限定

WordPress環境での対策

WordPressを使用している場合、プラグインやテーマがウェブフォントを読み込んでいることが多く、直接的な編集が困難な場合があります。

functions.phpでの対策

function optimize_webfont_loading() {
    // 既存のFont Awesomeの読み込みを無効化
    wp_dequeue_style('font-awesome');
    
    // 最適化されたFont Awesomeを読み込み
    wp_enqueue_style('font-awesome-optimized', get_template_directory_uri() . '/css/fa-optimized.css');
}
add_action('wp_enqueue_scripts', 'optimize_webfont_loading', 20);

プラグインの活用

OMGF（Optimize My Google Fonts）などのプラグインを使用することで、Google Fontsの読み込みを最適化できます。

測定とモニタリング

対策を実施した後は、効果を測定することが重要です。

測定ツール

  • PageSpeed Insights：Google公式のパフォーマンス測定ツール
  • GTmetrix：詳細な分析結果を提供
  • WebPageTest：リアルブラウザでの詳細測定
  • Chrome DevTools：詳細なネットワーク分析

Core Web Vitalsへの影響

ウェブフォントの最適化は、以下のCore Web Vitalsに影響を与えます：

  • LCP（Largest Contentful Paint）：メインコンテンツの表示速度
  • CLS（Cumulative Layout Shift）：レイアウトの安定性
  • FID（First Input Delay）：操作への応答性

将来的なウェブフォント技術の展望

ウェブフォント技術は日々進化しています。将来的には以下のような技術が普及する可能性があります：

Variable Fonts

可変フォント（Variable Fonts）は、1つのフォントファイルで複数のウェイトやスタイルを表現できる新しい技術です。これにより、複数のフォントファイルを読み込む必要がなくなり、パフォーマンスが大幅に向上します。

Font Loading API

JavaScript APIを使用してフォントの読み込み状態を詳細に制御できるようになります。これにより、より細かい最適化が可能になります。

まとめ

ウェブフォント読み込み中のテキスト表示問題は、**font-display: swap**を適切に設定することで解決できます。しかし、単純にこのプロパティを追加するだけでなく、以下の点を総合的に考慮することが重要です：

  • ユーザーエクスペリエンス：読み込み中もテキストが見えること
  • パフォーマンス：ファイルサイズと読み込み速度の最適化
  • 実装の容易さ：メンテナンスしやすい方法の選択
  • コストパフォーマンス：デザイン性と実用性のバランス

特に、少数のアイコンのために巨大なFont Awesomeを読み込んでいる場合は、IcoMoonなどでカスタムフォントを作成することを強くお勧めします。これだけで、ページの読み込み速度を大幅に改善できるはずです。

また、ウェブサイトの表示速度改善は、ウェブフォントの最適化だけでなく、画像の最適化、キャッシュの活用、CDNの導入など、様々な要素が組み合わさって実現されるものです。

もし、これらの最適化作業が複雑で難しいと感じる場合は、高速化に特化したサービスを利用することも一つの選択肢です。LandingHubでは、このようなパフォーマンス最適化も含めた総合的なウェブサイト制作サービスを提供しており、技術的な詳細を気にすることなく、高速で美しいウェブサイトを構築することができます。

今回の記事が、皆さんのウェブサイト最適化の参考になれば幸いです。ウェブフォントの問題は一見複雑に見えますが、適切な方法で対処すれば必ず解決できるので、ぜひチャレンジしてみてください！

<PREV
静的なアセットと効率的なキャッシュポリシーの配信とは？PageSpeed Insights対策
NEXT>
過大なネットワーク ペイロードの回避とは？PageSpeed Insights対策
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です