![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](https://image.slidesharecdn.com/ltawsmodpagespeed-120123031615-phpapp02/85/AWS-mod_pagespeed-22-320.jpg)
AWSとmod_pagespeedで 楽々サクサク高速化！！
- 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
- 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