サイトで利用されているJavaScriptを調べる2つの方法

2023年8月14日2023年8月16日

最近、サイトの快適性を計るPageSpeed Insightsのモバイルの結果が悪く、試行錯誤しています。

PageSpeed Insightsのスコアが悪い原因の一つに、不要なJavaScriptと言うのがあります。

上図のPageSpeed Insightsの結果を見ると、使用していないJavaScriptによってモバイルの表示速度が3秒以上遅くなっているようです。

そこで、不要なJavaScriptを削除したいのですが、その前にサイトにどのようなJavaScriptが使われているのかを調べてみます。

使われているJavaScript

サイトに利用されているJavaScriptを調べるには2つの方法があります。

ChromeのDev Toolを使う。
Functions.phpを編集する。

以上です。

それぞれ一長一短ありますが、２つとも試してみるとより確実に目的を達成できると思います。

デベロッパーツールで調べる

ブラウザにChromeを使っている場合、Dev Tool（デベロッパーツール）で調べることができます。

まずは調べたいサイトを表示して、F12キーを押してください。

デベロッパーツールが開いたら、

上段のメニューから「ネットワーク」をクリック、
中段のメニューから「JS」をクリック、
この場所にscriptの一覧が表示されます。

もし一覧が表示されない場合は、キーボードのCtrl＋Rを押してくださいね。

Functions.phpを編集する

テーマのfunctions.phpファイルを編集して、ページに使われているJavaScriptを調べることもできます。

とりあえずすべてのJavaScriptを調べるにはこちらの方が便利です。

この方法は、DEVELOPMENTさんのサイトを参考にしました。

DEVELOPMENT

【WordPress】使用していない JavaScript の削除 PageSpeed Insightsに出る改善項目のJavaScriptやCSSの削除について、調べ方と実際に無効にする方法の関数解説を行います。

まずは以下の関数をfunctions.phpにコピペします。

function dc_css_js_dsp() {
  $wp_styles = wp_styles();
  $wp_scripts = wp_scripts();
  $handlename = '<dl><dt>List styles</dt><dd><ul>';
  foreach( $wp_styles->queue as $handle ) :
    $handlename .=  '<li>' . $handle .'</li>';
  endforeach;
  $handlename .= '</ul></dd>';
  $handlename .= '<dt>List scripts</dt><dd><ul>';
  foreach( $wp_scripts->queue as $handle ) :
    $handlename .=  '<li>' . $handle .'</li>';
  endforeach;
  $handlename .= '</ul></dd></dl>';
  return $handlename;
}
add_shortcode( 'dc_dsp', 'dc_css_js_dsp');

functions.phpファイルは、wordpressのダッシュボード⇒外観⇒テーマファイルエディタと辿り、編集するテーマに「子テーマ」を選択すると、その中のTheme Functionsにあります。