【9/30】 お問い合わせで「お名前エラー」が発生する不具合を修正しました。 【サイト概要】IT用語に「ルビ」や「説明文」をつけて初心者の方にもわかりやすく丁寧に説明していきます。「サーバーの立て方」や「サイトの作り方」「カスタマイズ方法」が知りたい方はぜひ見ていってください。

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

HTML Minifyの画像WP高速化
この記事は約19分で読めます。

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

※1WordPress
WordPress Foundationワードプレス・ファウンデイションによって開発されたオープンソース・ブログプラットフォーム。プログラム言語がわからなくても管理画面からサイトやブログの作成が可能。
※2HTML(HyperTextMarkupLanguageハイパーテキスト・マークアップ。ランゲージ)
Webサイトのコンテンツを作成するために使用される言語でマークアップ言語の1つ。
※3Minify
ソースコードを圧縮して容量を軽量化すること。ここでの圧縮とは、動作に影響がでない改行やインデント、コメントなどの削除を行うこと。
※4正規表現
1つの文字列で、複数の文字列を表現する方法。(例:0[789]0-\d{4}-\d{4} → すべての日本の携帯電話番号にマッチ)
スポンサーリンク

HTMLMinify手順

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

Cocoonの親テーマから子テーマにコピペの画像
クリックで画像拡大
※1Cocoon
検索エンジン対策・高速化・モバイルフレンドリーに最適化した無料テーマ。
子テーマにファイルを上書きするとカスタマイズしたデザインが初期化されるので、足りないファイルのみコピーしてください。

ヘッダーコードの編集

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

<?php
function html_minify($buffer) {
    $replace1 = array(
        '/\s+</' => '<',
        '/>\s+/' => '>',
        '/(\s){2,}/' => '\1',
        '/<!--\s?[^\[].*?[^\]]\s?-->/s' => ''
    );
    $pattern = '/<(?: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", '&#xA;', $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");
?>
 CocoonヘッダーにMinifyコードコピペの画像
クリックで画像拡大
※1PHP
The PHP Groupザ・ピーエイチピー・グループによって開発されたプログラミング言語。主にWebサイト制作に使用され、サーバー側で処理される。
メリット:サーバー側で処理するためユーザー側の設定が必要ない(ユーザー環境に左右されにくい)。また、ユーザーはプログラム処理後のコード(HTML)しか見ることができないためPHPコードの盗用も防止にもなる。
デメリット:サーバーで処理されるのでサイト表示後の処理はできない(JSなどブラウザなどで処理するプログラム言語ならば可能)

フッターコードの編集

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

<?php ob_end_flush();?>
CocoonフッターにMinifyコードコピペの画像
クリックで画像拡大

※ 「ob_end_flush()」は省略しても動作はしますが、マニュアル通りフッターに記述しています。

サイトの確認

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

HTMLMinify解説

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

ヘッダー追記コード解説

<?php
function html_minify($buffer) { ← ユーザー定義関数「html_minify」、変数「$buffer」にバッファ内容を代入
HTML Minify PHPコード1解説の画像
クリックで画像拡大
  • 「\」(バックスラッシュ)と「¥」(円マーク)は同様の機能をもつ
     例:「\s」と「¥s」は同じ
$replace1 = array( ← 関数「preg_replace」で使用する置換え用文字列を変数「$replace1」のキーと値に代入する
    ‘/\s+</’ => ‘<‘, ← 配列キー:「/\s+</」、配列値:「<」
    ‘/>\s+/’ => ‘>’, ← 配列キー:「/>\s+/」、配列値:「>」
    ‘/(\s){2,}/’ => ‘\1’, ← 配列キー:「/(\s){2,}/」、配列値:「\1」
    ‘/<!–\s?[^\[].*?[^\]]\s?–>/s’ => ” ← 配列キー:「/<!–\s?[^\[].*?[^\]]\s?–>/s」、配列値:「」
);
HTML Minify PHPコード2解説の画像
クリックで画像拡大
  • キーに記述されている文字列は「正規表現」と呼ばれ、使用している正規表現の詳細は後述する
  • キーに記述されている「/」(スラッシュ)を「デリミタ」と呼び、囲まれた範囲が正規表現の対象となる。また、区切り文字などもデリミタと呼ぶ
    (デリミタは別の記号でもよい)
  • 文字列は「’」または「”」で囲む必要がある
$pattern = ‘/<(?:pre|textarea)(?: [^>]+)?>(.+?)<\/(?:pre|textarea)>/is’; ← 関数「preg_match_all」のマッチング処理用パターンを変数「$pattern」に代入する
if(preg_match_all($pattern, $buffer, $matches, PREG_SET_ORDER)) { ← 関数「preg_match_all」でマッチした場合は下記の処理を実行する
HTML Minify PHPコード3解説の画像
クリックで画像拡大
   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」を指定)
   
}
}
HTML Minify PHPコード4解説の画像
クリックで画像拡大
  • HTMLの改行は「<br>」で記述するが、「pre」や「textarea」タグで囲まれている場合は「通常の改行」で記述する
