
ブログのページを高速化したいけど、どこを削ったらよいかわからない💦
とりあえず、「使用していないJavaScriptの削減」について、よくわからなかったことを、よくわからなかったなりにメモしておきます。
PageSpeed Insightsの使用していないJavaScriptの削減
PageSpeed Insightsをみると、「改善できる項目」に「使用していないJavaScriptの削減」があります。

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

「ツリーマップを見る」をクリックすると、Lighthouse Treemapの分析結果が表示されます。
「使用していないバイト」が、かなり大きな比重になっています。


これって、ライブラリを利用しているから、どうしても使用していない領域が出てくるだよね……
同じスクリプトを重複して読み込んでいる
同じ参照元が重複して出てきているのも気になります。

これは、まとめた方がいいのかな?
なんとなく気にはなりますが、数百KiBのデータがそんなに影響するのでしょうか?
ほかのブログのツリーマップを見てみても、けっこう重複しています。
今のところ、放置しておこうと思います。
PageSpeed Insightsの評価は、よくわかりません。

どうやって、活用したらいいんだろうね。
WordPressで読み込まれているスクリプト・スタイル
WordPressで読み込まれているスクリプト・スタイルを調べるには、functions.phpでショートコードを追加します1。
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
- wpa-print-style
- wp-block-library
- global-styles
- cocoon-style
- cocoon-keyframes
- font-awesome-style
- icomoon-style
- code-highlight-style
- baguettebox-style
- cocoon-child-style
- cocoon-child-keyframes
- qtipstyles
- easyfootnotescss
- dashicons
- List scripts
- jquery-core
- jquery-migrate
- js-cookie
- js-iframe-tracker
- aicp
- code-highlight-js
- baguettebox-js
- comment-reply
- cocoon-js
- cocoon-child-js
- wpcf7-recaptcha
- google_gtagjs
- jetpack-stats
- imagesloaded
- qtip
- qtipcall
こちらもどうぞ

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】
cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。 なんか見た目にカラフルでいいですよね。 cocoonでコードがハイライトしない ところが何故かうまく表示さ...

LiteSpeed Cacheプラグインをオン・オフで比較してみた
LiteSpeed Cache(v3.6.4)プラグインの「キャッシュ機能」のオン・オフでどれぐらい違うのか、比較してみました(2021年3月23日現在)。 もしかして、誤差の範囲……? もう少し詳しく比較してみましょう。 比較 無効のとき...
(補足)
- ページのJavaScriptとCSSを確認する関数 – 【WordPress】使用していない JavaScript の削除
QRコードを読み込むと、関連記事を確認できます。
![使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights]](https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=https://chiilabo.com/2021-10/page-speed-insights-javascript-treemap/)