検索エンジンに評価される（SEO）ために重要な要素、ページ表示の快適性。
それを測ることができる PageSpeedInsight のスコアを向上させるのって、テクニカル的に難しい部分がありますよね。
管理人も、当サイトを含めていくつかのWordPressサイトをチューニングするのにとても骨が折れました・・・。
特に次のような問題意識がありました。
ってどう対処したらいいの・・・
この記事ではWordPressテーマごとに PageSpeedInsightスコアを向上させるチューニングを解説しています。
どれも実経験を反映させているので、参考にしやすいかと。
特に、コーディング無しで実践できる PageSpeedスコア向上のテクニックを紹介していますので、初心者でも実践可能な内容となっています。
結論から：各テーマごとの対応策
有料テーマといっても、SEOの内容にばらつきがあったり、特定のプラグインが動作しなかったりしますよね。
まさにWordPress入門者を沼に突き落とす部分だと思います。
なので PageSpeed対策といっても、WPテーマごとに対応を変えなくてはなりません。
以下、この記事の結論部分です。
対策のまとめ
AFFINGER
- AutoptimizeでCSS読込をインライン化
THOR
- AutoptimizeでCSS読込をインライン化
- Assets Cleanupで余分なJavaScriptの読込を停止
JIN
- Assets Cleanupで余分なJavaScriptの読込を停止
- Lazy-loaderの導入
ちなみに当サイトのテーマがAFFINGERのためボリュームが多めですが、THOR、JINのスコアアップもちゃんと検証済となっています。
後半で解説しているので、ぜひ参考にしてみてください！
AFFINGER5 (WING)の場合
AFFINGERはハイスキルなブロガー向けの有料テーマ。
SEOについてもかなり検討されているし、あまりこだわらなければそのまま使っても問題ないレベルの優秀なテーマです。
内部構造も綿密に考え抜かれていて、テーマ自体が爆速なのです。
なので今回追加的にする対応としては、CSSによるブロックの解消だけやっていきます。
プラグインでCSS読込をインライン化
まずはチューニング前の状態を理解した上で、プラグイン導入でチューニング、その後チューニング後の検証を行います。
チューニング前の状態
まずはチューニング前の状況把握から。
当サイトのある記事のスコアです。
「うわ・・・私のPageSpeedスコア、低すぎ・・・？」
FCP（First Contentful Paint）がボトルネックになっているようです。
用語解説
FCP（First Contentful Paint）
First Contentful Paint（FCP）は、ユーザーにページの視覚的レスポンスが表示されるまでの時間を測定したものです。この時間が短くなると、ユーザーのエンゲージメントが維持される傾向が強くなります。（PageInsightFAQより）
うーん分かりにくいですね。
FCP（First Contentful Paint）は何らかの意味あるテキストや画像などの要素が最初に表示されるまでにかかった時間。読者が「あ、今ページ読み込まれているな」と認識できるまでの時間です（ヒトの体感時間としてはほぼゼロですが…）。
他にも表示速度の指標として、LCP（Lergest Contentful Paint）という、最も大きい要素が表示されるまでにかかった時間というものがあります。SEO入門としては取り急ぎFCPを気にしておくことがより重要でしょう。（気になる方はGoogleが推しているパフォーマンス測定ツールweb.devの解説ページをチェック！）
そして、FCPに影響していそうなのが、
「レンダリングを妨げるリソースの除外」
レンダリングブロック要素と呼ばれている、最初の表示までにかかる時間を伸ばしてしまう要素です。
用語解説
レンダリングブロック
Webページを表示するときの要素順番→HTML、画像、CSS、JS
このとき外部CSSと外部JSを読み込まれるまで、レンダリング（表示）がストップしてしまい、読者がページの内容を見れるようになるまで時間が余分にかかってしまう。
これを防止するためにインライン化したり、遅延読込をしたり、そもそも読込をしないなどの方法が考えられる。
さらに内訳を表示してレンダリングブロックの要素を表示しています。
内訳をみると、JavaScriptよりもCSSの方が目立ちますね。
AFFINGERではJSを<body>タグの最後で読み込むように設計されているので、JSについては問題なさそうです。
ソースを見てみると、案の定head内に大量のCSS読み込みが。
大量の外部CSSを読み込むのはどのWordPressサイトでも同じです。
とはいえ、この部分がレンダリングでボトルネック（障害）になっていますし、ここを改善すれば他のWordPressサイトと差別化できそうです。
CSS読込部分を改善して、PageInsightのスコアを改善してみましょう。
Autoptimizeのインストールと設定
AutoptimizeはJavaScript、CSS、画像などの読込を最適化してくれるプラグイン。
もろもろの表示を勝手に高速化してくれる便利なプラグインです。
これを使って、外部CSS読込部分を調整していきます。
プラグイン画面→新規追加で「autoptimize」で検索
追加→有効化しちゃいましょう。
設定メニューにAutoptimizeが追加されていることが分かります。
Autoptimizeの設定画面を開いて→「JS、CSS＆HTML」タブを表示します。
上記のように、「CSSオプション」のところにチェックを入れていきます。
CSSの読込を最適化する上で今回チェックするのは以下の４箇所。
- CSSコードを最適化
- CSSファイルを連結する
- インラインのCSSを連結
- すべてのCSSをインライン化
これにチェックを入れることで、外部読込のCSS（＋HTML上のCSS）をひとつのインラインCSSに自動でまとめてくれます。
インラインCSSにすること（インライン化）は、外部CSSで定義している内容をHTMLのhead内にすべて書き込んでしまう方法です。
これにより、レンダリングがブロックされず、表示速度（FCP）が向上します。
補足
ちなみに、「すべてのCSSをインライン化」ではなく、ひとつ上の「CSSのインライン化と遅延」オプションにチェックするとどうなるでしょうか？
これは、テキストボックスに入力したCSSのみをインライン化、その他のCSSはまとめて遅延読込してくれるオプションです。
最初に表示される範囲（ファーストビュー）に使われるCSSだけを抽出した「クリティカルパスCSS」のみをインライン化します。
これにより、すべてをインライン化するのと比べて、HTMLファイルのサイズを削減できます。
とはいえ、仕様変更ごとにクリティカルパスの抽出を管理するのはコストがかかります。通信環境が整った現代ではファイルサイズは微々たる差にすぎないので、無理に「CSSのインライン化と遅延」を選択する必要はないかと。検証してみてサイトごとに効率の良い方法をとるといいでしょう。
最後に「変更を保存してキャッシュを削除」ボタンをクリック。
これでソースを見てみるとCSSがインライン化されていることが分かります。
チューニング後のスコア
３回ほど測定して平均を取っていますが、おおむねこのくらいのスコア。
CSSの読込を最適化するだけで意外とスコアが上がりました。
FCP（First Contentful Paint）がみどりになっている！！
まだ▲ですが、レンダリングブロック要素の数値は改善している様子。
現状ではCSSの改善だけで十分のようです。
ソースコード表示プラグインが正常動作しない？
当サイト（AFFINGER導入）ではソースコードの表示にプラグインEnlighterを使っていましたが、Autoptimizeを導入すると正常に動作しなくなりました。
具体的には、ソースコードが整形されず、プレインテキストのまま。
試しに、AutoptimizeのJS設定を一度有効化して、"Enlighter.js"を除外してもプレインテキストのまま変わらず。
調べてみると、Affinger+Autoptimize+Enlighterの組み合わせがどうも悪そうです。
仕方なく、EnlighterやめてSyntaxHighlighter Evolvedを使っています。
レンダリングブロックにはコーディングで対応できる
本記事の目的はプラグインだけで高速化を実現することですが、
できるだけプラグインに頼らずコーディングで対処したいという方もいますよね。
プラグイン導入すると内部的な処理はどうしても重くなります。
functions.phpに記述を追加することで、CSSの遅延読込ができます。
参考サイトWordPress : レンダリングをブロックしている JavaScript/CSSへの対策
ただ、AFFINGERだとうまく動作しませんでした・・・
Thorの場合
ではFIT製で注目されている有料テーマTHORだとどうでしょうか？
保有しているTHORテーマ適用しているサイトで検証してみたところ、AutooptimizeだけだとモバイルのPageSpeed Insightスコアが改善しないことが分かりました。
どうやら、THORはGoogle Fontsなどの余分なJavaScriptを常に読み込んでいるため、これで足を引っ張られているっぽいです。
プラグインで読み込むJSを削減
余分なJavaScript読込を停止するために、Asset Cleanupを使います。
Assets CleanupはWordPressで読み込むリソース（JavaScript、CSS、画像、HTML等）を最適化してくれるプラグインです。全ページで一括、各投稿ごと、固定ページだけ、など柔軟に設定を変更できるのが最高ですね。
Autoptimizeの上位互換っぽい立ち位置です。
利用するにはまずプラグインのインストールから。
プラグインページで「asset cleanup」で検索→インストール。
インストール完了すると、管理画面にAsset CleanUpのメニューが追加されます。
まずは、Settings画面を開いて、一番上のタブ「Stripping the "fat"」の下にあるトグルをONに（下記画像）、Update All Settingsを押下。
そうすると、プラグインが有効に機能するようになります。
次に「Site-Wide Common Unloads」を開きます。
サイト全体で読み込まないようにするJSを指定できます。
絵文字など、サイトで使わないようなJS要素にチェックを入れます。
Update All Settingsボタンを押下すると設定が反映されます。
同様に、Google Fontsタブで、使っていないGoogle Fontsの読込を除外することができます。
とはいえ、Google Fontsは使っているサイトも多いですから、一律に読み込まないかどうかはサイトデザインに合わせる必要があります。
管理人の場合は、下記のようにチェックを入れて、遅延読み込みをするようにしました。
以上の対応でJSの読込を最適化するだけでもスコアは改善しました。
これに加え、AFFINGERのところで解説したAutoptimizeによるCSS読込最適化をすることで、さらにPageSpeedは改善するはずです。
JINの場合
こちらも有名なWordPress有料テーマ、JINの場合だとどうでしょうか。
JINはすぐに超キレイandカワイイデザインのブログを構築できる素晴らしいテーマです。
SEO的にも優れたテーマでして、今回のテーマ表示速についてもそのまま使っても問題はなさそうなレベル感。
ですが、AFFINGERやTHORのように、Lazy-loadがJINには組み込まれていません。
この部分だけ、自分でプラグインを導入して対応する必要がありそうです。
機能解説
Lazy-load
画像を遅延読込にしてくれる機能のこと。
表示されていない部分はスクロールされるまで読込を待ってくれるやつ。
Lazy-loadingを実現するために、プラグイン a3 Lazy Load を導入します。
プラグインページで「a3 Lazy Load」で検索、インストール。
a3 Lazy Loadはプラグインを有効化するだけで、画像の遅延読み込みが有効になります。
管理画面のSettings→a3 Lazy Loadで設定画面に移動することができて、
ここでは要素ごと（投稿画像、サムネイル、ウィジェット、アバターなどなど）に遅延読み込みの可否を設定できますよ。神かな？
これだけでも、かなりPageSpeedInsightスコアは上昇すると思います。
さらにTHORのところで解説した、Asset Cleanupプラグインで使用されていないJSをUnloadすると、さらにスコアアップできそうです。
PageSpeed Insightスコアについての所感
ここまで、各有料テーマごとにPageSpeedInsightのスコア改善に向けて、主にレンダリングブロックの対応について解説してきました。
PageSpeed Insightのスコア、もとい、Google先生がページ表示速度に対して下す判定は年々厳しくなっています。
最近だとCore Web Vitalsが重要になってきてたり、SEOがユーザ行動中心のパフォーマンス測定に切り替わってきているので、当然の流れですね。
PageSpeedのスコアは、サイトのデザイン（設計）によって、改善するハードルが高いのは常識となっています。
そういう文脈でPageSpeedの評価がだんだん厳しめになってきているのは仕方がないと諦めている記事もありました。
ですが、これからSEOがさらにユーザ体験中心の評価に移行していくことを考えると、あまり妥協しすぎるのも良くないかなと思います。
もちろん、PageSpeedを改善したからといって表示順位が上がるわけではないですし、いまだコンテンツが一番重要であることに違いありません。
表示速度の改善はコストパフォーマンスを意識して取り組みたい課題です。
