pagespeed(1)ngx_pagespeedをnginxにインストール

ngx_pagespeed_logo通信速度が遅い端末からもストレスなくサイト閲覧できるようにするために、サーバ側の処理をはやくするだけでなく転送量も削減したいなぁということで、 Google の PageSpeed をインストールしてみた。

PageSpeed

PageSpeed は

  • CSS/JavaScript/画像の最適化
  • キャッシュコントロール
  • 遅延ロード

など、クライアントブラウザ視点でパフォーマンスが改善される数々のベストプラクティスを Apache/nginx モジュールとして提供されている。

ドキュメント

モジュールのマニュアルがかなり充実しているので、関係のありそうなところはざっと目を通したほうが良い。
Apache と nginx の説明が並んで書かれているので、ちょっと紛らわしい。

https://developers.google.com/speed/pagespeed/module/using

次の2つもためになるけど量が膨大。

https://developers.google.com/speed/articles/
https://developers.google.com/speed/docs/best-practices/rules_intro

トラフィックをさばききれなくて夜も寝れない人は「急がば回れ」で読んだほうがいいだろうけれども、チューニングがそれほど深刻でなければつまみ食いで良いかと。

1時間の動画でも気にならないという人は、次の開発者による解説を参照

Build ngx_pagespeed From Source

Apache の場合、ダイナミックリンクできるので mod_pagespeed パッケージをインストールするだけ。
手順は次の URL を参照
https://developers.google.com/speed/pagespeed/module/download

今回は Ubuntu 12.04 64bit の nginx に ngx_pagespeed をインストール。
Apache と違いダイナミックリンクはできないので、ソースコードからコンパイルする。

手順は次の URL を参照

https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source

ビルドに必要なパッケージをインストール

$ sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev

ソースコードを取得してコンパイル

$ cd ~
$ wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.6.29.7-beta.zip
$ unzip release-1.6.29.7-beta.zip # or unzip release-1.6.29.7-beta
$ cd ngx_pagespeed-release-1.6.29.7-beta/
$ wget https://dl.google.com/dl/page-speed/psol/1.6.29.7.tar.gz
$ tar -xzvf 1.6.29.7.tar.gz # expands to psol/
$ # check http://nginx.org/en/download.html for the latest version
$ wget http://nginx.org/download/nginx-1.4.3.tar.gz
$ tar -xvzf nginx-1.4.3.tar.gz
$ cd nginx-1.4.3/
$ ./configure --add-module=$HOME/ngx_pagespeed-release-1.6.29.7-beta
$ make
$ ./objs/nginx  -V
nginx version: nginx/1.4.3
built by gcc 4.6.3 (Ubuntu/Linaro 4.6.3-1ubuntu5)
configure arguments: --add-module=/home/jsmith/ngx_pagespeed-release-1.6.29.7-beta
$ sudo make install

configure の最後の方で

...
checking for psol ... found
 + ngx_pagespeed was configured
...

というのが出力される。

psol は pagespeed のコアとなる最適化ライブラリ(PageSpeed Optimization Libraries)

無事 “+ ngx_pagespeed was configured” と認識されている。

$sudo make install すると /usr/local/nginx ディレクトリ以下に nginx がインストールされる。

Module Configuration

次に nginx.conf に pagespeed 向け設定を追加する。

設定の詳細は次の URL を参照

https://developers.google.com/speed/pagespeed/module/configuration

設定ファイルの更新

conf/nginx.conf の server ブロックに次の設定を追加

pagespeed on;

# Needs to exist and be writable by nginx.
pagespeed FileCachePath /var/ngx_pagespeed_cache;

# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
  add_header "" "";
}

キャッシュファイルの出力先を用意

$ sudo mkdir /var/ngx_pagespeed_cache
$ sudo chown nobody /var/ngx_pagespeed_cache # make it writable by nginx

※Memcached と併用することも可能。ただし、キーあたり 1MB のサイズ上限があるため、ファイルキャッシュとの併用が必要。

gzip 圧縮も有効にする

gzip  on;

設定ファイルのシンタックスをチェック

$ sudo ./sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

サーバーを起動し pagespeed が有効になっていることを確認。

$ sudo ./sbin/nginx
$ curl -I http://localhost/
HTTP/1.1 200 OK
Server: nginx/1.4.3
Date: Mon, 04 Nov 2013 03:40:54 GMT
Content-Type: text/html
Connection: keep-alive
Cache-Control: max-age=0, no-cache
X-Page-Speed: 1.6.29.7-3453

X-Page-Speed ヘッダーが追加されている。
キャッシュファイルを確認。

$ tree  /var/ngx_pagespeed_cache/
/var/ngx_pagespeed_cache/
`-- prop_page
    `-- http,3A
        `-- ,2Flocalhost
            `-- _rFTGZYbAWZ,40Desktop,40dom,

3 directories, 1 file

$NGINX_HOME/logs 以下のログファイルを確認し、変なエラーログが出力されていないことを確認

フィルターの設定

pagespeed では各コンテンツをフィルターを通して加工できる。

指定可能なフィルターの一覧は次の URL を参照

https://developers.google.com/speed/pagespeed/module/config_filters

この内、主要なフィルターは CoreFilter としてグルーピングされ、デフォルトで有効になっている。具体的には以下のフィルターが該当。
フィルター一覧のテーブルで “In Core Set” が “Yes” となっている。

  • add_head
  • combine_css
  • convert_meta_tags
  • convert_png_to_jpeg
  • extend_cache
  • fallback_rewrite_css_urls
  • flatten_css_imports
  • inline_css
  • inline_import_to_link
  • inline_javascript
  • rewrite_css
  • rewrite_images
  • rewrite_javascript
  • rewrite_style_attributes_with_url

フィルターは個別に enable/disable が可能。例えば CoreFilter に含まれていない remove_comments(Removes comments in HTML files (but not in inline JavaScript or CSS).
) を有効にする場合、次の設定を追加する。

https://developers.google.com/speed/pagespeed/module/filter-comment-remove

pagespeed EnableFilters remove_comments;

統計情報の取得

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }

# This page shows statistics about the ngx_pagespeed module.
location /ngx_pagespeed_statistics {
    # One may insert other "allow" lines to add hosts that are
    # allowed to look at generated statistics.  Another possibility is
    # to comment out the "allow" and "deny" options from the config
    # file, to allow any client that can reach the server to examine
    # statistics.  This might be appropriate in an experimental setup or
    # if the Nginx server is protected by a reverse proxy that will
    # filter URLs to avoid exposing these statistics, which may
    # reveal site metrics that should not be shared otherwise.
    allow 192.168.11.0/24;
    deny all;
}

# statistics aggregated over all virtual hosts
location /ngx_pagespeed_global_statistics {
    allow 192.168.11.0/24;
    deny all;
}

# Recent log messages. Like statistics, these are generally not to be shown
# to the public, so this has access controls as well.
pagespeed MessageBufferSize 100000;
location /ngx_pagespeed_message {
    allow 192.168.11.0/24;
    deny all;
}

# This page lets you view a graphical console displaying statistics about
# the ngx_pagespeed module.  As with statistics and messages, you may
# want access control.
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;

location /pagespeed_console {
    allow 192.168.11.0/24;
    deny all;
}

それぞれのハンドラーの意味は次のURLを参照

参考 URL : https://developers.google.com/speed/pagespeed/module/configuration#handlers

ngx_pagespeed_statistics

shows server statistics since startup, such as how many resources are being optimized by filters, as well as various latency and cache effectiveness metrics. This handler also lets you view summaries of the configuration being used (in particular which filters are enabled).

ngx_pagespeed_global_statistics

if UsePerVHostStatistics is on this will permit you to access statistics aggregated over all the virtual hosts on the server.

pagespeed_message

if MessageBufferSize is set, this will contain a server-wide history of recent logging output from PageSpeed, including messages that are omitted from the server log file based on its log level.

http://HOST/ngx_pagespeed_message にアクセスすると、ブラウザからログが確認できる。

pagespeed_message_page

正しく設定されていない場合、次のようなエラー画面が表示される。

pagespeed_message_error_page

pagespeed_console

shows graphs of issue metrics over time.

ディレクトリ /var/log/pagespeed を作成し nginx のプロセスが書き込めるようにする。

