Webサイトを高速化するGoogle製PageSpeed Serviceを試してみた

最近めっきり放置気味のブログですが、時間の許す限り頑張って更新を続けます。
そんなわけで久々に Google AdSense の管理画面をみてみたら、いろいろと機能が追加されていました。管理画面トップの右下に見慣れないスコアカードなるものが・・・。
むぅ・・・評価が低い。収益の最適化のレーティングが低い原因はクローラーエラーのためですが、当方で修正できないURLへの404エラーなので無視。サイトの状況のレーティングが低いのはサイトが遅いからのようです。

img001.png

というわけで Google のウェブパフォーマンスツール Page Speed Insight を使ってチューニングを試みました。

- スポンサーリンク -

Page Speed Insight から解析したいページの URL を入力することで、そのページの問題点を洗い出してくれます。今回は比較的画像が多い URL を入力してみました。
うーん・・・困ったものです。モバイル表示56点、PC表示55点と惨憺たる結果です。

img004.png

上位の問題から順に見ていきます。

(1) 圧縮を有効にする
対応策として「gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます」とのことですが、残念ながら広告やヴィジェットなど外部サービスのリソースに対する警告なので、僕が改善できる範囲ではありません。

(2) スクロールせずに見えるコンテンツのレンダリングブロック Javascript/CSS を排除する
対応策として「ブロッキング リソースを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。」とのことです。今回はヘッダー内で読み込んでいる下記の Javascript と CSS がブロッキングの対象でした。 

<link rel="stylesheet" href="http://www.drk7.jp/MT/css/styles_opt.css" type="text/css" />
<link rel="stylesheet" href="http://www.drk7.jp/MT/css/slimbox2.css" type="text/css" />
<script type="text/javascript" src="https://www.drk7.jp/MT/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict();</script>
<script type="text/javascript" src="https://www.drk7.jp/MT/js/slimbox2.js"></script>
<script type="text/javascript" src="https://www.drk7.jp/MT/js/mt.js"></script>

とりうる対応策は３つほどあります。いずれもブログの再構築が必要になり面倒なので後回し。
?まず複数のファイルを纏めてリクエスト数を減らす
?それぞれのファイルを minify compress する
?script で document.createElement と appendChild 使って非同期読み込みさせる

(3) ブラウザのキャッシュを活用する
対応策として「静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定する」とのことですが、静的コンテンツのキャッシュを3日に conf で設定はしているのですが、3日は短すぎると判定されるようです。とりあえず15日に変更しました。conf を数行変更して再起動するだけなので対応は簡単です。

(4) 画像を最適化する
対応策として「画像を適切にフォーマット化して圧縮すると、データ サイズを大きく削減できます」とのことですが、要は画像データのサイズをもっと小さくしろとのことです。jpegtran, jpegoptim, OptiPNG, PNGOUT を使って PNG, JPEG を圧縮する必要が有るようです。まぁ何れにしても全ての画像を一括で処理するスクリプトやらで処理しないといけないので面倒です。

Webサイトを高速化するGoogle製PageSpeed Serviceを試してみた

前置きが長かったですが本題に入ります。問題点はわかりましたが、時間のない中でいろいろやるのは面倒なものです。思いっきり手抜きはできないものかと悩んだ結果、ナビゲーションされるがまま、Page Speed Insight のGoogle PageSpeed Service betaを使ってみることにしました。現在ベータサービス中でサービスは無料で利用できますが、将来有料化される予定のようです。またその際には実際に費用が発生するまでに、30日間の猶予をもらえるようなので、現時点では安心して制限なくお試し可能です。

img006.png

まずは PageSpeed Service を使うと、どの程度高速化されるか事前に webpagetest.org でプレビューすることが可能です。PageSpeed Service の利用は DNS の変更のみと至って簡単なのですが、その前に効果を見ておくほうが良いでしょう。
下記URLへアクセスして計測したいURLを入力し、Test From=Tokyo を選択して START TEST します。モバイル回線のシミュレートをしたい場合は Test Mobile Page にチェックを付けます。

http://www.webpagetest.org/compare
img007.png

いろいろと試してみましたが、概ねPC表示では5％程度遅くなる結果で、モバイル回線では20%程度早くなる結果を予測出来ました。過去何度か CSS Sprites を導入したりもろもろチューニングはしてきたつもりなので、PC向けでは改善が見られないのは概ね合点がいきます。

img009.png

ともあれ、モバイル向けで高速化が見込めるとのことなので、PageSpeed Service のアカウントを登録することにしてみます。

PageSpeed サービスは現在招待制になっており、招待状を受信するには PageSpeed Service の Sign up now からサイトのドメインと連絡メールアドレスを登録して返信をワクワクしながら待つしかありません。まずは自分の情報を登録します。

https://developers.google.com/speed/pagespeed/service
img011.png

招待基準は不明ですが、僕の場合は数時間で招待メールが届きました。招待メールのリンクから Google Cloud Console へログインし、PageSpeed Service を有効にすることでサービスを使えるようになります。ここちょっと迷いました。
Cloud Console のページは現在リニューアル移行中のようです。PageSpeed Service の各種説明が旧 Cloud Console ベースなので迷います。なので Cloud Console の上段に表示される「新しい Google Cloud Console へようこそ！ 以前のコンソールを使用したい場合 元に戻す | 表示しない」から元に戻すをクリックして、旧ページを一旦表示させます。
旧ページが表示されたら、左メニューの Services をクリックして、一覧が表示された中から PageSpeed Service を ON にします。

img017.png

ON にすると左メニューに PageSpeed Service が表示されるのでクリックして設定に移ります。Add New Domain から招待依頼の際に入力したドメインを追加します。他のドメインは登録できないように制限されているようです。
ドメインを登録したら DNS の設定変更です。CNAME を使って www ドメインの振り先を変更します。僕は Value Domain を使っていますが、下記のように設定を変更します。 

削除　→　a www サーバのIPアドレス
追加　→　cname www pagespeed.googlehosted.com.

img014.png

DNS が浸透すれば、管理画面の Status が Not Ready から Enabled に表示が変わり、アクセスグラフにアクセスが現れ始めます。

img015.png

PageSpeed Service の効果測定

DNS が浸透したので、その効果を測定してみました。残念な結果です。
モバイル表示が56点→57点、PC表示が55点→60点と、ほとんど効果を見ることができませんでした。PC表示は全く体感は変わらず。モバイルはWiFi表示では全く変わらず。3G表示ではファーストビュー表示が微妙に早くなったかな？と感じる程度でした。

img016.png

実際 PageSpeed Service を通した html を見てみますと、概ね mod_pagespeed によるフィルタ処理と同じ内容かと思われます。
主だったフィルタ処理をピックアップしてみます。全フィルタ処理を知りたい場合はこちら。

  • collapse_whitespace
    HTML 内の不要な余白を削除。
  • combine_css
    複数の外部 CSS ファイルを 1 つのファイルに集約。
  • extend_cache
    Webページ内のリソースに対して、キャッシュヘッダ (Cache-Control: max-age: 31536000 = 365 日) を付加。
  • inline_css
    外部 CSS をインライン HTML に展開。
  • inline_javascript
    外部 JavaScript ファイルをインライン HTML に展開。
  • rewrite_JavaScript
    外部 JS、ドキュメント内 JS ともに JavaScript を圧縮して最適化（Minify Compress）。
  • rewrite_images
    <img> タグで囲まれた画像を dataURI スキームの Base64 形式で表示。
    画像の最適化 （再圧縮、不要なメタデータの削除等）。
  • remove_comments
    HTML ソース内のコメントを削除。
  • rewrite_css
    CSS を圧縮して最適化（Minify Compress）。
  • lazyload_images
    <img> タグで囲まれた画像を lazy load するよう onload イベントハンドラを登録。

さて、実際に html がどうなってしまうか。これが想像以上に dirty な感じになります。
幾つか例をピックアップします。

(1) rewrite_images で置き換わる例 

<img class="article" src="/MT/img/spacer.gif" width="35" height="35" />
↓　こうなります
<img class="article" src="data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQACACYlpAADcAD+/TZoAA==" width="35" height="35"/>

(2) rewrite_JavaScript で置き換わる例 

<script type="text/javascript" src="https://www.drk7.jp/MT/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict();</script>
<script type="text/javascript" src="https://www.drk7.jp/MT/js/slimbox2.js"></script>
<script type="text/javascript" src="https://www.drk7.jp/MT/js/mt.js"></script>
↓　こうなります
<script type="text/javascript">(function(){new Image().src="http://1-ps.googleusercontent.com
/h/www.drk7.jp/MT/js/jquery-1.4.3.min.js.pagespeed.jm.gpG_TPuIrx.js";new Image().src="http://1
-ps.googleusercontent.com/h/www.drk7.jp/MT/js/slimbox2.js.pagespeed.jm.L-fVTVSM7g.js";new 
Image().src="http://1-ps.googleusercontent.com/h/www.drk7.jp/MT/js/mt.js.pagespeed.jm.q_PY0
NiCB6.js";})()</script><link rel="dns-prefetch" href="//1-ps.googleusercontent.com"><
link rel="dns-prefetch" href="//d.href.asia"><link rel="dns-prefetch" href="//hbb.afl.rakuten.
co.jp"><link rel="dns-prefetch" href="//www.google-analytics.com"><script type="text/
psa_flush_style" id="pzN0-EksM4">h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,blockquote,cite,q,address{
font-size:100%;font-weight:normal;font-style:normal;margin:0px;padding:0px}html{overflow-y:sc
roll}strong{background-color:transparent;color:#81815d}.mb20{margin-bottom:20px}div::after,.cl
earfix::after{content:'.';display:block;height:0px;clear:both;visibility:hidden}.clearfix{display:block}.
・・・3万文字ほどのもの凄く長いJSコードが続く・・・F.lazyLoadInit=F.s;})();

そんなわけで、html の可読性が著しく失われるデメリットと、僕のサイトの場合は、ほとんど速度の向上が見られなかったことから、PageSpeed Service は導入しないことに決めました。
確かにモバイル表示では20%程度早く描画が始まるのですが、画像の遅延表示は実際の3G回線で表示させると、なんだか逆にうっとうしい感じでした。どうせ3Gは遅いので、一気にロードしてスクロールした際には画像は読み込まれている方が気持ちが良かったです。

で、長々と書いてきましたが、結論です。
僕のサイトに対しては、PageSpeed Service は効果が薄かった。
速度のチューニングするなら手を抜かずにちゃんとやる。やっぱ、これしか無さそうです。

というわけで、まずは手始めに JavaScript と CSS を minify して１つに結合しました。
画像の一括最適化は jpegtran を使おうと思いますが、また時間のあるときに。

いったんおしまい。

- スポンサーリンク -

関連する記事＆スポンサーリンク