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