$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」に代入する
}
HTML Minify PHPコード5解説の画像
クリックで画像拡大
return $buffer; ← 呼び出し元に変数「$buffer」の値を返す
}
ob_start(“html_minify”); ← 出力のバッファリングをオンにして、引数にユーザー定義関数「html_minify」を指定する
?>
HTML Minify PHPコード6解説の画像
クリックで画像拡大

フッター追記コード解説

<?php
ob_end_flush(); ← 出力用バッファを送信し、出力のバッファリングをオフにする
?>
HTML Minify PHPコード7解説の画像
クリックで画像拡大

PHP関数解説

 WordPressテーマの「header.php」と「footer.php」に追記したコードで使用したPHP関数を解説します

※ わかりやすさを優先した説明のしかたをしています。公式の説明を確認したいかたはコチラ

functionファンクション
【書き方】
function 任意の関数名(仮引数代入用変数){処理内容}
【説明】
・独自の関数を作成できる
・使用する際は「関数名(実引数)」で呼び出せる(実引数には仮引数に渡したいデータを指定する)
・「returnリターン」で返し値(戻り値)を指定できる
【仮引数代入用変数】
・任意の変数を指定すると、呼び出し時に指定した実引数が代入される
(結果)
function a($b){
$c=$b.’4’;
return $c
}
echo a(123);

1234
arrayアレイ
【書き方】
array(値1,値2…)
【説明】
・配列を作成する方法の一つ。
・キーを指定する場合は「キー => 値」の形で指定する
・特定の値を出力する際は「配列名[キー]」で出力できる
・他にも書き方は様々ある
・最後のカンマは省略可能
・キーを省略した場合は「0」~の数字(添字)がキーに指定される
(結果)
$a=array(b,c,d);echo $a[0];

b
ifイフ
【書き方】
if(条件){条件一致処理}elseif(条件){条件一致処理}else{条件不一致処理}
【説明】
・条件によって処理を分岐できる
・条件に一致した場合は処理を実行した後、ifから抜ける
・他にも書き方は様々ある
【elseif】
・新たな条件を追加したい場合は「elseifエルスイフ(条件)」を指定する
・上の条件から順番に判定される
【else】
・条件がすべて一致しなかった場合の処理を追加する場合は「elseエルス」を指定する
(結果)
if(1==2){
$a=’b’;
}elseif(2>1){
$a=’c’;
}else{
$a=’d’;
}
echo $a;

c
preg_match_allプレグ・マッチ・オール
【書き方】
preg_match_all(検索ワード,検索対象,検索結果代入用変数,フラグ,オフセット)
【説明】
・正規表現を使った検索を行える
・マッチすれば「1」、マッチしなければ「0」、エラーがおきれば「false」を返す
preg_matchプレグ・マッチは「1つ目のマッチ結果」を返すが、preg_match_allは「すべてのマッチ結果」の配列を返す
【検索ワード】
・正規表現を使用して検索ワードを指定する
【検索対象】
・検索対象の「文字列」や「変数」を指定する
【検索結果代入用変数】
・省略した場合は「1」「0」「false」のみ返される、変数を指定した場合は検索結果が配列で代入される
【フラグ】
・「検索結果代入用変数」に変数を指定している場合で、フラグを指定した場合、返される配列の並び順などを変更できる
・デフォルトは「PREG_PATTERN_ORDER」が指定されている
・「PREG_PATTERN_ORDER」を指定するとキー「0」がキャプチャ全体で、キー「1」がキャプチャのマッチ箇所の並び順の配列が返される
・「PREG_PATTERN_ORDER」の他にも複数のフラグがある
【オフセット】
・省略した場合は先頭から検索する
・検索の開始位置をバイト単位で指定できる
(結果)
if(preg_match_all(‘/a(.+?)c/’,’abcdea1c’,$a)) {
$b=$a;
}
【例1】
echo $b[0][0];

