こんにちは、ハジメです。
今回は、そもそもこのサイト作り(ブログづくり)をするにあたって前提となっている「高速化」に焦点を当てていきたいと思います。
ここでいうサイトの高速化、とは、裏の仕組みの話ではなく、サイトの表示速度を速めてサイトを見て頂く方にストレスなくページを閲覧できるよう、高速にページを表示させることに軸を置いています。
サイトの高速化はサイトやブログを運営するにあたって非常に大事な要素になりますので、是非参考にしてください。
なお、ここまでのサイトの作り方については、下記をご覧ください。
では早速始めていきましょう。
KUSANAGIの設定を変更して、ページ表示速度を高速化する。
KUSANAGI for WordPressを使った場合の、サイトの高速化は非常に簡単に実施することができます。
主に実施する設定は下記のとおりです。
- 動的ページキャッシュの設定(bcache)
- 静的ページキャッシュの設定(fcache)
- 翻訳アクセラレーターの設定
- 画像最適化の設定
上記の4つ、これだけです。
この4つを導入するだけで、サイトの表示速度が目に見えて早くなります。個別にご紹介していきます。
KUSANAGIの高速化設定画面を開く。
まずはWordPress管理画面の左の黒帯ナビゲーションから、「KUSANAGI」を選んでください。
上記のような画面が表示されると思いますが、ここで高速化に関係する設定場所は「ページキャッシュ」と「翻訳アクセラレータ―」及び「画像最適化」のタブです。
以下で、各々の設定についてご紹介します。
KUSANAGIのページキャッシュ( bcache )を有効にする。
KUSANAGIのページキャッシュ(bcache)とは、WordPressの中に入っているKUSANAGIのプラグイン生成されるキャッシュの事で、データベースにキャッシュ情報を保存する動的キャッシュとなります。
データベースにはページ表示用のHTMLの情報がそのまま保管されているため、WordPressの本体(テーマファイル)にアクセスする必要なくページを表示することができるため、高速に画面描画ができます。また、データの変更点などを一定量システムがウォッチしてから結果を返すため、ある程度のページ変更に強いのも特徴です。
KUSANAGIの設定画面で、「キャッシュ」を表示させてみると、こうなります。
「ページキャッシュは有効になっていません。有効にするには、仮想サーバのコンソール上で、 kusanagi bcache on と入力してください。」と表示されていますね。では早速設定します。
まず、いつもの通りTeraTermを立ち上げてコンソールにログインし、現在の設定を確認します。
[centos@kusanagi80 ~]$ sudo kusanagi status Profile: wp-sample-blog FQDN: 54.250.67.232 Type: WordPress KUSANAGI Version 8.4.5-3 aws *** (active) nginx *** ● nginx.service - The NGINX HTTP and reverse proxy server Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; vendor preset: disabled) Active: active (running) since 土 2020-02-22 23:54:52 JST; 2 days ago *** (active) php7-fpm *** ● php7-fpm.service - The PHP FastCGI Process Manager Loaded: loaded (/usr/lib/systemd/system/php7-fpm.service; enabled; vendor preset: disabled) Active: active (running) since 土 2020-02-22 23:54:45 JST; 2 days ago *** (active) MariaDB *** ● mariadb.service - MariaDB 10.1.44 database server Loaded: loaded (/usr/lib/systemd/system/mariadb.service; enabled; vendor preset: disabled) Active: active (running) since 土 2020-02-22 23:54:58 JST; 2 days ago *** ruby *** KUSANAGI Ruby is not installed yet *** add-on *** *** Cache Status *** bcache off fcache off *** WAF *** off *** SELinux *** off (permanent) 完了しました。
「 *** Cache Status ***」のところに現在の設定が表示されてますが、現在は「 bcache off」と無効化されています。これを有効化します。
sudo kusanagi bcache on
[centos@kusanagi80 ~]$ sudo kusanagi bcache on onにします。 完了しました。
はい。これで設定完了です。念のため再度ステータスを表示してみます。
[centos@kusanagi80 ~]$ sudo kusanagi bcache bcache は有効です 完了しました。
bcashe onに変わっていますね。これでWordPress動的キャッシュ(bcache)の設定完了です。
画面でもインフォメーションが消えているのが確認できます。
KUSANAGIのページキャッシュ( fcache )を有効にする。
次はさらなる高速化として、fcacheも有効化します。
fcacheとは、FastCGI Cacheの略で、キャッシュはサーバー(WordPressと同時に導入したNginx)が行っています。 仕組みはbcacheとほぼ一緒ですが、保存する場所が違います。
bcacheはWordPressの中のデータベースでしたが、fcacheはデータをサーバーに保存しています。
これは、表示するべきそのままのHTMLをサーバの中に保存し、一切WordPressを経由しないで画面を表示してくれる機能です。超高速です。ただし、デメリットもあります。
記事を更新したり画面を更新しても、WordPressとは関係のないところでキャッシュがされてしまっているので、一切反映されないのです。そのために、次の設定と併用します。
「記事公開時に削除するキャッシュの範囲」を「記事とトップページ」 にしてください。そうすれば、記事を投稿や更新したときに、その記事のキャッシュと、一覧の出るトップページのキャッシュを同時に自動で消してくれます。
ではまずは設定を確認します。
「kusanagi status」でもいいのですが、fchaceの設定だけみます。
sudo kusanagi fcache
[centos@kusanagi80 ~]$ sudo kusanagi fcache fcache は無効です 完了しました。
設定が無効になっているので、有効にします。
sudo kusanagi fcache on
[centos@kusanagi80 ~]$ sudo kusanagi fcache on onにします。 Nginxを使用します。 nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful 完了しました。
正常に有効化できました。
fcacheは上記の説明の通りnginxを利用するため、同時にnginxの設定も変更されていますね。
これでfcacheの設定は完了です。
KUSANAGIの翻訳アクセラレーターを有効にする。
翻訳アクセラレーターは、多言語に対応しているWordPress本体、プラグイン、テーマ等の翻訳を停止、もしくは翻訳データをキャッシュさせることで翻訳の読み込みを高速化し、表示までにかかる実行時間を短縮してくれます。
日本語しか使ってないよ、という人も、WordPressの内部的には多言語化されていますので、こちらも有効にしておく必要があります。
また、こちらの設定をONにしないと、WordPressのナビが英語で表示されたりしてしまいますので、その面でも有効化したほうがいいですね。
翻訳アクセラレータ―自体はもともとONになっていると思いますので、そのままで。
「サイトに表示される翻訳された文章」の部分を「キャッシュを使用」に変えてください。それ以外はそのままで保存するだけで設定変更終わりです。
管理画面の上半分が英語だった人などは、このタイミングで日本語に変換されたのではないでしょうか。
KUSANAGIの画像最適化の設定をする。
画像最適化は、写真などのメディアのアップロード時にjpegファイルの画質調整、画像の最大幅の制限を行うことにより画像サイズを小さくし、表示の高速化を図ることが可能です。
なお、画像サイズは意味なく小さくするのではなく不要な大きさのものを適切なサイズに変えてくれるものですので、サイト上で汚く表示されたりすることはありません。
もし、他の画像系のプラグインを入れる予定がない方はここでONにしてしまいましょう。
上記の「画像最適化を有効にする」にチェックボックスを入れるだけです。
なお、僕はこの設定はOFFにしています。理由は別の優秀なプラグインを使っているためです。そちらを導入すると、
- 元の画像はそのまま残る
- WordPressのシステム合わせた最適な大きさの画像を複数作り、さらに高速化される
- WebPという画像配信方法に対応できる
という理由のためです。もし追加のプラグインを入れてもよい、という方はこの設定はOFFにしておいてください。
次回の記事で画像最適化・高速化専門のプラグインの導入についてご説明しますので!
以上で高速化設定は全て完了しました!
高速化された設定を確認してみる。
では、早速設定が導入されたサイトで表示速度を確認してみましょう。なおその際には必ず管理画面からログアウトしてください。ログアウトできている場合は、自分のページを表示しても、上の黒いナビゲーションバーが表示されなくなります。
1回目の表示速度は特に変わらないはずですが、もう一度リロードしてみると、読み込んだのかわからない速度で表示されるはずです。これが、上記まで設定したキャッシュの効果となります!
元々KUSANAGIは早いので、もともと早すぎて比較がわからない、ってこともあるかもです(汗
如何でしたでしょうか?導入の時の難しさに比べ、非常に簡単に設定できたのではないかと思います。
今回はKUSANAGIの高速化だけご紹介しましたが、次はCocoonの高速化設定もご紹介します。
ではまた次回お会いしましょう!
全カテゴリで人気コンテンツ TOP5!