WordPressページの読み込みが遅い？Perfmattersでフォントの読み込みを最適化する

ウェブフォントは小さく見えるかもしれませんが、WordPressのページの読み込みを遅くする大きな要因になる可能性があります。特にGoogle Fontsやカスタムフォントを使用している場合、正しく設定されていないと、フォントはページのレンダリングを詰まらせ、ページのバウンスを引き起こし、さらにはSEOやユーザーエクスペリエンスに影響を与える可能性があります。パーフマターズ は、使いやすいフォント読み込みコントロールを提供する、軽量のWordPressパフォーマンス最適化プラグインです。この記事では、フォントの読み込みがパフォーマンスに与える影響について体系的に紹介し、フォントの読み込みを最適化する方法をパーフマターズ最適化を達成する。

I. Perfmattersプラグインとは何ですか？どのようにWordPressのフォント読み込みを最適化するのですか？

Perfmattersは、元Googleのエンジニアによって開発された、パフォーマンス最適化に特化したWordPressプラグインです。サイト本来のデザインに影響を与えることなく、不要なデフォルト機能をオフにしたり、スクリプトの読み込みを管理したり、リソースのプリロードをワンクリックで制御したりすることができ、サイト高速化のための理想的なツールのひとつとなっている。

フォントの最適化のために、Perfmattersは以下の機能を提供しています：

Googleフォントを無効にする（外部からのリクエストを避ける）
フォントサーバーへの事前接続により、DNS検索時間を短縮
主要なフォントリソースをプリロードしてレンダリングを高速化
フォントの読み込み順序を制御し、CLSとFCPの問題を軽減
他の最適化プラグインと互換性のあるローカルフォントホスティングソリューションの適応

これらの機能により、Perfmattersはフォントの読み込みがページ速度に与える影響を大幅に軽減し、ウェブサイトをよりスムーズにします。

2つ目は、フォントの読み込みがWordPressのパフォーマンスに与える影響です。

2.1 外部フォントによる負荷遅延

(大多数ワードプレステーマ（Astra、OceanWP、Kadenceなど）はデフォルトでGoogle Fontsを統合しています。これらのフォントリソースはGoogleのサーバーでホストされており、読み込むたびに追加のDNSルックアップ、TLSハンドシェイク、HTTPリクエストが必要になります。これらの追加リクエストにより、特にモバイル端末やインターネットの速度が遅いユーザーでは、ページの読み込みに遅延が発生する可能性があります。

2.2 コアウェブ・バイタルへの悪影響

最適化されていないフォントの読み込みは、以下の3つの主要なウェブ指標に悪影響を及ぼします：

LCP（最大含有量プロッティング）: フォントがレンダリングをブロックし、メインコンテンツの読み込みを遅らせる；
CLS（累積レイアウトオフセット）フォントの読み込みが終わると再入力されるため、ページがジャンプする；
FID（ファースト・インプット・ディレイ）フォントの読み込み処理はブラウザのメインスレッドを占有し、レスポンス速度に影響します。

III.Perfmattersでフォントの読み込みを最適化するための完全なステップ

3.1 Googleフォントを無効にする

Perfmatters Settingsに順に入力する：

一般 > フォント
コミッション Googleフォントを無効にする

この設定は、テーマとプラグインがfonts.googleapis.comとfonts.gstatic.comを呼び出さないようにし、外部からのリクエストを回避します。

3.2 フォントのプリロードを設定（プリロード）

プリロードは、ブラウザがフォントファイルを事前に読み込むことを可能にし、コンテンツの最初の画面をレンダリングする速度を向上させます。

とおす Perfmatters > プリロード タブ
ある プリロード リージョンを使ってローカルフォントのパスを追加することができます： /wp-content/themes/あなたのテーマ/フォント/roboto.woff2
タイプ選択 "フォント"

3.3 Google Fonts Server へのプリコネクトを有効にする（Google Fonts が無効でない場合）

まだGoogle Fontsを使用している場合は、事前に接続することで最初の読み込みの遅延を減らすことができます：

同じページに プリコネクト その地域へのリンクを追加する： https://fonts.googleapis.com
CrossOrigin "サポートを有効にして、クロスドメインフォント読み込みの互換性を向上。

3.4 フォントの呼び出し回数とフォントウェイトの効率化

Perfmatters自体はフォントコールの詳細を制御しませんが、テーマで制御する必要があります：

フォントは1-2種類のみ使用
よく使われる単語のウェイトだけをロードする

フォントが多ければ多いほど、読み込みは遅くなる。シンプルなフォントの組み合わせは、美的にも美しく、効率的です。

四、最適化効果の検出とFAQ

4.1 フォントが正常に読み込まれたかどうかを検出するには？

利用する Chrome DevTools > ネットワーク パネルで、フォントが正しくプリロードされているか、ローカルにロードされているかを確認してください。
フォントファイルの戻りステータスをチェックする プリロード マーカー
利用する ページスピードインサイト もしかしたら ジーティーメトリックス LCPが改善されたかどうかを確認する。

4.2 フォントを読み込むとスタイルが変わるのはなぜですか？

Google Fontsがオフになっており、代替フォントが設定されていない場合、スタイルの変更が発生する可能性があります。CSSやテーマなどでフォントを設定することをお勧めします：

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif；

4.3 複数のフォントスタイルを読み込むことは効果がありますか？

は読み込みを著しく遅くする可能性があります。最大2つのフォントを使用し、一般的に使用されるスタイルとウェイト（両端揃えや太字など）のみを読み込むことをお勧めします。

V. まとめ

とおすパーフマターズプラグインを実装することができる：

不要なフォント要求を無効にする
フォントを読み込む順序と方法を正確に制御する
ローカルフォントホスティングによる最適なパフォーマンス
PageSpeedのスコアを向上させる、SEOパフォーマンスユーザー・エクスペリエンス

ブログサイト、企業サイト、eコマースページの最適化など、どのようなご要望にも対応いたします。パーフマターズ Allは素晴らしい高速化ツールです。インストールして設定すれば、あなたのウェブサイトはフォントの読み込みの遅さにサヨナラし、パフォーマンスのパフォーマンスを全面的に向上させることができます。この投稿がお客様のご質問にお答えできない場合は、オンラインカスタマーサービスまでお問い合わせください！

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み