プラグインのJS・CSSレンダリングブロックを排除する ~PageSpeed Insights(旧版)とGTmetrixを改善してみる(その2) 

AI利用について 当サイトでは、記事作成・編集・画像制作等の一部に生成AIを使用しています。掲載内容は運営者が確認・編集しています。

【2026年6月27日追記】
本連載は、KUSANAGI for ConoHa(1Gプラン)でPageSpeed InsightsとGTmetrixのスコア改善を図った過程です。
2016年に私がKUSANAGIを導入した直後、サイト高速化に初めてガチで取り組んだもの。
PageSpeed Insightsは旧版のものですが、対策そのものは参考になると思います。

特に、

プラグインのJS・CSSのレンダリングブロック対策は2026年でも基本的な考え方は変わりません

本記事で記していることは、

  1. レンダリングブロックの原因となるプラグインそのものを削除または停止
  2. 残ったプラグインのJSやCSSの停止

いずれもそのまま通用します。
ただし本記事のコードは古いので、その点において参考程度にとらえてください。

以下は当時の作業記録としてお読みください

こちらの記事の続きです。

最新のPSI100については、こちらをお読みください。

https://wordpress.kimoota.net/post-53921/

天満川鈴 WRITTEN BY 天満川鈴
スポンサーリンク

今回の作業の効果

具体的にはプラグインの見直し、そして手作業によるjsとCSSの排除です。

冒頭の画像は今回の作業を終えたときのイメージ。
結構だるいです。
しかし終わったら劇的な効果があります。

具体的には、次の通り。

レンダリングブロックしているCSSとJSを排除しなかった場合のスコア。

対策した場合のスコア

モバイル73→95

パソコン88→96

プラグインの見直し

アンインストールするプラグインを探す

まず大前提としてプラグインを見直します。
便利だからとか名前が知られているからという理由で入れたままにしてるプラグインは多いのですが、外せるものは外します。
これは後の作業を楽にするためと、サイト全体の高速化を図るのとがあります。

もちろん、レンダリングブロックしているプラグインは筆頭。
機能が必要なら「(プラグイン名) プラグイン無し」とか「(プラグインの機能) 軽量」でインターネット検索をかけます。

私が外したり交換したりしたプラグインは、例えばこんな感じです

人気記事:WordPress Popular Posts→Simple GA Ranking

https://wordpress.kimoota.net/simple-ga-ranking/

サーバー負荷が軽くなるという話なので。
CSSはLuxeritasの新着記事のものを、同じID・クラス名にすることで流用しています。

著者情報:Simple Author Box→アンインストール

https://wordpress.kimoota.net/author-box-no-plugin/

自作しました

ハイライト:Crayon Syntax Highlighter→highlight.js

https://wordpress.kimoota.net/syntaxhighlighter/

Crayonは無駄に重いプラグインナンバーワンですので。
なおhighlight.jsのcssは子テーマに貼って読み込ませることでレンダリングブロックを回避しています。
そんなに量も多くありませんので。

固定ページの子ページリスト:Child Pages Shortcode→アンインストール

自作しました。

Jetpack→アンインストール

吟味した結果、どの機能も要らないと判断しました。

関連記事:WordPress Related Posts→Luxeritasの関連記事コードを抜いて、ウィジェットで実行

効果あるかわかりませんが、少なくともCSSは減らせます。

セキュリティ:SiteGuard→Google Authenticator、Login rebuilder

https://wordpress.kimoota.net/login_rebuilder/

逆に増えていますが、SiteGuardはNginxですと使える機能が限られますので仕方ありません(※)。
Google Authenticatorはスマートフォンを使った二重認証システムです。

※現在、SiteGuardはNginxでも使えます。

などなど、です。

停止できるプラグインを探す

使う時にだけ動かせばいいプラグインは停止させます。
私の場合を以下に列挙します。

  • All-in-One WP Migration
    引越用プラグイン
  • Compress JPEG & PNG images
    PNG圧縮限定用
  • Duplicate Post
    ページ複製用
  • Force Regenerate Thumbnails
    サムネイルを作り直すプラグイン
  • Query Monitor
    デバッグ用プラグイン
  • Search Regex
    文字一括置換用プラグイン

レンダリングブロックプラグインを手動で排除する

PageSpeed Insightsで計測すると、こんな画面が表示されます。

列挙されているプラグインをトップページで読み込ませないようにします。

プラグインIDを調べる

プラグインのIDを調べます。
直接ソースを見ると、こんな感じでIDが記載されています。

functions.phpに排除するコードを記述する

Easy Table of Contentsを例に取るとこんな感じです。

add_action( 'wp_enqueue_scripts', 'deregister_styles' );
function deregister_styles() {
 if ( ! is_single() ) {
wp_dequeue_style( 'ez-toc' );
wp_dequeue_script( 'ez-toc' );
 }
}

「-css」を除いた部分を()に入れます。
目次プラグインですから、投稿ページ以外では不要なので条件分岐しています。
他のプラグインも同じように追加していきます。

しかし一部のプラグインは、この方法だと外せない場合があります。
私の場合ですとamazon.jsがそう。
そこで、次のコードによって排除します。

add_action( 'wp_print_styles', 'amazonjs_styles' );
function amazonjs_styles() {
 if ( ! is_single() ) {
wp_deregister_style( 'amazonjs' );
 }
}

ただ現在、wp_print_stylesは非推奨とされています。

https://make.wordpress.org/core/?p=1802

今回はやむなく使ったものです。

まとめ

腕力勝負と言える作業で疲れましたが、これで一気にスコアが上がりました。

次回は「表示可能コンテンツの優先順位を決定する」に挑戦します

こちらに続きます。

https://wordpress.kimoota.net/pagespeed-insights-gtmetrix-005/

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。
AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
当サイトではWordPressを使用していますが、仕事ではNuxtです。

詳しいプロフィールはこちら

KUSANAGI ON VPS

VPSは、もう「黒い画面」だけじゃない。

「VPSは難しそう」と諦めていませんか? ConoHaのKUSANAGIなら、ブラウザ上の管理画面(KUSANAGI Manager)で、ドメイン設定からSSL発行まで直感的に操作可能です。

コマンド操作なしで世界最速級の環境を構築できる、今の時代の初心者にとっての最適解。私が長年愛用している理由がここにあります。

※当サイト経由で新規申し込みいただくと、特典として1000円分のクーポンをもらえます。

公式サイトで詳細を見る
× 閉じる