Top

WordPress の HTML をプラグイン無しで圧縮する方法

HTML や CSS、JavaScript の圧縮は、ページ表示スピードを高速化させる上で必要な作業です。

ただし、ソースコードの改行消したりの圧縮は体感できるほどの高速化はしません。gzip でファイルごと圧縮したりするほうがよっぽど重要な圧縮となります。気になる方向け、ちょっとでも WordPress のページサイズを軽くしたい方向けの方法をプラグイン無しで実行してみようと思います。

HTML圧縮サムネイル

今から紹介する方法は WordPress のテーマファイルを直接編集する方法となるため、更新があるようなテーマなどでは使わないほうが無難です。

そのような場合は HTML ソースを圧縮出来る WordPress 用のプラグインがいくつかあるようなので、どうしても圧縮したいのであればそれを使ってください。functions.php を利用して実施コードを書ければ一番良いのですが、方法が思いつかなかったため直接 header.php や single.php を編集していきます。

また、かなり雑に圧縮するため、このブログの HTML だから出来た、という点がかなりあります。通常のブログのテーマだと表示が崩れる可能性が大きいです。注意してください。

HTML の圧縮コード

single.php、index.php 等

<!-- PHPファイルの一番上に記述 -->
<?php
    ob_start();
?>
 
・・・
 
<!-- PHPファイルの一番下に記述 -->
<?php
    $compress = ob_get_clean();
    $compress = str_replace("\t", '', $compress);
    $compress = str_replace("\r", '', $compress);
    $compress = str_replace("\n", '', $compress);
    $compress = preg_replace('/<!--[\s\S]*?-->/', '', $compress);
    echo $compress;
?>

ソースを圧縮して表示したいファイル各々に記述をします。必ず一番上と一番下に書き加えます。基本的にファイルごとに書かなくてはいけませんので、注意してください。ただし、include で挿入したものもバッファに入るため、メインとなる PHP ファイル(index.php や single.php)の一番上、一番下に入れれば大丈夫です。

圧縮前

HTML圧縮前

圧縮後

HTML圧縮後

圧縮前は改行が多い状態ですが、圧縮後はびっちりと詰まった状態になっています。

スポンサーリンク

ob_start()、ob_get_clean()

出力のバッファリング機能を使います。バッファリングとは、バッファといわれる格納場所にデータを出力せずに一度格納する事です。出力せずに格納することで、コールバック関数などで操作してから出力することが出来るという訳です。

ob_start();
 
//ob_start() から ob_get_clean() までがバッファに格納される
 
$compress = ob_get_clean();

ob_get_claen() が「変数にバッファの内容を出力をせず代入。代入した後、バッファの内容を消去」というメソッドです。これで変数 $compress にソースコードが格納されたことになります。echo でこの変数を出力することでソースが表示されます。

参考:PHPの出力バッファリング機能 | バシャログ

改行文字、コメントの削除

str_replace() を使って改行文字を置換していきます。

特殊文字意味
\t水平タブ
\n改行
\r復帰

それぞれ表のような意味です。改行文字、復帰文字がありますが、簡単に言うとどちらも「改行」の意味です。改行の特殊文字は Windows、Mac とOS によって少し違うため差異を吸収するためどちらも消去します。

ソースの改行を消去するだけなので br タグは消去しません。半角スペースは消すことが出来ないため、ここまでの圧縮となります。

また、以下の正規表現で HTML コメントを除去します。「 <!-- コメント --> 」の形のコメントを取り除いてしまいます。

$compress = preg_replace('/<!--[\s\S]*?-->/', '', $compress);

注意事項

テーマファイルが以下の場合は、このコードでの圧縮は危険です。

インライン CSS がソース上に存在、かつ、その CSS が無圧縮
インライン JavaScript がソース上に存在して、かつ、その JavaScript コードが無圧縮
ソース上に 『 //<![CDATA[ 』『 //]]> 』が存在している
pre タグを使用している

上記の場合、改行等を消してしまうことで CSS や JavaScript コードが上手く効かなくなってしまう可能性があります。実際はコードの書き方によって改行を消しても大丈夫かどうかが決まるため、全てのインライン CSS、JavaScript で使用不可というわけではありません。

『 //<![CDATA[ 』『 //]]> 』 に関してはインラインで JavaScript コードを書く際使われることのある宣言ですが、改行が必要となるコードです。改行を消してしまうと不都合が出ます。ただし、HTML5 ではこの宣言は必要ない記述なので、宣言ごと消してしまっても良いかもしれません。

pre タグはソースの改行やスペースをそのまま表示するタグですが、pre タグ内の改行も完全に消去してしまうため pre タグを利用している場合は厳しいです。

また、以下の場合も注意が必要です。

別のプラグイン等でバッファリングを利用している。

バッファリングの入れ子自体は可能なので、プラグイン自体がバッファの中身を消去してくれていれば問題はないのですが、場合によっては使えないかもしれません。

まとめ

全体をバッファリングして、改行文字を置換、出力という方法をとっています。条件分岐も全然行っていないため、表示が崩れたりする可能性もありますので、使用する場合はローカル等でチェックをしてからにしてください。

改行などは消したところで数十バイトの削減にしかなりませんので、わざわざする実行する必要は正直ありません。ただ、ソースコードが汚くなりがちな場合などは、それを隠す意味でも利用が可能です。

また、「pre タグを使用している」等、利用するのに敷居が高すぎるため利用できるようにコードの修正をしていこうと思います。