Web Site Optimization for Beginners

Web Site Optimization for Beginners
Webサイト高速化勉強会@タネマキ

2012.09.29. こもりまさあき

今日のお品書き

•高速化をはじめる前に
•まずはサイトを検証しましょう
•検証結果から原因を見つけましょう
•何をすれば効果が高いか判断しましょう
•HTTPリクエストを減らすためにできること
•CDNを使ってみよう（AWS: CloudFront）

仕組みを知らなきゃ始まらない高速化


まずは、コンテンツ配信の仕組みをおさらい

Wordサイト高速化勉強会＠タネマキ 2012.09.29.: Komori, Masaaki


アドレス解決、接続、リクエスト、レスポンス



アドレス解決、接続、リクエスト、レスポンス

1.接続先のドメインをIPアドレスに変換

2.そしてサーバに接続

3.サーバに欲しいファイルをリクエスト

4.サーバはそれにあわせてレスポンス

5.あとは、3と4の繰り返し



ここまでが仕組みのおさらい


計測、そして原因を突き詰める


接続からページが表示されるまでを視覚化



ツールやサービスを使ってみよう

1.ChromeやSafariのWebインスペクタ

2.FirefoxにFirebugをいれて

3.Webpage Test（http://webpagetest.org）

4.Pingdom Tools（http://tools.pingdom.com/fpt/）



では、ちょっと覗いてみましょう



まず、どこに原因があるかを突き止める



いったい何が原因で遅くなっているのか？

1.DNSによる名前解決？

2.最初のHTMLが出てくるまでが遅い？

3.ページの構成要素が
いつまでもダウンロードされてる？

4.外部のサービスで止まってるみたい？



心当たりはありませんか？

1.制作効率のためにCSSを分割してる

2.そういえば、JavaScriptもいっぱいだー

3.見た目の装飾のために画像も多いな…

4.ソーシャル系のボタンも貼付けてるわ

5.外部の広告とかサービスいっぱいだわ



アウト。



それぞれがこんな問題を引き起こす

1.ページのレイアウトがなかなかできない

2.リクエストが増えると次に進めない

3.画像が落ちてこなくてページが完成しない

4.途中で一瞬止まったような感じになる

5.反応が悪いと完全にとまることも…



にらめっこしましょ、アップップー


できる範囲で何をすれば効果が高いか判断


なにができるか、人によって異なります



HTMLのロードに時間がかかる場合

•DNSを反応の速いとこに変えてみる
•公開時のHTMLには、
極力無駄な改行やコメントをいれない

•HTMLのデータサイズが大きいならGzip
•箱作りの元は早くダウンロードさせる



CSS、JavaScriptにも目を向けましょう
•バラバラはよくないので極力まとめる
•ファイルから余分な改行やコメントを削除
•面倒くさいならGzipで圧縮する
•ロードする順番は、
CSSが先、JavaScriptが後の方がベター

•変更が少ないならブラウザにキャッシュ



CSSやJavaScriptのMinifyとか結合に

•ProCSSor http://procssor.com/
•excssive http://www.excssive.com/
•Closure Compiler Service
http://closure-compiler.appspot.com/home



サーバ側でファイルに有効期限をつけるには
<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が有効になっていないといけません



テキスト系のファイルを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/



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



外部サービスへの接続が含まれると、
DNSの名前解決が必要になるので遅くなる



最近ではソーシャル系のボタンが人気



結構いろんなデータを拾いにいく



外部サービスのJavaScriptを非同期にする

•コードはできるだけ最新のものに置換
•jQueryとかはCDNから落とすとか
•jsDelivr http://www.jsdelivr.com/
•ソーシャル系のJSも非同期にする、
もしくは必要時に読み込むようにする



Facebook ©



Webサイトが遅い原因は、
HTTPリクエストが多すぎるから



減らしましょう



いまどき、スマフォなどで見ることも多いし



そういえば、画像…



減らすに減らせない画像…



画像に対してもいろいろできる
•PhotoshopやFireworksで書き出し、
それをさらにツールで最適化して軽量化

•Yahoo! Smush.it™ 、PunyPNG
•CSSスプライト、Data URIでリクエスト減
•有効期限を設定してブラウザにキャッシュ
•そもそもの配信するサーバを分割する



えー、面倒くさい


CDN（CloudFront）を使ってみよう


確実に効果がでる良い方法がひとつ



CDNを使いましょう



CDN？



コンテンツ・デリバリー・ネットワーク



CDNってのはこんなもの

•高速にデータを配信する仕組み
•世界中に分散されたサーバに
コンテンツデータを格納している

•で、距離的に近いところから
クライアントに対してデータを送信する

•最近は安価に使えるサービスも増えている



Amazon CloudFrontを使ってみよう



Amazon Cloud Front って？

1.世界中のエッジロケーションから配信

2.静的なものだけでなく、ストリーミングも

3.プライベートなファイルも配信可能に

4.設定も簡単、10分もあれば大丈夫



詳しくはこちらをご覧ください



Create Distribution をクリック



静的なファイルなら、Downloadで



元データのありかを指定しましょう



任意のドメイン名を割り当てることも可能



設定が大丈夫なら、Create Distribution



詳細はいつでも確認できますのでご安心を



ドメインを割り当てたら、CNAMEを登録する



これで準備完了。簡単。



配信元を Cloud Front 側に変更すればオッケイ



たとえば、こういうことです

<img src=”images/example.jpg”>
↓
<img src=”http://example.cloudfront.net/images/example.jpg”>



あと何もしなくて良いから…



CDN、3Gとかに対しても効果抜群だと思う


まとめ

•HTTPリクエストを減らしましょう
•どうしても数を減らせないのなら、
サイズを小さくする、配信元をわけるなど

•一番手っ取り早いのはCDNを使うこと

Web Site Optimization for Beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web Site Optimization for Beginners

Similar to Web Site Optimization for Beginners (20)

More from masaaki komori

More from masaaki komori (20)

Web Site Optimization for Beginners