【WEBアプリケーション表示速度高速化シリーズ第三段】Laravel5のパッケージ「laravel page speed」を使い、HTMLをminify（圧縮）します。HTMLに関しては内容が変更になる確率が高いのでキャッシュは行わない事が推奨されていますが、出来るだけ高速に処理される施策は行っておきたいところです。

【WEBアプリ高速化】Laravel5「laravel page speed」パッケージを使い、HTMLをminify（圧縮）する

HTML に関しては内容が変更になる確率が高いのでキャッシュは行わない事が推奨されていますが、 出来るだけ高速に処理される施策は行っておきたいところです。 
そこで今回は、Laravel5 のパッケージ「laravel page speed 」を使い、HTML を minify（圧縮）します。
<a href="https://github.com/renatomarinho/laravel-page-speed" rel="noopener noreferrer" target="_blank">[GitHub]renatomarinho/laravel-page-speed</a>
ところで、「HTML の minify（圧縮）とは？」どんなものなのかという事ですが、 例えば、Google のページを見てみてもらえばよくわかりますが、 以下は Google ニュースのトップページのソースの一部になります。
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/21/wMf5IXWAFUGehc8Wj0PK.png" width="1200" height="159" alt="Google ニューストップページソースの一部"></div>
通常であれば改行などがあると思いますが、そういったものを一切排除しページサイズを縮小する。 というのが HTML の minify（圧縮）になります。
尚、今回のデモンストレーションでは「Laravel 5.5 」を使っています。 5.4 や 5.3 とは手順が異なりますのでご注意ください。 
（もちろん、最後にそれらの導入手順も紹介します。）
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#laravel-page-speed-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">laravel page speed のインストール</a></li>
<li><a href="#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%92%E3%82%AB%E3%83%BC%E3%83%8D%E3%83%AB%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B">ミドルウェアをカーネルに登録する</a></li>
<li><a href="#laravel54-%E3%82%84-53-%E3%81%A7%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88">Laravel5.4 や 5.3 で導入する場合</a></li>
<li><a href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89%E7%A2%BA%E8%AA%8D">ブラウザから確認</a></li>
<li><a href="#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E8%A8%AD%E5%AE%9A">オプション設定</a>
<ol>
<li><a href="#%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90">設定ファイルの作成</a></li>
<li><a href="#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%98%E8%BF%B0">オプションの記述</a></li>
</ol>
</li>
</ol>
<h2 id="laravel-page-speed-のインストール">laravel page speed のインストール</h2>
インストールを行います。 
laravel のルートディレクトリで composer コマンドを叩いて laravel-page-speed をインストールします。
<pre><code class="hljs language-shell"># laravel ルートディレクトリへ移動
cd /path/to/laravel

