【99%が知らない】Elementorサイトが遅い原因はフォント！Astraで実現する超高速化テクニック

「自分のウェブサイト、なぜか表示が遅いな…」
そう感じているウェブデザイナーや制作者の皆さん、その原因は「フォント」にあるかもしれません。

実は、Elementorを使用しているサイトの99%は、フォントの読み込み方が原因でパフォーマンスが低下していると言っても過言ではありません。

こんにちは！ウェブサイトのパフォーマンス改善を追求するウェブデザイナー向けコミュニティ「Tofu Lab」を運営しているNaomiです。

今回は、Elementorサイトの表示速度を劇的に改善する、フォントの正しい読み込み方法について、初心者にも分かりやすく、そして上級者も納得の裏技まで徹底解説します。

なぜフォントでサイトはこんなに重くなるのか？

まず、なぜフォントがサイトを遅くするのか、実験で見てみましょう。

Elementorで真っさらなページを用意します。この時点でのページサイズはわずか31.8KB。非常に軽量です。

ここに、見出しウィジェットを追加し、よく使われるGoogleフォント「Roboto」を設定します。

[画像：Robotoフォントを追加した後のページサイズが160KBに増加した様子]

すると、ページサイズは一気に160KBに跳ね上がりました。約5倍です！これは、ElementorがRobotoフォントを表示するために、関連するCSSファイルやフォントファイルを追加で読み込んでいるためです。

では、次に日本語フォントの「Noto Sans JP」を追加するとどうなるでしょうか。

[画像：Noto Sans JPを追加した後のページサイズが553KBに激増した様子]

ページサイズは、なんと553KBまで膨れ上がりました。初期状態から約17倍、Roboto追加時から見ても3倍以上です。

この原因は、日本語フォントが「ひらがな」「カタカナ」「よく使う漢字」「あまり使わない漢字」など、膨大な文字セット（サブセット）を内包しているためです。Elementorのデフォルト設定では、ページで使っていない文字まで含めて、すべてのフォントファイルを読み込んでしまうため、これほどまでにページが重くなってしまうのです。

【解決策①】Elementor単体での高速化（少し上級者向け）

この問題を解決する一つの方法は、Elementorによるフォントの自動読み込みを止め、必要なものだけを自分で読み込むことです。

1. 不要なCSSの読み込みを停止する
   • プラグイン「Asset CleanUp」をインストールします。
   • このプラグインを使い、Elementorが自動で読み込むroboto.cssやnotosansjp.cssなどのフォント関連ファイルを、サイト全体で読み込まないように設定します。
2. 必要なフォントだけをGoogle Fontsから直接読み込む
   • プラグイン「WPCode Lite」をインストールします。
   • Google Fontsのサイトで使いたいフォント（例: Noto Sans JP）を選び、必要な太さ（Weight）だけを選択します。
   • 生成された<link>タグをコピーし、WPCodeの「ヘッダー＆フッター」機能を使ってヘッダーに貼り付けます。

この方法で、不要なフォントの読み込みを劇的に減らせますが、Elementorのエディタ上ではフォントが正しくプレビューされないというデメリットがあります。

【解決策②】Astra + Elementorの最強コンビで簡単高速化（推奨！）

そこでおすすめしたいのが、人気テーマ「Astra」とElementorを組み合わせる方法です。これが最も簡単で効果的です。

Astraテーマは、フォントの読み込みを最適化する優れた機能を備えています。

1. Elementorの設定を変更する
   • Elementorの管理画面から「設定」>「一般」タブを開きます。
   • 「デフォルトカラーを無効化」と「デフォルトフォントを無効化」の両方にチェックを入れます。これにより、Elementorはテーマ（Astra）のフォント設定を引き継ぐようになります。
   • [画像：Elementorの設定でテーマのスタイルを継承する設定画面]
2. Astraのカスタマイザーでフォントを設定する
   • WordPressの「外観」>「カスタマイズ」>「全体」>「タイポグラフィ」に進みます。
   • ここで「基本フォント」と「見出しのフォント」を設定します。
   • 重要なポイント： ここで必要なフォントの「太さ」だけを選択します。例えば、本文では「Normal (400)」、見出しでは「Semi-Bold (600)」だけを使うなら、それ以外は選択しません。
   • [画像：Astraのカスタマイザーでフォントと太さを選択している画面]

たったこれだけです。
この設定により、Astraが必要なフォントと太さだけを効率的に読み込んでくれるため、サイトは高速なまま。さらに、Elementorのエディタ上でもフォントが正しくプレビューされるため、デザイン作業も快適になります。

よくある質問（上級者向けTIPS）

Q. Elementorの設定でGoogleフォントを完全に「無効」にした方が速いのでは？
A. 結論から言うと、体感できるほどの差はありません。今回紹介したAstraとの連携方法を使えば、Elementor側でGoogleフォントを有効にしたままでも、Astraが読み込みを最適化してくれるため問題ありません。

Q. 可変フォント（Variable Font）と、個別に太さを指定するのはどっちがいい？
A. 使用するフォントの太さが2〜3種類程度であれば、個別に指定した方が軽くなる傾向があります。しかし、それ以上の多くの太さを使いたい場合は、100〜900までの範囲をカバーする可変フォントを1つだけ読み込んだ方が、合計サイズは小さくなる可能性があります。

まとめ

サイトの表示速度は、ユーザー体験に直結する重要な要素です。そして、その速度を左右する大きな要因が「フォントの読み込み」にあります。

特に理由がなければ、AstraテーマとElementorを組み合わせ、Astraのカスタマイザーでフォントを一元管理するのが、最も簡単で効果的な高速化手法です。

ぜひ、あなたのサイトでもフォント設定を見直し、爆速サイトを目指してみてください！