2021/09/23 (更新日: 2021/12/02)

【WordPress】使用していないJavaScriptの削除の簡単・本格的な改善方法【速度改善】

ブログ

※本ページにはプロモーションが含まれている場合があります。

サイトの速度を計測できるPageSpeed Insightsで提案される改善点の「使用していないJavaScriptの削除」。

という方も多いはず。

そのくせPageSpeed Insightsの「改善できる項目」の「短縮できる時間」ではいつも上位に食い込むほどサイト速度を大きく下げている要因です。

最新のSEOでGoogleが非常に重視しているコアウェブバイタルで評価されるためにも、サイト速度を改善して読者に読まれるブログにするためにも、

「使用していないJavaScriptの削除」の改善は避けては通れません。

そこで本記事では、

• さくっと簡単に改善したいWordPress初心者も
• 本格的に改善したい方も

どちらも納得いくまで改善できるようにレベルに分けて3段階の改善方法を解説します。

本記事の内容

• 「使用していないJavaScriptの削除」の意味と改善方法の基本
• 3つの改善方法
• それぞれのやり方を画像付きで詳しく解説

本記事を読むと、初心者がプラグインで簡単に解決する方法から、プラグインを使わず本格的に改善する方法まで3段階の方法が画像付きでわかります。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

関連記事

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

「使用していないJavaScriptの削除」を改善しよう！

PageSpeed Insightsの中でも改善が難しい項目である、

• 使用していないJavaScriptの削除
• 使用していないCSSの削除

の2つを改善する方法を解説します。

>> WordPressのレンダリングを妨げるリソースの除外の簡単な改善方法｜JSとCSSを非同期で解決
>> 【使用していないCSSの削減】不要なCSSを自動で抽出・削除する方法

「使用していないJavaScriptの削除」を改善するだけでサイトをかなり高速化できる

サイト速度を計測すると、改善策の上位に表示されるのが「使用していないJavaScriptの削除」。

これが原因で大きくサイト速度が低下しているわけですが、

逆に捉えると「使用していないJavaScriptの削除」を改善するだけでサイト速度をかなり高速化することができるということです。

サイトを高速化してライバルのブロガーに差をつけよう！

余分なJavaScriptとCSSを読み込まないことが改善の基本

まずは「使用していないJavaScriptの削除」を改善するための方法の概要についてです。

そもそも「使用していないJavaScriptの削除」や「使用していないCSSの削除」とはその名の通り、

ということです。

使わないのに読み込んでるからもったいない！

つまり「使用していないJavaScriptの削除」と「使用していないCSSの削除」を改善するには単純に、以下の2ステップで改善できます。

1. 不要なJavascriptやCSSを特定する
2. それらを読み込まないようにする、あるいは読み込みを後回しにする

PageSpeed Insightsでも以下のように改善方法が記述されています。

使用していない JavaScript を減らして、必要になるまでスクリプトの読み込みを遅らせると、ネットワークの通信量を減らすことができます。
PageSpeed Insights

「使用していないJavaScriptの削除」の3つの改善方法と使い分け

改善方法の流れは先述の通りですが、具体的な方法は以下の3つがあります。

• 改善方法①「Flying Scripts by WP Speed Matters」でJavaScriptの読み込みをスキップする
• 改善方法②：使用していないJavaScript・CSSをファイルごと関数でスキップする
• 改善方法③：使用していないJavaScript・CSSのコードを別ファイルに分ける

どの方法が良いの？

上記の3つを全て使うんだ♪3つとも行うことでかなり速度を改善できるよ♪面倒なら①だけか、②まででもかなり速度が改善される！

それでは、それぞれの方法について簡単に解説するよ♪

改善方法①「Flying Scripts by WP Speed Matters」でJavaScriptの読み込みをスキップする

この方法は、
Flying Scripts by WP Speed Mattersというプラグインを使って、指定したJavaScriptファイルの読み込みを後回しにする方法です。

通常はJavaScriptやCSS・HTMLコードは上から順番に読み込まれるのですが、このプラグインを使うとJavaScriptの読み込みを後回しにすることでスムーズにHTMLの読み込みを進めることができます。

つまりそのページの余分なJavaScriptを一旦スキップできる！

プラグインで設定するだけなので、簡単に手軽にできるというメリットがあります。

また、JavaScriptのファイルごとスキップするので読み込むコードをかなり減らすことができ、大きく速度を改善できます。

改善方法②：使用していないJavaScript・CSSをファイルごと関数でスキップする

①が完了したら次はこの方法に進むよ♪

この方法は、function.phpにコードを記述して、指定したJavaScript・CSSファイルを読み込まないようにする方法です。

コードはコピペで貼り付けるだけなので簡単です。

また、改善方法①とは違い、

• JavaScriptだけでなく、指定したCSSファイルを読み込まないようにできる
• ページごとに読み込まないJavaScriptやCSSを個別で指定できる

というメリットがあります。

とっても簡単！慣れれば数分で終わる作業だから安心してね♪

改善方法③：使用していないJavaScript・CSSのコードを別ファイルに分ける

①・②も完了したら最後の仕上げ！

方法③は、JavaScript・CSSファイルから使用していないコードを抜き出し、別ファイルに移すことで必要なコードだけを残す方法です。

中級者向けだけどかなり効果があるよ！

①・②はJavaScript・CSSをファイルごとしか読み込んだり取り除いたりできませんが、

この③の方法ではファイルの中のコードを要不要で分割できるので、さらに無駄がなくなります。

が邪魔でサイトが遅い場合などに便利です。

それでは、ここからは①〜③の方法の手順を順番に解説していくよ♪

改善方法①「Flying Scripts by WP Speed Matters」でJavaScriptの読み込みをスキップする

>> Flying Scripts by WP Speed Matters

まずはプラグイン「Flying Scripts by WP Speed Matters」を使って、JavaScriptファイルの読み込みをスキップする方法です。

WordPressにはどこのページでもあまり使わないようなJavaScriptファイルがちらほらあるので、それらの読み込みをスキップさせます。

この方法は次の2ステップで進めます。

1. PageSpeed Insightsで余分なJSファイルを確認しよう
2. Flying Scripts by WP Speed Mattersを設定しよう

数分で終わるよ♪

手順①PageSpeed Insightsで余分なJSファイルを確認しよう

まずはPageSpeed Insightsでページ速度を計測し、計測結果の画面を開きましょう。

「使用していないJavaScriptの削除」の項目をクリックすると、そのページではあまり使われていないJavaScriptファイルが一覧で表示されます。

これらが主にスキップすべきファイルだよ♪

一旦この画面を開いたまま、次はFlying Scripts by WP Speed Mattersの設定に進みます。

手順②Flying Scripts by WP Speed Mattersを設定しよう

>> Flying Scripts by WP Speed Matters
まずはインストールから始めます。

Flying Scripts by WP Speed Mattersのインストール

WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。

プラグインの検索窓に「Flying Scripts by WP Speed Matters」と入力して検索します。

上の画像のプラグインがFlying Scripts by WP Speed Mattersです。

「今すぐインストール」をクリックしてインストールします。

インストールが完了したら「有効化」をクリックします。

インストール済みプラグイン一覧の画面に切り替わり、「プラグインを有効化しました。」と表示されたらFlying Scripts by WP Speed Mattersのインストールと有効化が完了です。

Flying Scripts by WP Speed Mattersの設定方法

「設定」→「Flying Scripts」をクリックします。

先ほどPageSpeed Insightsで確認した、あまり使われていないJavaScriptのファイルのファイル名を次の画像のように記載していきます。

ファイル名をこのように記入したら、「Save Changes」をクリックすれば、改善方法①は全て完了です。

設定画面では他には以下の2つを設定できます。

「Flying Scripts by WP Speed Matters」を無効にしたいページがある場合は「Disable on pages」で指定しておきましょう。

