RTOCのcssがPageSpeedInsightにひっかかったので解決した話

WordPressの目次プラグインといえば「Easy Table of Contents」か「Table of Contents Plus」の2強だったのですが、
数年前に「Rich Table of Contents（以下RTOC）」が出てきて少しづつ勢力を伸ばしてきていますね。

今回はそんなRTOCを使用した際にPageSpeed Insightで引っかかった話をしていきます。

そもそもプラグインを使用しているとよく「レンダリングを妨げるリソースの除外」に引っかかります。

これが機能を使用しているページならまだいいのですが、機能を使用していないページで表示されていることが一番の問題です。

ですので、RTOCを使用していないページでは、当該プラグインで使用するstyleやscriptを読み込ませないことで解決していきます。

根本的に解決しようとすると、クリティカルCSSを導入しないといけないので、運用する上での項数があがるため今回は控えておきます。

# この記事で解決すること

RTOC使用時にrtoc_style.cssがPageSpeed Insightの「レンダリングを妨げるリソースの除外」に引っかかるのを防げる
※RTOCを使用していないページが対象
RTOCを使用しないページでは、当該プラグインで使用するstyleやscriptを読み込ませない

前提

今回はトラブル解決です。

使用しているのは下記のとおりです。

WordPress@6.0.3
Rich Table of Contents@1.3.5

問題

RTOCで使用するrtoc_style.cssがPageSpeed Insightの「レンダリングを妨げるリソースの除外」に引っかかる。

また、RTOCを使用していないページで当該プラグインに対するjsやcssファイル、またインラインでのcssの記述が読み込まれる。

今回読み込まれていたのは下記です。
※設定しているオプションやプラグインのバージョンによって読み込まれるファイルに誤差があります。

type	name
css file	rtoc_style.css
inline css	<!– rtoc –>
inline script	id=”rtoc_js-js-extra”
inline script	id=”rtoc_userate_js-js-extra”
js file	rtoc_common.js
js file	rtoc_scroll.js
js file	rtoc_userate.js
js file	rtoc_js_highlight.js

解決

ベースコード

まずは、条件分岐を取っ払って、記述したコードで本当に読み込ませないことができるのかを検証していきます。

add_action( 'wp_enqueue_scripts', 'remove_rtoc_scripts', 100 );
function remove_rtoc_scripts() {
  wp_deregister_script( 'rtoc_userate_js' );
}
remove_action('wp_head', 'rtoc_senior_color', 12);
remove_action('wp_head', 'rtoc_jin_color', 12);
remove_action('wp_footer', 'rtoc_css_load', 1);
remove_action('wp_enqueue_scripts', 'rtoc_js_load', 1);
remove_action('wp_enqueue_scripts', 'rtoc_js_return', 1);
remove_action('wp_enqueue_scripts', 'rtoc_js_scroll', 1);
remove_action('wp_enqueue_scripts', 'rtoc_js_highlight', 1);

各関数の説明は下記のとおりです。

name	description
remove_action	add_actionに付加されている関数を除去できる `remove_action(アクションフック, 除去する関数名, 優先度, 関数が受け入れる引数の数)`
wp_deregister_style（script）	wp_register_style(script)で登録されたCSS(js)ファイルの登録を解除し、エンキューされたCSS(js)ファイルを削除できる `wp_deregister_style(登録名)`
wp_dequeue_style（script）	wp_enqueue_style(script)でエンキューされたCSS(js)ファイルを削除できる `wp_dequeue_style(登録名)`

# point

add_actionで優先度（第3引数）が設定されている場合は、remove_actionでも設定する必要がある

これでRTOCを使用しているページでも、
使用していないページでもRTOCに関するファイルが読み込まれなくなりました。

では、ここからが本題です。

仮にRTOCを使用しているのが、singleページだけだったとしても、
h2などの個数によって、目次の表示非表示をユーザー側で決めることができるので、
その点も考慮した条件分岐を書く必要があります。

また、どこに対してフックを掛けるのかも悩みどころです。

条件分岐について

今回は、元々RTOC内で用意されている目次を吐き出すための関数を使用した条件分岐にしようともいます。

『RTOCが目次を吐き出す＝RTOCを表示する条件に値する』ということになります。

フックの場所について

フックはいろいろ試した結果、wp_enqueue_scriptsにかけることにします。

お気づきの方もいらっしゃると思いますが、wp_enqueue_scriptsにフックすることによって先程記述したコードを改変する必要が出てきます。

実装

以下のコードをfunctions.phpに追記します。

functions.php

function remove_rtoc_scripts() {
  if(!is_admin()) {
    if(!rtoc_get_index()) {
      wp_deregister_script( 'rtoc_js' );
      wp_deregister_script( 'rtoc_js_scroll' );
      wp_deregister_script( 'rtoc_js_highlight' );
      wp_deregister_script( 'rtoc_userate_js' );
      remove_action('wp_head', 'rtoc_senior_color', 12);
      remove_action('wp_head', 'rtoc_jin_color', 12);
      remove_action('wp_footer', 'rtoc_css_load', 1);
      // remove_action('wp_enqueue_scripts', 'rtoc_js_load', 1);
      // remove_action('wp_enqueue_scripts', 'rtoc_js_return', 1);
      // remove_action('wp_enqueue_scripts', 'rtoc_js_scroll', 1);
      // remove_action('wp_enqueue_scripts', 'rtoc_js_highlight', 1);
    }
  }
}
add_action( 'wp_enqueue_scripts', 'remove_rtoc_scripts', 100 );

2行目

管理画面内でRTOCの設定を保存できなくなりましたので、管理画面内でアクションを起こさないよう除外しています。

3行目

rtoc_get_indexがRTOCが目次を吐き出すための関数です。
（rich-table-of-content/function.php 参照）

ショートコードで吐き出すための関数があったため、別途条件を分岐させる必要がありそうですが、今回は見送ります。
※もしかしたらそのままでもいけるかも。。。

12～15行目

add_actionとremove_actionのフック先が被っているのでうまく機能しませんでした。

そのため、機能しなかったremove_actionはwp_deregister_scriptで代替しています。（5～7行目）

これでRTOCを表示していないページのStyleとScriptを削除することができました。

確認したところ、PageSpeed Insightでも問題はありませんでした。