アフィリエイト広告を利用しています。

ブログ初心者向け AFFINGER(利用中テーマ)

AFFINGERのプラグイン最適化の方法!37点から93点に【PageSpeed Insightsのモバイル】

2021年12月4日

この記事の信頼性について

  • 京都大学大学院を卒業後、サラリーマンを10年経験。
  • 現在は、ブロガーの個人事業主として奮闘中。
  • PSIを98点取るなどGoogleからサイト評価を受けたり、月間40件以上のアフィリエイトの成果発生経験があります。
  • 読者に有益な情報となり、少しでも読者の日々の生活を明るくできるよう心がけて執筆します。

・Affingerのプラグイン最適化の方法を知りたい

この悩みを解決できる記事を用意しました。

この記事で紹介する「AFFINGERのプラグイン最適化の方法」を実戦すれば、初心者でも簡単にPageSpeed Insightsのモバイルで90点以上取れますよ。

なぜなら、実際に私もこの方法で90点以上をとっているからです。

私が、AFFINGERを使ったSightSpeed Insightsのモバイルの結果です。

たった、37点でした。

SightSpeed Insightsのモバイルの結果で37点の証拠。

このようにAFFINGERの有料テーマにしたところで、対策をきちんとプラグイン対策しない限り高得点は取れません

今回お教えするプラグイン改善により、モバイルで93点をとりました。

SightSpeed Insightsのモバイルの結果で93点の証拠。

改善方法は、

・基本的なプラグインを入れる(WP Fastest Cache, Autoptimize)
・SightSpeed Insightsの解析結果から対策を行う

です。

記事前半では「AFFINGER6のプラグイン最適化の方法」について、記事後半では「AFFINGER6のインストールの方法」を解説するのでじっくり読んで下さいね!

目次は次の通りです。

・AFFINGERのプラグイン最適化の方法!

ポイント。

・SightSpeed Insightsの解析結果から対策を行う

SightSpeed Insightsでページを解析してみましょう。

すると、解析結果の改善すべき項目が表示されます。

SightSpeed Insightsの解析結果。
改善前。

これから、これらの解析結果を改善していきます。

まず、基本的なプラグインを導入していきます。

・高速化のための基本的なプラグイン

高速化のための基本的なプラグインとして、

・WP Fastest Cache
・Autoptimize

を使います。

・WP Fastest Cache

WP Fastest Casheは最もシンプルで速いWPキャッシュシステムを持つプラグインです。

設定は下記。

WP Fastest Casheの設定。

ここで、CSSの圧縮、結合や、JSの結合をしないのは、後ほど解説するAutoptimizeと重複するからです。

Autoptimize

Autoptimizeは、CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化するプラグインです。

Autoptimizeの設定。JS,CSS &HTML。
Autoptimizeの設定。画像。

画像の設定ですが、AFFINERの機能にLazy Loadの設定箇所があるので、Autoptimizeの遅延読み込みのチェックは外しておきます。

Autoptimizeの設定。追加。

WP Fastest CacheとAutoptimizeを使用した結果、下記改善結果を得れました。

SightSpeed Insightsの解析結果。
WP Fastest Cache、Autoptimize導入後。
改善できる項目改善前WP Fastest Cache、Autoptimize使用後
レンダリングを妨げるリソースの除外5.37s3.03s
オフスクリーン画像の遅延読み込み1.8s1.8s
使用していないCSSの削除3.99s2.7s
テキスト圧縮の有効化4.2s1.8s
次世代フォーマットでの画像の配信1.5s1.65s
使用していないJavaScriptの削減1.05s0.9s
効率的な画像フォーマット0.45s0.75s

・テキスト圧縮の有効化

さて、テキスト圧縮の有効化ですが、丁寧に解説ページがついています。

テキストベースのリソースは圧縮(gzip、deflate、または brotli)して配信し、ネットワークの全体的な通信量を最小限に抑えてください。

テキスト圧縮の有効化の解析結果を見てみると、

SightSpeed Insightsの解析結果のテキスト圧縮の有効化で改善できる項目。

st-themecss-loader.php
st-rankcss.php

などの圧縮でさらに削減できることが分かります。

PHPの出力をGzip圧縮します。

方法は、php.iniに下記一文を追加します。

zlib.output_compression = On

これにより、テキスト圧縮の有効化の減らせるデータ量を0秒にすることができました。

また、試用していないCSSの削減の減らせるデーター量も大幅に改善することができました。

SightSpeed Insightsの解析結果。
WP Fastest Cache、Autoptimize導入。テキスト圧縮の有効後。
改善できる項目前回テキスト圧縮の有効後
レンダリングを妨げるリソースの除外3.03s2.88s
オフスクリーン画像の遅延読み込み1.8s2.4s
使用していないCSSの削除2.7s1.05s
テキスト圧縮の有効化1.8s0s
次世代フォーマットでの画像の配信1.65s2.1s
使用していないJavascriptの削減0.9s0.6s
効率的な画像フォーマット0.75s0.9s

