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

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。

1. 不要なスタイル・スクリプトを見つける

前回は、不要なプラグインを無効化しました。
今回は不要なスタイル・スクリプトを削除していきます。

前回はこちら。

[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google）

ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。 PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。（「使用していないJavaScriptの削減」が 2.4 s ➤ 0.4 s に） プラグインの取捨選択は、サイト高速化にとってもオススメだね。 ページの読込みが遅い気がする【54】 モバイル端末でのトップページの読込みがやや遅い気がします。 （2023/0...

chiilabo.com

スタイル・スクリプトを一覧するショートコードは、過去に作ったことがあります。
このときは、結局 そのままで削除まで至りませんでした。

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

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

chiilabo.com

トップページのスタイルを一覧させてみると、13スタイル、12スクリプトがセットされていました。

そこから不要なスタイル・スクリプトを選別していきます。
結果、以下の4 スタイル・6 スクリプトを除外しました。

/** 不要なCSS・JSを解除する 2023-07-02
 * */
function dequeue_plugins_css_js(){
	//全体から除外
	wp_dequeue_style('jetpack_css');
	// フロントページから除外
	if ( is_front_page() ) {
		wp_dequeue_style('code-highlight-style');
		wp_dequeue_style('baguettebox-style');
		wp_dequeue_script('baguettebox-js');
		wp_dequeue_script('aicp'); // ad invalid click protector
		wp_dequeue_script('twitter-script');
		wp_dequeue_script('code-highlight-js');
		wp_dequeue_script('comment-reply');
	}
	//お問合せページ以外から除外
	if ( !is_page('inquiry') ) {
		wp_dequeue_style('contact-form-7');
		wp_dequeue_script('contact-form-7');
	}
}
add_action('wp_print_styles', 'dequeue_plugins_css_js');

トップページには、

• ソースコードがない（code-highlight）し、
• コメント投稿もない（comment-reply）し、
• 広告もない（ad invalid click protector）し、
• 画像拡大もない（baguettebox）

ので、それらのスクリプト・スタイルは不要です。

2. 結果は変化なし

ところが、結果を見ると大きな変化がありません。

すでにプラグインを限定しているため、あんまり大勢には影響していないようでした。

逆に増えているようにも見えるけど…

まぁ、これは測定誤差かな。

減らした後の JavaScriptの中身ですが、変化がありません。

cse_element_ja.jsとasync-ads.jsは相変わらずのこっています。

● cse_element_ja.jsとasync-ads.js の続きはこちら。

「カスタム検索（サイト内検索）」スクリプトを除外した（cse.google.com/cse.js）

カスタム検索のスクリプト（cse.google.com/cse.js）が重そうです。 asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。 結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリンクを設置することにしました。 遅延読込みのdeferとasync まずは、スクリプトの読込みを遅延させることを考えました。 <div class="gcse-searchbox-only"></div> <script defer src=...

chiilabo.com

また、「使用していない CSSの削減」も変化なしでした。

jetpack.cssも消えていないのです。

● jetpack.cssの続きはこちら。

[PHP] jetpack.cssを無効化する

Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。 /wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0 これを無効にします。 /** Jetpackを有効にした際に読み込まれるCSSを無効化*/ add_filter( 'jetpack_implode_frontend_css', '__return_false' ); こちらもどうぞ。

chiilabo.com

こちらもどうぞ。

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

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

chiilabo.com

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