想定読者PageSpeed Insightsで「使用していない JavaScriptの削除」と表示されるのですが、どうすれば良いのか分からない
上記の方に向けて、本記事は執筆しています。
「使用していない JavaScriptの削除」問題は、必ずぶつかる壁だと思います。
プログラミングを学んでいない方にとって、JavaScript＝難しいという印象があるかもしれませんが、簡単に解決することができるので安心してください。
結論から言うと、「使用していない JavaScriptの削除」問題はプラグインの導入で解決することができます。
本記事では、プラグインを活用しますので、必ず事前にバックアップするようにしてください。
WordPressプラグインの使用はあくまで自己責任でよろしくお願いしますm(_ _)m
WordPressカスタマイズ外注したい方
カスタマイズを外注したい方は「ココナラ」がおすすめです。
このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。
- WordPressカスタマイズ
- WordPress表示速度の改善
- WordPressバックアップ
興味がある方は、ぜひココナラを活用してみてください。
Step0：使用していない JavaScriptの削除方法を知ろう
本記事では、プラグインを導入する方法をおすすめしていますが、「使用していない JavaScriptの削除」を解決する方法は他にもあります。
- ソースコードを触る
- プラグインを導入する
削除方法：ソースコードを触る
「使用していない JavaScriptの削除」する方法１つ目はソースコードを触ることです。
具体的には下記のようなコードを追加していきます。
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の削除」を解決したい方は、次の章で紹介しているStep１を行い、その後は「プラグイン名」でググりながら削除してみてください。
削除方法：プラグインを導入する→これがおすすめ
「使用していない JavaScriptの削除」する方法２つ目はプラグインの導入です。
冒頭でも触れましたが、こちらが一番おすすめの方法です。
なぜなら、プログラミング未経験者でも簡単に実装できるからです。
残り2割：プラグインの使用が嫌いなクライアント様に関しては、ソースコードをいじって解決しています。
今回使用するプラグインは「Flying Scripts by WP Speed Matters」です。
色々使ってきた中で最も信頼できるプラグインです。それでは、早速使い方について学んでいきましょう。
Step1：使用していない JavaScriptを洗い出そう
「使用していない JavaScriptの削除」Step1では、問題点を洗い出していきます。
まずは、PageSpeed Insightへいき、スコアを計測してみてください。
使用していない JavaScriptの削除という項目が表示されると思いますので、そちらをクリックし詳しい内容を把握しましょう。
ここに表示されているJavaScriptがスコア悪化の要因です。
こちらの問題点を解決することができれば、スコアは良くなります。
注意点：削除してはいけないJavaScriptもある
Googleのスコアで表示される問題点は使用していないファイルではなく、ファイル内で使用していない関数なども含まれています。
わかりやすく解説
JavaScirptファイルXは通常、A機能、B機能、C機能などを搭載しています。
仮に、あなたがA機能のみを使用している場合でも、GoogleスコアはB機能&C機能を使用していないからJavaScriptファイルXを削除しろと警告します。
この警告を鵜呑みしてしまい、ファイルXを削除してしまうと、A機能が動作しなくなりサイト表示が崩れる可能性があります。
具体例：私に限っていうと、上記のJavaScriptコードは削除してはいけません。
なぜなら、JavaScriptファイルの一部をサイトに使用しているから。
９割方の使用していない 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」プラグインに行き、設定を行っていきましょう。
貼り付ける際の注意点を紹介していきます。
私の場合：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....になります。
追加する際は１つ１つ行いましょう。
先ほど触れましたが、JavaScriptファイルを削除していると、サイトの挙動がおかしくなることがあります。
そのような挙動を避けるためにも、１つ追加して、保存する→サイトを確認する→問題がなければ、１つ追加する
上記のような流れで行うようにしましょう。
スピードを確認しよう
本記事を参考に、使用していない JavaScriptの削除した方はスピード表示が変わっているはずです。
ぜひ、PageSpeed Insightで確認してみてください。
Step3：使用していない JavaScriptの削除以外の選択肢
使用していない JavaScriptの削除してスピードが上がった方は下記の項目も行ってみてください。
WordPress表示速度改善したい方向け
サーバーを見直すだけで簡単にWordPressの表示速度は改善できます。
- 費用面を考慮すると『ロリポップ！
』の一択です - 高速化を考えると『ConoHa WING
』の一択です
- 当サイトは『エックスサーバー
』をおすすめしています
』の一択です
』の一択です
』をおすすめしています当サイトでは、Conohaを導入しています。
実は、WordPress表示速度に最も影響を与えているのが、画像です。次に「使用していない JavaScriptを削除」です。
画像対策する際は、画像圧縮と次世代フォーマットに変換の2つが必要です。
こちらのプラグインを導入するだけ、かなりスピードをあげることができます。
本記事では、「使用していない JavaScriptの削除」を行いました。本記事の内容に加えて、使用しているJavaScriptファイルを最適化することです。
ソースコード最適化にはAutoptimizeの一択です。
全体的に学びたい方は、下記の記事を参考にしてみてください。
まとめ：使用していない JavaScriptの削除はプラグインで行おう
ここまでで「使用していない JavaScriptの削除プラグインで改善する方法」の解説は以上です。
