Site Overlay

さくらインターネットでJetpackとCloudFlareを使ってWordPressをAMPで運用してみよう

さくらインターネットでホスティングサービスの契約して動かしているこのサイト。先日ドメインの管理もさくらさんに移動完了したところです。そしてWordPressを快適な運用を目指し、Jetpackを使いつつCloudFlareも使いつつ更にAMP for WPを導入して見たので忘備録的に。
※2019/04/19 AMP Conf系のTwitterを見ていてアッこれはと思ったものを追記。

使用したプラグイン一覧

Jetpack by WordPress.com

Cloudflare

AMP for WP – Accelerated Mobile Pages

目的

まずはさくらインターネットで運用しているこのサイトを、わざわざCloudFlareというCDNを使う理由ですが、Lighthouseの数値を上げたいだけです。上がらないのならCloudFlareは切ります。
※2019/04/19追記 しかし先日のAMP ConfのTwitterのログを追うと、どうもCloudFlareを使っておくべきという方向みたいなのでこのサイトならいくらでもいじれるという強みから続投します。SXGの実装が恐らく私では無理です。ならCloudFlareを続投させてその強みを活かしましょう。

https://techblog.yahoo.co.jp/web/trial_sxg/

次にJetpackですが、やはり便利です。昔ほど数値に影響はでなさそうですし、画像及びソーシャル関係との連携、後見逃してならないのはsitemap.xmlの生成に一目置いています。更にAMP for WPを導入することでより快適なモバイル環境での閲覧を目指します。

組み合わせとしては、HTML/CSS/JSファイルはCloudFlareで圧縮及び呼び出し、画像ファイルはJetpackで圧縮及び呼び出し。更にAMP for WPをこれに組み合わせることで運用が出来ればきっとLighthouseの数値も良くなるはずという想定です。そこにCloudflareの機能を上乗せで謎の方向へと進みつつある…。

作業内容

    1. WordPressにJetPackを導入
      特に説明は要らないと思います。この段階でWordPress.comのアカウントを作っておき、プラグインの自動アップデートなどの設定をしておくと楽です。
      ※ただしプラグインの自動アップデート設定はコンフリクトの原因となるので自己責任レベルです。
    2. CloudFlareのアカウントを作りNSを書き換えてHTML/CSS/JSをCloudFlareから呼び出すようにする
      さくらインターネットでNSの書き換えを行ったのが初めてだったので、どこからやるのか分かりづらかったのですが、会員メニュー→ドメインメニュー→Whois情報から書き換え可能でした。
      ※2019/04/19追記 CloudflareのSpeedの所に下記のような項目が増えてました。前からあったかわからないですがONにしてみました。おそらくこれがSXG系の機能ということでしょう。

      さくらインターネットでJetpackとCloudFlareを使ってWordPressをAMPで運用してみよう
      Cloudflare設定画面 Chromeで日本語化

    3. WordPressにAMP for WPを導入
      これが一番難易度が高いです。Chromeで日本語翻訳しながらやることをおすすめします。なおAMPProjectさんのAMPは私はあんまり好きではないので入れてません。
      ちなみに現段階で調べた結果AMP for WPとContactForm7とreCAPTCHAはバッティングします。reCAPTCHAを切ればContactForm7は動く模様です。有料プラグインが紹介されていたのですがあまりに高価過ぎる汗ので、とりあえずはreCAPTCHAを外してAkismetを復帰させました。

実装からの各種ベンチマークサービスでの測定結果

さて、AMP周りの事があるのでしばらくCloudFlareで行こうということにしたので早速数値を測ってみましょう。多少低くてもいいです。

さくらインターネットでJetpackとCloudFlareを使ってWordPressをAMPで運用してみよう
Lighthouse測定結果
さくらインターネットでJetpackとCloudFlareを使ってWordPressをAMPで運用してみよう
PageInsightsモバイル測定結果
さくらインターネットでJetpackとCloudFlareを使ってWordPressをAMPで運用してみよう
PageInsightsパソコン測定結果
さくらインターネットでJetpackとCloudFlareを使ってWordPressをAMPで運用してみよう
GTmetrix測定結果
Share