今回はWordPressとEzoic Cloudの両方でウェブサイトの表示に関わる部分の設定を行いページ表示の高速化を行います。Ezoicは広告目的で導入する人が多いかもしれませんが、ページ表示の最適化？(高速化)も導入の大きな動機になる部分です。
WordPressのEzoicプラグインの設定
WorePressの管理パネルにログインし、メニューの「設定」から「Ezoic」をクリックします。
上部のタブで「CDN Settings」を選択します。
Ezoic API Keyの設定を行いますが、まだそのキーを取得していないので「You can find your API key here」のリンクを開きます。(次へ)
EzoicのウェブサイトにログインするとAPI Gatewayのページが開きます。本来なら、ここでAPIキーが表示される筈ですが、このページは正常ではないようです。(次へ)
上部の「 Settings」をクリックする。
左メニューから「API」を選択する。
こちらのAPI Gateway画面は正常に機能する模様。
APIキーは*で伏せ字になっていますが、「」で文字表示、「」でコピーできます。コピーして次へ。
WordPress管理パネルの「設定」から「Ezoic」をクリックした画面に戻ります。
「Ezoic API Key」のテキストボックスにコピーしてきたAPIキーを貼り付けます。
APIキーの他の設定の内、「Automatic Recaching」と「Purge Home」が「Enable」になっていることを確認しておきます。
左下の「Save Settings」をクリックしてAPIキーと設定を保存します。
ページ上部のタブから「Speed Settings」を選択します。
このページの9つの設定は、WordPress側(Ezoicプラグイン)で行えるページの最適化に少し関わる部分です。
それぞれ有効化/無効化すべきかは各ウェブサイトによって選択が異なりそうです。どうするのがお薦めというのはありません。ただし、WordPress管理者自身で既にfunctions.phpに挙動を指定している、テーマで挙動が定められているものについてはその設定は無効化しておけば良さそうです。Speed Settingsという名称ではあるものの、表示速度に大きく関わるものではないようですので、どうでも良いよいと思っても良さそうです。
ページ上部のタブから「Advanced Settings」を選択します。
このページの2つの設定はEzoic Cloudを使用するなら基本的には変更することはない筈です。
設定を変更しないので「Save Settings」をクリックする必要もありません。
EzoicウェブサイトでLeapの設定
Ezoicのウェブサイトにログインし、上部のアイコンから「Leap」をクリックします。
Leapの概要ページが表示されます。特に最初は左列のメニューを使うことになります。(次へ)
左列メニューから「Optimize」をクリックします。
右列はCND側で行われる最適化の有効化/無効化を選択する画面です。
種類ごとに個別にオンとオフを選択できるだけでなくAdvanced Settingsで詳細設定も行えます。基本的には全てOnにしておけば良いですが、自身で徹底して最適化済みであればその機能はOffにしても良い筈です。特に、CSSと画像についてはEzoicによる最適化はソースを見ると決して気持ちの良いものではないので、自身で完全に最適化してスイッチオフの方がスッキリします。自身での最適化は中上級者向けなので、難しいことはよくわからないという方は素直にEzoicによる最適化に頼ってください。
また、閲覧者のデバイスの種類に応じて最適化を適用するかを選択できます。PC, スマホ, タブレットに向けて最適化の有無を指定できるということです。こちらも基本的には全てOnで良い筈です。
設定が終わったら右上の「CHANGE SETTINGS」をクリックします。
最適化をオンにした場合にページ表示で問題が発生することがあります。確認しておきましょう。
「Next」をクリックします。
「GO TO PREVIEW」ボタンを押すと別タブでウェブサイトが表示されるのでレイアウト崩れや表示される筈の要素が表示されないなどの異常がないか確認します。
ボタンの下にチェックリストがあるので活用すると良さそうです。1つのページだけでなくなるべく複数のページで異常が発生していないか確認しておきましょう。
問題がなければ「NEXT」をクリックします。
「ACTIVATE」ボタンで設定がウェブサイトに反映されます。
ボタンをクリックするとLeapのOptimizeの最初の画面に戻り、ロケットが打ち上がります。
これで最適化は終わりです。
左列メニューから「Caching」をクリックします。
右の「ENABLE CDN」ボタンをクリックします。
これでCDNのキャッシュ機能が有効化されます。これが有効化されるまで高速化されません。
通常の運用時はCDNによりキャッシュがオンの状態を保ちます。その状態ではボタンは「DISABLE CDN」と表示されています。このボタンをクリックするのは特に理由があるときに限定される筈です。
逆に、一旦すべてのキャッシュを削除する、特定のページのキャッシュを削除するというのはときどきある筈です。CSSやJavascript、テーマのHTMLに変更を加えることが多ければ特に頻度が高いでしょう。
投稿/固定記事の本文を編集した場合はWordPressにインストールしたEzoicプラグインとCDNが連携しているので自動的に編集前の記事のキャッシュが削除されます。このページで記事URLを指定してキャッシュを手動削除する必要はありません。
左列メニューの「Resources」はドキュメントなので操作するものはありませんが目を通しておきましょう。
Leapによる最適化と高速化は「表示が異常にならなければ」という限定条件ですが簡単といえます。
Ezoicによる高速化/最適化の結果
参考としてこの「がとらぼ」のトップページをPageSpeed Insightsで計測してみました。「がとらぼ」は自前のウェブサーバにありCDNを使用していませんが、AdSenseの広告のコードの出来が悪くなければ得点としては100点を得ることができます。Googleからの計測では「がとらぼ」のTTFB(最初の応答までの時間)はおおよそ400ms程度です。これは遅いというほどではないものの決して速くもありません。できれば200ms以下を狙いたいところではありますが、日本の中でもネットワーク的には辺境に位置するので改善は難しいでしょう。どうしても速くしたければCDNを使うことになるでしょう。そして、LCP(画像等を除くページがドカッと表示されるまでの時間)もGoogleからは1.6秒ということです。これは米国の閲覧者だと「がとらぼ」のリンクをクリックしてから少し間があって表示されるように感じることになるでしょう。つまり速くはありません。日本からの閲覧なら、もう少しマシそうです。
今回Ezoicを利用するサイトですが、CDNキャッシュを有効化する前なので高速化はされていません。閲覧者はCDNを介してサイトにアクセスしているような状態なのでCDN利用前よりも僅かに遅いかもしれません。LCPが「がとらぼ」より遅いのがその現れかもしれません。このサイトは「がとらぼ」とは異なりPageSpeed Insightsですべての点数が100点取れるようにはなっていませんが、それでも「がとらぼ」と同じWordPressテーマを使用しているので高得点は取れています。(このせいでCDN利用による改善を実感しにくいですが)
今回Ezoicを利用するサイトで、CDN側のキャッシュを有効化した状態です。
「パフォーマンス」の得点がキャッシュ使用前の96点から100点に向上しています。他の「ユーザー補助」「おすすめの方法」「SEO」の点数は変わっていませんが、元の点数が低ければ改善があったかもしれません。LCPは、キャッシュ使用前の2.8秒から1.6秒に改善していますが、これはCDNを利用していない「がとらぼ」と同じなので速いとはいえません。PageSpeed InsightsではLCPは遅めの表示になりやすいのでしょうか。
GTmetrixでCDN側のキャッシュを有効化した状態で計測しました。
この計測では、TTFB 109ms、LCP 359msという非常に嬉しい結果が出ています。
こちらは「がとらぼ」をGTmetrixで計測したものです。TTFB 382ms、FCP 640ms、LCP 1.3秒ということでなるほど速くはないです。これと比べるとEzoic Cloud (CDN)を使ったサイトは素晴らしく速くなっていますね。
次回こそ、広告周りを。
関連記事: