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

前回【第6回】GCPの無料枠でdev.toなみの爆速Wordpress環境を構築する（Wordpress設定編）ではWordpressの環境を構築のWordpressの初期設定などを終わらせたので今回【第7回】GCPの無料枠でdev.toなみの爆速Wordpress環境を構築する（爆速設定編）はdev.toなみの爆速Wordpress環境を構築していこうと思う。

「爆速」を実現するための基本的な構造はdev.toのそれと近い。

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

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

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

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

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

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

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

現在、こちらの「Page Rules」を使用してのキャッシュ設定はセキュリティの観点から使用しないことをお勧めします。一般の訪問者にWordPressの管理バーが表示されたり管理者でないと表示されない項目などが表示される可能性があります。下記の設定を施す場合は、これらの点を理解した上で設定してください。またユーザー設定内で「サイトを見るときにツールバーを表示する」のチェックを外しツールバーを非表示にしておいてください。

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

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

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

これで完成だ。