RitoLabo

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

  • 公開:
  • 更新:
  • カテゴリ: PHP Laravel
  • タグ: PHP,Laravel,composer,laravel page speed,5.5,5.4,5.3,compression,5.x,Package,minify

HTMLに関しては内容が変更になる確率が高いのでキャッシュは行わない事が推奨されていますが、 出来るだけ高速に処理される施策は行っておきたいところです。
そこで今回は、Laravel5のパッケージ「laravel page speed」を使い、HTMLをminify(圧縮)します。

[GitHub]renatomarinho/laravel-page-speed

ところで、「HTMLのminify(圧縮)とは?」どんなものなのかという事ですが、 例えば、Googleのページを見てみてもらえばよくわかりますが、 以下はGoogleニュースのトップページのソースの一部になります。

Googleニューストップページソースの一部

通常であれば改行などがあると思いますが、そういったものを一切排除しページサイズを縮小する。 というのがHTMLのminify(圧縮)になります。

尚、今回のデモンストレーションでは「Laravel 5.5」を使っています。 5.4や5.3とは手順が異なりますのでご注意ください。
(もちろん、最後にそれらの導入手順も紹介します。)

アジェンダ
  1. laravel page speedのインストール
  2. ミドルウェアをカーネルに登録する
  3. Laravel5.4や5.3で導入する場合
  4. ブラウザから確認
  5. オプション設定

laravel page speedのインストール

インストールを行います。
laravelのルートディレクトリでcomposerコマンドを叩いてlaravel-page-speedをインストールします。

# laravelルートディレクトリへ移動
cd /path/to/laravel

# laravel page speedのインストール
composer require renatomarinho/laravel-page-speed

インストールが終わったら、composer.jsonを確認します。 「laravel/composer.json」にありますので開いて見てみます。

"require": {
"php": ">=7.0.0",
"laravel/framework": "5.5.*",
"laravel/socialite": "^3.0",
"laravel/tinker": "~1.0",
"renatomarinho/laravel-page-speed": "^1.8" // ← ココ
}

「renatomarinho/laravel-page-speed」が導入出来ている事が確認できました。

ミドルウェアをカーネルに登録する

次に、laravel-page-speedが発動するように、app/Http/Kernel.phpを編集していきます。
app/Http/Kernel.phpの$middlewareに以下を追加してください。
デフォルトの状態から

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,
];

↓追加する

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, // ← ココ
];

Laravel5.5の場合は以上で作業は完了です。

Laravel5.4や5.3で導入する場合

Laravel5であれば、5.5だろうが5.4だろうが5.3だろうが、これまでの手順は共通です。
Laravel5.5の場合は導入作業は完了しましたが、5.4や5.3の場合は、加えて以下の設定を行います。

「laravel/config/app.php」の「providers」に以下の記述を追加

'providers' => [
/*
.
.
(省略)
.
.
*/

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

],

次に、Laravelのルートディレクトリから、以下のこartisanコマンドを叩きます。

# laravelルートディレクトリへ移動
cd /path/to/laravel

# artisanコマンドを叩く
php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"

以上で導入作業は完了です。

ブラウザから確認

それでは実際にブラウザからアクセスし、ソースを確認してみてください。

laravel-page-speed導入前
laravel-page-speed導入前

laravel-page-speed導入後
laravel-page-speed導入後

htmlのminify(圧縮)が行われている事が確認できました。

オプション設定

上記手順は基本的な圧縮を発動させますが、「renatomarinho/laravel-page-speed」には、 オプションを設定する事で様々な圧縮を行う・制御する事が出来ます。
(例えばCSS・JavaScript・imageの圧縮など)
オプションに関しては公式GitHubを確認してもらうとして (基本設定でもHTMLの圧縮は行えているのでここでは紹介しません)、ここでは例として
「開発環境では圧縮を行わない」
という設定を行ってみたいと思います。

HTMLをminifyしてページサイズを抑えられたは良いですが、 ソースの可読性が犠牲になる(当たり前ながら、すごく見ずらい笑)ので、 開発環境下ではHTMLは圧縮したくないという事になる場合は少なくないと思います。 そういった場合の制御もこのパッケージでは行えますので、おまけとして紹介したいと思います。

設定ファイルの作成

まずは、オプションを記述する設定ファイルを作成します。
「laravel/config」配下に、設定ファイル「laravel-page-speed.php」を作成します。

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

ファイル名は任意のもので構いません。わかりやすい名前をつけましょう

オプションの記述

それでは作成したファイルに設定を記述していきます。

<?php
return [
'enable' => env('LARAVEL_PAGE_SPEED_ENABLE', true),
];

この「enable」がtrueの場合は圧縮が行われ、falseの場合は圧縮は行われません。
これをenvファイルに設定する事にして、制御を行います。
「laravel/.env」を開き、以下を記述します。

LARAVEL_PAGE_SPEED_ENABLE=false

開発環境では「false」を設定し、本番環境では「true」に設定しておく事で、 開発環境ではHTMLのminifyを発動させないように制御出来ます。

まとめ

いかがでしたでしょうか?デモンストレーション程度のHTMLではほとんど違いはでませんが、 記述量が増えれば増えるほど、圧縮する事のメリットが出てくると思います。

また、このパッケージは、Viewをレンダリングする時にminifyを行うので、 例えばlaravel内のキャッシュ(/storage/framework/view/)には影響を与えません。

Laravelで簡単に打てる高速化施策の一つですので、是非試してみてください。

[Laravel News]
Optimize Your Application with Laravel Page Speed