Fast Velocity Minify:ページの表示速度を高速化できる

2020年4月22日

ページの表示速度を高速化できる WordPress 用プラグインの紹介です。
それは「Fast Velocity Minify」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Fast Velocity Minify

Fast Velocity Minify - WordPress.org

Fast Velocity Minify は、複数の CSS と JavaScript ファイルをそれぞれ結合し最適化を行いページの表示速度を高速化できます。
Fast Velocity Minify の主な特徴は、以下のとおりです。

  • HTML の縮小化と HTML コメントの除去
  • CSS と JavaScript ファイルを PHP Minify で縮小化
  • CSS と JavaScript をグループでマージして、HTTP リクエストの数を削減
  • CSS と JavaScript ファイルの遅延ロード
  • JavaScript、CSS、または HTML の縮小機能の無効化
  • CSS と JavaScript ファイルのマージ機能の完全な無効化
  • マージ時の競合する JavaScript または CSS ファイルを手動によるスルー機能
  • ローカライズされたスクリプトをサポート
  • 条件付きスクリプトとスタイル、及びハンドルに依存するインラインコードのサポート
  • リソースのヒント、ジェネレータタグ、ショートリンク、マニフェストリンクなどの削除
  • デフォルトの絵文字用のスクリプトとスタイルの削除
  • Google Fonts のマージ、インライン化、最適化
  • Nginx での gzip_static のサポート
  • プリコネクトおよびプリロードヘッダーのサポート
  • WP CLIサポート
  • W3 Total Cache、WP Supercache、WP Rocket、Cachify、Comet Cache、Zen Cache、LiteSpeed Cache、Nginx Cache (by Till Kruss )、SG Optimizer、HyperCache、Cache Enabler、Breeze (Cloudways)などのキャッシュファイルを自動パージします
  • (Ver 3.0.0 からの新機能)サードパーティ製のスクリプトをユーザーの操作まで遅らせることが可能(初期読み込み時間の改善が可能)

サポートしている WP-CLI コマンドは、以下のとおりです。
wp fvm purge:
全てのキャッシュを削除します。

wp -url=blog.example.com fvm purge:
ネットワークサイトの全てのキャッシュを削除します。

wp site list -field=url | xargs -n1 -I % wp -url=% fvm purge:
ネットワーク全体の全てのキャッシュをパージします(Linux):

wp fvm stats:
キャッシュサイズを取得します。

wp -url=blog.example.com fvm stats:
ネットワークサイトのキャッシュサイズを取得します。

wp site list -field=url | xargs -n1 -I % wp -url=% fvm stats:
各サイトのキャッシュサイズを取得する(Linux)

記事を作成もしくは更新時点でのバージョン:3.0.2
マルチサイトでの利用:可

インストール手順

Fast Velocity Minify をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Fast Velocity Minify – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Fast Velocity Minify」と入力します。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Fast Velocity Minify を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

管理画面の「設定」メニューの中に追加されています。

使い方

設定画面から必要な設定を行います。

Ver 3.0.0 から JavaScript の最適化がデフォルトで無効になりました。
手動で構成する必要があります。

設定

設定(Settings)

グローバル設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • Purge Minified CSS/JS files instantly
    縮小された CSS/ JavaScript ファイルを即座にパージするかどうか。特定のホストとの互換性の理由から、キャッシュファイルはデフォルトで削除されるまでに最大 24 時間かかる場合があります。
  • Preserve settings on uninstall
    Fast Velocity Minify をアンインストールしても、全ての設定を保存しておくかどうか。
  • Force HTTPS urls on merged files
    生成されたキャッシュファイルの urls に HTTPS を強制するかどうか。

HTML設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • Enable HTML Processing
    以下の設定の処理を可能にするかどうか。
  • Disable HTML Minification
    HTML の縮小を無効にするかどうか。
  • Strip HTML comments
    HTML コメントを取り除くかどうか。
  • Cleanup Header
    リソースのヒント、ジェネレータタグ、ショートリンク、マニフェストリンクなどを削除するかどうか。
  • Remove Emoji
    WordPress に付属しているデフォルトの絵文字用のスクリプトとスタイルを削除するかどうか。

