表示速度が速くて、多機能な有料テーマとして人気の「THE THOR」。
当サイトでも利用していて、サイトの表示速度としては遅くはないと思っているのですが、「PageSpeed Insights」のスコアは良くありません。
他にもTHE THORで運用しているサイトがあるのですが、共通しているのは「モバイルのPageSpeed Insightsのスコアが非常に悪い！」ということなのです。
ここでは、テーマにTHE THORを使っているWordpressサイトのモバイルの表示速度を改善するために有効な方法をお伝えしていきます。
PageSpeed Insightsとは
「PageSpeed Insights」は、Googleが提供するサイト分析ツールのひとつです。
勘違いされやすいですが、PageSpeed Insightsはサイトの実際の表示速度を計測しているというよりは、あなたのサイトの現状をみて、表示速度を改善するためにできる対策を教えてくれるツールです。
実際にサイトの読み込み時間などから判断するツールに、Googleなら「Test My Site」、他の有名どころでは「GTmetrix」などがあります。
THE THORで運用しているサイトのモバイル表示を改善した理由
今回改善対策したサイトの対策前のPageSpeed Insightsスコアは赤文字のレベルでしたが、Test My Siteでは「高速」の評価でした。
つまり、「ブラウザから実際に読み込んでみたら充分に速いけど、もっと改善できるポイントがあるよ」という状態でした。
THE THORの機能を含め、それなりに対策していたつもりのサイトだったので、少しショックを受けました。
また、SearhConsoleでもモバイルに関する警告（黄色）が出ていたので、何が問題なのかわかりませんでしたが、何かしら検索順位などに影響が出てはいけないと思い対策をすることにしました。
THE THORのモバイル表示向PageSpeed Insights改善方法
① Googleフォントを削除
THE THORでは、サイト名や最新記事の見出し、記事本文にGoogleフォントが使用されています。
サイト名についてはサイトロゴ画像を設定していない場合に使用されていますが、サイトロゴ画像を設定している場合でもGoogleフォントのCSSが読み込まれてしまいます。
また、記事本文中にも使用されていますが、私にとってGoogleフォントを使用するメリットは特にありませんでしたので、Googleフォント関連のCSSの読み込まないようにしました。
PageSpeed Insightsでも、「レンダリングを妨げるリソースの除外」と「使用していないCSSの削減」の項目に、Googleフォント関連のCSSファイルが複数ありました。（「第三者コードの影響を抑えてください」の項目にもありました。）
- テーマファイル（wp_head.php）を編集する
- プラグイン（Autoptimize）を使って設定する
それぞれの詳細な手順は「THE THORのGoogleフォントを読み込まない方法」に書いています。
今回は、Googleフォントに加えて、Autoptimizeを使って「WordPress コアの絵文字用のCSS」も読み込まないようにしました。
また、この機能を使用するためには、CSSの最適化も有効にしなけれならないので、その改善効果も入っています。
AutoptimizeでCSS・HTML最適化と画像遅延読込を設定
私がプラグイン（Autoptimize）を使う方法を採用したのは、Googleフォントを読み込まない設定以外の他の機能も、PageSpeed Insightsのスコア改善に有効だったからです。
まず、THE THORのCSS非同期読込機能を無効にする必要があります。
ダッシュボードから[外観]-[カスタマイズ]をクリックし、[SEO設定]-[CSS非同期読み込み設定]へと進み、すべての項目のチェックを外します。
続けて、Autoptimize設定画面の「JS、CSS&HTML」のタブ内にある「CSSオプション」の項目のうち3ヵ所、「HTMLオプション」の項目のうち1ヵ所チェックします。
チェック項目についてはいろいろと試してみると良いと思います。
さらに、Autoptimize設定画面の「画像」のタブ内にある「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れます。
JavascriptやCSS、HTMLの最適化の効果はそれほど大きくはありませんでしたが、THE THORにある同様の機能よりもAutoptimizeの方が効果が大きかっため、THE THORの機能を事前に無効にしました。
最も効果が大きかったのが、画像の遅延読込でした。
こちらもTHE THORにあるimg非同期読み込み機能よりも、明らかにAutoptimizeの方がPageSpeed Insightsスコアに直結しました。
著作者情報を静的HTML化
THE THORでは、サイドバーに表示できる「著作者情報」、記事下に表示できる「プロフィール」という機能があります。
作者の画像を表示する場合、Wordpressのユーザー管理を利用しています。
Wordpressのユーザー管理画面に画像を登録する方法は次の2つの方法が一般的で、手間を考えると②のWP User Avatarなどプラグインを利用されている方が多いでしょう。
- Gravatarから登録する
- WP User Avatarなどプラグインを使って登録する
このWP User Avatarを実行するためのJavascriptやCSSファイルが、先ほどのGoogleフォント同様、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」の項目にリストアップされていました。
そこで、上記2つの方法ではなく、THE THORのデザインのまま、HTMLをウィジェットエリアに記入することにし、WP User Avatarをアンインストールしました。
詳細な手順は「THE THORのプロフィールを軽量化する方法」で書いています。
THE THORの機能だと、プロフィール内容に改行すら入れられないし、文字の装飾もできませんが、ここで紹介する方法だと、改行も装飾も可能になります。
大幅な改善とはなりませんでしたが、「レンダリングを妨げるリソースの除外」の項目からJavascriptとCSSファイルが消えたたので、確実に不要ななもの削除できました。
画像のWebP変換・配信対応
こちらはTHE THORを使用しているサイトに限りませんが、まだ対応されている方が多くはないと思うので、手順に入れておきます。
投稿している画像の形式を、次世代のフォーマットに変換して配信することで、ウェブサイトの容量を軽くすることが推奨されています。
PageSpeed Insightsでも、改善できる項目として挙げられています。
画像の次世代フォーマットにはいくつかの種類がありますが、現在のところGoogleが開発した「WebP（ウェッピー）」という形式が主流になっています。
しかし、すべてのブラウザで次世代フォーマット画像が表示できるわけではなく、ブラウザを判別して配信する必要があります。
また、今後は「AVIF」というフォーマットが来ると予想されているので、いつまで「WebP（ウェッピー）」が主流となるかはわかりません。
そのため、簡単に切り替えができるようプラグインを使って対応するのが得策でしょう。
おすすめできるWebP変換・配信できるプラグインは次の2つです。
EWWW Image Optimizerは、画像の圧縮・リサイズができるプラグインで、利用されている方も多いでしょう。
EWWW Image Optimizerには、WebP変換・配信の機能もあり、簡単な設定で利用できます。
詳細な使い方は「EWWW Image Optimizerを使ってWebp変換・対応させる手順」に書いています。
WebP Expressはデフォルト設定のままでもWebP配信自体はでき、上級者には細かな設定ができる便利なプラグインです。
詳細な使い方は、別サイトになりますが「「WebP Express」で次世代フォーマット配信する設定方法」で細かくまとめられていて、参考になります。
先に紹介したAutoptimizeの設定で、すでに一部画像がSVG化されて軽量化されているため、劇的な変化はありませんでしたが、PageSpeed Insightsからの改善提案事項からは消えてくれました。
JS・CSSの読み込みが大きいプラグインの削除
こちらもTHE THORに限ったものではありませんが、掃除といった意味合いも含めてやっておきます。
プラグインの選別はとても難しいですが、本当に必要なプラグインなのか、代替できるものはないか考えてみてください。
デザイン性や機能性と、サイトの表示速度を天秤にかける感じです。
今回は、PageSpeed Insightsで速度改善のための提案の中の「レンダリングを妨げるリソースの除外」の項目にリストアップされていたものの中から、ひとつのプラグインをアンインストールしました。
対象となるプラグインの見つけ方としては、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」の項目に表示されるリストにマウスカーソルを持っていくと、対象ファイルのURLが表示されますので、そこからプラグインを特定する方法を使いました。
不要なHTMLの削除
こちらはPageSpeed Insightsで注意を受けた項目で、「過大なDOMサイズの回避」という項目になります。
技術的には詳しくありませんので、正確な表現ではありませんが、「DOMとはHTMLのタグ数や階層数」ととらえています。
つまり、タグが多いよってことです。
例えば以下のような感じでしょうか。（間違っていたらすみません。）
<div class=”a”><div class=”b”><div class=”c”><div class=”d”><div class=”e”><div class=”f”>テキスト</div></div></div></div></div></div>
<ul>
<li></li>
・
・
・
<li></li>
</ul>
確かに、以前からTHE THORのHTMLって階層の深いものが多いように感じていました。
吹き出しを表示するだけでも深い印象です。
また、今回対策しているサイトでは、実験的にサイドバーにかなりの数の記事リンクを表示していましたので、要素数はとても多くなっていたと思います。
ネット上の情報では、DOM数は800程度に抑えるのが理想とのことでしたので、サイドバーに表示する記事リストの数を減らしました。
これにより、表示されていた件数を若干ですが減らすことができました。
レンタルサーバーの設定を見直す
今回のウェブサイトが使用しているサーバー（エックスサーバー）では、表示されませんでしたが、サーバーのスペックによっては上の画像のような改善提案がされることがあります。
レンタルサーバー側の設定を確認して、高速化できる機能がないか探してみましょう。
エックスサーバーであれば以下のようなものです。
- Xアクセラレータ
- サーバーキャッシュ設定
- ブラウザキャッシュ設定
今回、私自身もこのドメインだけXアクセラレータの設定を忘れていましたので機能を有効にしました。
設定をためしてみても改善しない場合、レンタルサーバーを見直す必要があります。
個人の利用であれば「エックスサーバー
」で問題ないと思いますが、アクセスの多いサイトであればプランの変更などが必要になるかもしれません。
低スペックのサーバーをご利用の場合は、当サイトでも「WordPressにおすすめのレンタルサーバー」をまとめていますので、よろしければ参考にしてみてください。
まとめ
THE THORは多機能で人気のあるテーマではありますが、人によっては不要な機能があったり、別のプラグインで同じ機能を使った方が良いものがあることがわかりました。
私が他で運用しているTHE THORのサイト（当サイトを含む）のすべてで、PageSpeed InsightsのモバイルのスコアがPCと比べて低くなっています。
ネット上でTHE THORの速度改善記事を書かれている方を見ても同様です。
スコアにこだわり過ぎるのはどうかと思いますが、SearhConsoleで「改善が必要」とされるとビビってしまいました。
結果、SearhConsoleでも「良好」と判断されましたので、結果としてはある程度満足しています。
【モバイル】 39 → 83
【ＰＣ】 91 → 97
今後の検索順位を見守っていきたいと思います。
番外編：PageSpeed Insights最速記録
後日談になりますが、THE THORに限らない範囲も含めてサイトの改善を行った結果、モバイル表示で92、PC表示で100というスコアを叩き出しました！
しかし、自分の許せるギリギリまで機能やアニメーションに関わるJavascriptを削ったため、自分でもまだ気づいていない不具合があるかもしれません。
実際に、このまま運用することは考えていませんが、約300ページあるサイトのデザインを崩さずにここまでできるというのを確認できたのは良かったです。
PageSpeed Insightsのスコアは今後も重要になってくるかもしれませんが、スコアにこだわってばかりでは何もおもしろくはありません。
SearhConsoleで確認できる「モバイルでのページ エクスペリエンス」が良好となる程度の改善で充分だと考えています。