$ sudo mkdir -pv /var/log/pagespeed
mkdir: created directory `/var/log/pagespeed'
$ sudo chown nobody /var/log/pagespeed

各メトリックの詳細は次の URL を参照

https://developers.google.com/speed/pagespeed/module/console

http://HOST/pagespeed_console にアクセスすると、各メトリックをグラフで確認できる。

pagespeed_console_page

正しく設定されていない場合、次のようなエラー画面が表示される。

pagespeed_console_error_page

pagespeed の効果を確認

インストールが終わったところで、pagespeed の効果を確認。
新規にページを用意するのが面倒なので、既存サイトをリバースプロキシーで表示し、直のアクセスと pagespeed 経由のアクセスとの違いを確認。

楽天編

ナイーブに実装すると重そうで、pagespeed の最適化スコアも悪かった楽天でまずは試してみる

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.rakuten.co.jp%2F

location /{
   proxy_pass http://www.rakuten.co.jp/;
}

画像の変更

pagespeed_url_hash が追加されている

# original
<a href="http://event.rakuten.co.jp/campaign/eagles/?l-id=top_normal_festival_01"><img src="http://a.ichiba.jp.rakuten-static.com/com/img/thumb/200309/message/flash/201311/win/01/pc1300.jpg" width="950" height="100"></a></span>

# pagespeed
<a href="http://event.rakuten.co.jp/campaign/eagles/?l-id=top_normal_festival_01"><img src="http://a.ichiba.jp.rakuten-static.com/com/img/thumb/200309/message/flash/201311/win/01/pc1400.jpg" width="950" height="100" pagespeed_url_hash="2105794600"></a></span>
</div>

コメントの削除

remove_comments フィルターを有効にしているので、コメントは削除される。

# original
<!-- suggest css -->
<link rel="stylesheet" href="http://a.ichiba.jp.rakuten-static.com/com/inc/home/20080930/beta/css/liquid/suggest-2.1.0_middle.css?v=1302011500" type="text/css" media="all">
<!-- /suggest css -->

# pagespeed
<link rel="stylesheet" href="http://a.ichiba.jp.rakuten-static.com/com/inc/home/20080930/beta/css/liquid/suggest-2.1.0_middle.css?v=1302011500" type="text/css" media="all">

スペースの除去

JavaScript のコードを確認

# original
<script language="JavaScript">
<!--
window.name="pWIN";
function openWIN01() {
	WIN01=window.open("https://rd.rakuten.co.jp/s/?R2=https%3A%2F%2Fwww.rakuten.co.jp%2Fcom%2Finc%2Frc%2Finfo.html&D2=3.8611.68708.790066.25698730&C3=bdf6340a5cf5327f930fdae8793947858e5882be","sWIN01","location=no,directories=no,scrollbars=yes,resizable=yes,width=430,height=310,left=5,top=5");
}
//-->
</script>

# pagespeed
<script language="JavaScript">window.name="pWIN";function openWIN01(){WIN01=window.open("https://rd.rakuten.co.jp/s/?R2=https%3A%2F%2Fwww.rakuten.co.jp%2Fcom%2Finc%2Frc%2Finfo.html&D2=3.8611.68708.790066.25698730&C3=bdf6340a5cf5327f930fdae8793947858e5882be","sWIN01","location=no,directories=no,scrollbars=yes,resizable=yes,width=430,height=310,left=5,top=5");}</script>

メインの HTML ファイルサイズは 206KB から 197KB に削減されている。

レスポンスヘッダ-の比較

オリジナルサイトと pagespeed 経由でのレスポンスヘッダーを比較

サイトトップのHTML

original

HTTP/1.1 200 OK
Server: Apache
Pragma: no-cache
Content-Encoding: gzip
Content-Length: 45272
Content-Type: text/html; charset=EUC-JP
Cache-Control: private, max-age=14
Date: Mon, 04 Nov 2013 05:20:26 GMT
Connection: keep-alive
Vary: Accept-Encoding
Vary: User-Agent

pagespeed

HTTP/1.1 200 OK
Server: nginx/1.4.3
Date: Mon, 04 Nov 2013 05:53:30 GMT
Content-Type: text/html; charset=EUC-JP
Connection: keep-alive
Pragma: no-cache
Vary: User-Agent
Cache-Control: max-age=0, no-cache
X-Page-Speed: 1.6.29.7-3453
Content-Encoding: gzip

CSS

If-Modified-Since を少し古めに設定

original

HTTP/1.1 200 OK
Server: Apache
Last-Modified: Mon, 21 Oct 2013 06:00:00 GMT
ETag: “4e60726-165e-4e939fe9da0de”
Accept-Ranges: bytes
Content-Length: 5726
Content-Type: text/css
Date: Mon, 04 Nov 2013 05:24:46 GMT
Connection: keep-alive
Vary: User-Agent

pagespeed

HTTP/1.1 200 OK
Server: nginx/1.4.3
Date: Mon, 04 Nov 2013 05:54:04 GMT
Content-Type: text/css
Content-Length: 5726
Connection: keep-alive
Last-Modified: Mon, 21 Oct 2013 06:00:00 GMT
ETag: “4e60726-165e-4e939fe9da0de”
Accept-Ranges: bytes
Vary: User-Agent
X-N: S

 

東京電力編

楽天のサイトは、 pagespeed のスコアはそれほど良くないものの、それなりに最適化されている。
アクセサビリティ以外何もほとんど最適化をしていないであろうサイトということで、東電も試してみる。

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.tepco.co.jp%2Findex-j.html

pagespeed のスコアはモバイルが 31/100, デスクトップが 47/100 と楽天より低い。

実験にあたり、楽天と同様に、proxy_pass に  http://www.tepco.co.jp/ を指定する。

転送量

Chrome  DeveloperTool のNetwork タブから転送量を確認。ページ全体の転送量は6 割程度に減っている。

  • original -> 112 requests ❘ 1.2 MB transferred ❘ 1.32 s (load: 1.33 s, DOMContentLoaded: 1.14 s)
  • pagespeed -> 110 requests ❘ 774 KB transferred ❘ 505 ms (load: 497 ms, DOMContentLoaded: 418 ms)

トップページ(index-j.html) のサイズ

  • original -> 45.2 KB
  • pagespeed -> 74.4 KB

と大幅に増えている。

実際のHTMLコードを確認してみると、

CSS/JavaScriptの書き換え

JavaScript/CSS などのテキストファイルは minify した別ファイルにパスごと書き換えられている。

#original
<link rel="stylesheet" type="text/css" media="screen,print" href="/common/css/style.css" />
<script type="text/javascript" src="/common/js/jquery.js"></script>
<script type="text/javascript" src="/common/js/jquery.plugins.js"></script>
<script type="text/javascript" src="/common/js/common.js"></script>

#pagespeed

<link rel="stylesheet" type="text/css" media="screen,print" href="http://HOST/common/css/A.style.css.pagespeed.cf.LBYYz42O5q.css"/>
<script type="text/javascript" src="http://HOST/common/js/jquery.js.pagespeed.jm.N3YrtY25u-.js"></script>
<script type="text/javascript" src="http://HOST/common/js/jquery.plugins.js.pagespeed.jm.GA_RBYYB_G.js"></script>
<script type="text/javascript" src="http://HOST/common/js/common.js.pagespeed.jm.fwA5Y-W0uw.js"></script>

minify により、メインのCSS style.css のファイルサイズは 131KB から 108 KB に減っている。

ファイルサイズが小さい画像

東電のサイトロゴのようにサイズが小さい画像(3.9KB)は HTML ファイル内に base64 でエンコードして埋め込まれている。
HTMLファイルのファイルサイズの増加のほうが、ロゴ画像のリクエストより転送量、ページロード時間の点でまさる、と判断されているのだろう。

# original
<p id="site-logo"><a href="/index-j.html"><img src="/common/images/header/site-logo.gif" alt="東京電力" width="107" height="38" /></a></p>

# pagespeed
<p id="site-logo"><a href="/index-j.html"><img src="data:image/png;base64,iVBOR..." alt="東京電力"/></a></p>

ファイルサイズが大きい画像

http://www.tepco.co.jp/images/img_main-visual_01.jpg のようにある程度のサイズ(79.3KB)がある画像はどうなっているかというと http://HOST/images/519x303ximg_main-visual_01.jpg.pagespeed.ic.4VcuIsSIGv.jpg という URL で 41.1KB に圧縮された画像に変換されていた。

Advertisements
Tagged with: , , , , ,
Posted in middleware, web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives
  • RT @__apf__: How to write a research paper: a guide for software engineers & practitioners. docs.google.com/presentation/d… /cc @inwyrd 4 months ago
  • RT @HayatoChiba: 昔、自然と対話しながら数学に打ち込んだら何かを悟れるのではと思いたち、専門書1つだけ持ってパワースポットで名高い奈良の山奥に1週間籠ったことがある。しかし泊まった民宿にドカベンが全巻揃っていたため、水島新司と対話しただけで1週間過ぎた。 それ… 5 months ago
  • RT @googlecloud: Ever wonder what underwater fiber optic internet cables look like? Look no further than this deep dive w/ @NatAndLo: https… 5 months ago
  • @ijin UTC+01:00 な時間帯で生活しています、、、 10 months ago
  • RT @mattcutts: Google's world-class Site Reliability Engineering team wrote a new book: amazon.com/Site-Reliabili… It's about managing produc… 1 year ago
%d bloggers like this: