ブログ運営

使用していないCSSの削除|Noto Sans JPに対応【原因はRTOC】

サイトスコアの改善!

今回は『使用していないCSSの削除』に対応します。

管理人
使用ツールは PageSpeed Insights になります。

 

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|削除前のスコア

Noto Sans JP|削除後のスコア

Noto Sans JP|削除後のスコア

スコアでは7も差が出ました。

 

そしてスピードの比較がこちら!

Noto Sans JP|削除前のスピード

Noto Sans JP|削除前のスピード

Noto Sans JP|削除後のスピード

Noto Sans JP|削除後のスピード

1.2s から 0.3s まで短縮!

その差0.9秒

この差は大きいですね。

管理人
使用していないCSSでスピードが落ちると正直困ります。

使用していないCSSの削除|Noto Sans JPの削除方法

注意

公式に問い合わせて対応しているわけではありません。

私が勝手にやっていますので、削除する場合は自己責任でお願いします。

FTPソフトが使えない、CSSがよくわからない方が作業することはおすすめしません。

また作業前にはバックアップの取得をお忘れなく。

ということで、RTOC のスタイルシートから Noto Sans JP の読み込みを削除します。

 

修正するファイルは次の2つ。

  • admin_rtoc_style.css
  • rtoc_style.css

※フォルダパスは
wp-content/plugins/rich-table-of-content/css 配下

 

この2つのファイルの上部に 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 なしでもまぁまぁスコアが改善してきたので、地道に改善していきます。

-ブログ運営