「AFFINGERのモバイル高速化」と書かれたサムネイル。

BLOG ブログ集客

AFFINGERのプラグイン最適化の方法!SightSpeed Insightのモバイルで37点から93点に!

2021年12月4日

颯 Souのイラスト

soublogについて

  • 音楽ブログだよ!
  • 「soublog」と覚えてね
  • soublogトップページはこちら
  • 筆者は颯 Souで作曲家のフリーランス
  • 作曲実績は、AWA動画広告BGMプログラムにて採用
  • 2022年12月10日にクリスマスソングのサブスクリリース

・無料テーマでSightSpeed Insightsでモバイルで改善が必要なレベル
・有料テーマを使うと高速になるのか?

このような悩みはないですか?

サイトを高速にしたい!!

そう思いますよね。

モバイルファーストインデックスをしっていますか?

Googleは、PCではなくモバイルを基準に順位決定やWebサイトの評価を行う仕組みを導入したため、モバイルの高速化はとても重要です。

私は、以前に無料テーマを使っていていましたが、SightSpeed Insightsでモバイルで高得点を取れませんでした。

そこで、有料テーマのAFFINGERに乗り換えることにしました。

しかし、結果は残念ながら高得点を取れませんでした。

AFFINGERに乗り換えたとしても、そのままでは高得点が取れない可能性があるということです。

見てください。

私が、AFFINGERに乗り換えた後の、SightSpeed Insightsのモバイルの結果です。

たった、37でした。

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

AFFINGERの有料テーマにしたところで、対策をきちんとしない限り高得点は取れないということです。

しかし、対策をきちんとしてあげれば、高得点を取ることができます。

見てください、いろいろと対策をすると、モバイルで93点まで改善することができましたよ。

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

改善方法は、

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

です。

それでは、改善方法の詳細を解説します。

目次は次の通りです。

・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

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

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

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

オフスクリーン画像の遅延読み込みが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になりました。

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を選択します。

・まとめ

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へのインストールの仕方!【徹底解説】

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

Blog運用術のトップ記事に戻る

ボカロで音楽活動を始める方法

-BLOG, ブログ集客
-, ,