改善方法②：使用していないJavaScript・CSSをファイルごと関数でスキップする

次はプラグインを使わず、function.phpにコードを記述して不要なJavaScript・CSSファイルをスキップさせていきます。

A plugin should only enqueue a script if it is actually used on the page.
PageSpeed Insights

PageSpeed Insightsには「使用していないJavaScriptの削除」を解決するために上のように記述されています。

日本語に訳すと以下のような感じです。

よって改善方法②では主に、「プラグインを使うページ以外では、そのプラグインのJavaScriptとCSSを読み込まないようにする」ことを行います。

例えば、

というイメージです。

以下の2ステップで進めます。

1. 読み込んでいるJS・CSSの一覧を関数で確認する
2. JS・CSSの読み込みをスキップする関数を記述する

順番に解説するよ♪

手順①読み込んでいるJS・CSSの一覧を関数で確認する

まずは、何のプラグインのJavaScriptとCSSが読み込まれているかを一覧で確認します。

「外観」→「テーマエディター」を開きます。

画面右側にある「function.php」をクリックします。

function.phpを編集する画面が表示されるので一番下までスクロールし、コードの最後に以下のコードを全てコピペで貼り付けます。

function my_func_css_js_list() {
  $wp_styles = wp_styles();
  $wp_scripts = wp_scripts();
  $css_js_list = '<dl><dt>CSSの一覧</dt><dd><ul>';
  foreach( $wp_styles->queue as $css_handle ) :
    $css_js_list .=  '<li>' . $css_handle .'</li>';
  endforeach;
  $css_js_list .= '</ul></dd>';
  $css_js_list .= '<dt>JavaScriptの一覧</dt><dd><ul>';
  foreach( $wp_scripts->queue as $js_handle ) :
    $css_js_list .=  '<li>' . $js_handle .'</li>';
  endforeach;
  $css_js_list .= '</ul></dd></dl>';
  return $css_js_list;
}
add_shortcode( 'css_js_list', 'my_func_css_js_list');

貼り付けたら、「ファイルを更新」をクリックします。

「投稿」→「新規追加」を開き、上の画像のように以下のショートコードを入力し、プレビューを表示します。

[css_js_list]

プレビューを表示すると、このようにCSSの一覧と

JavaScriptの一覧が表示されます。

ちなみにこれらはCSSやJavaScriptのファイル名ではありなく、プラグイン名などの一覧になります。

例えばContact Form 7のプラグインを使用している方は「contact-form-7」が表示されるはずです。

手順②JS・CSSの読み込みをスキップする関数を記述する

function.phpを再度開き、ファイルの最後に以下のコードを自分のブログに合わせて少し修正して貼り付けます。

function my_func_dq_css_js() {
 if( ! is_page(4655)){
     wp_dequeue_script( 'contact-form-7' ); 
     wp_dequeue_style( 'contact-form-7' );
 }
}
add_action( 'wp_enqueue_scripts', 'my_func_dq_css_js' );

上のコードは、

という意味です。

記事を指定したい場合は、以下の部分の数字を変更します。

読み込まないCSSを指定するには以下のコードの「contact-form-7」の部分を、

読み込まないJavaScriptを指定するには以下のコードの「contact-form-7」の部分を

先ほど一覧で確認した表示名に変更すればOKです。

ちなみに記事IDとは、投稿編集画面を開いた時のURLに表示される

の数字の数字のことです。

読み込まないページを複数指定する場合

function my_func_dq_css_js() {
 if( !is_page(4655) && !is_page(2022) && !is_page(341)){
     wp_dequeue_script( 'contact-form-7' ); 
     wp_dequeue_style( 'contact-form-7' );
 }
}
add_action( 'wp_enqueue_scripts', 'my_func_dq_css_js' );

上記のコードや以下のように、ifの中に「&& !is_page(ページID)」を増やしていくと複数のページを指定することができます。

「&&」はAND条件を表しています。