abc
【例2】
echo $b[1][0];

b
【例3】
echo $b[0][1];

a1c
【例4】
echo $b[1][1];

1
foreachフォーイーチ
【書き方】
foreach(任意の配列 as 値代入用変数){}
【説明】
・配列に含まれる値やキーを順番に処理することができる
・配列にある値の数だけ繰返し処理される
・キーの処理も行いたい場合はキーも指定する(キー代入用変数 => 値代入用変数)
(結果)
$a=array(‘b’,’c’,’d’);
$d=’a’;
$e=’-1′;
foreach ($a as $b => $c){
$d.=$c;
$e.=$b;
}
【例1】
echo $d;

abcd
【例2】
echo $d;

-1012
str_replaceストラ・リプレイス
【書き方】
str_replace(置換前,置換後,置換対象,リミット,回数代入用変数)
【説明】
・文字列を置換できる
・「置換前」と「置換後」の文字列は配列(複数)でも可能
・正規表現で置換える場合は「preg_replace」を使用する
・「str」は「stringストリング(文字列)の略で「str」を「エスティーアール」や「ストリング」と読むこともある
【リミット】
・置換を行う最大回数を指定できる
・デフォルトは「-1」(制限なし)
【回数代入用変数】
・変数を指定すると置換えた回数が返される
(結果)
$a=str_replace(‘abc’,’def’,abcdef);echo $a;

defdef
preg_replaceプレグ・リプレイス
【書き方】
preg_replace(置換前,置換後,置換対象,リミット,回数代入用変数)
【説明】
・正規表現を使った置換ができる
・「置換前」と「置換後」の正規表現は配列(複数)でも可能
・文字列で置換える場合は「str_replace」を使用する
・「preg」は「Perl compatible regular expressionパール・コンパティブル・レギュラー・エクスプレッション(パール互換正規表現)の略で、「preg」を「ピーレグ」と読む場合もある
【リミット】
・置換を行う最大回数を指定できる
・デフォルトは「-1」(制限なし)
【回数代入用変数】
・変数を指定すると置換えた回数が返される
(結果)
$a=preg_replace(‘/d.f/’,’abc’,abcdef);echo $a;

abcabc
array_keysアレイ・キーズ
【書き方】
array_keys(配列名,特定のキー,型の比較)
【説明】
・配列の「キーだけ」を返す
【特定のキー】
・省略すると「すべてのキー」を返す
・「特定のキー」を指定すると「特定のキーのみ」返す(複数ある場合はすべて返す)
【型の比較】
・「特定のキー」を指定して「型の比較」に「true」を指定すると、「データ型[※1]を含めたキー」を返す
・デフォルトは「false」で「データ型を含まないキー」を返す
(結果)
$a = array(‘abc’ => ‘1’, ‘def’ => ‘2’);
$b=array_keys($a);
print_r($b);

Array
(
[0] => abc
[1] => def
)
array_valuesアレイ・バリューズ
【書き方】
array_values(配列名)
【説明】
・配列の「値だけ」を返す
(結果)
$a = array(‘abc’ => ‘1’, ‘def’ => ‘2’);
$b=array_values($a);
print_r($b);

Array
(
[0] => 1
[1] => 2
)
ob_startオービー・スタート
【書き方】
ob_start(コールバック関数,チェックサイズ,フラグ)
【説明】
・バッファリング[※2]をオンにする
・「ob_start」以降のコードを表示せずにバッファ[※3]に保存する
【コールバック関数】
・「コールバック関数」を指定することで出力バッファが送信されたタイミングでバッファがコールバック関数に渡されます
【チェックサイズ】
・指定したバイト数を超えるたびにバッファが送信される
・デフォルトは「0」でサイズを無視します
【フラグ】
・使用できるバッファ操作関数を設定できます
・デフォルトは送信や削除などすべての関数が使用(「PHP_OUTPUT_HANDLER_CLEANABLE | PHP_OUTPUT_HANDLER_FLUSHABLE | PHP_OUTPUT_HANDLER_REMOVABLE」を指定するとすべて使用可能)
(結果)
ob_start();
echo “abc”;
$buffer = ob_get_clean();
echo $buffer;

