THE THORのGoogleフォントを非表示にする2つの方法 | CSSを読み込まない

THE THORでGoogleフォントを使わない方法

ウェブサイトをおしゃれに見せるものにフォントがあります。

中でも外部から読み込むだけで他のブログよりもおしゃれに見せることができる「Google Fonts」。

多くのサイトでも見かけるようになりました。

有料テーマでもデフォルトで使用されているものもありますが、みんなが必要に感じているとは限りません。

ここでは、THE THORに使用されているGoogleフォントを使わない人のために、読み込ませないようにする手順を解説していきます。

管理人吹き出し画像
Google PageSpeed Insightsの改善にも効果抜群でしたよ。

THE THORで使用されているGoogle Fonts

実はTHE THORでは、サイトタイトルやカテゴリ最新記事の見出し、サイドウィジェットの見出しや記事本文中など多くの場所で、3種類のGoogleフォントが使われています。

使用されているGooglg Fonts

  • Lato
  • Fjalla+One
  • Noto+Sans+JP

このフォントのおかげで、THE THORのかっこいいデザイン性を実現しているとも言えるわけですが、不要に感じている方にとってはページが重くなるだけのものになってしまう可能性があります。

実際に、Google PageSpeed Insightsでサイトを分析したとき、「レンダリングを妨げるリソースの除外」という項目で、Google FontsのためのCSSの読み込みについて注意を受けます。

どうしてもGoogleフォントを使いたい人にとっては重要ですが、それ以外の人にとっては、読み込まずにできるだけサイトを軽量化したいと考えるのが自然です。

管理人吹き出し画像
googleが配布しているjqueryや、アナリティクス用のjsなど、他サービスのために読み込ませておいて、改善しろって…
Googleってほんと理解し難い会社だなと思ってしまいます。

個人的にGoogleフォントを使わなくても、THE THORのデザインはまとまっていると感じているので、サイトの読み込み速度重視のため、Google FontsのCSSを使わないよう読み込まないようにしたいと思います。

テーマファイルをカスタマイズする方法

①「wp_head.php」を子テーマにコピーする
テーマのファイルのうち、GoogleフォントのCSSを読み込んでいるのは「wp_head.php」というファイルです。

wp_head.phpの場所
/wp-content/themes/the-thor/inc/parts/wp_head.php

このファイルをFTPなどを使ってコピーします。

そして、子テーマフォルダの中に、元テーマと同じ階層となるよう、「incフォルダ」を作成し、さらにその中に「partsフォルダ」を作成します。

子テーマ内に作成した「partsフォルダ」の中に、コピーした「wp_head.php」を貼り付けましょう。
②GoogleフォントCSS読み込み行を削除する
ここから「wp_head.php」を編集していきますが、慣れている方はテキストエディタなどで編集して子テーマにアップロードしていただいても構いませんが、初心者の方は、Wordpressの管理画面から編集した方がわかりやすいかもしれません。

[外観]-[テーマエディター]をクリックします。

右上の画面の「編集するテーマを選択:」に「THE THOR CHILD」を選んで[選択]ボタンをクリックします。
テーマ編集01

右側から「/inc/parts」まで行き、「wp_head.php」をクリックします。
テーマ編集02

「wp_head.php」の中身が表示されます。
テーマ編集03

THE THOR(2.3.2)のwp_head.phpでなら、44行目から63行目までに下記の記載がありますので、削除またはコメントアウトします。

//Googleフォント用CSS
if ( get_option(‘fit_seoCss_lato’)) {
echo ‘<link class=”css-async” rel href=”https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900″>’.”\n”;
}else{
echo ‘<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900″>’.”\n”;
}

//Googleフォント用CSS
if ( get_option(‘fit_seoCss_fjalla’)) {
echo ‘<link class=”css-async” rel href=”https://fonts.googleapis.com/css?family=Fjalla+One”>’.”\n”;
}else{
echo ‘<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Fjalla+One”>’.”\n”;
}

//Googleフォント用CSS
if ( get_option(‘fit_seoCss_noto’)) {
echo ‘<link class=”css-async” rel href=”https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900″>’.”\n”;
}else{
echo ‘<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900″>’.”\n”;
}

