WORDPRESS

WordPressで、Webフォント「Googleフォント」の削除は実際するべきか?【サイト表示の高速化】

WordPressで、Webフォント「Googleフォント」の削除は実際するべきか? アイキャッチ



あずきです🐥

WordPressブログで、ページ表示を高速化する手段の1つ…

Googleフォントの削除

について、ブログ初心者さん向けに1から解説していきます♪

具体的には…

  • 表示スピード改善のために、Googleフォントは「削除」すべきか?
  • それともGoogleフォントは残しつつ、「ほかの策」をとるべきか?

というテーマです

まずWordPressでは、使用するテーマによってWebフォントの1種である「Googleフォント」というのが採用されてる可能性があります

「そもそもWEBフォントって何?」という方はこちら♪

「Webフォント」とは?通常のフォントとの違いって?メリット&デメリット アイキャッチ
「Webフォント」とは?通常のフォントとの違いって?メリット&デメリットを初心者向けに優しく解説

続きを見る

例として、このブログで愛用してる「WING(AFFINGER5)」の場合…

  • Noto Sans

という「Googleフォント」の1種が、一部のエリアに最初から設定されてます

具体的には、「記事タイトル」「見出しH2・H3」とかに使われてるよ!
WordPressで表示スピード改善のために、Googleフォントは削除すべき?_top-01

フォントを指定できる、AFFINGER5管理画面

で、結論としては…

僕はこの「Googleフォント」から「通常のフォント」に変えて、「Googleフォント」はブログから削除しました

ただしこの対応策には、メリット・デメリットの両方があるんですね

ということで今回のポイントは、次の4つです

  • WordPressで、Webフォント「Googleフォント」を削除するメリット
  • 「Googleフォント」を削除するデメリット
  • 実際に「Googleフォント」を削除するには?
  • 「Googleフォント」を削除したくない場合の代替策

さっそく見ていきましょー🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressで、Webフォント「Googleフォント」を削除するメリット【表示スピードが速くなる】

WordPressブログ「完全初心者」ガイド 見出し a-01

まず、Googleフォントなどのいわゆる ”Webフォント” をブログから削除する1番のメリットは…

読者のPC・スマホ側が「Googleフォントのデータを読み込まなくなる」ので、表示が高速化される!

なんと言ってもこれに尽きます

というのも、そもそも「Webフォント」じゃない「通常のフォント」であれば…

  • 読者のPC・スマホ内にインストールされてるフォントデータがそのまま使われる

ので、単純に読み込みの負担が少ないんですね

でも「Webフォント」の場合…

サイト側が使ってる「サーバー」から、そのフォントのデータが「読者のPC・スマホ側」にダウンロードされる仕組みになってます

そうなると、読者側がどのデバイスを使っていても、そのサイトが設定してる「本来のフォントを一律で表示できる」という強みはあります

例えば「Windows」でも「Mac」でも、共通の正しいフォントで見れる!

ただその一方で…

読者がアクセスするたびに、そのフォントデータを「サーバー側」から読み込む必要があるので、表示速度が遅くなってしまうという弱みも、Webフォントの場合はあるんですね

しかも…

日本語のWebフォントはとりわけ読み込みを重くしてしまいます

そんなWebフォントを「そもそもブログから削除」してしまえば、当然「フォントデータの読み込み」という負担がなくなるので、スピード改善につながるということ

つづいて、Googleフォントを削除する「デメリット」を見ていきましょう🐥

WordPressで「Googleフォント」を削除するデメリット【単純にフォントデザインが変わってしまう】

WordPressブログ「完全初心者」ガイド 見出し a-02

テーマによっては親切に導入してあるWebフォント「Googleフォント」を削除してしまうデメリットは…

標準フォントに「Googleフォント」が採用されてる場合、それを消すことになるので、フォントデザインが変わってしまう

ということ

まあ当たり前だけど

ちなみに「WING(AFFINGER5)」の場合、「記事タイトル」「見出し」などのエリアが、初期状態で設定されてるGoogleフォント…

  • Noto Sans

から、Webフォントではなく「通常のフォント」である…

  • メイリオ(AFFINGER5全体の標準フォント)
  • 游ゴシック
  • 游明朝

などに切り替えることになります

AFFINGERの管理画面から簡単に切り替えられるのは、基本この3つ!

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_2-01

↑ Googleフォント「Noto Sans」の例

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_2-02

↑ 通常フォント「メイリオ」の例

