【WordPress】プラグインなしで出力されるHTMLを圧縮する方法

有名な表示速度改善プラグイン「Autoptimize」をはじめ、いろいろな高速化プラグインで必ずと言っていいほど搭載されているHTMLの圧縮機能。

圧縮といってもコードを整理して小さくする・・というものではなく、余分な空白や改行を削除してページを表示するためのファイルサイズを小さくすることで、表示のためのデータ転送量を減らしてより高速に表示されるようにするというものです。

最近では家庭なら光ファイバー、モバイルなら5Gといった高速通信が当たり前の時代になっていますから、体感的な効果としては「あるのか？」「ないのか？」という微妙なものですが、高速化はある程度まで進むと塵も積もれば山となる的なものをコツコツ積み上げていくしかないので、HTMLの圧縮はやっておいて損はない表示速度改善対策と言えます。

冒頭で書いたように高速化を目指すプラグインにはこの機能が備わっていることが多いので、それらを使っているならその機能を使えばいい話ですが、そうでない場合には、この機能のためだけにできればプラグインの追加をしないで行いたいもの。プラグインの使用に関しては全く否定しませんが、高速化プラグインには実は使っていない機能がたくさんあって、逆に余分な処理をしてしまっていることも多いことからも、この機能だけの話であればフラグインを使う必要はないと思います。

措置もテーマのfunctions.phpへコードを追記するだけという簡単なものですから、未設定の方や高速化プラグインを使っていない方は試してみてもいいかと思います（本サイトでは2020年7月20日現在この方法で圧縮を行っています）。

ちなみに今回の処置でどのようになるのかというと、処置前は

という表示だったソースが

という風に圧縮されて出力されるようになります。

※実際にこのサイトのトップページで出力されているHTMLの冒頭部分です

WordPressで出力されるHTMLを圧縮する方法

ここまで偉そうに試してみてもいいかも・・なんて書きましたが、海外のサイトでたまたま見つけた記事の受け売りです（笑）。コードそのものもそのページのものを使いますので、

How to Minify HTML in WordPress Without a Plugin

でコードのコピーをして、テーマのfunctions.phpへ貼り付ければ処置完了！となります。

※テーマのfunctions.phpはWordPressの動作において非常に重要なファイルであり、編集に失敗すると動作しなくなることもありますので、functions.php?という方に今回のカスタマイズはおすすめしません。

ただそのまま貼り付けると、以下のような不具合が出ることがあります

• デザインが崩れる
• 特定の機能が動作しなくなる

これはこのコードに限らず、高速化を目指すプラグインを使った場合でも起こりえます。この機能はソースの中で展開して出力されている

• HTMLタグ
• CSSの内容
• スクリプトの内容

に対して圧縮を行うので、デザインが崩れるのは展開して出力されているCSSの一部が圧縮されたことで正常に認識されなくなる現象、特定の機能が動作しなくなるのは展開して出力されているスクリプトがうまく動かないことで動作しなくなる現象です。これを今まで通りに動作するようにするには、コード冒頭の

protected $flhm_compress_css = true;
protected $flhm_compress_js = true;
protected $flhm_info_comment = true;
protected $flhm_remove_comments = true;

の部分を変更することで回避できます。内容としては

$flhm_compress_css・・・展開して出力されているCSSの圧縮をするか否か

protected $flhm_compress_js・・・展開して出力されているスクリプトの圧縮をするか否か

protected $flhm_info_comment・・・ソースに便宜上書いたコメント表示を出力して見やすくするか否か

protected $flhm_remove_comments・・・コメントをすべて削除＆スペースや改行も削除するか否か

となっているので、デザインで問題があれば「$flhm_compress_css」のtrueをfalseにすれば圧縮されなくなり、正常に表示されるようになります。

※中には圧縮そのものがNGな場合もありますので、措置を行って実際に試してみてください。

HTML圧縮機能を簡単にON/OFFにできるようにしておく方法

このままでは完全なキュレーション記事になってしまうので、私が行った工夫を紹介しておきます。上の方法ではリンク先ページのコードをテーマのfunctions.phpの末尾へ追加する方法でしたが、これだとメンテナンス時やカスタマイズ時などにソース表示した際、圧縮されてて分かりづらくなることがあります。

そんな時のために、あらかじめ機能のON/OFFが簡単にできるようにしておけば、普段は圧縮状態にしておき、ソース表示して確認したい作業をする時は非圧縮状態にできて便利ですので、実際に私がやっている方法を紹介しておきます。

まずは、リンク先ページのコードをパソコンのテキストエディタへコピペします。

そして先頭行に

<?php

を追加し、ファイル名を「html-compress」、拡張子を「.php」で保存します（要UTF-8形式での保存）。

UTF-8?という方はWordPressのテーマファイルをアップロードしてもファイルの内容が空になる現象の原因と対処を参考にしてみてください。

保存したファイルをFTPを使って親テーマ（子テーマ）のstyle.cssがある場所へアップロードします。

次に親テーマ（子テーマ）のfunctions.phpへ

include 'html-compress.php';

という１行を追加します。functions.phpを保存して問題なければ、実際にページをソース表示してきちんと圧縮されているかを確認してください。

行の先頭に「//」を入れて

//include 'html-compress.php';

コメントアウトすれば、圧縮機能が停止され、未圧縮の状態でソース表示することができます。

※この方法は結構テーマでは使われているもので、本来functions.phpへ追記する内容を別のファイルへ保存し、functions.phpからそれを呼び出すという手法です。長いコードなどはこうして分けておくとfunctions.php内がごちゃごちゃせずに済みます。

---

いかがでしたか？冒頭で書いた通り、体感的な効果は・・・なところではありますが、転送量を下げる効果があるのはもちろん、ソース内のコードをコピペでパクられる無断でコピー使用されるのを防止することに効果を発揮すると思いますから、設定しておいた方がいいかも知れませんね。