・使用していないJavaScriptの削減

使用していないJavascriptの削減の対策としては、Javascriptの読み込み遅延の対策が有効です。

特に、

・ツイッターをブログに埋め込む
・アドセンスの広告を入れる
・Google Analyticsのタグを入れる

と遅くなります。

しかし、これらは必要なものなので、できることなら削除したくないですよね。

プラグインとしては、Flying Scripts by WP Speed Matters Settingsを使います。

このプラグインを用いることにより、下記結果を得ました。

使用していないJavascriptnの削減で0.6sから0sに改善しました。

SightSpeed Insightsの解析結果。
WP Fastest Cache、Autoptimize導入。テキスト圧縮の有効。Flying Scriptsのプラグイン導入後。
改善できる項目前回Flying Scripts by WP Speed Matters Settings使用後
レンダリングを妨げるリソースの除外2.88s0.81s
オフスクリーン画像の遅延読み込み2.4s1.5s
使用していないCSSの削除1.05s0.6s
テキスト圧縮の有効化0s0s
次世代フォーマットでの画像の配信2.1s1.8s
使用していないJavascriptの削減0.6s0s
効率的な画像フォーマット0.9s0.6s

・効率的な画像フォーマット

効率的な画像のフォーマットの改善には、画像の圧縮を行います。

TinyPNGというプラグインを使います。

現状、月に500枚までなら無料で使えます。

画像を圧縮することにより、下記結果を得ました。

次世代フォーマットでの画像の配信が1.8skら1.05sに改善しました。

SightSpeed Insightsの解析結果。
WP Fastest Cache、Autoptimize導入。テキスト圧縮の有効。Flying Scriptsのプラグイン導入。Tyny PNGのプラグイン導入後。
改善できる項目前回TinyPNGで画像圧縮後
レンダリングを妨げるリソースの除外0.81s1.14s
オフスクリーン画像の遅延読み込み1.5s1.2s
使用していないCSSの削除0.75s0.9s
テキスト圧縮の有効化0s0s
次世代フォーマットでの画像の配信1.8s1.05s
使用していないJavascriptの削減0.6s0s
効率的な画像フォーマット0.6s0.3s

・次世代フォーマットでの画像の配信

WebPのフォーマットは、従来のJPEGやPNGに比べて、より高い圧縮率と品質を提供することができます。

これにより、LCPが改善します。

WebPへの変換できるおすすめプラグインは、Converter for Mediaです。

Converter for Mediaは、WebPへの変換なら無料で使えます。

・オフスクリーン画像の遅延読み込み

オフスクリーン画像の遅延読み込みは、Affinger管理のその他で設定できます。

AFFINGERの遅延読み込みをONにします。

補足
WordPress5.5以上では、デフォルトで遅延読み込み機能(Native LazyLoad)が搭載されています。
上図のように「WordPress本体のLazyLoadを有効にする」は本体の遅延読み込み機能をONにするという意味だと思います。
ちなみに、AFFINGERはLazyLoadSEOの有料プラグインを出しています。
WordPress本体の遅延読み込みよりも強力なものだと捉えておけばいいかと思います。
ちなみに、LazyLoadSEOというのは、今ではAFFINGER LazyLoadに名前が変わっています。

遅延読み込み後により、下記結果を得ました。

オフスクリーン画像の遅延読み込みが1.2sから0sに改善されました。

SightSpeed Insightsの解析結果。
WP Fastest Cache、Autoptimize導入。テキスト圧縮の有効。Flying Scriptsのプラグイン導入。Tyny PNGのプラグイン導入。Lazy Loadを有効後。
改善できる項目前回遅延読み込み後
レンダリングを妨げるリソースの除外1.14s0.81s
オフスクリーン画像の遅延読み込み1.2s0s
使用していないCSSの削除0.9s1.05s
テキスト圧縮の有効化0s0.15s
次世代フォーマットでの画像の配信1.05s0.45s
使用していないJavascriptの削減0.6s0s
効率的な画像フォーマット0.3s0s

さて、ここまでで、スコアを確認していきます。

SightSpeed Insightsのスコアは83点。

あともう一息ですね。

WordPress自体のLazyloadをAffingerの機能で設定するのではなくて、Autoptimizeで設定してみました。

すると、SightSpeed Insightsのスコアは、93になりました。

注意
AutoptimizeのLazyloadとPVモニターが干渉して、PVモニターが動作しないという不具合が発生する場合があります。

SightSpeed Insightsのモバイルの結果で93点の証拠。

LCPも2.2秒で、CLSは0。

コアウェブバイタルで良好の値です。

念のため、解析結果を載せておきます

