サイトスコアの改善！
今回は『使用していないCSSの削除』に対応します。
PageSpeed Insights の『使用していないCSSの削除』で、以下のCSSが指摘されている人も多いのではないでしょうか。
html
https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap
実はこれ Rich Table of Contents （RTOC）のスタイルシートで読み込まれています。
使用していないCSSの削除｜Noto Sans JPを削除した場合のスコア
RTOCのスタイルシートから『Noto Sans JP』を削除した場合のスコアを比較
Noto Sans JP｜削除前のスコア
Noto Sans JP｜削除後のスコア
スコアでは7も差が出ました。
そしてスピードの比較がこちら！
Noto Sans JP｜削除前のスピード
Noto Sans JP｜削除後のスピード
1.2s から 0.3s まで短縮！
その差0.9秒！
この差は大きいですね。
使用していないCSSの削除｜Noto Sans JPの削除方法
ということで、RTOC のスタイルシートから Noto Sans JP の読み込みを削除します。
修正するファイルは次の２つ。
- admin_rtoc_style.css
- rtoc_style.css
※フォルダパスは
wp-content/plugins/rich-table-of-content/css 配下
この２つのファイルの上部に Noto Sans JP を読みこんでいる個所があるのでコメントアウトします。
コメントアウトの例
/**@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap");**/
コメントアウトができたら FTP 経由で修正したファイルをアップロードして、上書きしましょう。
私の環境では上記の削除だけでも問題はありませんでした。
ただ、一応プラグインで読み込まれていたファイルです。
予想外の場所で問題が出るかもしれないので、念の為ヘッダー部分に以下のコードを追加して遅延読み込みを行っています。
html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap" media="print" onload="this.media='all'">
簡単ですが作業はこれで終了です。
使用していないCSSの削除｜Noto Sans JPに対応【原因はRTOC】～まとめ～
私の環境では問題は起きていませんが、スタイルシートを修正するので、RTOCの表示が崩れる可能性もあります。
そのような場合に自分で対応できないと大変なことになりますので、自信が無い方は行わないで下さいね。
もう一度言っておきますが、公式の見解ではなく私が勝手にやっているだけです。
そして私も責任は取れません。
作成者の方が @import で読み込んでいるのは、配布しやすいようにしているだけと考えてこの修正をしていますが・・・。
他にも大事な理由があるかもしれませんからね。
WPRocket が思ってた以上に使えないので、サイトのスコア改善が大変です。
ただ WPRocket なしでもまぁまぁスコアが改善してきたので、地道に改善していきます。