abc
ob_end_flushオービー・エンド・フラッシュ
【書き方】
ob_end_flush()
【説明】
・バッファリングをオフにする
・バッファの内容を送信(フラッシュ)する
・バッファの内容をクリアする
(結果)
ob_start();
echo “abc”;
$buffer = ob_get_contents();
ob_end_clean();
$buffer → abc
※1データ型
「数値型」「文字列型」など、さまざまな型があり正しく指定しないと同じ値でも違う意味となる。
(数値型例:1+1→2)(文字列型例:’1’+’1’→11)
※2バッファリング
専用の記憶領域に一時的にデータを保存し様々な処理を行うこと。
※3バッファ
一時的にデータを保存するための記憶領域。

正規表現解説

 WordPressテーマの「header.php」と「footer.php」に追記したコードで使用した正規表現と修飾子を解説します

ジャンプ

\s \n . * *? + +? ? {〇,} (…) (?:…) \〇~ [^…] …|… \ /…/i /…/s

正規表現

\s
半角スペース、タブ、改ページ、復帰(CR)、改行(LF)
(結果)
\s+空白文字1文字以上にマッチ
\n
改行(LF)
(結果)
\n+改行1つ以上にマッチ
.
任意の1文字にマッチ。改行以外。
(結果)
.すべての1文字にマッチ
*
0回以上の繰り返し。最長マッチ。
(結果)
(a.*b)文字列「abcabc」の「abcab」にマッチ
*?
0回以上の繰り返し。最短マッチ。
(結果)
(a.*?b)文字列「abcabc」の「ab」にマッチ
+
1回以上の繰り返し。最長マッチ。
(結果)
(a.+c)文字列「abcabc」の「abcabc」にマッチ
+?
1回以上の繰り返し。最短マッチ。
(結果)
(a.+?c)文字列「abcabc」の「abc」にマッチ
?
0回または1回の繰り返し。
(結果)
a?「」か「a」にマッチ
{〇,}
〇回以上の繰り返し。
(結果)
ab{3,}「abbb」や「abbbbbb」などにマッチ
(…)
()で囲まれたパターンをグループ化する。マッチ後、参照可能。
(結果)
(ab){2}「abab」
(?:…)
()で囲まれたパターンをグループ化する。マッチ後、参照不可。
(結果)
(?:ab){2}「abab」
\〇~
グループ化された〇番目のマッチ結果を参照する。
(結果)
\2正規表現「(ab)(cd)(ef)」にマッチ後「cd」を参照できる
[^…]
[^]に含まれる文字以外にマッチ。
(結果)
[^ab]「a」または「b」以外にマッチ
…|…
|で区切られたパターンのいずれかにマッチ。
(結果)
abc|def「abc」または「def」にマッチ
\
正規表現に使用される記号の前に\をつけると文字列として扱える。
(結果)
\+文字列の「+」にマッチ

修飾子

/…/i
マッチングにアルファベットの大文字と小文字を区別しない。
(結果)
‘/abc/i’「abc」や「AbC」などにマッチ
/…/s
正規表現の「.」(ドット)に 改行も含める。
(結果)
‘/a.c/s’「a」と「c」の間に改行があってもマッチ

まとめ

 HTMLMinifyを適用すると、コードの容量が減りサイトの高速化が期待されるが、JS[※1]ジャバスクリプトCSS[※2]シーエスエスのMinifyに比べ効果が薄いといわれている。そのため、少しでも不具合が起こる場合は適用しないことをおすすめします。
 しかし、サイトの高速化は積み重ね大事なので高速化効果が0ではないHTMLMinifyは、不具合が起こらない場合や開発環境にあわせてコードを修正できる知識がある場合は積極的に使用することをします。

※1JS(JavaScriptジャバスクリプト)
Brendan Eichブレンダン・アイクによって設計されたプログラミング言語。WebサイトやWebアプリなど様々なプログラムに使用でき、クライアント側(ブラウザなど)で処理される。
メリット:クライアント側で処理するためサイト表示後の処理が可能。
デメリット:クライアント側で処理されるためユーザの環境によっては動かない(JSオフ設定など)
※2CSS(CascadingStyleSheetsカスケーディング・スタイル・シート)
Webサイトのスタイル(デザイン)を指示するための言語の一つ
タイトルとURLをコピーしました