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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 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

• wp-block-library
• global-styles
• cookie-notice-front
• wpa-print-style
• cocoon-style
• cocoon-keyframes
• font-awesome-style
• icomoon-style
• code-highlight-style
• cocoon-child-style
• cocoon-child-keyframes
• qtipstyles
• easyfootnotescss
• dashicons

List scripts

• jquery-core
• jquery-migrate
• cookie-notice-front
• js-cookie
• js-iframe-tracker
• aicp
• non-admin-script
• code-highlight-js
• stickyfill-js
• comment-reply
• cocoon-js
• cocoon-child-js
• wpcf7-recaptcha
• google_gtagjs
• imagesloaded
• qtip
• qtipcall

続きはこちらから。

[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script）

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45sスクリプトサイズ0.77MB0.69MB不要なスタイル・スクリプトを見つける前回は、不要なプラグインを無効化しました。今回は不要なスタイル・スクリプトを削除していきます。前回はこちら。スタイル・スクリプトを一覧するショートコードは、過去に作っ...

chiilabo.com

こちらもどうぞ

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。なんか見た目にカラフルでいいですよね。cocoonでコードがハイライトしないところが何故かうまく表示されません。まずは、表示されたコードブロックを見てみてください。このように、コードブロックがあるのにjavascriptの色分けがされていません。まずはHTMLを検証してクラスを確認する検証でHTMLを見てみると、ちゃんとjavascriptのクラ...

chiilabo.com

LiteSpeed Cacheプラグインをオン・オフで比較してみた

LiteSpeed Cache（v3.6.4）プラグインの「キャッシュ機能」のオン・オフでどれぐらい違うのか、比較してみました（2021年3月23日現在）。もしかして、誤差の範囲……？もう少し詳しく比較してみましょう。比較無効のときプラグインが無効のときも比べてみます。オフのときオンにした直後オンにして再分析比較結果 モバイルのラボデータ無効オフオン（直後）オン（2回目）First Contentful Paint（秒）2.32.12.12.1Speed Index（秒）5....

chiilabo.com

1. ページのJavaScriptとCSSを確認する関数 – 【WordPress】使用していない JavaScript の削除

QRコードを読み込むと、関連記事を確認できます。