ページごとにそれぞれ別のファイルを指定する場合

function my_func_dq_css_js() {
 if( ! is_page(4655)){
     wp_dequeue_script( 'contact-form-7' ); 
     wp_dequeue_style( 'contact-form-7' );
 }
 if( ! is_page(3005)){
     wp_dequeue_script( 'toc-front' ); 
     wp_dequeue_style( 'toc-screen' );
 }
}
add_action( 'wp_enqueue_scripts', 'my_func_dq_css_js' );

上のコードのように、ifを新しく作って追加していけば、ページごとに異なるファイルを指定できます。

同じページで複数のファイルを指定する場合

function my_func_dq_css_js() {
 if( ! is_page(4655)){
     wp_dequeue_script( 'contact-form-7' ); 
     wp_dequeue_style( 'contact-form-7' );
     wp_dequeue_script( 'toc-front' ); 
     wp_dequeue_style( 'toc-screen' );
 }
}
add_action( 'wp_enqueue_scripts', 'my_func_dq_css_js' );

1つのページで複数のCSSやJSを指定する場合は、上記のようにif処理の中にCSSならwp_dequeue_style( '表示名' );Javascriptならwp_dequeue_script( '表示名' );で追加していきます。

改善方法③：使用していないJavaScript・CSSのコードを別ファイルに分ける

最後は、ファイルごとスキップするのではなく、JavaScript・CSSのファイルを必要なコードと不要なコードに分ける方法です。

この方法は以下の手順で行います。

1. デベロッパーツール→「Coverage」で余分なJS・CSSコードを確認する
2. 不要なJS・CSSのコードを別ファイルに分解し、読み込まないようにする

それぞれ順番に解説するよ♪

手順①デベロッパーツール→「Coverage」で余分なJS・CSSコードを確認する

まずはGoogle Chromeで自分のブログのページを開き、以下のコマンドでデベロッパーツールを開きます。

• Windows：「F12」キー
• Mac：「Command」+「Option」+「i」

このようにデベロッパーツールが開かれます。

「Console」の左にある3つの点のマークをクリックします。

「Coverage」をクリックします。

画像の位置の、丸まった矢印のアイコンをクリックします。

画面右の方のゲージで赤色の割合が多いファイルは、不要なコードが多いファイルということになります。

それぞれ以下のものを表しています。

• 左に緑の線があるコード：使われているコード
• 左に赤の線があるコード：使われていないコード

手順②不要なJS・CSSのコードを別ファイルに分解し、読み込まないようにする

手順①でファイルごとに必要なコードと不要なコードの特定ができたので、

手順②では必要なコードを残して不要なコードは別ファイルに分解して読み込まないようにします。

1. 上記の画像のように「外観」→「テーマエディター」で、style.cssやcssフォルダなどからコードを分解したいCSSファイルを開きます。
2. 同時に、不要なコードを移動させる先のCSSファイルを新しくローカル作成しておきます。
3. 手順①のツールを見ながら、「テーマエディター」で開いたCSSファイルから不要なコードを抜き取り、新しくローカルで作成したCSSファイルに不要なコードを全て移動させます。
4. 不要なコードの移動が全て完了したら、そのローカルのCSSファイルをWordPressで使えるようにサーバーに設置します。
5. この際に、　本記事の方法②のようにif文を使うことで、必要なページだけでしかこのCSSファイルは読み込まないようにします。

上記の流れで、ファイルから無駄なコードを取り除き、必要なページでしか読み込まないようにすることができます。

これを、手順①で確認した分解したいファイルごとに同じ作業を繰り返せばOKです。

「使用していないJavaScriptの削除」を改善してサイト速度を高速化しよう！

「使用していないJavaScriptの削除」を改善してサイトを高速化するために、

• プラグインで簡単にできる初心者向けの方法
• プラグインなしでさらに改善できる初心者向けの方法
• ファイルを分解してさらに本格的に改善できる中級者~上級者向けの方法

の3ステップをご紹介しました。

