プラグインなしでHTMLとCSSを圧縮する方法（普通のPHPサイト編）
WordPressには「Autoptimize」という、HTMLやCSSを自動で小さくしてくれる便利なプラグインがあります。でも、WordPressを使っていない普通のPHP/HTMLサイトでは、プラグインを入れることができません。
そこでこの記事では、PHPのコードを少し書くだけで、HTMLとCSSを自動で圧縮する方法を紹介します。プログラミングが初めての人でも分かるように、1つずつていねいに説明していきます。
そもそも「圧縮」ってなに？
ホームページのHTMLやCSSは、人間が読みやすいように改行やスペース（空白）、メモ書き（コメント）がたくさん入っています。
たとえば、こんなCSSがあったとします。
/* 見出しの色 */
h1 {
color: #333;
font-size: 24px;
}これを圧縮すると、こうなります。
h1{color:#333;font-size:24px}見た目の結果はまったく同じです。ブラウザ（ChromeやSafariなど）は、改行やスペースがなくても正しく読めるからです。
旅行の荷物にたとえると、服をたたまずにカバンに入れるより、くるくる丸めて空気を抜いたほうが小さくなるのと同じイメージです。中身の服は変わりませんよね。
圧縮すると何がいいの？
| メリット | 説明 |
|---|---|
| ページの表示が速くなる | ファイルが小さくなるので、ダウンロードにかかる時間が短くなります |
| スマホにやさしい | 通信量が減るので、電波が弱い場所でも表示されやすくなります |
| SEOにプラス | Googleは表示が速いサイトを評価する傾向があります |
今回のやり方のポイント
今回の方法は、元のファイルはそのまま残して、ブラウザに送るときだけ圧縮するというやり方です。
元のファイルを直接圧縮してしまうと、1行にギュッと詰まってしまい、あとから自分で修正するのがとても大変になります。今回の方法なら、編集するときは読みやすいまま、見る人には圧縮された状態で届けられます。
準備するもの
| 必要なもの | 説明 |
|---|---|
| PHPが動くサーバー | ほとんどのレンタルサーバーで使えます |
| テキストエディタ | VS Codeなど。メモ帳は文字コードの問題が起きやすいのでおすすめしません |
| FTPソフト | FileZillaなど。ファイルをサーバーにアップロードするために使います |
| テスト用のサイト | いきなり本番サイトで試すと、失敗したときに困るので必ずテスト環境で試しましょう |
今回のファイル構成
この記事では、次のようなファイル構成のサイトを例にして説明します。
/index.php （トップページ）
/header.php （ページの上の部分）
/footer.php （ページの下の部分）
/style.css （デザインのファイル）
/script.js （動きのファイル）index.phpの中でheader.phpとfooter.phpを読み込んでいる、よくある形です。
パート1：HTMLを圧縮する
ステップ1：header.phpの一番上にコードを書く
header.phpを開いて、一番上（1行目）に次のコードを貼り付けます。
<?php
function minify_html($buffer) {
// コメント除去（IEの条件付きコメント <!--[if ... ]> は除外）
$buffer = preg_replace('/<!--(?!\[if).*?-->/s', '', $buffer);
// タグ前後の改行・余分な空白を除去
$buffer = preg_replace('/\>[^\S ]+/s', '>', $buffer);
$buffer = preg_replace('/[^\S ]+\</s', '<', $buffer);
// 連続する空白を1つに
$buffer = preg_replace('/(\s)+/s', '\\1', $buffer);
return trim($buffer);
}
ob_start('minify_html');
?>注意：「<?php」の前に空白や改行を入れないでください。1文字でも前に何かあると、うまく動かないことがあります。
このコードは何をしているの？
むずかしそうに見えますが、やっていることはシンプルです。
| コード | 意味 |
|---|---|
function minify_html($buffer) | 「minify_html」という名前の、圧縮するための道具（関数）を作ります。$bufferにはページのHTMLが丸ごと入ります |
preg_replace(...) | 「この形の文字を見つけたら、別の文字に置きかえる」という命令です。ここで不要な部分を消しています |
1つ目のpreg_replace | HTMLのコメント（<!-- -->で囲まれたメモ書き）を消します |
| 2つ目と3つ目 | タグとタグの間にある改行やタブを消します |
| 4つ目 | スペースが何個も続いているところを1個にまとめます |
return trim($buffer); | 最初と最後の余分な空白を消して、圧縮したHTMLを返します |
ob_start('minify_html'); | ここが一番大事です。「これから出力するHTMLを、すぐにブラウザに送らずにいったん貯めておいて、最後にminify_htmlで圧縮してから送ってね」という命令です |
ob_startの「ob」は「Output Buffering（出力バッファリング）」の略です。バッファは「一時的な入れ物」のこと。いったんバケツに水を貯めてから、ゴミをこしてまとめて流すイメージです。
ステップ2：footer.phpの一番下にコードを書く
次にfooter.phpを開いて、一番最後（</html>の後）に次の1行を追加します。
<?php ob_end_flush(); ?>これは「貯めておいたHTMLを、ここでまとめてブラウザに送ってね」という命令です。バケツの水を流す合図ですね。
ステップ3：アップロードして確認する
2つのファイルを保存して、FTPソフトでサーバーにアップロードします。
確認のしかたは次のとおりです。
| 確認すること | やり方 |
|---|---|
| 見た目が崩れていないか | ブラウザでサイトを開いて、いつもどおり表示されるか見ます |
| 圧縮されているか | ページの上で右クリックして「ページのソースを表示」を選びます（WindowsならCtrlキー＋Uキーでも開けます）。改行がなくなって、横に長くつながっていれば成功です |
| 動きが壊れていないか | スライダーやメニューなど、JavaScriptで動く部分がちゃんと動くか確認します |
パート2：CSSを圧縮する
CSSは、HTMLとは別のstyle.cssというファイルになっていることが多いですよね。そこで、「style.cssを読み込んで、圧縮して送り出す専用のPHPファイル」を作ります。
ステップ1：css.phpを新しく作る
エディタで新しいファイルを作り、次のコードを貼り付けてcss.phpという名前で保存します。
<?php
header('Content-Type: text/css');
function minify_css($css) {
// コメント除去
$css = preg_replace('!/\*.*?\*/!s', '', $css);
// 改行・タブ除去
$css = str_replace(["\r\n", "\r", "\n", "\t"], '', $css);
// 連続する空白を1つに
$css = preg_replace('/\s+/', ' ', $css);
// 記号の前後の不要な空白を除去
$css = preg_replace('/\s*([\{\}\:\;\,])\s*/', '$1', $css);
// 最後のセミコロンを除去
$css = str_replace(';}', '}', $css);
return trim($css);
}
$css = file_get_contents(__DIR__ . '/style.css');
echo minify_css($css);保存するときの文字コードは「UTF-8（BOMなし）」にしてください。BOM付きで保存すると、エラーが出る原因になります（あとで説明します）。
このコードは何をしているの？
| コード | 意味 |
|---|---|
header('Content-Type: text/css'); | 「このファイルは.phpだけど、中身はCSSだよ」とブラウザに伝えます。これがないとブラウザがCSSとして読んでくれません |
| コメント除去 | /* */で囲まれたメモ書きを消します |
| 改行・タブ除去 | 改行とタブを全部消します |
| 連続する空白を1つに | スペースが何個も並んでいるところを1個にします |
| 記号の前後の空白を除去 | { } : ; ,の前後にあるスペースを消します |
| 最後のセミコロンを除去 | ;}を}にします。最後の;はなくてもCSSは動くからです |
file_get_contents(__DIR__ . '/style.css') | 同じフォルダにあるstyle.cssの中身を読み込みます。__DIR__は「このPHPファイルが置いてあるフォルダ」という意味です |
echo minify_css($css); | 圧縮したCSSをブラウザに送ります |
ステップ2：css.phpをアップロードする場所
css.phpは、style.cssと同じフォルダ（同じ階層）にアップロードします。
コードの中で「同じフォルダにあるstyle.cssを読む」と書いているので、別の場所に置くとstyle.cssが見つからずに動きません。
/index.php
/header.php
/footer.php
/style.css （そのまま残す。編集はこちらで行う）
/css.php （新しく追加。style.cssと同じ場所）
/script.jsstyle.cssは消さずにそのままにしておいてください。今後デザインを変えるときは、これまでどおりstyle.cssを編集すればOKです。
ステップ3：css.phpが動くか確認する
アップロードしたら、ブラウザのアドレスバーに次のように入力してアクセスしてみます。
https://あなたのドメイン/css.php画面に1行にギュッと詰まったCSSが表示されれば成功です。エラーが出たり真っ白だったりする場合は、この記事の後半の「よくあるトラブル」を見てください。
ステップ4：CSSの読み込み先を変更する
header.phpの<head>の中に、たぶんこのような行があると思います。
<link rel="stylesheet" href="style.css">これを、次のように書き換えます。
<link rel="stylesheet" href="css.php?v=<?php echo filemtime(__DIR__ . '/style.css'); ?>">これで、ブラウザがCSSを読みに行くとき、css.phpがstyle.cssを読み込んで、圧縮してから渡してくれるようになります。
後ろについている?v=から先は、CSSを修正したときにすぐ反映させるための仕掛けです。くわしくは次の「パート3」で説明します。
ステップ5：表示を確認する
| 確認すること | やり方 |
|---|---|
| デザインが崩れていないか | サイトを開いて、いつもどおりの見た目か確認します |
| css.phpが読み込まれているか | F12キーで開発者ツールを開き、「Network（ネットワーク）」タブを選んでページを再読み込みします。一覧にcss.phpがあればOKです |
| 中身が圧縮されているか | Networkタブのcss.phpをクリックして「Response（レスポンス）」を見ます。1行に詰まっていれば成功です |
パート3：キャッシュ対策をする
キャッシュってなに？
ブラウザは、一度読み込んだCSSをパソコンの中に保存しておいて、次からはそれを使い回します。これを「キャッシュ」といいます。表示が速くなる便利な仕組みですが、困ったこともあります。
それは、style.cssを修正しても、ブラウザが古いCSSを使い続けてしまい、変更が反映されないことです。
解決方法：ファイル名の後ろに「?v=数字」をつける
パート2のステップ4で書いた、この部分がキャッシュ対策です。
<link rel="stylesheet" href="css.php?v=<?php echo filemtime(__DIR__ . '/style.css'); ?>">filemtimeは「ファイルを最後に更新した日時」を数字で取り出す命令です。すると、実際には次のように出力されます。
<link rel="stylesheet" href="css.php?v=1758000000">style.cssを修正して保存し直すと、この数字が変わります。ブラウザは「数字が変わったから別のファイルだ」と判断して、新しいCSSを読み込んでくれます。
ポイント：見るのはcss.phpではなく「style.css」の更新日時です。中身が変わるのはstyle.cssなので、こちらを見ないと意味がありません。
「__DIR__ .」はなくても動くの？
filemtime('style.css')のように短く書いても、すべてのファイルが同じフォルダにあればちゃんと動きます。
ただし、'style.css'だけだと「今動いているページ（index.phpなど）から見た場所」を探しに行きます。たとえば/blog/index.phpのような下の階層のページからheader.phpを読み込むと、/blog/style.cssを探してしまい、見つからずにエラーになります。
__DIR__ . '/style.css'と書くと「header.phpが置いてあるフォルダのstyle.css」を必ず探してくれるので、どの階層のページから読み込んでも安全です。
| 書き方 | 探しに行く場所 | 安全度 |
|---|---|---|
filemtime('style.css') | 今表示しているページと同じフォルダ | 全ファイルが同じフォルダならOK |
filemtime(__DIR__ . '/style.css') | header.phpと同じフォルダ | どこから読み込んでもOK（おすすめ） |
補足：どちらの書き方も、header.phpとstyle.cssが同じフォルダにある前提です。別のフォルダにある場合は、'/style.css'の部分をstyle.cssの場所に合わせて書き換えてください。
time()との違い
ネットで調べると、time()を使う方法もよく出てきます。違いをまとめるとこうなります。
| 書き方 | 数字が変わるタイミング | 向いている場面 |
|---|---|---|
time() | ページを開くたびに毎回変わる | 制作中・テスト中 |
filemtime() | style.cssを更新したときだけ変わる | 本番サイト（おすすめ） |
time()だと毎回CSSを読み直すので、せっかくのキャッシュが効かず、表示が遅くなってしまいます。本番サイトではfilemtime()を使いましょう。
パート4：テストサイトを検索エンジンに載せない設定
テスト用のサイトがGoogleの検索結果に出てしまうと、本番サイトと内容がかぶって困ることがあります。次の2つを組み合わせておくと安心です。
方法1：metaタグを追加する
header.phpの<head>の中に、次の1行を追加します。
<meta name="robots" content="noindex, nofollow">| 言葉 | 意味 |
|---|---|
| noindex | このページを検索結果に載せないで |
| nofollow | このページにあるリンクをたどらないで |
方法2：robots.txtを置く
robots.txtという名前のファイルを作り、次の2行を書いて、index.phpと同じ場所（サイトの一番上の階層）にアップロードします。
User-agent: *
Disallow: /「すべての検索ロボットは、このサイトのどのページにも入らないでね」という意味です。
重要：本番公開するときは、このmetaタグとrobots.txtを必ず削除してください。残したままだと、本番サイトが検索にまったく出てこなくなります。
よくあるトラブルと解決方法
| 症状 | 原因 | 解決方法 |
|---|---|---|
| ページが真っ白になった | コードの書き間違い（カッコや;の抜けなど） | コードをもう一度そのまま貼り付け直してください |
| デザインが全部消えた | css.phpの置き場所が違う | css.phpをstyle.cssと同じフォルダに置いてください |
| css.phpにアクセスするとエラーが出る | style.cssが見つからない | ファイル名が「style.css」で合っているか、同じフォルダにあるか確認してください |
| 「Cannot modify header information」というエラーが出る | css.phpの<?phpの前に空白や改行、BOMがある | <?phpを1行目の一番左に置き、文字コードを「UTF-8（BOMなし）」で保存し直してください |
| CSSを修正したのに反映されない | ブラウザのキャッシュ | パート3のキャッシュ対策をするか、Ctrlキー＋F5キーで強制的に再読み込みしてください |
| スライダーやメニューが動かなくなった | HTML内に直接書いたJavaScriptが圧縮で壊れた（下の注意点を参照） | JavaScriptを外部ファイル（script.js）に移してください |
使うときの注意点
注意1：HTMLの中に直接書いたJavaScriptの「//」コメント
HTML圧縮では改行を消すので、HTMLの中に<script>で直接書いたJavaScriptに//のコメントがあると、その後ろのコードまで全部コメント扱いになって動かなくなることがあります。
// メニューを開く
menu.classList.add('open');これが1行につながると、こうなってしまいます。
// メニューを開く menu.classList.add('open');対策は、JavaScriptをscript.jsなどの外部ファイルに分けるか、コメントを/* */の形で書くことです。
注意2：preタグとtextareaタグ
<pre>（整形済みテキスト）や<textarea>（入力欄）は、改行やスペースに意味があるタグです。HTML圧縮をすると、この中の改行やスペースも詰められてしまうので、使っているページでは表示を確認してください。
注意3：CSSのセレクタの書き方
CSS圧縮では:の前後のスペースを消すので、次のような書き方は意味が変わってしまいます。
| 圧縮前 | 圧縮後 |
|---|---|
.menu :hover（menuの中の要素にマウスを乗せたとき） | .menu:hover（menu自体にマウスを乗せたとき） |
ふつうに.menu:hoverやa:hoverと書いていれば問題ありません。
注意4：WordPressにはそのまま使わない
この方法は普通のPHP/HTMLサイト向けです。WordPressはCSSの読み込み方が違うため、そのままでは使えません。WordPressの場合はAutoptimizeなどのプラグインや、テーマの高速化機能（Cocoonなら「高速化」設定）を使うほうが安全です。
まとめ
| やること | ファイル | 書く場所 |
|---|---|---|
| HTML圧縮の開始 | header.php | 一番上 |
| HTML圧縮の終了 | footer.php | 一番下 |
| CSS圧縮 | css.php（新規作成） | style.cssと同じフォルダ |
| CSSの読み込み変更 | header.php | <head>の中 |
| キャッシュ対策 | header.php | CSSの読み込み行に?v=filemtimeを追加 |
| 検索エンジン対策（テスト時のみ） | header.php・robots.txt | <head>の中・サイトの一番上の階層 |
プラグインが使えない普通のPHPサイトでも、数行のコードを追加するだけで、Autoptimizeのような圧縮ができます。元のファイルは読みやすいまま残せるので、あとからの修正もかんたんです。
まずはテストサイトで試してみて、問題がなければ本番サイトにも取り入れてみてください。
コメント