Web Site Optimization for Beginners

14,493 views

Published on

Webサイト高速化勉強会@タネマキ用資料

Published in: Technology
0 Comments
43 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,493
On SlideShare
0
From Embeds
0
Number of Embeds
10,842
Actions
Shares
0
Downloads
74
Comments
0
Likes
43
Embeds 0
No embeds

No notes for slide

Web Site Optimization for Beginners

  1. 1. Web Site Optimization for Beginners Webサイト高速化勉強会@タネマキ 2012.09.29. こもりまさあき
  2. 2. 今日のお品書き•高速化をはじめる前に•まずはサイトを検証しましょう•検証結果から原因を見つけましょう•何をすれば効果が高いか判断しましょう•HTTPリクエストを減らすためにできること•CDNを使ってみよう(AWS: CloudFront)
  3. 3. 仕組みを知らなきゃ始まらない高速化
  4. 4. Web Site Optimization for Beginners まずは、コンテンツ配信の仕組みをおさらいWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  5. 5. Web Site Optimization for Beginners アドレス解決、接続、リクエスト、レスポンスWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  6. 6. Web Site Optimization for Beginners アドレス解決、接続、リクエスト、レスポンス 1.接続先のドメインをIPアドレスに変換 2.そしてサーバに接続 3.サーバに欲しいファイルをリクエスト 4.サーバはそれにあわせてレスポンス 5.あとは、3と4の繰り返しWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  7. 7. Web Site Optimization for Beginners ここまでが仕組みのおさらいWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  8. 8. 計測、そして原因を突き詰める
  9. 9. Web Site Optimization for Beginners 接続からページが表示されるまでを視覚化Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  10. 10. Web Site Optimization for Beginners ツールやサービスを使ってみよう 1.ChromeやSafariのWebインスペクタ 2.FirefoxにFirebugをいれて 3.Webpage Test(http://webpagetest.org) 4.Pingdom Tools(http://tools.pingdom.com/fpt/)Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  11. 11. Web Site Optimization for BeginnersWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  12. 12. Web Site Optimization for Beginners では、ちょっと覗いてみましょうWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  13. 13. Web Site Optimization for Beginners まず、どこに原因があるかを突き止めるWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  14. 14. Web Site Optimization for Beginners いったい何が原因で遅くなっているのか? 1.DNSによる名前解決? 2.最初のHTMLが出てくるまでが遅い? 3.ページの構成要素が いつまでもダウンロードされてる? 4.外部のサービスで止まってるみたい?Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  15. 15. Web Site Optimization for Beginners 心当たりはありませんか? 1.制作効率のためにCSSを分割してる 2.そういえば、JavaScriptもいっぱいだー 3.見た目の装飾のために画像も多いな… 4.ソーシャル系のボタンも貼付けてるわ 5.外部の広告とかサービスいっぱいだわWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  16. 16. Web Site Optimization for Beginners アウト。Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  17. 17. Web Site Optimization for Beginners それぞれがこんな問題を引き起こす 1.ページのレイアウトがなかなかできない 2.リクエストが増えると次に進めない 3.画像が落ちてこなくてページが完成しない 4.途中で一瞬止まったような感じになる 5.反応が悪いと完全にとまることも…Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  18. 18. Web Site Optimization for BeginnersWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  19. 19. Web Site Optimization for Beginners にらめっこしましょ、アップップーWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  20. 20. できる範囲で何をすれば効果が高いか判断
  21. 21. Web Site Optimization for Beginners なにができるか、人によって異なりますWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  22. 22. Web Site Optimization for Beginners HTMLのロードに時間がかかる場合 •DNSを反応の速いとこに変えてみる •公開時のHTMLには、 極力無駄な改行やコメントをいれない •HTMLのデータサイズが大きいならGzip •箱作りの元は早くダウンロードさせるWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  23. 23. Web Site Optimization for Beginners CSS、JavaScriptにも目を向けましょう •バラバラはよくないので極力まとめる •ファイルから余分な改行やコメントを削除 •面倒くさいならGzipで圧縮する •ロードする順番は、 CSSが先、JavaScriptが後の方がベター •変更が少ないならブラウザにキャッシュWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  24. 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/homeWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  25. 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
  26. 26. Web Site Optimization for Beginners テキスト系のファイルを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/Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  27. 27. Web Site Optimization for Beginners 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/137Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  28. 28. Web Site Optimization for Beginners 外部サービスへの接続が含まれると、 DNSの名前解決が必要になるので遅くなるWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  29. 29. Web Site Optimization for Beginners 最近ではソーシャル系のボタンが人気Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  30. 30. Web Site Optimization for Beginners 結構いろんなデータを拾いにいくWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  31. 31. Web Site Optimization for Beginners 外部サービスのJavaScriptを非同期にする •コードはできるだけ最新のものに置換 •jQueryとかはCDNから落とすとか •jsDelivr http://www.jsdelivr.com/ •ソーシャル系のJSも非同期にする、 もしくは必要時に読み込むようにするWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  32. 32. Web Site Optimization for Beginners Facebook ©Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  33. 33. Web Site Optimization for Beginners Webサイトが遅い原因は、 HTTPリクエストが多すぎるからWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  34. 34. Web Site Optimization for Beginners 減らしましょうWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  35. 35. Web Site Optimization for Beginners いまどき、スマフォなどで見ることも多いしWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  36. 36. Web Site Optimization for Beginners そういえば、画像…Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  37. 37. Web Site Optimization for Beginners 減らすに減らせない画像…Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  38. 38. Web Site Optimization for Beginners 画像に対してもいろいろできる •PhotoshopやFireworksで書き出し、 それをさらにツールで最適化して軽量化 •Yahoo! Smush.it™ 、PunyPNG •CSSスプライト、Data URIでリクエスト減 •有効期限を設定してブラウザにキャッシュ •そもそもの配信するサーバを分割するWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  39. 39. Web Site Optimization for Beginners えー、面倒くさいWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  40. 40. CDN(CloudFront)を使ってみよう
  41. 41. Web Site Optimization for Beginners 確実に効果がでる良い方法がひとつWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  42. 42. Web Site Optimization for Beginners CDNを使いましょうWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  43. 43. Web Site Optimization for Beginners CDN?Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  44. 44. Web Site Optimization for Beginners コンテンツ・デリバリー・ネットワークWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  45. 45. Web Site Optimization for Beginners CDNってのはこんなもの •高速にデータを配信する仕組み •世界中に分散されたサーバに コンテンツデータを格納している •で、距離的に近いところから クライアントに対してデータを送信する •最近は安価に使えるサービスも増えているWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  46. 46. Web Site Optimization for Beginners Amazon CloudFrontを使ってみようWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  47. 47. Web Site Optimization for Beginners Amazon Cloud Front って? 1.世界中のエッジロケーションから配信 2.静的なものだけでなく、ストリーミングも 3.プライベートなファイルも配信可能に 4.設定も簡単、10分もあれば大丈夫Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  48. 48. Web Site Optimization for Beginners 詳しくはこちらをご覧くださいWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  49. 49. Web Site Optimization for Beginners Create Distribution をクリックWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  50. 50. Web Site Optimization for Beginners 静的なファイルなら、DownloadでWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  51. 51. Web Site Optimization for Beginners 元データのありかを指定しましょうWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  52. 52. Web Site Optimization for Beginners 任意のドメイン名を割り当てることも可能Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  53. 53. Web Site Optimization for Beginners 設定が大丈夫なら、Create DistributionWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  54. 54. Web Site Optimization for Beginners 詳細はいつでも確認できますのでご安心をWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  55. 55. Web Site Optimization for Beginners ドメインを割り当てたら、CNAMEを登録するWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  56. 56. Web Site Optimization for Beginners これで準備完了。簡単。Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  57. 57. Web Site Optimization for Beginners 配信元を Cloud Front 側に変更すればオッケイWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  58. 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. 59. Web Site Optimization for Beginners あと何もしなくて良いから…Wordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  60. 60. Web Site Optimization for Beginners CDN、3Gとかに対しても効果抜群だと思うWordサイト高速化勉強会@タネマキ 2012.09.29.: Komori, Masaaki
  61. 61. まとめ•HTTPリクエストを減らしましょう•どうしても数を減らせないのなら、サイズを小さくする、配信元をわけるなど•一番手っ取り早いのはCDNを使うこと

×