ブログの表示高速化方法の一つとして、CSS minifyがあります。スタイルシートに含まれる余分な空白やコメント等を取り除きます。CSS 編集時は、空白やコメントがあると見やすいのですが、本番環境ではファイルサイズが小さいほうが表示が速くなります。

スタイルシートの圧縮は、Minify CSSというサイト等で行うことができます。ツールにもよりますが、30%-50%程度圧縮できるようです。

WordPressで圧縮したCSSを使うには、単純にファイルをテーマフォルダ等におけばOKです。それだけでなく、.dev.cssというファイルを同梱しておきましょう。例えば、style.cssとstyle.dev.cssというように。

なぜかというと、WordPressは通常は圧縮されたファイルを読みにいきます。しかし、wp-config.phpで、define( ' SCRIPT_DEBUG', true )と指定したとき、.dev.js、.dev.cssという圧縮されていないファイルを読みに行きます。

WordPress本体の挙動に合わせるため、テーマのfunctions.phpに下記コードを追加しましょう。

add_filter( 'stylesheet_uri', 'devpress_debug_stylesheet', 10, 2 );

function devpress_debug_stylesheet( $stylesheet_uri, $stylesheet_dir_uri ) {

	if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
		$stylesheet = str_replace( trailingslashit( $stylesheet_dir_uri ), '', $stylesheet_uri );
		$stylesheet = str_replace( '.css', '.dev.css', $stylesheet );

		if ( file_exists( trailingslashit( STYLESHEETPATH ) . $stylesheet ) )
			$stylesheet_uri = trailingslashit( $stylesheet_dir_uri ) . $stylesheet;
	}

	return $stylesheet_uri;
}

コードはDevelopment stylesheets for theme developers より転載しています。もちろん当ブログで使用しているテーマもこの記述がなされています。