ConoHa VPS でKUSANAGI ✕ WEXAL を導入する手順

10 min

WordPressやCMS の高速実行環境 KUSANAGI をさらにパワーアップさせるのが WEXAL (ウェクサル) Page Speed Technology です。

ConoHa VPS には かんたんKUSANAGI というコマンド不要でKUSANAGIをインストールできるテンプレートがあります。WEXALを導入するにはコマンド入力が不可欠ですが慣れない方でも比較的かんたんにKUSANAGIでWordPressを使うことができます。

かんたんKUSANAGI ✕ WEXAL PST Manager の登場でさらにパワーアップしています。分かりにくかった最適化もなんとボタンを押すだけです。

もちろん、すでにConoHa VPSでKUSANAGIを使っている場合でもWEXALを導入することが可能です。個人なら無償で利用できるので試してみましょう。

黒いコマンド画面を見なくてもWeb上でKUSANAGIをインストールできちゃいます。ただWEXALを導入するにはコマンド必須ですよ。

いまなら700円分のクーポンがつきます。いち早くWEXALを体験してみましょう!

ConoHa VPSの特徴
  • 初期費用なし
  • 料金は1時間単位で使った分だけ
  • かんたんKUSANAGI

700円クーポン付き!

約1ヶ月無料で使おう

ConoHaでWEXAL 導入するまでの手順

WEXAL を利用するにあたって手順を踏む必要があります。

  1. STEP

    ConoHa VPS を契約

    • アカウントを作成、支払情報を入力
    • 独自ドメインを用意

    ConoHa VPSではConoHa WINGや他のレンタルサーバーのような無料で使えるサブドメインは用意されていません。独自ドメインをまだ持っていない場合は、お名前.comムームードメインなどでドメインを入手しておきましょう。

    移転する場合は独自ドメインをそのまま使えます!

  2. STEP

    サーバー追加・KUSANAGI インストール

    新規サーバーを追加します。メモリ4GB以上推奨です。

    KUSANAGIのインストールはWeb上でガイドに沿っていくだけで完了します。

  3. STEP

    WEXALインストール

    KUSANAGI Premium ライセンスを取得後、WEXALをVPSにインストールします。

    ここからはコマンド入力が必要です。

WEXAL ってなに?

出典:DHT
戦略AI David
  • 最適なリソースへ置き換え (.jpg > .webp)
  • CSS、JavaScript の最適化
  • PSI、Lighthouse のスコアの向上

ごく簡単に言うと、KUSANAGIが内部(サーバー)の高速化、Wexalが外部(ブラウザレンダリング)の最適化を行います。

KUSANAGI だけでも十分高速化はされるのですが、Wexalを使うことでPage Speed Insight のスコアの改善が可能です。

オリジナルの要素には手を加えないのが特徴です。コマンド一つで Wexal のオンオフできるのでビフォーアフターの効果測定もしやすいです。

ConoHa VPS のアカウントを作成

すでにKUSANAGIを導入している場合はここを飛ばして下さい。

ConoHa VPSは初期費用がかかりません。なのでアカウントを作るだけなら費用は発生しないので安心して下さい。

支払いには以下のような方法を選択可能です。

  • クレジットカード
  • ConoHa カード
  • ConoHa チャージ (銀行振込、コンビニ払い、Amazon Payなど)

ConoHa カードは10%の学割が適用できるのでお得です。

クレジットカード、ConoHaカード、Amazon Payで支払った場合は即時使い始めることができます。他の支払いの場合は1営業日以内になります。

こちらの記事でConoHa の登録方法を紹介していますので登録方法が分からない場合は参考にして下さい。

KUSANAGI サーバーを追加

ConoHa VPSのアカウントの作成が完了したら、ログイン後コントロールパネルに移動します。

さっそく新規サーバーを追加しましょう。コントロールパネル左上の「サーバー追加」をクリックします。

サーバー追加
  • VPS > メモリ 4GB
  • イメージタイプ > かんたんKUSANAGI

サーバーのスペックを選択します。WEXALを利用する場合はメモリ4GB以上にしておきましょう。メモリ容量はあとからでも変更可能です。

イメージタイプ > アプリケーションをクリックして、「かんたんKUSANAGI」を選択します。

そして、VPSの rootパスワード をここで設定します。重要なパスワードなので英数字記号を含めた複雑なものを設定しておきましょう。

ネームタグは分かりやすい名前に変更するかそのままでもOKです。

