WordPressで作ったWebサイトの表示を高速化させるために「不要なCSSやJavaScriptを読み込まないように設定する」なんてことはよく聞きますね。

今回は、WordPressプラグイン「Jetpack」に焦点をあてて見てみました。

読み込まれるCSSとJavaScript

Jetpackを有効にすると、下のようなCSSやJavaScriptがデフォルトで読み込まれます。

CSS

<link rel='stylesheet' id='jetpack_css-css' href='https://www.imamura.biz/blog/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0' type='text/css' media='all' />

JavaScript

<script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201547'></script>

というわけで、ここまでが前提です。以下からは本題の「これらの読み込みを無効化（削除）しよう」という話です。興味がありましたらご参考ください。

Jetpackを有効にした際に読み込まれるCSSとJavaScriptを無効化（削除）する方法

それではさっそく～。まずはCSSからやります。ご使用のテーマフォルダ内にある「functions.php」の最後尾などに以下のコードを追記します。

デフォルトで読み込まれるCSSを無効化（削除）

add_filter( 'jetpack_implode_frontend_css', '__return_false' );

上記のコードは、フォーラム「[resolved] Remove concatenated css and only use sharedaddy css? (3 posts)」でJetpackプラグイン開発者の方の一人が書かれていたものです。

これで「jetpack.css」は読み込まれなくなります。

次はJavaScriptをやります。

デフォルトで読み込まれるJavaScriptを無効化（削除）

add_action( 'wp_enqueue_scripts', 'dequeue_devicepx', 20 );
function dequeue_devicepx() {
wp_dequeue_script( 'devicepx' );
}

上記のコードはフォーラム「[resolved] Disable js and css from jetpack – how to? (2 posts)」から。これで「devicepx-jetpack.js」は読み込まれなくなります。

まとめ

以上でデフォルトで読み込まれるCSSとJavaScriptは無効化（削除）できました。1点注意ですが、今後Jetpackのバージョンなどによって仕様が変更されて、上記の対応方法が変わるかもしれません。

もう少し作業が必要かも

「これでひとまずはOK！」といきたいところなんですが、デフォルトで読み込まれるCSSを無効化（削除）した状態でも、特定のモジュールを有効化していると読み込まれるCSSがあります。

例えば・・・関連投稿のモジュールを有効化した状態で投稿ページを見ると、下のCSSが読み込まれます。

関連投稿のモジュールを有効にすると読み込まれるCSS

<link rel='stylesheet' id='jetpack_related-posts-css' href='https://www.imamura.biz/blog/wp-content/plugins/jetpack/modules/related-posts/related-posts.css?ver=20150408' type='text/css' media='all' />

このようにモジュールごとに読み込まれるCSSも、必要に応じて無効化（削除）したいこともあるはずです。

その件については以下のページに書きましたので、ご参考ください。