外部CSSを圧縮してインラインに読み込む方法。WordPressサイトの高速化。

CSS圧縮

外部CSSファイルを圧縮して、なおかつインラインに読み込む方法をご紹介します。

まずはこのカスタマイズのメリットから。

CSSファイル圧縮＆インライン化のメリット

CSSをインライン化することでリソースの読み込み回数を削減できる

WordPressでは通常、親テーマのCSSファイルが読み込まれた後に、子テーマのCSSファイルが読み込まれます。
いずれも独立したファイルなので、本体のHTMLの読み込みの他に合計2回のネットワーク通信が余分に発生することになります。

CSSをインライン化することで、これらの通信を削減することができます。

コメントやインデント、改行などはサイト表示には不要

CSSファイルには、殆どの場合、コメントやインデント、それに改行などがそのままの形で含まれています。

これらの情報、サイトをカスタマイズするときには役立ちますが、サイト表示の高速化を目指すのであれば不要です。

サイト表示の際には自動で削除しちゃいましょう。

高速化の基本は、ネットワーク通信の回数を減らすこととデータ転送量を減らすことです。

そのため、CSSファイルから不要な改行やコメントを削除しつつ、HTML中にインライン表示することが望ましいと言えます。

AMPページではCSSのインライン表示が必須

もしAMPに対応してさらなる高速化を目指すのであれば、CSSをインライン表示させることが必須となります。

AMPに対応させて素早くページを表示させることで、滞在時間の上昇などが見込まれるので、ぜひともAMP対応も見越して、CSSをインライン化させておくことをおすすめします。

CSSファイル圧縮＆インライン化の具体的な手順

それでは、CSSファイルから不要な記述を削除して、それをインラインに表示する方法をご紹介します。

手順はつぎのとおりです。

親テーマでのCSSの読み込みを解除する。
子テーマでCSSを圧縮したうえで読み込む。
【応用編】キャッシュ機能を利用してさらなる高速化を目指す。

親テーマでのCSSの読み込みを解除する。

親テーマのfunctions.php内に「add_action( 'wp_enqueue_scripts', '○○○' );」という記述があると思います。

もしかすると2箇所あるかもしれません。その場合は、1つがJavascriptの読み込み用、もう1つがCSSの読み込み用です。
今回必要なのはCSS用の方です。

○○○の部分を書き換えて次のコードを子テーマのfunctions.phpに追記します。
これによって、親テーマでのCSSの読み込みを解除することができます。

add_filter('after_setup_theme', function () {
$target = array('wp_enqueue_scripts' => '○○○');
foreach ($target as $key => $value) {
remove_filter($key, $value);
}
});

子テーマでCSSを圧縮したうえで読み込む。

子テーマでCSSを読み込むために、次のコードを子テーマのfunctions.phpに追記します。

wp_headにフックさせることで、htmlのヘッダー部分にCSSを表示させます。

add_action('wp_head',function (){
//normalize.cssの読み込み（必要に応じて）
//$css = file_get_contents(get_template_directory() . "/css/normalize.css");
//親テーマのCSSの読み込み
$css .= file_get_contents(get_template_directory() . "/style.css");
//子テーマのCSSの読み込み
$css .= file_get_contents(get_stylesheet_directory() . "/style.css");
//行頭のタブ・空白を削除
$css = preg_replace('/^[\t\s]+/m', '', $css);
//改行を削除
$css = str_replace(PHP_EOL, '', $css);
//コメントを削除
$css = preg_replace('/\/\*.*?\*\//s', '', $css);

$css = '<style type="text/css" media="all">' . $css . '</style>';
echo $css;
});

キャッシュ機能を利用してさらなる高速化を目指す。

CSSをインラインで表示するにはこれだけでも十分なのですが、もう一手間加えるとページの表示をより高速化することができます。
というもの、このコードだけだと毎回ファイルを読み込んで正規表現で整形しているので、結構ムダが多いです。

そこでWordPressの関数であるtransientを利用して整形後のCSSのコードをデータベースにキャッシュさせます。

動作としてはこんな感じになります。

ログイン中はCSSの編集をすることもあると思うので、ログインしている場合はキャッシュを削除。
ログインしていなければそのまんまキャッシュを表示。

コードは次のとおりです。

add_action('wp_head',function(){
//transientの名前
$name = 'my_css';

//ログインしている場合
if ( is_user_logged_in() ){
//キャッシュデータを削除
delete_transient($name);
//ログインしていない場合
}else{
//キャッシュデータの取得に成功すれば表示して終了
if(false !== ($css = get_transient( $name ))){
echo $css;
return;
}
}

$css = '';
//normalize.cssの読み込み（必要に応じて）
//$css .= file_get_contents(get_template_directory() . "/css/normalize.css");
//親テーマのCSSの読み込み
$css .= file_get_contents(get_template_directory() . "/style.css");
//子テーマのCSSの読み込み
$css .= file_get_contents(get_stylesheet_directory() . "/style.css");

//行頭のタブ・空白を削除
$css = preg_replace('/^[\t\s]+/m', '', $css);
//改行を削除
$css = str_replace(PHP_EOL, '', $css);
//コメントを削除
$css = preg_replace('/\/\*.*?\*\//s', '', $css);

$css = PHP_EOL . '<style type="text/css" media="all">' . $css . '</style>' . PHP_EOL ;
echo $css;

//ログインしていない場合
if ( !is_user_logged_in() ){
//キャッシュデータを24時間保存
set_transient( $name, $css, DAY_IN_SECONDS );
}
return;
});

まとめ

サイト高速化のためには細かい改善の積み重ねが大切です。

今回ご紹介したコードもその改善策の一つです。

ぜひお試しください。