WordPressテーマ THE THORを高速化

テーマを変更し、記事改訂も一段落したのでプラグイン選定と併せてPageSpeed Insightsに怒られないサイトに仕上げました。

そもそもこのテーマ、プラグインなしでも表示速度は割と早いと思います。ただ、PageSpeed Insightsでチェックすると色々指摘されるので可能な限りそれらを改善しました。

知識の乏しい私でも出来るセッティングではありますが、サイト運営を始めたばかりの方には少々難易度の高い記事になっています。

本記事の設定を全て行うと、THE THORの「記事分析設定」が機能しなくなるかもしれません。「記事分析設定」を利用している方は1項目ずつ確認しながらテストするか、ブラウザバック推奨です。

今はTHE THORの使用を止め、「SWELL」に乗り換えました。超快適です。おすすめです。高速化についても本記事の「Googleアドセンスを遅延読み込み」しか行っていませんが、THE THORで本記事の全項目の対策を行うよりいいスコアが出ます。是非確認してみて下さい

目次

高速化の効果

改善前の測定結果

計測結果は以下の通りです(スコアの割に表示はそこそこ早い)。

モバイル/TOPページ…38点
モバイルTOPページの指摘結果
指摘…14件
パソコン/TOPページ…96点
パソコンTOPページの指摘結果
指摘…8件
モバイル/投稿ページ…47点
モバイル投稿ページの指摘結果
指摘…16件以上
パソコン/投稿ページ…79点
パソコン投稿ページの指摘結果
指摘…13件

改善後の測定結果

モバイルの投稿ページは80点を超えるようになりました。パソコンは全く問題無いレベルです。

モバイル/TOPページ…98点 (+60点)
モバイルTOPページの改善後指摘結果
指摘…3件 (-11件)
パソコン/TOPページ…100(+4点)
パソコンTOPページの改善後指摘結果
指摘…4件(-4件)
モバイル/投稿ページ…84点 (+37点)
モバイル投稿ページの改善後指摘結果
指摘…5 (-11件以上)
パソコン/投稿ページ…99点 (+20点)
パソコン投稿ページの改善後指摘結果
指摘…4件 (-9件)

改善前の測定結果から、パソコンよりモバイル、TOPページより投稿ページの方が悪い結果が出るようです。

この結果から、本記事ではモバイル投稿ページをベンチマークにして指摘を改善します。指摘が少なければ高速化につながるハズです。

ブログ環境

ブログのテーマ設定

  • メインビジュアル…静止画
  • カルーセルスライダー…非表示
  • アーカイブページレイアウト…1カラム
  • 投稿ページレイアウト…1カラム
  • SEO設定…CSS非同期全てOFFimg非同期OFFhtaccess設定全てONHTML圧縮設定OFF
  • AMP設定…表示
  • PWA設定…有効

テーマ外の設定

  • Googleアドセンス(自動広告OFF)…個別ページ用広告設定3箇所、アーカイブページにウィジェットで2箇所
  • 解析タグ…Googleタグマネージャーのアナリティクスタグを使用

プラグイン

  • Autoptimize
  • Broken Link Checker…使用時のみ有効化
  • Disable Gutenberg Autosave…使用時のみ有効化
  • EWWW Image Optimizer
  • Google XML Sitemaps
  • Regenerate Thumbnails…使用時のみ有効化
  • prism.js

テーマの設定や導入しているプラグインが違うとPageSpeed Insightsの指摘も変わってくるので前提条件として記載しました。事項から具体的な設定を紹介します。

高速化設定

EWWW Image Optimizerで画像容量を削減する

EWWW Image Optimizerは画像関連のプラグインです。このプラグインを使って「次世代フォーマットでの画像の配信」と「適切なサイズの画像」を改善できます。

具体的には画像ファイルをWedP形式に変換します。

チェック箇所

[メタデータの削除]、[WedP変換]、[WedPの配信方法-JS WedPリライト]の3箇所にチェックを入れます。