改善できる項目前回遅延読み込み後
レンダリングを妨げるリソースの除外1.14s0.81s
オフスクリーン画像の遅延読み込み1.2s0s
使用していないCSSの削除0.9s1.19s
テキスト圧縮の有効化0s0.15s
次世代フォーマットでの画像の配信1.05s0.45s
使用していないJavascriptの削減0.6s0s
効率的な画像フォーマット0.3s0s

・その他の対策

スマホ。

・Contact Form7を軽量化

メールのフォーム作成にContact Form7を使っている方も多いのではないでしょうか。

デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートをすべてのページにロードします。

つまり、メールフォームのページ以外でも、読み込まれてしまい重くなってしまっています。

メールフォームがあるときのみ、JavascriptとCSSを読み込む設定があります。

詳細は、下記ページが参考になります。

【WordPress】Contact Form 7 を重くさせない方法!

・AFFINGERの表示速度優先

AFFINGERの設定には、表示速度優先の設定があります。

ダッシュボード⇒アフィンガー管理⇒SEO

AFFINERの表示速度優先の設定画面。

表示速度優先を有効化して、高速化されるか試してみてください。

・使用していないCSSを読み込まない

使用していないCSSを読み込まないようにするためには、Asset CleanUp: Page Speed Boosterというプラグインを用います。

Asset CleanUPの設定画面。

読み込みたくないCSSのところで、Unloadを選択します。

・AFFINGER6のインストールの方法

AFFINGER6のインストールの方法は下記記事からどうぞ。

・まとめ「AFFINGERのプラグイン最適化の方法」

AFFINGERのテーマを用いても、対策なしにSightSpeed Insightsで高スコアを取ることはできません。

私は、Affingerのテーマを導入したとき、モバイルで37点でした。

SightSpeed Insightsのモバイルの結果で37点の証拠。

しかし、下記設定をすることで、モバイルで93点まで伸ばすことができました。

SightSpeed Insightsのモバイルの結果で93点の証拠。

方法は、

・基本的なプラグインを入れる(WP Fastest Cache, Autoptimize)
・SightSpeed Insightsの解析結果から対策を行う

です。

これにより、劇的に改善することができました。

改善できる項目最初最終の改善後
レンダリングを妨げるリソースの除外5.37s0.81s
オフスクリーン画像の遅延読み込み1.8s0s
使用していないCSSの削除3.99s1.19s
テキスト圧縮の有効化4,2s0.15s
次世代フォーマットでの画像の配信1.5s0.45s
使用していないJavascriptの削減1.05s0s
効率的な画像フォーマット0.45s0s

このように、AFFINGERで高速化は可能です。

AFFINGERのインストールは下記記事からどうぞ。

AFFINGER6の購入と有料テーマのWordPressへのインストールの仕方!【徹底解説】

以上参考になれば幸いです。

トップページに戻る

ブログを始める方向けのお得情報


当サイトからエックスサーバーに申し込みをすると、お友達紹介適用で最大1万円割引されます。
\当サイトからの申し込みがお得/

お友達紹介特典は実施中のキャンペーンと併用可で、いずれの特典も適用された形で割引が行われます。

エックスサーバー公式:https://www.xserver.ne.jp/

アフィリエイターが選ぶ満足度No.1のレンタルサーバー

レンタルサーバーのランキングです。WordPressでブログを始める方は参考にしてください。

第1位:エックスサーバー

エックスサーバーは2003年にサービスを開始。240万もの運用サイト数を誇るなど実績があって信頼ができるレンタルサーバーです。
定期的に割引のキャンペーンを実施10日間の無料お試し期間があります。
エックスサーバーの内容に満足できなかったら、ランキング2位、3位を検討してください。
ただ、使ってみてランキング1位のエックスサーバーは圧倒的におすすめなので迷っているならコレです!

初期費用無料
月額990円~
性能超高速で大量アクセスにも強い
WordPress簡単インストールあり(無料)

\業界トップのサーバー環境を手に入れる/

第2位:ConoHa WING

ConoHa WINGは、2018年以降にサービスを開始して以来、45万登録者集を突破しており、今、勢いのあるレンタルサーバーです。
常時キャンペーンを実施で、割引で安く借りれます。
長期利用割引パックを利用すると、お好きな独自ドメインを2つ永久無料など特典があります。

初期費用無料
月額月額1452円~
性能高速・高機能・高安定性
WordPress簡単インストールあり(無料)

第3位:ロリポップ

ロリポップは2001年からサービスを開始し、安価で利用できるレンタルサーバーとしての地位を築いています。
安価で264円~利用できるライトプランもあり。10日間の無料お試し期間があります。

初期費用無料
月額月額550円~
性能高速のLight Speed
WordPress簡単インストールあり(無料)

エックスサーバー特集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

-ブログ初心者向け, AFFINGER(利用中テーマ)
-