ブログカスタマイズ PR

WordPressテーマJINでFontをOFFにするとサイト表示が超高速化(JIN Ver2.0以上)

記事内に商品プロモーションを含む場合があります

WordPressのテーマ「JIN」がVer2.0にアップデートされました。
高速化が今回のアップデートの目玉のようなので、さっそく計測。

アップデートして設定をいじると爆速化しました!
ただアイコンが表示されなくなることがあるので、その場合は手当てが必要です。

この記事のまとめ
  • JINを設定したWordpress管理画面の「カスタマイズ」>「その他設定」で「FontAwesome5の読み込みをOFF」にすると、ページ表示が爆速に
  • アイコンが表示されなくなったら、JINオリジナルアイコンに書き換えが必要

さらに高速化する方法は「WordPressサイトを高速化する7つの方法。実際に測った効果からおすすめの方法をご紹介」でまとめています。

サイトの高速化の重要性

サイトの表示速度は、見ている人の満足度に大きな影響を与えます。Googleによると、モバイルサイトの「ページの読み込みにかかる時間」と「直帰率」は以下の関係があるそうです。

  • 読み込みが1秒から3秒なると、直帰率は32%上がる
  • 読み込みが1秒から5秒なると、直帰率は90%上がる
  • 読み込みが1秒から6秒なると、直帰率は106%上がる
  • 読み込みが1秒から10秒なると、直帰率は123%上がる

Googleのレポート

また、Googleは検索の結果にサイトの表示速度も加味していることを発表しています。

つまりサイトの表示速度はユーザ満足度に大きな影響を与えるもので、Googleもそれを重視しているということになります。

JINのVer2.0は、このサイト高速化をメインの目的としているとのこと。

このサイトでも導入して、どれくらい早くなるか確認しました。

JIN高速化の手順

JINを使っているサイトを高速化するには、Ver2.0から可能になった「FontAwesome5の無効化」を設定します。

具体的には、Wordpressの管理画面で
「外観」>「カスタマイズ」>「その他設定」
を選ぶと
「fontawesomeを読み込まない」
というチェックボックスがあるので、ここにチェックを入れるだけ。

FontAwesome無効化の効果

FontAwesomeの無効化の前後で、このブログのトップページの表示速度を計測しました。使ったのは以下2つのサービスです。どちらもURLを入力するだけでそのサイトの表示速度を測ってくれます。

FontAwesomeを無効化する前

GT MetrixではPageSpeed Score(ページ速度スコア)がA〜Fの評価のうち上から2番めの「B」、Total Page Size(ページサイズ)が1.36MB。

PageSpeed Insightはモバイルで56点(平均レベル)

FontAwesomeを無効化した後

GT MetrixではPageSpeed Scoreは「B」と変わらず。ただTotal Page Sizeは1.36MB→780KBと約半分に。

PageSpeed Insightは56→83点と+27点の劇的アップ!「速い」レベル(90点以上)まであと少し!!

これまで7つの方法を駆使してやっと+30点アップしたのに、簡単な設定変更だけで+27点もアップするとは、ありがたい限りです。

FontAwesome無効化でアイコンが表示されなくなるときの解消法

FontAwesomeをOFFにすると、スマホフッタメニューのアイコンなどが表示されなくなることがあります。

これ↑が、こんな感じに↓アイコンが消えてしまいます。

これを直してアイコンが表示されるようにするには、アイコンの表記を、JINオリジナルアイコンバージョンに書き換えます。

たとえばスマホフッターメニューの場合、
「外観」>「メニュー」の中の「編集するメニューを選択」で「スマホフッター(スマホ固定フッターメニュー)」を選択して表示される下記の部分にアイコンの名称を記載していると思います。

これをJINオリジナルアイコンの名称に書き換えればOK。JINのアイコン名称は公式サイトの「JINのオリジナルアイコンリスト」で確認できます。

例えばこんな感じ

これでFontAwesomeを無効化しても、このように↓JINオリジナルアイコンが表示されるようになります。

JIN高速化の効果のまとめ

JINがVer2以上なら、Wordpress管理画面の「カスタマイズ」>「その他設定」で「FontAwesome5の読み込みをOFF」にすると、ページ表示が爆速になります。

ただ、それによりアイコンが表示されなくなったら、JINオリジナルアイコンに書き換えが必要となります。

このサイトの場合、PageSpeed Insightでは、スコアが56⇒83と+27点のアップ。これまで7つの方法を駆使してやっと+30点アップした(それでもかなりの高速化)のに、簡単な設定変更だけでこれだけの高速化するとは、ありがたい限りです。

JINを使っていたらこの設定はマストですね。

ワードプレスのテーマJIN 9個のユーザビリティUPのポイント WordPressの有料テーマJINを導入しました。見た目が整うとともに、書くのが楽になります。 まずは基本設定で...
WordPressサイトを高速化する7つの方法。実際に測った効果からおすすめの方法をご紹介この記事では、Wordpressサイトの表示を高速化する方法をご紹介します。 サイトの表示速度は、見ている人の満足度に大きな影響を...

 

こちらの記事もおすすめ
ブログカスタマイズ

Macのスクリーンショット/キャプチャの保存先を変更する方法。これでデスクトップもスッキリ

2020-01-07
寝ながら投資
Macのスクリーンショットで困るのは、ファイルの保管場所が「デスクトップ」になっていることです。 スクリーンショットを数多く取るとこんなこ …