Web Site Optimization for Beginners

We! Site Optimization fo" Begi#e$

2012.09.29. こもりまさあき

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

今日のお品書き

•高速化をはじめる前に

•まずはサイトを検証しましょう

•検証結果から原因を見つけましょう

•何をすれば効果が高いか判断しましょう

•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分もあれば大丈夫



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

http://aws.amazon.com/jp/cloudfront/

http://aws.amazon.com/jp/cloudfront/



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を使うこと

Technology

Web Site Optimization for Beginners