【第7回】GCPの無料枠でdev.toなみの爆速WordPress環境を構築する(爆速設定編)

投稿者: | 2018年5月19日

dev.ioなみの爆速を実現するのに必要なWordpressのプラグイン

WordPress側で爆速を実現するのに必要なプラグインは下記の三つ。Wordpressのプラグインの「新規追加」からそれぞれのプラグイン名で検索すれば出てくるのでインストールしよう。

それではそれぞれのプラグインの設定について解説していく。

Instant Clickの設定

InstantClick」は、ページ間の移動を高速化してくれるもの。リンクテキスト上にマウスオーバーした時点でリンク先を取得し、リンクテキストをクリックした際にその取得したデータを表示させる。クリックした瞬間に次のページが表されるので体感的には待ち時間がほとんど感じられない。

ただJavascciptを使用している場合、動作しないものも出てくる。Google Analyticsも初期設定では動作しないが、下記の修正を加えれば問題なく稼働する。

InstantClickでGoogle Analyticsを動かす

InstantClickの設定画面にある「Custom JavaScript」に下記のコードをペーストする。ペーストする場所は参考画像のように「InstantClick.init();」の直前に挿入すること。

InstantClick.on('change', function() {
  ga('send', 'pageview', location.pathname + location.search);
});
Wordpress InstantClickの設定

これでInstantClickを導入しても無事にGoogle Analyticsでユーザの動きを読み取ってくれる。

InstantClick使用時のAdmin画面の不具合

InstantClick使用時のAdmin画面

InstantClickを使用時に通常ページから管理画面に入ると上記のように表示が崩れるが「再読み込み」すれば表示は直る。

Autoptimizeの設定

「InstantClick」でリンク先を先読みするには、読み込み先のHTMLも軽いほうがいいので「Autoptimize」で最適化しちゃいましょう。ついでもJavascriptとCSSも最適化しておく。

Wordpress Autoptimizeの設定

「Javascript オプション」では「Autoptimize からスクリプトを除外: 」の項目にカンマ区切りで「instantclick.min.js」を追加しておこう。でないと「InstantClick」が動作しなくなる。「PageSpeed Tools」のスコアにこだわるのであれば「すべての CSS をインライン化」にチェックを入れる。そうすれば「PageSpeed Tools」のスコアが劇的に改善する。

Cloudflareの設定

dev.toなみの爆速を実現するために今回は画像やCSS、JavascriptファイルだけでなくページのHTMLデータもCloudflareにキャッシュさせるので、投稿後にCloudflareのキャッシュデータを削除しなければならない。更新するたびにわざわざCloudflareのサイトへ行ってキャッシュを削除するのは現実的でないのでプラグインを入れて投稿時に自動的にキャッシュを削除する。

CloudflareのAPI key取得

まず、CloudflareからAPI key取得する。

CloudflareからAPI key取得

該当するドメインの「Overview」画面にある「Get Your API Key」をクリック。

CloudflareからAPI key取得

すると「My Profile」画面に移動する。「API Keys」の項目に「Global API Key」の「View」をクリック。

CloudflareからAPI key取得

登録時のパスワードを求められるので入力すれば上記のように「Global API Key」が表示されるのでコピーしておく。


スポンサーリンク
Wordpress Cloudflareの設定

次にプラグイン設定画面から「Sign Here」をクリック。

Wordpress Cloudflareの設定

Clouflareのアカウント作成時に登録したEmailと先ほど入手したAPI Keyを入力し「Save API Credentials」をクリック。

Wordpress Cloudflareの設定

すると設定画面が表示されるので「Automatic Cache Management」をオンにする。これをオンにすることで投稿、削除やテーマの設定を変更した時に自動的にClouflareのキャッシュが削除される。

dev.ioなみの爆速を実現するのに必要なClouflareのキャッシュ設定

次に画像やCSS、JavascriptファイルだけでなくページのHTMLデータもCloudflareにキャッシュさせるために特別な設定を行う。

Cloudflareの設定

まず「Cloudflare」にアクセスし、該当のドメインのメニューから「Page Rules」に入り「Create Page Rule」をクリック。

Cloudflareの設定

次に、ワイルドカードを使ってサイトのサブドメインを使用した場合の全データをキャッシュさせるように設定する。まずURLの項目に例のようにドメインをアスタリスク「*」で囲むようにし入力する。「free-wordpress.cf」の場合であれば「*.free-wordpress.cf/*」となる。そして「Cache Level」とし「Cache Everything」と設定する。これでページのHTMLデータもキャッシュされるようになる。

まとめ

これで完成だ。

爆速度合い

GTmetrix

計測結果

こちらは「GTmetrix」で計測した結果。3.6秒ではなく360ミリ秒なのである。運がよければ200ミリ秒台もたたきだせる環境となっている。それにオススメのテーマ(Iconic One)を使えばスコアもこのようにPageSpeed Scoreでは100%、YSlow Scoreでも97%を実現している。

PageSpeed Insights

そして「PageSpeed Insights」ではモバイルで「98」パソコンでは「99」という高いスコアを叩き出している。「PageSpeed Insights」でこのポイントを叩き出すのはなかなかの至難である。このポイントはWordpressのプラグイン「Autoptimize」のカスタマイズ設定によるものが大きい。

計測結果
計測結果

爆速デモ体験

さて気になる成果だが下記にリンクを二つ貼っておくので実際にご体験ください。

ちなみに当サイトもこれらと同じ環境で動いている。今まで一度もサーバは停止することなく安定して動作しているし、これらのプラグインを導入しても設定さえ気をつければ、Google AnalyticsもGoogle Adsenseも問題なく動作している。

しかし色々と不安もあるだろうから必ず定期的にバックアップしておこう。ちなみに定期的にWordpressをバックアップする場合のオススメは「UpdraftPlus – Backup/Restore」と「Google ドライブ」のコンビネーション。

ということで是非みなさんも今回紹介した方法でWordpressを構築してみてはいかがでしょうか。全て無料で構築できる方法なので気軽に挑戦できるだろう。しかし、もし本気でブログを始めるならドメインは有料の独自ドメインを取得するのを薦める。

では、みなさん。素敵なWordpressライフをお送りください。

【第7回】GCPの無料枠でdev.toなみの爆速WordPress環境を構築する(爆速設定編)」への1件のフィードバック

  1. ピンバック: 無料で副業開始?GCP(Google Cloud Platform)の無料枠でKUSANAGI Runs on Dockerを使ってみた | のうないあうとぷっと。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です