WedPの配信方法」ですが、デフォルトでは.htaccessファイルに自動生成したコードをコピペするようになっています。が、私の環境では上手く動きませんでした。

JS WedPリライトにチェックを入れる事で機能しました。.htaccessファイルへのコピペで動くのであればそれでいいと思います。

THE THORにはブラウザキャッシュ機能があります。WedPのキャッシュ期間を長めに設定する事によって「静的なアセットと効率的なキャッシュ ポリシーの配信」を改善できます。

ドメイン直下の.htaccessファイルの中からwebpのキャッシュ期間を設定する部分を探し、「1 month」を「1 year」に変更します

<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp "access plus 1 year"
</IfModule>

不測の事態を想定して.htaccessファイルを編集するときはバックアップ作成を推奨します。

WedP以外にも指摘されるファイル形式がある場合は、同様にキャッシュ期間を設定して下さい。以下のサイトが参考になります。

キャッシュ用のプラグインを導入されている方はちょっと事情が違うので各自で調べて対応して下さい。

これで自サイトの画像がWedPに変換され「次世代フォーマットでの画像の配信」の指摘が無くなります。ただし、ブログカードやサイトカードのサムネイル等、第三者の画像については変換できません。

それらがある場合には指摘はそのまま残りますが諦めましょう。

「適切なサイズの画像」が引き続き指摘される場合はそもそもの画像容量を削減しましょう。TinyPNGSquooshで圧縮するのがオススメです。

不要なJavaScriptを読み込まないようにする

WordPress管理画面の[外観]→[テーマエディター]→[テーマのための関数](子テーマ)に以下のコードを貼り付ける事で不要なJavaScript(と一部関連するCSS)の読み込みを停止できます。

「レンダリングを妨げるリソースの除外」、「使用していないJavaScriptの削減」、「メインスレッド処理の最小化」、「JavaScriptの実行にかかる時間の低減」、「クリティカル リクエスト チェーンを回避してください」といった指摘を改善する事ができます。

function dcj_deregister_scripts_styles() {
	if ( ! is_admin() ) {
	wp_deregister_style('dashicons');
 	wp_deregister_script( 'comment-reply' );
	wp_deregister_script( 'wp-embed' );
	wp_deregister_script('jquery');
	}
}
add_action( 'wp_enqueue_scripts', 'dcj_deregister_scripts_styles', 100 );*/

不測の事態を想定してfunctions.phpファイルを編集するときはバックアップ作成を推奨します。

各スクリプトの要否はご自身の環境と照らし合わせながら判断して下さい。()内の単語でググれば各スクリプトの用途がわかると思います。

ちなみに6行目の[jquery]ですが、これはWordPressから読み込むJquery3.5.1です。THE THORCDNからJquery1.12.4を読み込む仕様になっています。

私の環境だとJquery1.12.4のみで動作に問題がないのでJquery3.5.1は読み込ませていません(逆で動くならそっちの方がいいかも)。

Jqueryの最新版を読み込ませる事にしました。プラグインも正常に稼働しますし、IE8は絶滅しているハズですし。ここもご自身の環境に合わせて適切なバージョンを選定して下さい。

THE THORinc/parts/wp_head.phpで読み込ませているJquery1.12.4を好きなバージョンに変更します。ついでにasync属性を付与して非同期化します。

//jQuery本体(WP同封ではなく、CDNを利用)
		echo '<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">'."\n";

親テーマを直接編集するので、THE THORのバージョンアップの度に同じ作業をする必要があります。

実行するとPageSpeed Insightsの指摘項目の中から、読み込みを停止したファイルが消えているはずです。

Googleタグマネージャーのアナリティクスタグを使う

最初はアナリティクスのトラッキングコードをヘッダーに埋め込んでいたのですが、「第三者コードの影響を抑えてください」のメインスレッドブロック時間がどうやっても短くなりませんでした。

調べてみるとGoogleタグマネージャーのアナリティクスタグを使用すると色々都合がよさそうなのでアカウントを取得し導入してみたところ、ブロック時間が若干短縮されました。