ConoHa スペック
メモリは4GB以上推奨

メモリを大きく消費するのでKUSANAGIでは4GB以上にしておきましょう。

以下の画像は平常時でメモリを2GBを使っている状態です。WEXALが作動するとCPU使用率とともにメモリ使用量がアップするので余裕を持たせておきます。

Mackerel

つづいてSSHキーを登録しておきます。これはサーバーの管理に必要となるのでここで作っておきましょう。下の「オプションを見る」を展開して、SSHキーを新規作成します。

SSHキー追加

ネームタグには任意の名前を付けて、「+追加」をクリックします。

自動作成

自動的にSSH秘密鍵のダウンロードが開始されます。

キーダウンロード

SSHで接続する場合に必須になるので、なくさない場所に保存しておきます。Macなら「~/.ssh/」

インストール直後に実行する「スタートアップスクリプト」を設定できます。不正アクセスを制限する「Fail2ban」をインストールしておくとセキュリティが向上します。

fail2ban

これでサーバーの構成は完了です。右の「追加」をクリックしてサーバーを追加しましょう。

サーバー追加

700円クーポン付き!

約1ヶ月無料で使おう

KUSANAGI をインストール

少し待つとサーバーのインストールが完了します。

ここで、ネームタグをクリックすると「KUSANAGI manager」のウインドウが開きます。

KUSANAGIリスト

このウィンドウは閉じでOKです。

KUSANAGIマネージャーウインドウ

VPSのサーバー情報が表示されます。サーバーのIPアドレスはメモしておきましょう。

KUSANAGI を作成するため、一番左のアイコン「KUSANAGI管理」をクリックします。

  • ユーザー名 「root」
  • パスワード 「サーバー構成時に設定したもの」
ログイン

所有しているドメイン名「hogehoge.com」 > 取得がまだならお名前.comの格安ドメイン(.work .xyzなど)

メールアドレスを入力します。

ドメイン

取得したドメインをVPSのIPアドレスと紐付けておきましょう。

ここではお名前.comで取得した場合です。ムームードメインや、CloudFlareなどで管理している場合でも同様の作業が必要です。

お名前.com Navi へログイン

ドメイン設定 > DNS設定/転送設定 > 対象のドメインを選択

DNSお名前

DNSレコード設定を利用する をクリック

レコード設定

さきほど確認したVPSサーバーのIPアドレスを入力します。ホスト名は「xxxxx.com」であれば空欄でOKです。サブドメイン「hoge.xxxxx.com」にする場合は「hoge」と入れておきましょう。

最後にページ一番下の「確認画面へ進む」をクリック、「設定する」を押してDNSの設定は完了です。

DNS追加完了

DNSをVPSに向けたら続いて設定していきましょう。

DNSの設定

これで自動的にKUSANAGIの構築が完了します。

DNS完了

WordPressの設定を確認・SSL化

KUSANAGI WP設定

WordPress のデータベース名、DBユーザー名、DBパスワードをここで確認できます。

「サイト設定 > SSL化」 をオンにしてSSL(https)を有効にしましょう。DNS Aレコードが問題なく設定されていればすぐにSSL化されます。

WordPressの初期設定

https://xxxxx.com

にアクセスしましょう。DBなどの設定は不要でサイト名や管理ユーザーを設定するだけです。

WP設定

あとは通常のWordPressと同じように投稿、管理ができます。

ここからが本番です。WEXALを導入していきましょう。

KUSANAGI Premium ライセンスを取得

ConoHa のコントロールパネルにログイン後、「サーバー > 利用するサーバーのネームタグ 」をを選択

上部の左側のアイコンに「アップグレード」があるのでクリックしましょう。

KUSANAGI ライセンスの取得ページへ移動します。

KUSANAGI ライセンス

まず、WEXAL を利用するにはKUSANAGI ライセンスの切り替えが必要です。

KUSANAGI Premium または Business

といっても、KUSANAGI Marketplaceで個人であれば無償(0円)で購入・利用できますので安心して下さい。

KUSANAGI Marketplace に移動して、パーソナルライセンス エディション「Premium」を購入します。金額は0円でクレジットカードなどの支払い情報入力はありません。

パーソナルライセンス

カートに入れたら、お支払いへ進みます。

お支払へ

名前、住所、電話番号、メールアドレスを入力したら、利用規約にチェックして注文します。

支払情報

登録したメールアドレスにユーザー名とパスワードが書かれたメールが届くのでチェックしましょう。

