おにちゃん塾の商品一覧

「使用していない JavaScriptの削除」プラグインで改善する方法

「使用していない JavaScriptの削除」プラグインで改善する方法
URLをコピーする
URLをコピーしました!
想定読者

PageSpeed Insightsで「使用していない JavaScriptの削除」と表示されるのですが、どうすれば良いのか分からない

上記の方に向けて、本記事は執筆しています。

おにちゃん

執筆者:WordPressを専門的に扱っているおにちゃん塾運営者が詳しく解説させていただきます。

使用していない JavaScriptの削除」問題は、必ずぶつかる壁だと思います。

プログラミングを学んでいない方にとって、JavaScript=難しいという印象があるかもしれませんが、簡単に解決することができるので安心してください。

結論から言うと、使用していない JavaScriptの削除」問題はプラグインの導入で解決することができます

本記事では、プラグインを活用しますので、必ず事前にバックアップするようにしてください。
WordPressプラグインの使用はあくまで自己責任でよろしくお願いしますm(_ _)m

目次

Step0:使用していない JavaScriptの削除方法を知ろう

本記事では、プラグインを導入する方法をおすすめしていますが、「使用していない JavaScriptの削除」を解決する方法は他にもあります。

使用していない JavaScriptの削除する方法
  • ソースコードを触る
  • プラグインを導入する


削除方法:ソースコードを触る

使用していない JavaScriptの削除する方法1つ目はソースコードを触ることです。

おにちゃん

具体的には下記のようなコードを追加していきます。

function delContact_Form() {
 if( ! is_page(5)){
     wp_dequeue_style( 'contact-form-7' );
     wp_dequeue_script( 'contact-form-7' );
 }
}
add_action( 'wp_enqueue_scripts', 'delContact_Formt' );

ちょっとした解説

関数delContact_Formを作成する。中身はif分の()に該当する場合はContact Fomr7のCSSとJavaScriptを削除してください。と言う文です。

こんな感じで、ソースコードを追加していけば、「使用していない JavaScriptの削除」の項目を解決することができます。

注意点:PHPの経験がない方にはおすすめしません。なぜならfunctions.phpはWordPressの心臓部分です。失敗すれば取り返しのつかないことになる可能性があります。

ソースコードを使って「使用していない JavaScriptの削除」を解決したい方は、次の章で紹介しているStep1を行い、その後は「プラグイン名」でググりながら削除してみてください。


削除方法:プラグインを導入する→これがおすすめ

使用していない JavaScriptの削除する方法2つ目はプラグインの導入です。

冒頭でも触れましたが、こちらが一番おすすめの方法です。

なぜなら、プログラミング未経験者でも簡単に実装できるからです。

おにちゃん

WordPressが扱える僕でも8割近くの案件でプラグインを導入して解決しています。

残り2割:プラグインの使用が嫌いなクライアント様に関しては、ソースコードをいじって解決しています。

今回使用するプラグインは「Flying Scripts by WP Speed Matters」です。

色々使ってきた中で最も信頼できるプラグインです。それでは、早速使い方について学んでいきましょう。


Step1:使用していない JavaScriptを洗い出そう

「使用していない JavaScriptの削除」Step1では、問題点を洗い出していきます。

まずは、PageSpeed Insightへいき、スコアを計測してみてください。

使用していない JavaScriptの削除

使用していない JavaScriptの削除という項目が表示されると思いますので、そちらをクリックし詳しい内容を把握しましょう。

使用していない JavaScriptの削除の部分

ここに表示されているJavaScriptがスコア悪化の要因です。

こちらの問題点を解決することができれば、スコアは良くなります。


注意点:削除してはいけないJavaScriptもある

Googleのスコアで表示される問題点は使用していないファイルではなく、ファイル内で使用していない関数なども含まれています。

わかりやすく解説

JavaScirptファイルXは通常、A機能、B機能、C機能などを搭載しています。

仮に、あなたがA機能のみを使用している場合でも、GoogleスコアはB機能&C機能を使用していないからJavaScriptファイルXを削除しろと警告します。

この警告を鵜呑みしてしまい、ファイルXを削除してしまうと、A機能が動作しなくなりサイト表示が崩れる可能性があります。

おにちゃん塾の使用していない JavaScriptの削除

具体例:僕に限っていうと、上記のJavaScriptコードは削除してはいけません。

なぜなら、JavaScriptファイルの一部をサイトに使用しているから。

9割方の使用していない JavaScriptの削除の項目は削除してもOKです。ただ削除してはいけないものがあることも理解しておきましょう。


Step2:使用していない JavaScriptを削除しよう

使用していない JavaScriptの削除」Step2では、実際にプラグインを導入していきます。

先ほど紹介しました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」プラグインに行き、設定を行っていきましょう。

貼り付ける際の注意点を紹介していきます。

僕の場合:PageSpeed Insightに表示されているのは下記の三つです。

  • js/plugins.js?ver=2.4.1.1
  • jquery/jquery.min.js?ver=3.6.0
  • gtag/js…

この時に、全てのファイルを記述するのではなく、/最後の部分だけをコピーしペーストしてください。

僕の場合だと、plugins.js?ver…..、jquery.min.js……..、js….になります。

おにちゃん

この点を間違う方が割と多いので、解説してきました。


追加する際は1つ1つ行いましょう。

先ほど触れましたが、JavaScriptファイルを削除していると、サイトの挙動がおかしくなることがあります。

そのような挙動を避けるためにも、1つ追加して、保存する→サイトを確認する→問題がなければ、1つ追加する

上記のような流れで行うようにしましょう。


スピードを確認しよう

本記事を参考に、使用していない JavaScriptの削除した方はスピード表示が変わっているはずです。

おにちゃん

僕が請け負ったクライアントの平均値は11です。
変化の最低値:5
変化の最高値:18

ぜひ、PageSpeed Insightで確認してみてください。


Step3:使用していない JavaScriptの削除以外の選択肢

使用していない JavaScriptの削除してスピードが上がった方は下記の項目も行ってみてください。

WordPress表示速度改善したい方向け

STEP
サーバーを見直す

サーバーを見直すだけで簡単にWordPressの表示速度は改善できます。

まとめ:個人におすすめのレンタルサーバー

おにちゃん塾では、Conohaを導入しています。

記事を読む:【現役ブロガーが厳選】おすすめのレンタルサーバー3選|個人向けです

STEP
画像対応する

実は、WordPress表示速度に最も影響を与えているのが、画像です。次に「使用していない JavaScriptを削除」です。

画像対策する際は、画像圧縮と次世代フォーマットに変換の2つが必要です。

EWWW

こちらのプラグインを導入するだけ、かなりスピードをあげることができます。

導入手順:2021年最新版】EWWW Image Optimizerの使い方と設定方法

STEP
ソースコード圧縮

本記事では、「使用していない JavaScriptの削除」を行いました。本記事の内容に加えて、使用しているJavaScriptファイルを最適化することです。

autoptimize

ソースコード最適化にはAutoptimizeの一択です。

導入手順:【最新版】Autoptimizeの設定方法と使い方【圧縮系プラグイン】

全体的に学びたい方は、下記の記事を参考にしてみてください。


まとめ:使用していない JavaScriptの削除はプラグインで行おう

ここまでで使用していない JavaScriptの削除プラグインで改善する方法の解説は以上です。

おにちゃん

他にも役立つプラグインを知りたい方は下記の記事を参考にしてみてください。


「使用していない JavaScriptの削除」プラグインで改善する方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる