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