WordPressが返すHTMLを少し軽くする方法

WordPressを使ったサイトが返すHTMLを少し軽くする方法を紹介します。また、その過程で、アクションフックを使って、WordPressを使ったサイトが返すHTMLに変化を加える方法を紹介します。

WordPressが返すHTMLに変化を加える

wp_loadedに対してアクションを設定すると、WordPressが返すHTML全体に手を加えることができます。例えば、HTMLの最後に<!-- WP_LOADED_SAMPLE_FOOTER -->と加えたい場合は、functions.phpに以下のコードを加えます。

function wp_loaded_sample() {
    ob_start('add_footer_comments');
}

function add_footer_comments($html){
    // レスポンスのHTMLの最後に、コメントを追加しています。
    $html = $html .= '<!-- WP_LOADED_SAMPLE_FOOTER -->';
    return $html;
}
add_action('wp_loaded', 'wp_loaded_sample', 99);

この、add_actionob_startを組み合わせる方法は、Plugin API/Action Reference/wp loadedを参考にさせて頂きました。

HTMLのサイズを少し減らすコード

HTMLのサイズを少し減らすコードを紹介します。

なお、あくまでも簡易的なもので、コメントの除去などのサイズ軽量化は施していません。

$html = preg_replace('/>s+</', '><', $html);
return $html;

上記コードを使うと、

<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>
      テスト1
    </p>
    <pre>
      テスト1
      テスト2
      テスト3
    </pre>
  </body>
</html>

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" /></head><body><p>
      テスト1
    </p><pre>
      テスト1
      テスト2
      テスト3
    </pre></body></html>

のように、タグとタグの間にあるスペースが除去されます。

長さをはかってみると213から184に変わっていたので、少しだけ下がっていました!

サイズ計測に使ったコード

<?php
function minify_html($html) {
    $html = preg_replace('/>s+</', '><', $html);
    return $html;
}

$html =<<< EOF
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>
      テスト1
    </p>
    <pre>
      テスト1
      テスト2
      テスト3
    </pre>
  </body>
</html>
EOF;
echo 'before: ' . strlen($html) . "\n";
$minified_html = minify_html($html);
// echo $minified_html . "n";
echo 'after: ' . strlen($minified_html) . "\n";

WordPressのレスポンスを少し軽くする

WordPressが返すHTMLに変化を加えると、HTMLのサイズを少し減らすコードを組み合わせると、以下のコードになります。

function my_minify_html_action(){
    ob_start('my_minify_html');
}

function my_minify_html($html) {
    $html = preg_replace('/>s+</', '><', $html);
    return $html;
}
add_action('wp_loaded', 'my_minify_html_action', 99);

これをfunctions.phpに追加してあげれば、WordPressが返すHTMLを少し軽くすることができます。

注意点

プラグインとの相性

注意点としては、他のプラグインとの相性という問題があります。わたしが確認できているのは、Crayon Syntax Highlighterとの相性の悪さです。

Crayon Syntax Highlighterとの相性

「Crayon Syntax Highlighter」と一緒に使ったときに、ソースコードの式の途中にあるスペースが消えるという現象が起こりました。このようなことがあるので、この記事で紹介したコードを使う場合は、プラグインとの相性にはくれぐれもご注意ください。

スペース除去前

スペース除去前

スペース除去後

スペース除去後

相性が悪い原因

Crayon Syntax Highlighterを使うと、

$foo = 'FOO';

<div class="crayon-line" id="crayon-5578f7af0b82b262627577-1">
<span class="crayon-sy">$</span>
<span class="crayon-v">foo</span>
<span class="crayon-h"> </span>
<span class="crayon-o">=</span>
<span class="crayon-h"> </span>
<span class="crayon-s">'FOO'</span>
<span class="crayon-sy">;</span>
</div>

のように変換されていました。

この記事のスペース除去用コード

$html = preg_replace('/>s+</', '><', $html);
return $html;

だと、

<span class="crayon-h"> </span>

<span class="crayon-h"></span>

と変換されてしまい、表示が崩れてしまいます。

解決方法例

例えば、スペース除去の処理を以下のように変更すれば解決可能です。

// $html = preg_replace('/>s+</', '><', $html);
$html = preg_replace('/>s+(<[^/])/', '>1', $html);
return $html;

また、スタイルシートでの対応や、特定のスペースを&nbsp;に置き換えるなどしても回避できると考えられます。

この記事が役に立った場合、シェアしていただけると励みになります!!