使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights]

ブログのページを高速化したいけど、どこを削ったらよいかわからない💦

とりあえず、「使用していないJavaScriptの削減」について、よくわからなかったことを、よくわからなかったなりにメモしておきます。

◆ タップできる目次 ◆

PageSpeed Insightsの使用していないJavaScriptの削減
同じスクリプトを重複して読み込んでいる
WordPressで読み込まれているスクリプト・スタイル

PageSpeed Insightsの使用していないJavaScriptの削減

PageSpeed Insightsをみると、「改善できる項目」に「使用していないJavaScriptの削減」があります。

項目の詳細をみると、Google AdsenseやGoogle Custom Search、Google Tag Managerのスクリプトが表示されています。

「ツリーマップを見る」をクリックすると、Lighthouse Treemapの分析結果が表示されます。

「使用していないバイト」が、かなり大きな比重になっています。

これって、ライブラリを利用しているから、どうしても使用していない領域が出てくるだよね……

目次に戻る

同じスクリプトを重複して読み込んでいる

同じ参照元が重複して出てきているのも気になります。

https://cse.google.com/adsense/search/async-ads.js（297.6 KiB）
https://www.google-analytics.com/analytics.js（97.5 KiB）

これは、まとめた方がいいのかな？

なんとなく気にはなりますが、数百KiBのデータがそんなに影響するのでしょうか？
ほかのブログのツリーマップを見てみても、けっこう重複しています。

今のところ、放置しておこうと思います。

PageSpeed Insightsの評価は、よくわかりません。

どうやって、活用したらいいんだろうね。

目次に戻る

WordPressで読み込まれているスクリプト・スタイル

WordPressで読み込まれているスクリプト・スタイルを調べるには、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');

実行結果はこちら。

List styles