そのままマイアカウントへ移動すると、プレミアムエディションのサブスクリプションキーが表示されるので確認しましょう。

KUSANAGI Marketplace マイアカウント

サブスクリプションキー

KUSANAGI WEXAL を利用する

ここからは SSHでのコンソール作業が必要になります。

ConoHa VPSのコントロールパネルに戻ってサーバーを選択した後、「コンソール」アイコンをクリックしましょう。

VPSコンソール

別ウインドウが開きます。ここにユーザー名「root」、パスワードは「サーバー構築時設定したrootパスワード」を入力します。

文字化けしてしまう場合は、一度このウインドウ以外の場所をクリックしてから戻ると直るかもしれません。

ログインできました。kusanagiユーザーのパスワードやMySQLのrootパスワードを確認できます。メモを取ったら書いてあるコマンドを入力して消しておきましょう。

通常はkusanagiユーザー

SSHを利用するときに常時rootユーザーを使うのは好ましくありません。通常の管理はkusanagiユーザーで行います。一度「exit」でログアウトしてユーザー名「kusanagi」、パスワードはコンソールに表示されていたものでログインできます。

コピペしたい場合は、上の「テキスト送信」でコピーした文章を貼り付けることが出来ます。

KUSANAGIログイン

外部SSHクライアントで接続する方法

ConoHa VPSのコンソールはコピペがしにくかったりして使いにくいです。

記事の最初の方でサーバー構成時にダウンロードしたSSHプライベートキー(秘密鍵)を使って別のSSHクライアントからSSH接続をしたほうが楽です。

SSH接続にはWindowsならTeraTermPuTTY、MacならターミナルやiTermが使われます。私は管理しやすいので、Termius を利用しています。使いやすいものでOKです。

Premium ライセンスキーに更新

アップデート

まずは、パッケージを更新しておきます。

ssh
yum update -y

さきほど取得したサブスプリプションキーを入力してPremiumライセンスに更新しましょう。

ssh
su -

# 取得したキーを入力してライセンスを切り替え
kusanagi upgrade kusanagi --edition premium --use personal --key XXXX-XXXX-XXXX-XXXX

yum install kusanagi-prem -y

プレミアムへアップデート

Wexalのインストールが始まるのでしばらく待ちます。

Wexal Page Speed Technologyの使い方

Wexal のマニュアルが公開されています。こちらをチェックしましょう。

ssh
su -
cd /home/kusanagi/プロファイル名(ドメイン名)

pst init

pst on

# pst の状態を確認
pst status

# PST Manager のパスワードを設定
pst passwd --user ユーザー名 --pass パスワード

WEXAL PST Manager にアクセス

http://ConoHaVPSのIPアドレス:61000/

上記のURL にアクセスしましょう。画面が表示されない場合は、ポートが空いていない場合がありますのでVPSの設定を見直して「全て許可に」チェックを入れましょう。PST Manager の設定が終わったらセキュリティ上チェックは外しておきます。

さきほど設定したユーザー名とパスワードを入力してPST Manager に移動します。

PST Manager

ダッシュボードを開いたら、上の3つのスイッチが全てONになっていることを確認します。

基本的に「AI自動戦略モード」になっていれば特に何かを設定する必要はありません。最適化AIがよしなにしてくれます。

除外させたいコンテンツなどがあるときに個別に指定するだけです。

AMP を使うなら

AMP (Accelerated Mobile Pages) を利用するときには、Javascript関連でエラーが出るので以下のような設定が必要です。

  • 最適化設定
  • 最適化除外ディレクトリ
  • ステージング

ここに「/amp」を追加して設定を保存をクリック。

Dashboard に移動して、「ステージングの設定を公開」すると設定が本番環境に反映されます。

おまけ:WEXAL を手動で設定する場合

PST Manager がなかったころの内容なので、ここは飛ばして 次の見出しまで移動してください。

pst init

wexal/optdir/wp-content/uploads/2020/x

のディレクトリを見るとしっかり.webpが生成されているのが分かります。

webp生成

あとWexal のマニュアル に沿って設定していきます。

WordPressの場合は、「wp」「worker」ディレクティブを編集します。

.yaml形式で、値を入れるときは「 [ ] 」を忘れず消しておきます。

SSH
pst edit

# 以下を修正・追加
pst: "on"

wp:
  wexal_init:
  - cmd: remove meta
  wexal_flush:
  - cmd: shorten url

