WordPressで読み込んでるCSSはテーマだけではなくブロックエディタ用や使用しているプラグイン用のCSS等、何ファイルか外部CSSとして読み込んでいます。

プラグインが多くなった等 で読み込む外部CSSがあまり多くなると、それだけページの表示が遅れる場合があります。その場合は外部CSSをインライン(ヘッダ内)に出力すると改善する場合があります。
※最近では 既にCSSをインライン(ヘッダ内)に出力するようにしているテーマもいくつか見うけられます。

ここでは外部CSSを全てminifyしてインライン(ヘッダ内)に出力するTipsを紹介します。

【公開ページ HTMLソース　インラインTips利用前】

※結構な数のCSSファイルを読んでます。

【公開ページ HTMLソース　インラインTips利用後】

※CSSファイルの読み込みタグが無くなり、CSSを直接インライン出力しています。

　

全てのCSSをインラインに出力する

以下のコードを my-plugin.php に張り付けてみてください。

/**
 * Create a list of queued CSS
 * License: GPLv2 or later
 **/
function nedebcom_style_queues() {

	global $wp_styles;
	global $wp_styles_array;

	$site_url = site_url( '/' );

	foreach ( $wp_styles->queue as $handle ) {

//	var_dump( $handle );

		$wp_styles_src = $wp_styles->registered[ $handle ]->src;

		//web-font Fix
		if( false === strpos( $wp_styles_src, $site_url ) && false === strpos( $wp_styles_src, '/wp-includes/' ) ){
			continue;
		}

		//admin-bar Fix
		if( false !== strpos( $handle, 'admin-bar' ) ){
			continue;
		}

		//IE CSS Fix
		if( false !== strpos( $handle, '-ie' ) ){
			//IE CSS読み込み キャンセル
			wp_dequeue_style( $handle );
			continue;
		}

		//外部CSS読み込み キャンセル
		wp_dequeue_style( $handle );


		//外部CSSリスト作成
		$wp_styles_uri = '';
		if( false !== strpos( $wp_styles_src, '/wp-includes/' ) ){
			$wp_styles_uri = str_replace( '/wp-includes/', ABSPATH. 'wp-includes/' , $wp_styles_src );
		}

		if( false !== strpos( $wp_styles_src, $site_url ) ){
			$wp_styles_uri = str_replace( $site_url, ABSPATH, $wp_styles_src );
		}

		if( $wp_styles_uri ){
			$wp_styles_array[] = array( 'uri' => $wp_styles_uri, 'queue' => $handle );
		}
	}
}
add_action( 'wp_print_styles', 'nedebcom_style_queues', 999 );

/**
 * Inline output of CSS
 *
 * @since 4.7.0
 * @param string $css        CSS pulled in from the Custom CSS CPT.
 * @param string $stylesheet The theme stylesheet name.
 **/
function nedebcom_wp_get_custom_css( $css ) {

	//外部CSSリスト
	global $wp_styles_array;

	$css_data = '';
	$site_url = site_url( '/' );

	//外部CSSリスト読み込み
	require_once( ABSPATH . 'wp-admin/includes/file.php' );
	if( is_array( $wp_styles_array ) ){
		if( WP_Filesystem() ){
			global $wp_filesystem;
			foreach( $wp_styles_array as $wp_style ){
				$css_tmp = $wp_filesystem->get_contents( $wp_style['uri'] );
				//CSS Simple minify.
				$css_tmp = nedebcom_css_simple_minify( $css_tmp, $wp_style['queue'] );
				$css_data .= "\n" . '/*' . $wp_style['queue']  . '*/' . $css_tmp;
			}
		}
	}

	//Add wp-custom-css Simple minify.
	$wp_custom_css = nedebcom_css_simple_minify( $css, 'wp_custom_css' );
	if( $wp_custom_css ){
		$css_data .=  "\n" . '/*wp-custom-css*/' . $wp_custom_css;
	}

	return $css_data;
}
add_filter( 'wp_get_custom_css', 'nedebcom_wp_get_custom_css' );


/**
 * CSS Simple minify
 * @param string $css.
 * License: GPLv2 or later
 **/
