21. Web Site Optimization for Beginners
なにができるか、人によって異なります
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
22. Web Site Optimization for Beginners
HTMLのロードに時間がかかる場合
•DNSを反応の速いとこに変えてみる
•公開時のHTMLには、
極力無駄な改行やコメントをいれない
•HTMLのデータサイズが大きいならGzip
•箱作りの元は早くダウンロードさせる
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
23. Web Site Optimization for Beginners
CSS、JavaScriptにも目を向けましょう
•バラバラはよくないので極力まとめる
•ファイルから余分な改行やコメントを削除
•面倒くさいならGzipで圧縮する
•ロードする順番は、
CSSが先、JavaScriptが後の方がベター
•変更が少ないならブラウザにキャッシュ
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
24. Web Site Optimization for Beginners
CSSやJavaScriptのMinifyとか結合に
•ProCSSor http://procssor.com/
•excssive http://www.excssive.com/
•Closure Compiler Service
http://closure-compiler.appspot.com/home
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
25. Web Site Optimization for Beginners
サーバ側でファイルに有効期限をつけるには
<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が有効になっていないといけません
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
41. Web Site Optimization for Beginners
確実に効果がでる良い方法がひとつ
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
42. Web Site Optimization for Beginners
CDNを使いましょう
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
43. Web Site Optimization for Beginners
CDN?
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
44. Web Site Optimization for Beginners
コンテンツ・デリバリー・ネットワーク
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
45. Web Site Optimization for Beginners
CDNってのはこんなもの
•高速にデータを配信する仕組み
•世界中に分散されたサーバに
コンテンツデータを格納している
•で、距離的に近いところから
クライアントに対してデータを送信する
•最近は安価に使えるサービスも増えている
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
46. Web Site Optimization for Beginners
Amazon CloudFrontを使ってみよう
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
47. Web Site Optimization for Beginners
Amazon Cloud Front って?
1.世界中のエッジロケーションから配信
2.静的なものだけでなく、ストリーミングも
3.プライベートなファイルも配信可能に
4.設定も簡単、10分もあれば大丈夫
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
48. Web Site Optimization for Beginners
詳しくはこちらをご覧ください
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
49. Web Site Optimization for Beginners
Create Distribution をクリック
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
50. Web Site Optimization for Beginners
静的なファイルなら、Downloadで
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
51. Web Site Optimization for Beginners
元データのありかを指定しましょう
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
52. Web Site Optimization for Beginners
任意のドメイン名を割り当てることも可能
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
53. Web Site Optimization for Beginners
設定が大丈夫なら、Create Distribution
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
54. Web Site Optimization for Beginners
詳細はいつでも確認できますのでご安心を
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
55. Web Site Optimization for Beginners
ドメインを割り当てたら、CNAMEを登録する
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
56. Web Site Optimization for Beginners
これで準備完了。簡単。
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
57. Web Site Optimization for Beginners
配信元を Cloud Front 側に変更すればオッケイ
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
58. Web Site Optimization for Beginners
たとえば、こういうことです
<img src=”images/example.jpg”>
↓
<img src=”http://example.cloudfront.net/images/example.jpg”>
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
59. Web Site Optimization for Beginners
あと何もしなくて良いから…
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
60. Web Site Optimization for Beginners
CDN、3Gとかに対しても効果抜群だと思う
Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki