WEXAL® Page Speed Technologyの有効化

WEXAL® Page Speed Technology(以下、PST)が有効になるように設定をしていきます。

PSTの初期化

rootユーザーになる

PSTのコマンドを利用するため、rootユーザーになります。

sudo su -

もしくは

su -

プロビジョンされたディレクトリに移動する

PSTはKUSANAGIでプロビジョンしたディレクトリ以下でのみ実行できます。
プロビジョンしたディレクトリまで移動します。以下はプロファイル名がkusanagi_htmlの場合のコマンド例です。

cd /home/kusanagi/kusanagi_html

PSTをアップデートする

PSTのバージョンを最新にアップデートします。

yum update kusanagi-prem

PSTの初期設定をする

PSTの初期設定を行います(オプションの詳細は、pstコマンドを参照ください)。

pst init

「PSTの有効化」から先は、コマンドライン上からPSTの設定を進めていく手順です。

pst init が完了すると、専用管理画面のURLが発行されます。
例:http://xxx.xxx.xxx.xxx:61000

WEXAL PSTでは、専用管理画面を用意しております。専用管理画面から設定を進めていく場合は、 WEXAL® PST Manager ご利用開始手順(最初のステップ) へ進んでください。

PSTの有効化

PSTを有効にする

PSTの初期設定を行ったKUSANAGIのプロファイルにおいて、PSTを有効化します。

pst on

PSTの状態を確認する

pst statusコマンドを実行し、WEXAL Page Speed Technology = onと表示されれば、PSTは有効になっています。

pst status

リソースの最適化

リソースを最適化する

KUSANAGIのプロファイル配下のリソース(DocumentRoot配下の画像ファイル・JavaScriptファイル・CSSファイル)を最適化します。

pst opt

リソースの数が多い場合、最適化に時間がかかります。最適化を行う対象ディレクトリを限定することで、かかる時間を短くすることができます。以下は/wp-content/uploads/2019配下を対象にしたコマンド例です(オプションの詳細は、pstコマンドを参照ください)。

pst opt /wp-content/uploads/2019

最適化の結果を確認する

最適化が問題なく行われたかを確認します。
最適化したリソースは、KUSANAGIのプロファイル直下にあるwexalディレクトリ以下の、optdirディレクトリ (wexal/optdir/) に配置されます。
以下は、プロファイル名をkusanagi_htmlとしてプロビジョンしたWordPressの管理画面から、2019年12月中にアップロードしたリソースの最適化済みリソースを確認する場合のコマンド例です。

cd /home/kusanagi/kusanagi_html/wexal/optdir/wp-content/uploads/2019/12
ls -la

.largeや、.webpがあれば最適化が行われたとみなせます。

PSTの設定ファイルを編集する

ここまでで、PSTを有効化し、リソースの最適化を行いました。リソースをどのように配信するのかを、PSTの設定ファイルに記述していきます。
wexalディレクトリのpst.config.yaml(wexal/pst.config.yaml)が、PSTの設定ファイルです。

※ 自動的にWebサイトを解析して最適なPage Speed Technologyの制御を行うためのPSTの設定ファイルを作成する場合は、pst AI configコマンドを実行します。

編集方法

pst.config.yamlファイルの記述に誤りがあった場合、Webサイトが表示されなくなるといった不具合が出ることがありますので、直接編集はしません。
カスタマイズ用の設定ファイルは、wexalディレクトリ以下、userdirディレクトリのpst.config.yamlにあります(wexal/userdir/pst.config.yaml)。
pst editコマンドで、このカスタマイズ用の設定ファイルを編集できます。以下はプロファイル名がkusanagi_htmlの場合のコマンド例です。

cd /home/kusanagi/kusanagi_html/wexal/
pst edit

編集終了後、設定ファイルの記述に誤りがなかった場合は、ステージング用の設定ファイル(wexal/pst.stg.config.yaml)を自動生成し、内容が即座に反映されます。
設定ファイルの記述に誤りがあった場合は自動生成されません。編集前の設定が継続して有効となります。

記述する内容

WordPressサイトならwpディレクティブやworkerディレクティブを、それ以外のサイトならluaディレクティブやworkerディレクティブを、設定ファイルに記述します。
例として、

  • WebP画像フォーマットの画像最適化の方法を指定するために、workerディレクティブに、.webp
  • WordPressでmetaタグを出力するハンドルを抑制するために、wpディレクティブに、remove meta
  • WordPressの標準パスを短縮パスと置換しURLを短縮するために、wpディレクティブに、shorten url

を記述します。

---
pst: "on"
watch: "on"
tdir: /home/kusanagi/kusanagi_html/DocumentRoot
odir: _wexal
timezone: Asia/Tokyo
protocol: https
mobile_pattern: Android .+ Mobile|\(iPhone|\(iPod|IEMobile|Android; Mobile; .+Firefox|Windows
  Phone
tablet_pattern: ' Android |\(iPad|Android; Tablet; .+Firefox'
conf:
  editor: vim
  format: yaml
options:
- wp
global_exclude:
- /_wexal
- ~$
- /\.
- /wp-admin
- /wp-includes
- /wp-content/upgrade
- /wp-json/
watch_additional_exclude: []
worker:
  img:
    "": []
    .webp: []
  css: []
  js: []
wp:
  wexal_init:
  - cmd: remove meta
  wexal_head: []
  wexal_enqueue_opt: []
  wexal_footer: []
  wexal_flush:
  - cmd: shorten url
...

wexalディレクトリ以下、config_sampleディレクトリ(wexal/config_sample/)に設定ファイルの記述例があります。
また、各ディレクティブの詳細に関しては以下を参照ください。

ステージング用の設定確認

ステージング用の設定ファイル(wexal/pst.stg.config.yaml)が自動生成されたかを確認します。以下はプロファイル名がkusanagi_htmlの場合のコマンド例です。

ls -la /home/kusanagi/kusanagi_html/wexal/pst.stg.config.yaml

作成時刻が、編集完了後の時刻と一致することを確認できたら、ブラウザで表示を確認します。サイトのURLに、?pst=stgというquery stringを付加してアクセスします。
例)https://prime-strategy.co.jp/?pst=stg

remove metaを設定ファイルに記述していた場合、headタグ内からWordPressのバージョン情報を示すmetaタグが削除されています。shorten urlを設定ファイルに記述していた場合、以下の表に合わせて標準パスが短縮パスに置換されています。
このような変化が見られていたら、ステージング用の設定ファイルの編集は成功です。

標準パス 短縮パス
/wp-content/uploads /_wu
/wp-content/themes /_wt
/wp-content/plugins /_wp
/wp-includes /_wi

この設定は検証(ステージング)用の設定になります。?pst=stgというquery stringを付与しない限りは反映されない設定です。

本番用の設定ファイルに適用

ステージング用の設定ファイルで問題ないことが確認できましたので、この設定ファイルを本番用の設定ファイルに反映します。以下はプロファイル名がkusanagi_htmlの場合のコマンド例です。

cd /home/kusanagi/kusanagi_html/
pst make

本番用の設定ファイルの反映確認

サイトにアクセスし、設定ファイルの記述に合わせてコードが書き換わっていれば、本番用の設定ファイルへの反映は成功です。