管理人吹き出し画像
よくわからないという方や、自信がないという方は、次に説明するプラグインを使った方法をお試しください。

プラグイン「Autoptimize」を使う方法

Autoptimizeとは

Autoptimize
Autoptimizeプラグイン公式ページ
Autoptimizeは、JavascriptやCSS、HTMLファイルを最適化したり、画像の遅延読込などサイトの速度アップをしてくれる便利なプラグインとして知られています。

あくまでも、Googleフォントの削除はオマケの機能に過ぎませんが、初心者の方でもとても簡単に設定できるプラグインなので使用します。

中級者以上の方にとっても、わざわざテーマファイルを編集するなら、プラグインでON/OFFできた方が楽だと思います。

管理人吹き出し画像
ファイルの最適化機能や画像の遅延読込も、THE THORで設定するよりAutoptimizeでした方が速くなるので、使わない手はないかなと思います。

インストール方法は、他の一般的なプラグインと同じですので省略します。

Autoptimizeの設定方法

ここでは、Googleフォント削除についての設定のみで、Autoptimize本来のファイル最適化などの設定については触れません。

①THE THORのCSS非同期読込機能を停止する。
THE THORのCSS非同期読込設定画面

AutoptimizeでCSSの最適化をする必要があるので、事前にTHE THORの重複する機能をOFFにしておく必要があります。

[外観]-[カスタマイズ]から、[SEO[設定]]-[CSSの非同期読み込み設定]にある全てのチェックを外します。

②AutoptimizeのCSSコード最適化機能をONにする。
Autoptimize css最適化設定
Autoptimize設定画面の「JS、CSS&HTML」タブのCSS オプションの[CSS コードを最適化]にチェックを入れ、変更を保存します。

③AutoptimizeでGoogleフォントの削除設定
AutoptimizeでGoogleフォント削除設定
「追加」タブの[Googleフォント]の項目に[Google フォントの削除]を選択して、変更を保存します。

管理人吹き出し画像
うまくいかない場合は、THE THORのCSS非同期読込機能がOFFになっているか、AutoptimizeのCSS最適化機能がONになっているか再度確認してください。

THE THORのGoogleフォントを非表示にした効果

PageSpeed Insightsスコア(モバイル)が「41 ⇒ 61」へと大幅改善しました。

PageSpeed Insights修正前
上の画像は、THE THORで運用しているサイトで、Googleフォント使っている(デフォルト)状態でのPageSpeed Insightsのスコアです。

モバイルのスコアが非常に悪いというのが見て取れます。

Googleからの改善提案の詳細の中で、Goole Fontsの読み込みが問題となっていると書かれていました。

管理人吹き出し画像
体感的にはページの表示速度はとても速く、満足していましたのですが。
そこでスコアを改善するために、原因であるGoogleフォントの読み込みしないように、今回の設定したわけです。

その結果のPageSpeed Insightsスコアは下の画像のようになりました。
PageSpeed Insights修正後
PCでのスコアに変化はありませんでしたが、モバイルのスコアは大幅に改善しています。

また、Googleからの改善提案の詳細からもGoogleフォントについての記述が消えました。

まとめ

Googleフォントは手軽に導入できる反面、ページ読み込み時に大きな負担になっていることがわかりました。

最近のテーマでは、Googleフォントを使っているものも増えていますが、ユーザーによってON/OFFできれば良いのですが、THE THORではできません。

ページの表示速度を優先したいという方は、Googleフォントを使わないという選択は非常に有効です。

今回、テーマファイルを修正する方法とプラグイン(Autoptimize)を紹介しましたが、画像の遅延読込やCSS・HTML最適化などの機能も、THE THORの同じ機能よりも効果が高かったので、上級者の方であってもAutoptimizeを使うことをおすすすめします。

満足できる!!
レンタルサーバー集

実際に使ってわかった初心者にもおすすめできるサーバー集

これで戦える!
WordPressテーマ集

ブログも!アフィリエイトも!おすすめのテーマ徹底比較