WordPressのCSSを自動でインライン化・軽量化（Minify）して読み込ませる

ウェブサイトにおいて表示速度は非常に重要です。表示速度が遅いと、ユーザーが途中で離脱する可能性が高まるだけでなく、SEO にも悪影響を及ぼします。

ページの表示速度を向上させる方法はいくつかありますが、その一つとして、CSS をインライン化したり軽量化する手法があります。

今回は WordPress の CSS を自動でインライン化・軽量化（Minify）して読み込ませる方法について解説します。

使用バージョン：WordPress 6.7.2

CSSの インライン化、軽量化（Minify）とは

多くの場合、CSS は外部ファイルに記述されており、HTML ではその CSS ファイルを読み込む形でスタイルを適用させています。

インライン化も軽量化もされていない HTML と CSS

HTML

<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- HTML のコンテンツが入るところ -->
</body>
</html>

style.css

@charset "utf-8";

body {
  font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #222;
  line-height: 1.8;
  background: #eee;
}

これを、外部ファイルではなく HTML に直接スタイルを記述するのをインライン化、CSS のスペースや改行を可能な限り削除することを軽量化といいます。

インライン化・軽量化された HTML と CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>body{font-family:"ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;color:#222;line-height:1.8;background:#eee}</style>
</head>
<body>
<!-- HTML のコンテンツが入るところ -->
</body>
</html>

今回紹介する方法では、このように<link>タグによる CSS ファイルの読み込みを、<style>タグによるインラインの記述に置換します。

WordPress の CSS をインライン化・軽量化して読み込ませる方法

WordPress の CSS を自動でインライン化・軽量化して読み込ませるには、functions.phpに以下のように記述します。

// CSS をインライン化＆軽量化
add_filter( 'style_loader_tag', function($tag, $handle, $src) {
  // 管理画面以外かつ同一ホストの場合
  if(!is_admin() && strstr($src, $_SERVER['HTTP_HOST'])) {
    $file_path = mb_strstr(str_replace(home_url() . '/', ABSPATH, $src), '?', true);
    $file_dir = substr($src, 0, mb_strripos($src, '/') + 1);
    $css_contents = file_get_contents($file_path, true);

    // Minify
    $css_contents = preg_replace('/@charset \"(utf|UTF)-8\";/', '', $css_contents);
    $css_contents = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css_contents);
    $css_contents = preg_replace('/\s*([{}|:;,])\s+/', '$1', $css_contents);
    $css_contents = str_replace(array("\r\n", "\r", "\n", "\t"), '',$css_contents);

    // url() 内のパスを置換
    $css_contents = preg_replace('/url\([\'"]?(?!https?:|\/)([^\'"\)]+)[\'"]?\)/', 'url(\'' . $file_dir . '$1\')', $css_contents);

    // <style> タグを置換
    $tag = '<style id="' . $handle . '">' . $css_contents . '</style>' . "\n";
  }

  return $tag;
}, 10, 3);

注意点として、このコードはwp_enqueue_style()を使用して読み込んでいる CSS ファイルに対してのみ有効です。また、外部サーバの読み込み速度による影響を考慮して、同一ドメイン上のファイルのみ処理を行うようになっています。

終わりに

CSS をインライン化・軽量化することで、ファイルのダウンロードや適用を待たずに、スタイル付きのコンテンツをすぐに表示できます。「一瞬だけ CSS が適用されていない状態が表示される」といった現象が発生する場合には、今回紹介した方法が有効的です。

また、PageSpeed Insights の「レンダリングを妨げるリソースの除外」や「CSS の最小化」などの改善提案が表示されている場合にも、試してみる価値があります。

ただし、file_get_contents() を使用するとメモリ消費が増加するため、サーバーのスペックによっては逆効果になる可能性もあります。そのような場合は、HTML のキャッシュを併用することを検討するとよいでしょう。