web site optimization for beginners
DESCRIPTION
Webサイト高速化勉強会@タネマキ用資料TRANSCRIPT
![Page 1: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/1.jpg)
We! Site Optimization fo" Begi#e$
2012.09.29. こもりまさあき
Webサイト高速化勉強会@タネマキ
![Page 2: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/2.jpg)
今日のお品書き
•高速化をはじめる前に
•まずはサイトを検証しましょう
•検証結果から原因を見つけましょう
•何をすれば効果が高いか判断しましょう
•HTTPリクエストを減らすためにできること
•CDNを使ってみよう(AWS: CloudFront)
![Page 3: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/3.jpg)
仕組みを知らなきゃ始まらない高速化
![Page 4: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/4.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
まずは、コンテンツ配信の仕組みをおさらい
![Page 5: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/5.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
アドレス解決、接続、リクエスト、レスポンス
![Page 6: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/6.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
1.接続先のドメインをIPアドレスに変換
2.そしてサーバに接続
3.サーバに欲しいファイルをリクエスト
4.サーバはそれにあわせてレスポンス
5.あとは、3と4の繰り返し
アドレス解決、接続、リクエスト、レスポンス
![Page 7: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/7.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
ここまでが仕組みのおさらい
![Page 8: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/8.jpg)
計測、そして原因を突き詰める
![Page 9: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/9.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
接続からページが表示されるまでを視覚化
![Page 10: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/10.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
ツールやサービスを使ってみよう
1.ChromeやSafariのWebインスペクタ
2.FirefoxにFirebugをいれて
3.Webpage Test(http://webpagetest.org)
4.Pingdom Tools(http://tools.pingdom.com/fpt/)
![Page 11: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/11.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
![Page 12: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/12.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
では、ちょっと覗いてみましょう
![Page 13: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/13.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
まず、どこに原因があるかを突き止める
![Page 14: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/14.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
いったい何が原因で遅くなっているのか?
1.DNSによる名前解決?
2.最初のHTMLが出てくるまでが遅い?
3.ページの構成要素がいつまでもダウンロードされてる?
4.外部のサービスで止まってるみたい?
![Page 15: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/15.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
心当たりはありませんか?
1.制作効率のためにCSSを分割してる
2.そういえば、JavaScriptもいっぱいだー
3.見た目の装飾のために画像も多いな…
4.ソーシャル系のボタンも貼付けてるわ
5.外部の広告とかサービスいっぱいだわ
![Page 16: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/16.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
アウト。
![Page 17: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/17.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
それぞれがこんな問題を引き起こす
1.ページのレイアウトがなかなかできない
2.リクエストが増えると次に進めない
3.画像が落ちてこなくてページが完成しない
4.途中で一瞬止まったような感じになる
5.反応が悪いと完全にとまることも…
![Page 18: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/18.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
![Page 19: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/19.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
にらめっこしましょ、アップップー
![Page 20: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/20.jpg)
できる範囲で何をすれば効果が高いか判断
![Page 21: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/21.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
なにができるか、人によって異なります
![Page 22: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/22.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
HTMLのロードに時間がかかる場合
•DNSを反応の速いとこに変えてみる
•公開時のHTMLには、極力無駄な改行やコメントをいれない
•HTMLのデータサイズが大きいならGzip
•箱作りの元は早くダウンロードさせる
![Page 23: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/23.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
CSS、JavaScriptにも目を向けましょう
•バラバラはよくないので極力まとめる
•ファイルから余分な改行やコメントを削除
•面倒くさいならGzipで圧縮する
•ロードする順番は、CSSが先、JavaScriptが後の方がベター
•変更が少ないならブラウザにキャッシュ
![Page 24: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/24.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
CSSやJavaScriptのMinifyとか結合に
•ProCSSor http://procssor.com/
•excssive http://www.excssive.com/
•Closure Compiler Service http://closure-compiler.appspot.com/home
![Page 25: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/25.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
サーバ側でファイルに有効期限をつけるには
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 1 years"
ExpiresByType image/vnd.microsoft.icon "access plus 1 years"
ExpiresByType image/jpeg "access plus 2 months"
ExpiresByType image/png "access plus 2 months"
ExpiresByType image/gif "access plus 2 months"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType application/x-javascript "access plus 1 years"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
※Apacheでmod_expiresが有効になっていないといけません
![Page 26: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/26.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
テキスト系のファイルをGzipで圧縮する
<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary Header append Vary Accept-Encoding env=!dont-vary</IfModule>
※参考: WordPressサイト用の.htaccess例 | dogmap.jp http://dogmap.jp/2010/04/20/wordpress-htaccess/
![Page 27: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/27.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
Apache 2.2.x系でmod_filterを使う場合<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html FilterDeclare Compression CONTENT_SET FilterProvider Compression DEFLATE Content-Type $text/plain FilterProvider Compression DEFLATE Content-Type $text/html FilterProvider Compression DEFLATE Content-Type $text/xml FilterProvider Compression DEFLATE Content-Type $text/css FilterProvider Compression DEFLATE Content-Type $application/xhtml FilterProvider Compression DEFLATE Content-Type $application/xml FilterProvider Compression DEFLATE Content-Type $application/xhtml+xml FilterProvider Compression DEFLATE Content-Type $application/rss+xml FilterProvider Compression DEFLATE Content-Type $application/atom+xml FilterProvider Compression DEFLATE Content-Type $application/x-javascript FilterProvider Compression DEFLATE Content-Type $application/x-httpd-php FilterProvider Compression DEFLATE Content-Type $image/svg+xml FilterChain Compression SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary Header append Vary Accept-Encoding env=!dont-vary</IfModule>
※参考: Apache 2.2 mod_filterを使いこなす http://www.onflow.jp/cyano/archives/137
![Page 28: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/28.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
外部サービスへの接続が含まれると、DNSの名前解決が必要になるので遅くなる
![Page 29: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/29.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
最近ではソーシャル系のボタンが人気
![Page 30: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/30.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
結構いろんなデータを拾いにいく
![Page 31: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/31.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
外部サービスのJavaScriptを非同期にする
•コードはできるだけ最新のものに置換
•jQueryとかはCDNから落とすとか
•jsDelivr http://www.jsdelivr.com/
•ソーシャル系のJSも非同期にする、もしくは必要時に読み込むようにする
![Page 32: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/32.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
Facebook ©
![Page 33: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/33.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
Webサイトが遅い原因は、HTTPリクエストが多すぎるから
![Page 34: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/34.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
減らしましょう
![Page 35: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/35.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
いまどき、スマフォなどで見ることも多いし
![Page 36: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/36.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
そういえば、画像…
![Page 37: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/37.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
減らすに減らせない画像…
![Page 38: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/38.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
画像に対してもいろいろできる
•PhotoshopやFireworksで書き出し、それをさらにツールで最適化して軽量化
•Yahoo! Smush.it™ 、PunyPNG
•CSSスプライト、Data URIでリクエスト減
•有効期限を設定してブラウザにキャッシュ
•そもそもの配信するサーバを分割する
![Page 39: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/39.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
えー、面倒くさい
![Page 40: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/40.jpg)
CDN(CloudFront)を使ってみよう
![Page 41: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/41.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
確実に効果がでる良い方法がひとつ
![Page 42: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/42.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
CDNを使いましょう
![Page 43: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/43.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
CDN?
![Page 44: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/44.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
コンテンツ・デリバリー・ネットワーク
![Page 45: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/45.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
CDNってのはこんなもの
•高速にデータを配信する仕組み
•世界中に分散されたサーバにコンテンツデータを格納している
•で、距離的に近いところからクライアントに対してデータを送信する
•最近は安価に使えるサービスも増えている
![Page 46: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/46.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
Amazon CloudFrontを使ってみよう
![Page 47: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/47.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
Amazon Cloud Front って?
1.世界中のエッジロケーションから配信
2.静的なものだけでなく、ストリーミングも
3.プライベートなファイルも配信可能に
4.設定も簡単、10分もあれば大丈夫
![Page 48: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/48.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
詳しくはこちらをご覧ください
![Page 49: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/49.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
Create Distribution をクリック
![Page 50: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/50.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
静的なファイルなら、Downloadで
![Page 51: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/51.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
元データのありかを指定しましょう
![Page 52: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/52.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
任意のドメイン名を割り当てることも可能
![Page 53: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/53.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
設定が大丈夫なら、Create Distribution
![Page 54: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/54.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
詳細はいつでも確認できますのでご安心を
![Page 55: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/55.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
ドメインを割り当てたら、CNAMEを登録する
![Page 56: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/56.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
これで準備完了。簡単。
![Page 57: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/57.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
配信元を Cloud Front 側に変更すればオッケイ
![Page 58: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/58.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
たとえば、こういうことです
<img src=”images/example.jpg”>
↓<img src=”http://example.cloudfront.net/images/example.jpg”>
![Page 59: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/59.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
あと何もしなくて良いから…
![Page 60: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/60.jpg)
We! Site Optimization fo" Begi#e$
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
CDN、3Gとかに対しても効果抜群だと思う
![Page 61: Web Site Optimization for Beginners](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a010db4c905507a8b4eca/html5/thumbnails/61.jpg)
まとめ
•HTTPリクエストを減らしましょう
•どうしても数を減らせないのなら、サイズを小さくする、配信元をわけるなど
•一番手っ取り早いのはCDNを使うこと