CSS設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • Eable CSS processing
    以下の設定の処理を可能にするかどうか。
  • Disable CSS Minification
    CSS ファイルの縮小を無効にするかどうか。チェックを付けると CSS ファイルはマージされますが縮小されません。
  • Disable Merging and Inline all CSS
    全ての CSS ファイルを外部ファイルとしてマージせずにインライン化するかどうか(非推奨)。
  • Remove “Print" CSS files
    印刷用の CSS ファイルを削除するかどうか。
  • Merge Fonts and Icons Separately
    フォントとアイコンを別のCSSファイルにマージするかどうか。
  • Load generated CSS files Async
    マージされた CSS ファイルを非同期でロードするかどうか(クリティカルパスには独自のインラインコードを使用します)。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • CSS Ignore List
    自動的にマージ及びグループ化から除外するファイルを指定できます。リンクタグの href 属性に対して PHP の stripos を使用して一致する場合に除外されます。
  • Remove CSS files
    フロントエンドから不要な CSS ファイルの URL を入力すると、削除することができます。リンクタグの href 属性に対して PHP のstripos を使用して一致する場合に削除されます。

JS設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • Eable JS processing
    以下の設定の処理を可能にするかどうか。
  • Disable JS Minification
    Javascript ファイルの縮小を無効にするかどうか。チェックを付けると、Javascript ファイルはマージされますが縮小されません。
  • Upgrade to jQuery 3
    キューに入れられている場合、Cloudflare から jQuery3.5.1 と jQueryMigrate 3.3.1 を使用するかどうか。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

Ignore Script Files:
ここで指定した の Javascript ファイルのマージと最小化を無視できます。
スクリプトタグの src 属性に対して PHP の stripos を使用して一致する場合に除外されます。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

Merge render blocking JS files in the header:
ここで指定したパスに一致するレンダリングブロックしている全て JavaScript ファイルがマージされます。

フロントエンドで見られるように縮小処理後、
script タグの src 属性に対して PHP のstripos を使用して、
一致するかどうかをチェックします。
1 行ごとに 1 つずつ指定します。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

Merge and Defer Scripts:
ここで指定したパスに一致する全ての JavaScript ファイルがマージ及び延期されます
フロントエンドで見られるように縮小処理後
script タグの src 属性に対して PHP の stripos を使用して、
一致するかどうかをチェックします。
1 行ごとに 1 つずつ指定します。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

Inline JavaScript Dependencies:
マージされた JavaScript の遅延ロードが完了するまで、
インライン JavaScript の実行を遅延させたい場合に使用します。

ここで一致するインライン JavaScript の実行は、
window.load イベントが終了するまで待機します。
innerHTML に対して、PHP の stripos を使用して一致するかどうかをチェックします。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

Execute matching third party scripts after user interaction:
ここで指定したインライン JavaScript は、ユーザーの操作が完了するまで実行を遅らせる事ができます。ます
ユーザーからの操作がない場合、スクリプトは 5 秒後に自動的に読み込まれます。
PHP の stripos を使用して、非同期/遅延スクリプトの innerHTML または src 属性と照合します。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

Remove JavaScript Scripts:
ここで指定した JavaScript ファイルまたはインラインスクリプトを削除できます。
フロントエンドから不要なスクリプトタグが削除されます。
スクリプト outerHTML に対して PHP の stripos を使用して一致するかを照合します。

CDN設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • Eable CDN processing
    以下の設定の処理を可能にするかどうか。
  • Enable CDN for merged CSS files
    CDN から Fast Velocity Minify で生成された CSS ファイルを配信するかどうか。
  • Enable CDN for merged JS files
    CDN から Fast Velocity Minify で生成された JavaScript ファイルを配信するかどうか。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

CDN URL:
CDN サーバーの URL を指定します。

CDN Integration:
CDN サーバーで置き換えるコンテンツを指定します。
特定の html タグ、特定の属性、クラス、id を持つ要素を対象とすることができます。

キャッシュ設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

  • Cache Preferences
    v 3.0.2 からグローバル設定に項目が移動しました。
  • Public Files Cache Path
    サーバーの物理ディレクトリのパスを指定します。
  • Public Files Cache URL
    URL パスを指定します。

ユーザー設定

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

User Options:
互換性の理由から、デフォルトでは匿名ユーザーのみを最適化します。
以下のユーザー権限での最適化を強制するかどうかを選択します。

状態(Status)

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

キャッシュディレクトリに格納されている CSS ファイルと JavaScript ファイルの個数とファイルサイズの合計を確認できます。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

ここでは、最新の CSS と JavaScript のマージログを確認できます。

WordPressプラグイン「Fast Velocity Minify」の導入から日本語化・使い方と設定項目を解説している画像

サーバーの統計と情報を確認できます。

代替プラグイン

Fast Velocity Minify にほしい機能が無かった場合には、
Fast Velocity Minify 以外にもサイトのページ表示速度の高速化ができるプラグインを記事にしています。
以下では、Fast Velocity Minify を含めて 7 個を簡単に紹介しています。

サイトのページ表示速度の高速化ができるWordPressプラグイン一覧

URL

Fast Velocity Minify – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

サイト高速化

Posted by 管理人