# laravel page speed のインストール
composer require renatomarinho/laravel-page-speed
</code></pre>
インストールが終わったら、composer.json を確認します。 「laravel/composer.json 」にありますので開いて見てみます。
<pre><code class="hljs language-json">"require": {
 "php": ">=7.0.0",
 "laravel/framework": "5.5.*",
 "laravel/socialite": "^3.0",
 "laravel/tinker": "~1.0",
 "renatomarinho/laravel-page-speed": "^1.8" // ← ココ
}
</code></pre>
「renatomarinho/laravel-page-speed 」が導入出来ている事が確認できました。
<h2 id="ミドルウェアをカーネルに登録する">ミドルウェアをカーネルに登録する</h2>
次に、laravel-page-speed が発動するように、app/Http/Kernel.php を編集していきます。 
app/Http/Kernel.php の $middleware に以下を追加してください。 
デフォルトの状態から
<pre><code class="hljs language-php">protected $middleware = [
 \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
 \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
 \App\Http\Middleware\TrimStrings::class,
 \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
</code></pre>
↓追加する
<pre><code class="hljs language-php">protected $middleware = [
 \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
 \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
 \App\Http\Middleware\TrimStrings::class,
 \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
 \RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class, // ← ココ
];
</code></pre>
Laravel5.5 の場合は以上で作業は完了です。
<h2 id="laravel54-や-53-で導入する場合">Laravel5.4 や 5.3 で導入する場合</h2>
Laravel5 であれば、5.5 だろうが 5.4 だろうが 5.3 だろうが、これまでの手順は共通です。 
Laravel5.5 の場合は導入作業は完了しましたが、5.4 や 5.3 の場合は、加えて以下の設定を行います。
「laravel/config/app.php 」の「providers 」に以下の記述を追加
<pre><code class="hljs language-php">'providers' => [
 /* 
 .
 .
 （省略）
 .
 . 
 */

 /**
 * renatomarinho/laravel-page-speed
 */
 RenatoMarinho\LaravelPageSpeed\ServiceProvider::class, // ← 追加

],
</code></pre>
次に、Laravel のルートディレクトリから、以下のこ artisan コマンドを叩きます。
<pre><code class="hljs language-shell"># laravel ルートディレクトリへ移動
cd /path/to/laravel

# artisan コマンドを叩く
php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"
</code></pre>
以上で導入作業は完了です。
<h2 id="ブラウザから確認">ブラウザから確認</h2>
それでは実際にブラウザからアクセスし、ソースを確認してみてください。
laravel-page-speed 導入前
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/21/Ue4w8nlg2vqHS8ogiJGu.png" width="303" height="248" alt="laravel-page-speed 導入前"></div>
laravel-page-speed 導入後
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/21/kfJv1oFffzhkDIPy82np.png" width="695" height="107" alt="laravel-page-speed 導入後"></div>
html の minify（圧縮）が行われている事が確認できました。
<h2 id="オプション設定">オプション設定</h2>
上記手順は基本的な圧縮を発動させますが、「renatomarinho/laravel-page-speed 」には、 オプションを設定する事で様々な圧縮を行う・制御する事が出来ます。 
（例えば CSS ・ JavaScript ・ image の圧縮など） 
オプションに関しては公式 GitHub を確認してもらうとして （基本設定でも HTML の圧縮は行えているのでここでは紹介しません）、ここでは例として 
「開発環境では圧縮を行わない」 
という設定を行ってみたいと思います。
HTML を minify してページサイズを抑えられたは良いですが、 ソースの可読性が犠牲になる（当たり前ながら、すごく見ずらい笑）ので、 開発環境下では HTML は圧縮したくないという事になる場合は少なくないと思います。 そういった場合の制御もこのパッケージでは行えますので、おまけとして紹介したいと思います。
<h3 id="設定ファイルの作成">設定ファイルの作成</h3>
まずは、オプションを記述する設定ファイルを作成します。 
「laravel/config 」配下に、設定ファイル「laravel-page-speed.php 」を作成します。
<pre><code class="hljs language-shell">laravel
├─ config
│   ├─ app.php
│   ├─ auth.php
│   ├─ broadcasting.php
│   ├─ cache.php
│   ├─ database.php
│   ├─ laravel-page-speed.php // ← ココ
│   ├─ mail.php
│   ├─ queue.php
│   ├─ services.php
│   ├─ session.php
│   └─ view.php
</code></pre>
ファイル名は任意のもので構いません。わかりやすい名前をつけましょう
<h3 id="オプションの記述">オプションの記述</h3>
それでは作成したファイルに設定を記述していきます。
<pre><code class="hljs language-php">&#x3C;?php
return [
 'enable' => env('LARAVEL_PAGE_SPEED_ENABLE', true),
];

</code></pre>
この「enable 」が true の場合は圧縮が行われ、false の場合は圧縮は行われません。 
これを env ファイルに設定する事にして、制御を行います。 
「laravel/.env 」を開き、以下を記述します。
<pre><code class="hljs language-shell">LARAVEL_PAGE_SPEED_ENABLE=false
</code></pre>
開発環境では「false 」を設定し、本番環境では「true 」に設定しておく事で、 開発環境では HTML の minify を発動させないように制御出来ます。
<h2 id="まとめ">まとめ</h2>
デモンストレーション程度の HTML ではほとんど違いはでませんが、 記述量が増えれば増えるほど、圧縮する事のメリットが出てくると思います。
また、このパッケージは、View をレンダリングする時に minify を行うので、 例えば laravel 内のキャッシュ（/storage/framework/view/）には影響を与えません。
Laravel で簡単に打てる高速化施策の一つですので、是非試してみてください。
[Laravel News] 
<a href="https://laravel-news.com/laravel-page-speed" rel="noopener noreferrer" target="_blank">Optimize Your Application with Laravel Page Speed</a>

HTML に関しては内容が変更になる確率が高いのでキャッシュは行わない事が推奨されていますが、 出来るだけ高速に処理される施策は行っておきたいところです。 
そこで今回は、Laravel5 のパッケージ「laravel page speed 」を使い、HTML を minify（圧縮）します。
<a href="https://github.com/renatomarinho/laravel-page-speed" rel="noopener noreferrer" target="_blank">[GitHub]renatomarinho/laravel-page-speed</a>
ところで、「HTML の minify（圧縮）とは？」どんなものなのかという事ですが、 例えば、Google のページを見てみてもらえばよくわかりますが、 以下は Google ニュースのトップページのソースの一部になります。
<div class="img_wrap"><img src="/images/posts/21/wMf5IXWAFUGehc8Wj0PK.png" width="1200" height="159" alt="Google ニューストップページソースの一部"></div>
通常であれば改行などがあると思いますが、そういったものを一切排除しページサイズを縮小する。 というのが HTML の minify（圧縮）になります。
尚、今回のデモンストレーションでは「Laravel 5.5 」を使っています。 5.4 や 5.3 とは手順が異なりますのでご注意ください。 
（もちろん、最後にそれらの導入手順も紹介します。）
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#laravel-page-speed-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">laravel page speed のインストール</a></li>
<li><a href="#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%92%E3%82%AB%E3%83%BC%E3%83%8D%E3%83%AB%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B">ミドルウェアをカーネルに登録する</a></li>
<li><a href="#laravel54-%E3%82%84-53-%E3%81%A7%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88">Laravel5.4 や 5.3 で導入する場合</a></li>
<li><a href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89%E7%A2%BA%E8%AA%8D">ブラウザから確認</a></li>
<li><a href="#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E8%A8%AD%E5%AE%9A">オプション設定</a>
<ol>
<li><a href="#%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90">設定ファイルの作成</a></li>
<li><a href="#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%98%E8%BF%B0">オプションの記述</a></li>
</ol>
</li>
</ol>
<h2 id="laravel-page-speed-のインストール">laravel page speed のインストール</h2>
インストールを行います。 
laravel のルートディレクトリで composer コマンドを叩いて laravel-page-speed をインストールします。
<pre><code class="hljs language-shell"># laravel ルートディレクトリへ移動
cd /path/to/laravel

# laravel page speed のインストール
composer require renatomarinho/laravel-page-speed
</code></pre>
インストールが終わったら、composer.json を確認します。 「laravel/composer.json 」にありますので開いて見てみます。
<pre><code class="hljs language-json">"require": {
 "php": ">=7.0.0",
 "laravel/framework": "5.5.*",
 "laravel/socialite": "^3.0",
 "laravel/tinker": "~1.0",
 "renatomarinho/laravel-page-speed": "^1.8" // ← ココ
}
</code></pre>
「renatomarinho/laravel-page-speed 」が導入出来ている事が確認できました。
<h2 id="ミドルウェアをカーネルに登録する">ミドルウェアをカーネルに登録する</h2>
次に、laravel-page-speed が発動するように、app/Http/Kernel.php を編集していきます。 
app/Http/Kernel.php の $middleware に以下を追加してください。 
デフォルトの状態から
<pre><code class="hljs language-php">protected $middleware = [
 \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
 \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
 \App\Http\Middleware\TrimStrings::class,
 \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
</code></pre>
↓追加する
<pre><code class="hljs language-php">protected $middleware = [
 \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
 \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
 \App\Http\Middleware\TrimStrings::class,
 \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
 \RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class, // ← ココ
 \RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class, // ← ココ
];
</code></pre>
Laravel5.5 の場合は以上で作業は完了です。
<h2 id="laravel54-や-53-で導入する場合">Laravel5.4 や 5.3 で導入する場合</h2>
Laravel5 であれば、5.5 だろうが 5.4 だろうが 5.3 だろうが、これまでの手順は共通です。 
Laravel5.5 の場合は導入作業は完了しましたが、5.4 や 5.3 の場合は、加えて以下の設定を行います。
「laravel/config/app.php 」の「providers 」に以下の記述を追加
<pre><code class="hljs language-php">'providers' => [
 /* 
 .
 .
 （省略）
 .
 . 
 */

 /**
 * renatomarinho/laravel-page-speed
 */
 RenatoMarinho\LaravelPageSpeed\ServiceProvider::class, // ← 追加

],
</code></pre>
次に、Laravel のルートディレクトリから、以下のこ artisan コマンドを叩きます。
<pre><code class="hljs language-shell"># laravel ルートディレクトリへ移動
cd /path/to/laravel

# artisan コマンドを叩く
php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"
</code></pre>
以上で導入作業は完了です。
<h2 id="ブラウザから確認">ブラウザから確認</h2>
それでは実際にブラウザからアクセスし、ソースを確認してみてください。
laravel-page-speed 導入前
<div class="img_wrap"><img src="/images/posts/21/Ue4w8nlg2vqHS8ogiJGu.png" width="303" height="248" alt="laravel-page-speed 導入前"></div>
laravel-page-speed 導入後
<div class="img_wrap"><img src="/images/posts/21/kfJv1oFffzhkDIPy82np.png" width="695" height="107" alt="laravel-page-speed 導入後"></div>
html の minify（圧縮）が行われている事が確認できました。
<h2 id="オプション設定">オプション設定</h2>
上記手順は基本的な圧縮を発動させますが、「renatomarinho/laravel-page-speed 」には、 オプションを設定する事で様々な圧縮を行う・制御する事が出来ます。 
（例えば CSS ・ JavaScript ・ image の圧縮など） 
オプションに関しては公式 GitHub を確認してもらうとして （基本設定でも HTML の圧縮は行えているのでここでは紹介しません）、ここでは例として 
「開発環境では圧縮を行わない」 
という設定を行ってみたいと思います。
HTML を minify してページサイズを抑えられたは良いですが、 ソースの可読性が犠牲になる（当たり前ながら、すごく見ずらい笑）ので、 開発環境下では HTML は圧縮したくないという事になる場合は少なくないと思います。 そういった場合の制御もこのパッケージでは行えますので、おまけとして紹介したいと思います。
<h3 id="設定ファイルの作成">設定ファイルの作成</h3>
まずは、オプションを記述する設定ファイルを作成します。 
「laravel/config 」配下に、設定ファイル「laravel-page-speed.php 」を作成します。
<pre><code class="hljs language-shell">laravel
├─ config
│   ├─ app.php
│   ├─ auth.php
│   ├─ broadcasting.php
│   ├─ cache.php
│   ├─ database.php
│   ├─ laravel-page-speed.php // ← ココ
│   ├─ mail.php
│   ├─ queue.php
│   ├─ services.php
│   ├─ session.php
│   └─ view.php
</code></pre>
ファイル名は任意のもので構いません。わかりやすい名前をつけましょう
<h3 id="オプションの記述">オプションの記述</h3>
それでは作成したファイルに設定を記述していきます。
<pre><code class="hljs language-php">&#x3C;?php
return [
 'enable' => env('LARAVEL_PAGE_SPEED_ENABLE', true),
];

</code></pre>
この「enable 」が true の場合は圧縮が行われ、false の場合は圧縮は行われません。 
これを env ファイルに設定する事にして、制御を行います。 
「laravel/.env 」を開き、以下を記述します。
<pre><code class="hljs language-shell">LARAVEL_PAGE_SPEED_ENABLE=false
</code></pre>
開発環境では「false 」を設定し、本番環境では「true 」に設定しておく事で、 開発環境では HTML の minify を発動させないように制御出来ます。
<h2 id="まとめ">まとめ</h2>
デモンストレーション程度の HTML ではほとんど違いはでませんが、 記述量が増えれば増えるほど、圧縮する事のメリットが出てくると思います。
また、このパッケージは、View をレンダリングする時に minify を行うので、 例えば laravel 内のキャッシュ（/storage/framework/view/）には影響を与えません。
Laravel で簡単に打てる高速化施策の一つですので、是非試してみてください。
[Laravel News] 
<a href="https://laravel-news.com/laravel-page-speed" rel="noopener noreferrer" target="_blank">Optimize Your Application with Laravel Page Speed</a>

Author