HTMLコードをMinify化(圧縮)してWordPressを高速化する方法

　WordPress[※]で作成したサイトやブログのHTML[※]コードをMinify[※](圧縮)し、表示速度を高速します。具体的には、削除しても表示に問題のない文字列やスペースを、正規表現[※]を使用して、置き換え・削除を行います。
　また、Minifyすることでソースコードの解読が難しくなりHTMLコードの盗用も防止できます。

目次

• HTMLMinify手順
  • ヘッダーコードの編集
  • フッターコードの編集
  • サイトの確認
• HTMLMinify解説
  • ヘッダー追記コード解説
  • フッター追記コード解説
  • 使用したPHP構文の解説
  • 使用した正規表現の解説
    • 正規表現
    • 修飾子
• まとめ

HTMLMinify手順

　WordPressにインストールした子テーマに「headerヘッダー.php」と「footerフッター.php」が存在しない場合は、親テーマから子テーマに「header.php」と「footer.php」をコピーしてください。存在する場合はコピーせずに次にお進みください。
(画像はCocoon[※]の親テーマから子テーマにコピーした場合)

ヘッダーコードの編集

　「header.php」をWordPressのテーマファイルエディタなどで開き、下記のPHP[※]コードを最上部に貼り付けてください。
(画像はCocoonの子テーマに張り付けた場合)

<?php
function html_minify($buffer) {
    $replace1 = array(
        '/\s+</' => '<',
        '/>\s+/' => '>',
        '/(\s){2,}/' => '\1',
        '/<!--\s?[^\[].*?[^\]]\s?-->/s' => ''
    );
    $pattern =<strong> </strong>'/<(?:pre|textarea)(?: [^>]+)?>(.+?)<\/(?:pre|textarea)>/is';
    if(preg_match_all($pattern, $buffer, $matches, PREG_SET_ORDER)) {
        foreach($matches as $match) {
            $key = preg_replace(array_keys($replace1), array_values($replace1), $match[1]);
            $replace2[$key] = str_replace("\n", '
', $match[1]);
        }
    }
    $buffer = preg_replace(array_keys($replace1), array_values($replace1), $buffer);
    if(!empty($replace2)) {
        $buffer = str_replace(array_keys($replace2), array_values($replace2), $buffer);
    }
    return $buffer;
}
ob_start("html_minify");
?>

フッターコードの編集

　「footer.php」をWordPressのテーマファイルエディタなどで開き、下記のPHPコードを最下部に貼り付けてください。
(画像はCocoonの子テーマに張り付けた場合)

<?php ob_end_flush();?>

サイトの確認

　テーマやプラグインなどの開発環境によっては、デザインが崩れるなどの不具合が生じる場合があります。不具合が生じた場合は、追記したコードを削除してください。サイトのデザイン、ソースコードを確認して問題なければ完了です。

HTMLMinify解説

　WordPressテーマの「header.php」と「footer.php」に追記したPHPコード解説していきます。

ヘッダー追記コード解説

<?php
function html_minify($buffer) {　← ユーザー定義関数「html_minify」、変数「$buffer」にバッファ内容を代入

$replace1 = array(　← 関数「preg_replace」で使用する置換え用文字列を変数「$replace1」のキーと値に代入する
    ‘/\s+</’ => ‘<‘,　← 配列キー：「/\s+</」、配列値：「<」
    ‘/>\s+/’ => ‘>’,　← 配列キー：「/>\s+/」、配列値：「>」
    ‘/(\s){2,}/’ => ‘\1’,　← 配列キー：「/(\s){2,}/」、配列値：「\1」
    ‘/<!–\s?[^\[].*?[^\]]\s?–>/s’ => ”　← 配列キー：「/<!–\s?[^\[].*?[^\]]\s?–>/s」、配列値：「」
);

$pattern = ‘/<(?:pre|textarea)(?: [^>]+)?>(.+?)<\/(?:pre|textarea)>/is’;　← 関数「preg_match_all」のマッチング処理用パターンを変数「$pattern」に代入する
if(preg_match_all($pattern, $buffer, $matches, PREG_SET_ORDER)) {　← 関数「preg_match_all」でマッチした場合は下記の処理を実行する

    foreach($matches as $match) {　← 関数「preg_match_all」でマッチしたすべての文字列に下記の処理を順番実行する
        $key = preg_replace(array_keys($replace1), array_values($replace1), $match[1]);　← 関数「preg_match_all」でマッチした文字列を「$replace1」で設定した置換え処理を行ったものを変数「$key」に代入する
        $replace2[$key] = str_replace(“\n”, ‘&#xA;’, $match[1]);　← 関数「preg_match_all」でマッチした文字列の改行を文字参照の改行「&#xA;」に置換えたものを配列「$replace2」に代入する(キーには「$key」を指定)
    }
}

$buffer = preg_replace(array_keys($replace1), array_values($replace1), $buffer);　← 変数「$buffer」を「$replace1」で設定した置換え処理を行ったものを変数「$buffer」に代入する
if(!empty($replace2)) {　← 配列「$replace2」が空でなければ下記の処理を実行する
    $buffer = str_replace(array_keys($replace2), array_values($replace2), $buffer);　← 変数「$buffer」を「$replace2」で設定した置換え処理を行ったものを変数「$buffer」に代入する
}

return $buffer;　← 呼び出し元に変数「$buffer」の値を返す
}
ob_start(“html_minify”);　← 出力のバッファリングをオンにして、引数にユーザー定義関数「html_minify」を指定する
?>

フッター追記コード解説

<?php
ob_end_flush();　← 出力用バッファを送信し、出力のバッファリングをオフにする
?>

使用したPHP構文の解説

　今回、コード内で使用したWordPressやPHPの構文を簡単に説明します。詳細な説明は「PHP公式」から確認してください。

【ジャンプ】 ▼array　 ▼array_keys　 ▼array_values　 ▼foreach　 ▼function　 ▼if　 ▼ob_end_flush　 ▼ob_start　 ▼preg_match_all　 ▼preg_replace　 ▼str_replace　

使用した正規表現の解説

　今回、コード内で使用した正規表現と修飾子を簡単に説明します。(説明に出てくる「…」は任意の文字列や任意の正規表現を表しています)(装飾子の説明に出てくるデミリタは「/」で説明しています)

正規表現

【ジャンプ】 ▼\n　 ▼\s　 ▼.　 ▼*　 ▼*?　 ▼+　 ▼+?　 ▼?　 ▼…{…,…}　 ▼(…)　 ▼(?:…)　 ▼\1 \2 \3 …　 ▼[^…]　 ▼…|…　 ▼\　 ▼/…/i　 ▼/…/s　

修飾子

まとめ

　HTMLMinifyを適用すると、コードの容量が減りサイトの高速化が期待されますが、JS[※]やCSS[※]のMinifyに比べ、HTMLは効果が薄いといわれています。そのため、少しでも不具合が起こる場合は適用しないことをオススメします。
　ただし、サイトの高速化は小さなことの積み重ねが大事なので、不具合が起こらない場合や開発環境にあわせてコードを修正できる知識がある方は、高速化効果は0ではないので検討する価値はあると思います。