タグマネージャーの「コンテナスニペット」をテーマカスタマイズ画面の[基本設定]→[高度な設定]の[</head>直上の自由入力エリア]と[</body>直上の自由入力エリア]にそれぞれ貼り付け、アナリティクスと連携させてやれば完了です。

コピー箇所

コンテナスニペット2箇所をそれぞれコピーします。

貼り付け箇所

カスタマイズ画面[基本設定]→[高度な設定]の[</head>直上の自由入力エリア]と[</body>直上の自由入力エリア]にそれぞれ貼り付けます。

GA4 プロパティを利用している人はそちらのタグ追加も忘れないようにしましょう。

AutoptimizeでCSSとJavaScriptを最適化する

JavaScriptCSSを最適化するプラグインです。改善できる指摘が多いです。

「レンダリングを妨げるリソースの除外」、「使用していないJavaScriptの削減」、「リクエスト数を少なく、転送サイズを小さく維持してください」、「クリティカル リクエスト チェーンを回避してください」等に効果があります。

JS,CSS&HTMLタブ

チェック箇所

[JSCSS&HTML]タブの[JavaScriptコードの最適化]と[JSファイルを連結する]にチェックを入れます。

チェック箇所

[CSSコードを最適化]、[CSSファイルを連結する]、[インラインのCSSも連結]、[すべてのCSSをインライン化]にチェックを入れます。

チェック4つ目の[すべてのCSSをインライン化]は環境によっては不具合がでるかもしれません。ダメならチェックを外してください。

本来、ここの理想は一個上の[CSSのインライン化と遅延]です。私は妥協しました。

チェック箇所

[HTMLコードを最適化]にチェックを入れます。

THE THORにも[HTML圧縮設定]の項目があるので、そちらを使用しても同等の効果が得られます。

私の場合、ソースコード表示用jsファイル(prism.js)が改行してくれなくなるのでこちらを使用しています。

画像タブ

チェック箇所

[画像]タブの[画像の遅延読み込み(Lazyload)を利用]にチェックを入れます。

「オフスクリーン画像の遅延読み込み」の指摘を改善できます。THE THOREWWW Image Optimizerの中にも同様の機能はあるのですが、どれも上手く機能しませんでした。

追加タブ

チェック箇所

[追加]タブで[Googleフォントの削除]を選択します(使わない人のみ)。

Googleフォントを使用しない人は削除推奨です。

「レンダリングを妨げるリソースの除外」、「使用していないCSSの削減」、「第三者コードの影響を抑えてください」、「JavaScriptの実行にかかる時間の低減」、「クリティカル リクエスト チェーンを回避してください 」、「メインスレッドでタスクが長時間実行されないようにしてください」を改善できます。

入力箇所

[リクエストの事前読み込み]に「https://自ドメイン/wp-content/themes/the-thor/fonts/icomoon.ttf?cyzug3、[非同期JavaScriptファイル]に「https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js」を入力して下さい。

この時点で「レンダリングを妨げるリソースの除外」と「クリティカル リクエスト チェーンを回避してください」の指摘はほぼ無くなっていると思います。

2つ目の[非同期JavaScriptファイル]はTHE THORinc/parts/wp_head.phpで読み込ませているJquery1.12.4です。

wp_head.php内でasync属性を追加しても同様の効果が得られますが、テーマを更新する度に書き換えないといけないのでここで指定した方が管理が楽です。

icon.min.cssにdisplay=swapを設定する

「ウェブフォント読み込み中のテキストの表示」を改善できます。WordPress管理画面の[外観]→[テーマエディター]から[編集するテーマを選択]で親テーマ(THE THOR)を選択し、[css]→[icon.min.css]を選択します。

以下の部分にfont-display:swapを追加して下さい。

追加箇所

