Googleの「Page Speed Service」を使ってみた

WordPress

Page Speed Icon

自動でWebサイトを高速化してくれる「Google Page Speed Service」(PSS)を使ってみたよ。

いま www.hide10.com にアクセスしているヒトは、PSS適用後の「高速化済みページ」が表示されているはずです。

Page Speed Serviceの導入

現在「Page Speed Service」は限定的な無償トライアル中です。試してみたい人は、リンク先ページから「Sign Up」ページに飛び、必要事項を記入して送信しましょう。

数日～数週間すると、メールで「使えるようになったよ」という連絡が届くはずです。

その後、Google APIs Consoleにアクセスし、「Page Speed Service」の「DomainSetting」から設定変更を行います。詳細は「Initial Setup」を参照して貰うとして、ザックリ説明するとこんな感じ。

  1. 高速化するWebサイトのドメインを登録する
  2. ドメインの認証を行う
  3. 参照用ドメインの設定を行う
  4. DNS CNAMEを登録する

たったこれだけの設定で、サイト上にある全ページが、自動で勝手に「最適化された高速なページ表示」に変わります！

PSSの設定例として、ウチのサイトのDNS設定を張っておきますね。サイト側での対応はコレだけで済みました。
DNS設定例

上記設定の簡単な説明は以下の通りです。

  • “txt @ google-site-verification=xxxxxx"がドメイン認証設定
  • “a ref.hide10.com 49.212.18.239″が参照用ドメイン設定
  • “cname www ghs.google.com."がCNAMEの登録

設定変更後のPSS動作をおおまかに説明すると…

  1. “www.hide10.com"へのアクセスが"ghs.google.com."に飛ばされる
  2. “ghs.google.com."は"ref.hide10.com"を参照して元データを取得
  3. PSSが適切な「高速化済みページ」を"www.hide10.com"として表示する

と言う感じになります。

表示速度比較

PSS適用後の速度アップを確認するため、「WebPagetest – Comparison Test」を利用して、サービス適用前後の比較動画を作ってみました。

Google Page Speed 適用前後 – YouTube

描画終了までが1割近くスピードアップしてる！画像が表示されるのも速い！

サイトの表示速度は早いに越したことはないので、PSSを使うメリットはありそうですよ。

画像圧縮比較

PSSには、自動で画像を圧縮する機能も付いています。

圧縮による画質の違いを確認するため、比較画像を作ってみました。左が元画像でファイルサイズ166kB、右が圧縮後の画像で57kBです。

ブログ上で見るとPSSの圧縮が効いちゃうので、画像をクリックしてオリジナル画像を参照して下さいね。
GooglePageSpeed適用前後

よーく見ると違いがあるけど、このサイズの画像なら気にならないレベルじゃない？

ウチは画像が多めだし、圧縮による速度アップが大きく期待できそうですよ♪

Ktai Styleはオフにした

PSSは自動でページキャッシュが有効になる上に、動的にキャッシュの状態や内容を制御することが出来ません。

そのため、Ktai StyleなどのUAによって表示を切り替えるプラグインが動作していると、ユーザーのアクセスによってキャッシュする内容が決まってしまうことになります。

結果的にはPCアクセスなのにケータイ画面が表示されちゃったり、ケータイアクセスなのにPC画面が表示される不都合が発生します。

そんなワケでPSSを敬遠していたのですが、今回は試しにKtai Styleをオフにしてみました。これでしばらく運用を続け、アクセス数やアフィリエイトへの影響を探ってみようと思っています。