function nedebcom_css_simple_minify( $css, $css_name ) {

	$site_url = site_url( '/' );

	//CSS Simple minify.
	if( $css != '' ){
		// Delete character code
		$css = str_replace( '@charset "utf-8";', '', $css );
		$css = str_replace( '@charset"utf-8";', '', $css );

		// Delete comment.
		$css = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css );

		// Remove tabs and line breaks.
		$css = str_replace( array("\r\n", "\r", "\n", "\t" ), '', $css );

		// Remove spaces.
		$css = str_replace( array( '  ', '    ', '    '), '', $css );

		// Remove other spaces.
		$css = str_replace( ': ', ':', $css );
		$css = str_replace( ' :', ':', $css );
		$css = str_replace( ' }', '}', $css );
		$css = str_replace( '} ', '}', $css );

		//fudou-share-bottons css Fix
		if(  $css_name == 'svg-icons' ){
			$css = str_replace( '../fonts/icomoon.', $site_url . 'wp-content/plugins/fudou-share-bottons/fonts/icomoon.', $css );
		}

		//contact-form-7 補正
		if(  $css_name == 'contact-form-7' ){
			$css = str_replace( '../../images/ajax-loader.gif', $site_url . 'wp-content/plugins/contact-form-7/images/ajax-loader.gif', $css );
			$css = str_replace( '../../assets/ajax-loader.gif', $site_url . 'wp-content/plugins/contact-form-7/assets/ajax-loader.gif', $css );
		}

		//TwentyTwenty 補正
		$css = str_replace( './assets/fonts/inter', $site_url . 'wp-content/themes/twentytwenty/assets/fonts/inter', $css );

		//easy-fancybox 補正
		if(  $css_name == 'fancybox' ){
			$css = str_replace( '../images/fancybox.png', $site_url . 'wp-content/plugins/easy-fancybox/images/fancybox.png', $css );
			$css = str_replace( '../images/fancybox-x.png', $site_url . 'wp-content/plugins/easy-fancybox/images/fancybox-x.png', $css );
		}

		//dashicons 補正
		if(  $css_name == 'dashicons' ){
			$css = str_replace( '../fonts/dashicons', $site_url . 'wp-includes/fonts/dashicons', $css );
		}

		//fudou 補正
		$css = str_replace( '../../../plugins/fudou/img/', $site_url . 'wp-content/plugins/fudou/img/', $css );
	}
	return $css;
}

　
　

解説

①nedebcom_style_queues関数 で WordPress外部CSSリストを読み込んでリストから外すと共に nedebcom_wp_get_custom_css関数 に渡すCSSリストを作ります。

②インライン出力(nedebcom_wp_get_custom_css)関数では CSSリストからファイルを読み込み、nedebcom_css_simple_minify関数 で minify してからインライン(ヘッダ内)出力します。
インラインCSSの最後に カスタマイザーの「追加CSS」も minify して出力するようにしています。

例外なCSS

既に(※テーマが)インラインしていたり、インラインしたくないCSSがあるかもしれません。
その場合は 「var_dump( $handle );」で一時的にリストを表示させ、そのハンドル名を確認して nedebcom_style_queues関数 に追記してください。

例　ハンドル名「hogehoge」をインラインにしない。

if( false !== strpos( $handle, 'hogehoge' ) ){
	continue;
}

※サンプルコードでは 旧IE系Fix のCSS を外しています。
また、 旧IE系のCSSを残すと deps(依存関係) で style,css が外せなくなる場合もありましたのでIE系のCSSはいっその事、削除(wp_dequeue_style) しています。

CSS補正

CSSコードの内容によっては補正が必要な場合があります。
画像表示部分 や fontファイル読み込み 等で相対アドレス表記している場合が対象になります。

例えばテーマのCSSで「background-image: url(“../images/hoge.png”)」としている場合 urlが相対アドレスになってるので 表示しなくなります。
その場合は 以下のように nedebcom_css_simple_minify関数に補正コードを追加してください。

$css = str_replace( '../images/hoge.png', $site_url . 'wp-content/themes/hogehoge/images/hoge.png', $css );

ケースバイケース

あまりにも補正する項目が多い場合は、補正する工数の割には報われないかも知れませんので そのCSSを「例外なCSS」に入れて インライン出力するのをあきらめた方がいいかもしれません。

あまりにもファイルサイズが大きいCSSは、HTML自体のサイズが大きくなりますので返って遅くなるかもしれません。 その場合は「例外なCSS」に入れて インライン出力するのをあきらめた方がいいかもしれません。
　
　

参考　PageSpeed Insights

あくまで参考として・・体感的には変わりませんでしたが数値ではあがってるようです。

PageSpeed Insights　インラインTips利用前

【モバイル】

【PC】

PageSpeed Insights　インラインTips利用後

【モバイル】

【PC】

※XSERVER Xアクセラレータ:OFF　サーバーキャッシュ設定:OFF　ブラウザキャッシュ設定:OFF　で計測
　
　

参考

wp_get_custom_css | Hook | WordPress Developer Resources
https://developer.wordpress.org/reference/hooks/wp_get_custom_css/

wp_print_styles | Hook | WordPress Developer Resources
https://developer.wordpress.org/reference/hooks/wp_print_styles/

関数リファレンス/wp dequeue style – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_dequeue_style

ファイルシステムAPI – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0API

テーマカスタマイザーの「追加CSS」をminify(縮小化)する
https://nendeb.com/888