WEXAL Page Speed Technology の有効化

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

Page Speed Technologyの初期化

rootユーザーになる
Page Speed Technologyを有効化するために、rootユーザーになります。

sudo su -

プロビジョンされたディレクトリに移動
WEXALはKUSANAGIがプロビジョンされたディレクトリでのみ実行可能です。プロビジョンされたディレクトリまで移動します。以下は、プロビジョン名が、kusanagi_htmlの場合のコマンド例です。

cd /home/kusanagi/kusanagi_html

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

yum update kusanagi-prem

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

pst init --rebuildconf

Page Speed Technology の有効化

Page Speed Technologyの有効化
コマンドを実行したKUSANAGIのプロファイルにおいて、Page Speed Technologyを有効化します。

pst on

状態の確認
pst statusコマンドを実行し、WEXAL Page Speed Technology = onと表示されれば、有効化に成功しています。

pst status

リソースの最適化

Page Speed Technologyのコンテンツ、具体的には、DocumentRoot配下の画像ファイル・JavaScriptファイル・CSSファイルを一度に最適化します。

pst opt

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

pst opt /wp-content/uploads/2019

確認
実際に最適化が行われたのかを確認します。最適化コンテンツは、KUSANAGIプロファイルのwexalディレクトリ以下、optdirディレクトリに配置されています。
2019年12月にアップロードした画像ファイルを確認したい場合のコマンドを記します。

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

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

Page Speed Technologyの設定ファイルの編集

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

編集方法

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-ex-dev/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を付加して、アクセスします。

{your_web_site_url}/?pst=stg


https://prime-strategy.co.jp/?pst=stg

出力されたHTMLページの要素であるheadタグ内から、WordPressのver情報が消え、標準パスが短縮パスに置換されていれば、pst.stg.config.yamlの編集は成功です。

標準パス 短縮パス
/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

確認

ブラウザで本番サイトにアクセスし、headタグ内から、WordPressのver情報が消え、標準パスが短縮パスに置換されていれば、本番サイトへの適用は成功です。