JAWS-UG Hokuriku勉強会 第2回 2012年01月20日(金)

1. AWSとmod_pagespeedで
楽々サクサク高速化！！
株式会社チェンジビジョン 淺川 顕
1

2. 自己紹介：淺川顕
‫ ﻪ‬所属
‫ ﻩ‬株式会社チェンジビジョン
‫ ﻩ‬UML設計ツールastah*（旧JUDE）の開発
‫ ﻪ‬やってること
‫ ﻩ‬astah*の開発
‫ ﻩ‬社内外システムの管理
2

3. 表示速度ってとっても重要
‫ ﻪ‬最近では「2秒」でも遅い（2009年）
‫ ﻩ‬ページ表示2秒でイライラし始め
‫3 ﻩ‬分の1は「もういいや」となる
‫ ﻩ‬http://bizmakoto.jp/makoto/articles/1005/19/news005.html
‫ ﻪ‬Googleの検索順位にも影響する？
‫ ﻩ‬当初は米国内だけだったようですが
（2010/3）
3

4. 表示が遅いのはなぜ？
4

5. 遅い理由１：サーバの処理時間
サーバ上でのページ生成にかかった時間
負荷テストなどで見つかりやすい遅さ
5

6. 遅い理由２：画像等のサイズ
‫ ﻪ‬必要以上に大きい画像はやめましょう。
以上
6

7. 遅い理由３：同時接続数
ブラウザから同一Webサーバへの
同時接続数は尐なめに制限されており、
上限を超えると空くまで待つ必要がある
7

8. 遅い理由４：レイテンシ（遅
延）
‫ ﻪ‬光の速度だって有限なわけで。
‫ ﻩ‬東京DC⇔関東のRTT：10ms以下 ≪RTT とは≫
‫ ﻩ‬東京DC⇔北陸のRTT：20msくらい Round Trip Time
Pingを送って
返るまでの時間
‫ ﻩ‬東京DC⇔国外のRTT：100ms以上 と思って下さい。
例）北陸からのTCP 3 way handshake
接続だけで
30ms以上
10ms 10ms 10ms
8

9. Before…
ブラウザ DNSサーバ 接続1 : HTTP接続 接続2 : HTTP接続
1: 名前解決(astah.net)
ブラウザは
待つだけ
一部が返った
時点で解析を
2: GET(/index.html)
始められる
3: GET(/css/modal.css)
接続が
空いたので 4: GET(/js/caption.js)
次のリソースを
取得できる
5: GET(/js/modal.js)
9

10. どうすれば早くなる？
‫ﻪ‬ サーバの処理時間を減らす
‫ﻪ‬ 画像ファイルのサイズを縮小する
‫ﻪ‬ 非同期にロードできる箇所を増やす
‫ﻪ‬ 複数に分割されたJS/CSSをまとめる
‫ﻪ‬ HTTPの最大同時接続数を増やしてもらう
‫ﻪ‬ Webサーバの近くに住んでもらう
・
・
・
参考：http://code.google.com/intl/ja/speed/page-speed/docs/rules_intro.html
10

11. とは言ったものの、、
11

12. とは言ったものの、、
手動でチューニング
なんてやりたくない！！
という方のために・・・
12

13. 用意するもの
‫ﻪ‬ Amazon Route 53
‫ﻪ‬ Amazon CloudFront
‫ﻪ‬ Google mod_pagespeed
‫ﻪ‬ Apache HTTP Server
13

14. Amazon Route 53
‫ ﻪ‬AWSのDNSコンテンツサーバ
‫ ﻩ‬複数のエッジロケーションに分散される
遠距離からの解決時間を平均的に高速化できる
‫ ﻯ‬国内だけだと速度面での効果は薄いかも？
> dig @ns-315.awsdns-39.com astah.net
...
;; Query time: 10 msec
計測したところ
;; SERVER: 205.251.193.59#53(205.251.193.59)
思っていたより
> dig @ns-1503.awsdns-59.org. astah.net
ばらつきがあった
...
;; Query time: 55 msec
;; SERVER: 205.251.197.223#53(205.251.197.223)
14

15. Amazon CloudFront
‫ ﻪ‬AWSのContents Delivery Network
‫ ﻩ‬このLTの範囲では、世界各国に分散された
キャッシュ付きリバースプロキシ
‫ ﻩ‬S3に置いたデータの配信等も行える
‫ ﻩ‬画像ファイル等をCloudFront経由でDLす
るには、HTML中のURLを書き変えが必要
リバースプロキシと同じようなものなので、
全てをCloudFront経由にする事も可能だが、
CloudFront上のキャッシュの考慮が必要になる
15

16. Google mod_pagespeed
‫ ﻪ‬Google製のApacheモジュール
‫ ﻩ‬ページの表示速度の向上を目的とし、
HTMLや各種リソースを書き換える
‫ ﻩ‬Apacheのフィルタなので、リバースプロ
キシとして構成して他のサーバからのレス
ポンスを再編成することも可能（なは
ず。。）
16

17. 具体的に何ができるの？（１）
‫ ﻪ‬画像ファイルの縮小
‫ ﻩ‬HTML/CSS中で指定したサイズに揃える
‫ ﻪ‬画像ファイル/JS/CSSのインライン展開
17

18. 具体的に何ができるの？（２）
‫ ﻪ‬JS/CSSの結合
‫ ﻪ‬リソースURLの書き換え
‫ ﻩ‬ホスト名やドメイン名の書き換え
‫ ﻩ‬複数のホストへの分散化（シャーディン
グ）
CloudFront経由のURLに書き換えられる！
18

19. 書き換え後のHTML例
複数のCSSがひとつに
結合されている
複数のホスト名に
ラウンドロビン的に
分散されている ファイルの内容が変わると
ハッシュも変わるので、
キャッシュの有効期限は
考慮しなくてもよくなる
19

20. インストール方法は？
‫ ﻪ‬Debian/Ubuntuの場合
‫ ﻩ‬公式サイトからリポジトリのdebをDLして
くる
http://code.google.com/intl/ja/speed/page-speed/download.html
# dpkg -i mod-pagespeed-*.deb
# apt-get -f install
20

21. 設定ファイルの変更例
cdn1.astah.net
（CloudFrontの別名）
astah.net
cdn2.astah.net
（CloudFrontの別名）
‫ ﻪ‬この構成では、デフォルト設定＋
ModPagespeedShardDomain
astah.net cdn1.astah.net,cdn2.astah.net
21

22. After…
ブラウザ CMS : WebServer CloudFront1 : WebServer CloudFront2 : WebServer
1: GET(/index.html)
HTML本体は par 2: GET(/css/modal.css)
初回のみ
CloudFrontを
opt 2.1: GET(/css/modal.css) リソースを
経由しないので
取得する
Webサーバで [ミスヒット]
キャッシュを
制御できる
3: GET(/css/modal.css)
par 4: GET(/js/caption.js)
シャーディングで
ダウンロードの 5: GET(/js/modal.js)
並行性を高める
22

23. 言いたかったこと
‫ﻪ‬ 大々的に導入しないAWSの使い方もあるよ！
‫ﻪ‬ CMS使ってようと簡単に高速化できるよ！
‫ﻪ‬ コンテンツ側の変更なんていらないよ！
‫ﻪ‬ 導入後もメンテナンス面倒にならないよ！
23

24. ご清聴ありがとうございました
24