もうWordPressにwebPプラグインはいらない!そう、KUSANAGIならね

2020年3月22日

スポンサーリンク

KUSANAGI Premium

みなさんこんにちわ、WordPressとKUSANAGI大好きな筆者です。

今回はWEBPのお話。

実は少し前にKUSANAGIをPRIMEUMバージョンにアップグレードしました、個人でやってるので無料ならやるしか無いよねってことですぐアップグレード。

そんでそのときは入れるだけで高速化されるなら楽でいいなーと思ってたら実は目からウロコな機能がいくつかあったり、既存の最適化プラグインが不要になる機能も内蔵されていることがわかりました!

その中の一つがwebP生成機能です!

Page Speed Technology

さて、KUSANAGI Premiumに追加された新機能Page Speed Technology(以下PST)

この機能の一つにwebP生成機能があります!!

つまり今まではwebP Express等のプラグインが必要だったのにソレが不必要に!!
(まあPSTはGUIがないから扱いにくいが慣れればwebPExpressより高速なはず)

ちなみにwebP画像への変換はUploadのフォルダ以外もできます、テーマもwebP化してくれるわけっすね。

また、KUSANAGIの画像最適化機能はオリジナルの画像を最適化するのでpstの最適化と便用はおすすめしません。(オリジナルの劣化に加え、pstの最適化で二重最適化されたのがブラウザに表示される為)

じゃあ早速設定していきましょう。

設定方法

一応本家ドキュメントおいておきます。

では早速やっていきましょう!

既存の画像の最適化

とりあえず既存の画像を最適化したい方はこのコマンドを実行します。
ただし画像の量が膨大な方はフォルダ指定を細かくしてください!!

まずはcdコマンドでプロビジョンされたプロファイルに移動します。
# cd /home/kusanagi/"プロファイル名"

次に最適化コマンド2種を実行(テーマの最適化不要の人は前者だけ)

pst opt_image /wp-content/uploads 
pst opt_image /wp-content/themes

これで既存の画像が最適化されます、最適化された画像はプロファイル内のwexalのopt_dir内に出力されます。

つまりオリジナルの画像は消えず、最適化された画像に置き換わるだけですね。
あとで品質を変えたりした際に最適化された画像を消して再生成することも可能です。

ちなみに pst opt_image だけですと DocumentRoot 内以下全ての画像系が最適化されたのが出来上がりプラグイン含め表示されるのはwebP等になります。

さらにこのPST優秀で、ブラウザがwebP非対応の場合webP以外の最適化された画像が表示されます。

例: オリジナルjpgを最適化した場合
webp版
最適化jpg版
が生成され、ブラウザに合わせて最適化された画像が表示されます。

つまりサーバー側の容量が増えます()

また、ログイン中だとwebp表示されませんでしたがシークレットモードで確認したところちゃんとwebPで読み込まれています。
Nginxやリダイレクト設定は自動でしてるようです。

最適化設定

次は最適化する画像に品質設定

まずは設定するプロファイルにcdで移動しておいてください。

次に pst editで設定ファイルの編集モードに移行しまう。

 26 worker:
 27   img:
 28     "": []
 29     .webp: []
 30   css: []
 31   js: []
 32 lua:
 33   fcache:
 34     enable: 1
 35     exptime: 60
 36   header_filter: []
 37   body_filter: []
 38 wp:
 39   wexal_init: []
 40   wexal_head: []
 41   wexal_enqueue_opt: []
 42   wexal_footer: []
 43   wexal_flush:

デフォルトでは26行目からこうなってるはずです。

今回は29行目のwebPの設定を追加します。

設定項目を追加した構文がこちら

 26 worker:
 27   img:
 28     "": []
 29     .webp: 
 30     - cmd: fast
 31       args:
 32         quality: 60
 33         m: 4  
 34         mt: true
 35   css: []
 36   js: []
 37 lua:
 38   fcache:
 39     enable: 1
 40     exptime: 60
 41   header_filter: []
 42   body_filter: []
 43 wp:
 44   wexal_init: []
 45   wexal_head: []
 46   wexal_enqueue_opt: []
 47   wexal_footer: []
 48   wexal_flush: 

32~34行目にwebPの品質設定の項目を追加しました。

quality: 60
m: 4
mt: true

この3つはデフォルトの数字ですので、このままでいい人はこの設定を追加もする必要はありません。

重要!!2行目にpst “OFF"となってるのを pst “on"に書き換えてください!!

変える人は追加後、数字を変えてください。

また30行目 fast を autoにすることでより精度の高い品質になりますが、fastより生成が遅いです。

最後にvimを:wqコマンドで保存終了、エラーが出なければ
pst make
コマンドでサイトに反映されます。

詳しい説明はここです

以上でpst のwebP最適化説明終了です、わからないことがあったらコメントしてください、一緒に悩みます(汗)