「メイリオ」の方が、全体的にボリュームと丸みが出ます

Noto Sansはスッキリしててかっこいい…

漢字だと次の通り

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_2-03

↑ Noto Sans

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_2-04

↑ メイリオ

英語だと…

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_2-05

↑ Noto Sans

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_2-06

↑ メイリオ

間違い探しコーナーみたいになってきた

なので、Googleフォントの削除によって「ページ表示速度」が改善されるのはもちろん嬉しいことなんですが…

  • 使えなくなるGoogleフォントの代わりに、使いたいと思うフォントが実際あるかどうか?

がポイントになってきます

僕の場合は「表示スピードの改善」を最優先したので、「Googleフォント削除」というパターンを選びました(「メイリオ」にしました)

今度は、そんな「Googleフォント」の削除方法を見ていきましょう🐥

実際に「Googleフォント」を削除するには?【「テーマ側のフォント設定」と「フォント自体を削除」の2ステップ】

WordPressブログ「完全初心者」ガイド 見出し a-03

WordPressブログで「Googleフォント」を削除する手順は、大きくわけて次の2ステップです

  1. テーマ側のフォント設定を変更
  2. フォント自体を削除

1つ目の「テーマ側のフォント設定」というのは、当然使ってるテーマによってその手順が変わってきます

で、2つ目の「フォント自体を削除」する方法ですが、手っ取り早いのはプラグインを使う方法です

具体的には…

  • Autoptimize

というコード最適化のためのプラグインを使います

今回の「Googleフォント削除」という目的を除いても、表示スピード改善には必須とも言えるくらい便利なツール

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_3-01

「Autoptimize」で、Googleフォントを削除する設定

上記2ステップの手順については ↓ をどうぞ♪

WordPressで「Googleフォントの削除」を行う方法 アイキャッチ
【Autoptimizeなら一瞬】WordPressで「Googleフォントの削除」を行う方法【表示スピードの改善】

続きを見る

最後に補足として、「Googleフォントは削除したくない」という場合の対応策を見ていきます🐥

「Googleフォント」を削除したくない場合の代替策【「Preload」と「font-display:swap」がおすすめ】

WordPressブログ「完全初心者」ガイド 見出し a-04

ここまで踏まえたうえで…

  • ページ表示はもちろん速くしたい!
  • でもGoogleフォントは気に入ってるから、フォント自体は削除したくない!

そんな場合のおすすめな代替策としては…

「Googleフォントのデータは残しつつ、フォントの読み込みをなるべく早くする方法」

というのが、実はあります

なかでも代表的なのが…

  • 非同期で読み込む

という手段です

1つ前のパートでご紹介したプラグイン「Autoptimize」では、実は「Googleフォントの削除」以外に、この「非同期で読み込む」という選択肢もちゃんと用意されてます

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_3-02

「Autoptimize」で、Googleフォントを非同期で読み込ませる設定

ただ!

結論としては、この方法はあまりおすすめできません

理由は、「非同期」で読み込むと「ちらつき」という問題が発生してしまう可能性があるからなんですね

ちらつきとは?

WEBページ上で、フォントが途中で切り替わって表示されてしまう現象

で、そんな「非同期で読み込む」という方法よりもおすすめなのが…

  • Preload(先読み)
  • font-display:swap(WEBフォントが表示されるまでテキストを表示する設定)

という2つの組み合わせです

これを行うことで、Googleフォントを使いつつ、表示速度の遅延もそれなりにカバーできます

同じく「Autoptimize」なら、この方法も設定可能です

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_3-03

「Autoptimize」で、「Preload」と「display:swap」の設定

結論、「Googleフォントは削除したくない」という場合は、この「Preload」&「font-display:swap」という方法がおすすめです

「Autoptimize」の導入と設定方法はこちら♪

WordPressプラグイン「Autoptimize」の基本的な設定方法 アイキャッチ
WordPressプラグイン「Autoptimize」の基本的な設定方法【ブログのページ表示速度を高速化】

続きを見る

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

✔ 研ぎ澄まされた美しいデザインと、「変幻自在」に豊富なバリエーション!

✔ 時間のかかる面倒だったカスタマイズも、「クリック1つ」で瞬時に実現!

✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入&導入ステップを画像つきで1から解説

ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで アイキャッチ
【超時短】ブログの「タグ管理」機能とは?仕組み&使い方から、メリット&デメリットまで【WordPress】

続きを見る

 

おしまい♪

あずき🐥

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