先頭の@font-face{font-family:icomoon;src:url(../fonts/icomoon.eot?cyzug3);src:url(“../fonts/icomoon.eot?…中略…format(“woff”),url(“../fonts/icomoon.svg?cyzug3#icomoon”) format(“svg”);font-weight:400;font-style:normal}の最後(” } “の前)に;font-display:swapを追加する

これでテーマがデフォルトで読み込むicomoonについて「ウェブフォント読み込み中のテキストの表示」を指摘される事はなくなります。ただし、第三者が読み込むフォントについては指摘が残ります。

この方法は親テーマのCSSを直接編集するため、テーマ更新毎に同じ作業をする必要があります。

Googleアドセンスを遅延読み込み

前項までの対策でGoogleアドセンス関連以外の指摘はほぼ改善できました。

しかしながら、Googleアドセンスに関する指摘を改善しないとPageSpeed Insightsのスコア大幅アップは見込めません。本項は他サイトを参考にしたのでその記事を紹介します。

貼り付け箇所

テーマカスタマイズ画面の[基本設定]→[高度な設定]の[</body>直上の自由入力エリア]に紹介記事の「スクリプトソース」をご自身の環境に合わせて編集し、貼り付けてください。

次に、広告コードを埋め込んでいる所全てから以下のコードを削除して下さい(一箇所でも削除漏れがあると機能しません)。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

自動広告の場合は紹介記事を参考にして適宜修正して下さい。

この遅延方法自体はポリシー違反にはならないというのが大方の見解のようですが、この方法を導入する場合は慎重に検討の上、くれぐれもご自身の判断でお願いします。

指摘で「過大なDOMサイズの回避」が残っていますが、これは記事内に[ページ区切り]を挿入して記事を分割すれば指摘を回避できます。

ユーザビリティ悪化させてまで得点を上げたいとは思わないので私はやっていません。ちなみにこの指摘を無くす為の要素数のボーダーはおおよそ850件のようです。

参考:要素数少な目のページスコア

冒頭の「モバイル/投稿ページの検証」は、文字数や画像数が多めのサンプルで行いました。

参考に軽めのページ(要素数689件)でもチェックしました。

軽めのページならモバイルでも90点を超えるようです。

あとがき

PageSpeed Insightsに指摘される件数は減ったのですが、高速化については正直微妙な気がします。体感で早くはなっていますが、最初に書いたようにそもそもこのテーマの表示速度は早いと思います。

タイトルの「高速化」はもはや釣りになっているかも知れませんが、PageSpeed Insightsのスコアは大幅に改善できました。

ただ、「スコアが良い」=「ユーザビリティが優れている」とも思えないのでほどほどがいいのかなと思いました。本記事はスコア改善の方法と結果を紹介していますが、具体的に処理がどうなるかまでは紹介していません。

皆さんにおいては、各処理を理解した上でご自身のサイトに向いている部分だけ取り入れてもらえればと思います。かく言う私も、全ての処理を理解できている訳ではありません。不具合がでないからヨシ!といった感じです。

最後に、記事中では触れませんでしたが、「Google Chromeデベロッパーツール」オススメです。今回の記事もほとんどこれを利用して検証しました。

プラグインのよく分からない機能も、デベロッパーツールで描画が可視化されることで動きが見えてきたりします。Chromeに標準装備されているものなので是非、利用してみて下さい。

追記:THE THORやめました

理由はたくさんありますが、決定的なのは「ブロックエディターが使い物にならない」です。WordPress公式が旧エディターのサポート打ち切りを匂わしているにもかかわらず、対応の素振りすらありません。ひょっとして、最後まで対応せずに新テーマ出すのでは?なんて想像までしだした始末。

アップデートも不具合対応ばかりが目立ち、目玉になるような新機能はほとんどない、不信感しかないのでさっさとあきらめました。

で、乗り換えたのが「SWELL」な訳ですが、これがもう快適過ぎてやめられません。「THE THOR SWELL 比較」みたいなワードでググってもらえれば両方使った人たちのステマでない意見が確認できます。「THE THOR」単独でググった時の評価ってアフィ代が上乗せされてるのかなぁと。

素人の私見ですが、初心者に「THE THOR」はおすすめできないし、「SWELL」との2択なら間違いなく「SWELL」です。

それでは最後までご高覧いただき、ありがとうございました。

目次
閉じる