よくわからないは方法②か方法①まで行うだけでもかなりスコアが改善されます。

完了したらPageSpeed Insightsでサイト速度の計測と「使用していないJavaScriptの削除」の改善度合いの確認をしてみましょう。

「使用していないJavaScriptの削除」と並んで重要なPageSpeed Insightsの他の改善案については以下の記事でそれぞれ解説しています。

関連記事

WordPressのレンダリングを妨げるリソースの除外の簡単な改善方法｜JSとCSSを非同期で解決 PageSpeed Insightsで提案される「レンダリングを妨げるリソースの除外」はJavaScriptとCSSの2つが要因。プラグインなし・プラグインAutoptimizeとAsync JavaScriptを使う方法の両方を解説。「レンダリングを妨げるリソースの除外」はJSとCSSを非同期にすればすぐに解決。

関連記事

【使用していないCSSの削減】不要なCSSを自動で抽出・削除する方法 PageSpeed Insightsの「使用していないCSSの削減」はツールを使えば簡単に改善できます。使用していないCSSのセレクタを「Unused CSS」で抽出、使用していないCSSを「UnCSS Online!」で自動で削除して「使用していないCSSの削減」を改善してWordPressを高速化する方法を解説。

サイト速度を改善するためのプラグインやポイントは以下の記事でそれぞれ解説しています。

関連記事

【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】 【2021年最新】AutoptimizeはHTML・CSS・JavaScriptのコードを最適化してサイトを高速化してくれるWordPressのプラグインです。Autoptimizeを使うとソースコードの改行やスペースを自動で削除したり、ファイルを結合して自動で最適化してくれます。WordPressに必須のプラグイン。

関連記事

Async JavaScriptで読み込みを非同期化して高速化する方法【WordPressプラグイン】 「Async JavaScript」とは、JavascriptやjQueryの読み込みを非同期化(Async)・遅延化(Defer)してサイトを高速化するWordPressプラグインです。PageSpeed Insightsのスコアを改善するための「Async JavaScript」の使い方やおすすめの設定方法を解説。

関連記事

WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】 WordPressブログの画像の容量(ファイルサイズ)はどれくらいが最適なのかの目安とその目安に合わせて画像の容量(ファイルサイズ)を小さくする4つの方法と裏技を解説します。WordPressブログの画像のファイルサイズを小さくする方法は圧縮だけではありません。リサイズ・画像形式の変換もしてサイト速度を改善しましょう。

関連記事

【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】 【2021年最新版】EWWW Image Optimizerのインストール・設定方法・使い方を画像付きで詳しく解説しています。EWWW Image Optimizerは画像のサイズを自動で最適化(圧縮)・リサイズしてサイトの表示速度を速くしてくれるWirdPressプラグインです。2021年ばんの最新の設定方法を解説。

関連記事

WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】 WordPressで画像をWebPに自動変換する方法やWebP画像をアップロードする3つの方法を解説。プラグインで自動で変換する方法や、プラグインなしで簡単にWordPressをWebP対応させる方法も。次世代フォーマットのWebPはGoogleも推奨しているのでWordPressに導入してサイトを高速化させましょう。

関連記事

【2021年最新】WordPressのキャッシュプラグインおすすめ8選【比較表付き】 【2021年最新版】WordPressサイトを高速化するためにおすすめの8つのキャッシュプラグインを紹介。WordPressを高速化するにはキャッシュプラグインが必須とも言えます。初心者向けから本格的なものまで、速さ・安全性・機能などを表にして徹底比較。ニーズごとに最もおすすめなキャッシュプラグインも紹介。

関連記事

【2021年最新】W3 Total Cacheのおすすめの設定方法と注意点

＼【無料ブログ講座】LINE限定でノウハウを配信／

公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。

LINE参加者の声

400名が以上参加中！無料で読めます♪

＼ 最短で収益化 ／公式LINEで無料で学ぶ

• facebook
• Tweet
• hatebu
• Share
• Read Later