本番環境適用前にステージング環境で確認するには、URLの末尾に以下の文字列を入力しましょう。

https://xxx.com/?pst=stg

shorten url 適用前

shorten url 適用前

shorten url を適用

shorten url 適用

CSSのURLが「/_wt/〜」に置換されました。

本番環境でWEXALを使う場合は、以下のコマンドを入力します。

SSH
# 本番環境へ適用
pst make

本番用のファイルはpst.config.yamlですが基本的に直接編集はしません。

pst edit > pst make を使います。

/home/kusanagi/プロファイル名/wexal/pst.config.yaml

下は編集例です。このままだとあまり効果はありませんでした。lazy loadなどは適用されているようですがスコアはほぼ変わりません。

SSH
worker:
  img:
    "":
    - cmd: auto
      args:
        quality: 60
        resize: 1920x1080
        strip: true
        jpegtran: ab
        pngquant: true
        optipng: o3
      exclude:
      - .png
    .webp:
    - cmd: auto
      args:
        quality: 60
        m: 6
        mt: true
      exclude:
      - .png
    - cmd: fast
      args:
        quality: 60
        m: 4
        mt: true
      apply:
      - .
  css:
  - cmd: auto
    args:
      compiler: cssnano,cleancss
      level: WHITESPACE_ONLY
      ab: true
      ie11: true
      ie11_ab: true
  - cmd: fast
    args:
      compiler: cssnano
      level: WHITESPACE_ONLY
      ab: false
      ie11: false
      ie11_ab: false
    apply:
    - .
  js:
  - cmd: auto
    args:
      compiler: gcc,terser
      level: WHITESPACE_ONLY
      ab: true
      ie11: true
      ie11_cp: babel
      ie11_ab: true
  - cmd: fast
    args:
      compiler: terser
      level: WHITESPACE_ONLY
      ab: false
      ie11: false
      ie11_cp: babel
      ie11_ab: false
    apply:
    - .
lua:
  fcache:
    enable: 1
    exptime: 60
  header_filter: []
  body_filter: []
wp:
  wexal_init:
  - cmd: remove meta
  wexal_head: []
  wexal_enqueue_opt:
  - cmd: remove css
  wexal_footer: []
  wexal_flush:
  - cmd: shorten url
  - cmd: repair jquery
  - cmd: reduce script
    args:
      apply_script: jquery
  - cmd: lazy load
    args:
    - element: picture
      skip: 2
    - element: img
      skip: 3
    - element: iframe
      disable: true

AI を使った設定方法

戦略AI David (デイビッド)を使うと、手入力で設定を編集する必要もなく自動で最適なレンダリングされるように設定ファイルを作ってくれます。

SSH
cd /home/kusanagi/プロファイル名
pst ai config

記事数によって時間がかかりますのでしばらく待ちましょう。

AI

wexal/pst.david.config.yaml というファイルができるので、pst.config.yamlと入れ替えます。

ただし、表示ができなくなる場合があるので、必ずバックアップをしておきます。

SSH
mv wexal/pst.config.yaml wexal/pst.config.yaml.bak 

cp wexal/pst.david.config.yaml wexal/pst.config.yaml 

Lighthouseで計測

Chrome の拡張機能を使って計測できます。

同ページをビフォーアフターで計測してみました。

  • プラグインなし
  • 記事内には写真5枚と1,300文字程度

KUSANAGI インストール直後

2020テーマ

twenty-twentyテーマでは当然のようにスコアは100になります。

SANGO テーマの場合

SANGO + Poripu テーマを入れて計測。設定はいじらずそのままです。

WEXAL 適用後

AI を使わずに、WEXALのマニュアル通りに設定ファイルを作って適用してみました。もともとスコアが高いからかはほとんど変わってませんね。

テーマによっては、Lighthouseのアドバイスを見ながら子テーマを手動で編集するだけでもスコアは改善します。またメタディスクリプションや画像にALTをつけるようにしましょう。

autoptimized

ここで、pst on 、 pst off を切り替えるとWEXALの効果が実感できます。明らかに First Contentful Paint の速度が上がるのが確認できました。

700円クーポン付き!

約1ヶ月無料で使おう

関連する記事

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

FOLLOW

関連記事

2 件のコメント

    • 最適化が実行されているときは瞬間的にCPU使用率(〜50%くらい)が高くなりますが、それ以外はCPU使用率は数%で推移していますね。
      メモリ使用率は高いですが…

コメントを残す

メールアドレスが公開されることはありません。