設計段階から実装まで、今すぐ始める高速化

設計段階から実装まで、今すぐ始める高速化
CSS Nite LP, Disk 23
こもりまさあき2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

自己紹介を…
こもりまさあき http://protean.im
1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク
関連業務に並行して従事。2001年、会社を退職しフリーランスの道へ。
案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし
近著に『レスポンシブ・ウェブデザイン標準ガイド（MdN刊）』『WordPress 高速化＆スマート運用必携ガイド（共著・MdN刊）』、など

Twitter: @cipher / @proteanbm
Facebook: gaspanik
Instagram: @cipher

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

Webサイトが遅い原因の80%は、
フロントエンドの処理だと言われる

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化「フロントエンドの処理」って、実装する人だけが考えること？

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

いやいや、ちょっと待って。
実装前から考える方が良くない？

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

今日は、そんな設計段階から実装に関わる部分までの話を2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

バックエ
ンドの
話もまと
めて

今日は、そんな設計段階から実装に関わる部分までの話を2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

これからお話しすること• コンテンツのロードを速くしよう• キャッシュを使いこなそう• 外部要因による遅延を改善しよう• リクエストを分散させてより高速に

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

キレイなサイト、面白いサイト、
完成すればそれで良いのかな？

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ブロードバンドの普及、
スマートデバイスの登場

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

相反する回線環境

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ネットワークの仕組みを理解し、より速く配信することを考えよう

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

表示が速すぎても、誰も文句は言いません

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

目には見えない部分を改善する、
それもデザインのひとつですから2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

みんなで考えましょうよ2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

誰のためのWebサイトなのか2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

コンテンツのロードを速くするためにできること

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

コンテンツがロードされる様子、アゲイン

Pingdom Tools: http://tools.pingdom.com/fpt/2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

箱作りのベースは速く、とにかく速く• HTML• CSS• JavaScript

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

周りを見渡せば、意外と多いこんな状況• コンテンツ量が多く、HTMLのサイズそのものが大きい• 制作効率、メンテナンス効率、そこを重視するあまり、分割されすぎたCSSファイル• あれもこれもと追加されたJavaScript
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化@import、えっと…
@import url(contents̲base2.css);@import url(base.css);@import url(layout.css);@import url(common.css);@import url(menu.css);<link rel="stylesheet"… href="import.css"＞

import.css@import url(contents̲base.css);@import url(search.css);@import url(top.css);@import url(news.css);@import url(chmn.css);@import url(map.css);@import url(faq.css);@import url(logo.css);@import url(background.css);

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

これだと、こういう結果になる
example.html
import.css
base.csslayout.css
common.css
menu.css
contents̲base.css
search.css
top.cssnews.css
chmn.css
map.css
faq.csslogo.css…

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

当たり前の話2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

リクエストとレスポンス、同時接続数• クライアントとサーバのやりとり• ブラウザの同時接続数• 初期段階のロードから
コンテンツの整形までを速くするには、この部分に着目することが大事

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

いかにして速くブラウザに届けるか

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ファイルをまとめる、余分な要素は除去• 分割されすぎたCSS、JavaScriptは、
可能な限りまとめる• ファイルに含まれる余分な要素、
たとえば、改行やコメントなどを除去する

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ファイルをまとめる、余分な要素は除去• 分割されすぎたCSS、JavaScriptは、
可能な限りまとめる• ファイルに含まれる余分な要素、
たとえば、改行やコメントなどを除去する

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

さっきの@importもまとめてしまえば
example.html
compact.css
jQuery.js
plugin.js
imageA.png
imageB.png
imageC.png
imageD.png
imageE.png
imageF.png
imageG.png
imageH.png
imageI.png
imageJ.png…

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

余分なリクエストは減り、その分だけ速く他の要素へ

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

でも効率が…、手間だし…
嫌がる人が多いのも事実

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ツールやサービスを使えば、比較的簡単• excssive
http://www.excssive.com/• YUI Compressor
http://developer.yahoo.com/yui/compressor/• Closure Compiler Service
http://closure-compiler.appspot.com/home

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ツールやサービスを使えば、比較的簡単• excssive
http://www.excssive.com/• YUI Compressor
http://developer.yahoo.com/yui/compressor/• Closure Compiler Service
http://closure-compiler.appspot.com/home

CodeKit: http://incident57.com/codekit/
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき

OS X 環境
CodeKit なら
便利 !

設計段階から実装まで、今すぐ始める高速化

excssive なら画面内にファイルをドラッグ

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

運用体制をどうするか？の話でしかない

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化「それでも面倒」と言うなら、
テキストデータを圧縮しちゃえ

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

テキストをGzip圧縮して高速化• バックエンドのサーバ側でGzipを使った符号化をおこなう• 1/5〜1/3ぐらいにファイルサイズは小さく• 特に不安定な回線に対して有効2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

Apacheの場合はこのように• 2.x系なら、mod̲deflateを有効にする<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
SetEnvIfNoCase Request̲URI \.(?:gif¦jpe?g¦png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary</IfModule>

mod̲deflateの記述例: https://httpd.apache.org/docs/2.2/mod/mod̲deflate.html
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

転送データサイズはここまで変わる

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

HTMLをピックアップ

27.5k
Gzipしない元のファイル

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき

8.6kGzip後の転送サイズ

設計段階から実装まで、今すぐ始める高速化

HTMLをピックアップ

27.5k
Gzipしない元のファイル

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき

8.6kGzip後の転送サイズ

設計段階から実装まで、今すぐ始める高速化

小さくなれば、より速く届く

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

もっと簡単にいろいろできないの？

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

Google謹製、mod̲pagespeedの導入• Apacheのモジュール「mod̲pagespeed」
https://developers.google.com/speed/pagespeed/mod• さまざまな高速化の施策をサーバ側で• サーバ側の負荷、動作確認など、事前に徹底的な検証が必要

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

繰り返します2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

箱作りのベースは、とにかく速く

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

方法はいろいろ。
どこまでやるか、
どうやってやるか2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化必要なファイルだけを配信。キャッシュを使おう

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

もう一度おさらい、リクエストとレスポンス• 構成要素の数だけ繰り返される
リクエストとレスポンス• サイトにアクセスするたびにファイルをダウンロードさせるのは非効率• 変更のないファイルは、
ダウンロードさせたくない

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

キャッシュといってもいろいろある• ブラウザが持っているキャッシュ• アプリケーションキャッシュ• サーバサイドによるキャッシュ• その他、DNSのキャッシュなど、いろいろ

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

キャッシュ対象になるもの• 変更頻度が極端に少ない
サイト内で使い回す画像ファイル• 定期的な改修でしか触らない
CSS、JavaScript• jQueryなどのライブラリ

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ファイルに有効期限を設定するには• Apacheなら、mod̲expires を有効にする<ifModule mod̲expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 1 years"
ExpiresByType image/jpeg "access plus 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType text/css "access plus 1 years"…
</ifModule>

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ファイルに有効期限を設定すると2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

結果として、HTTPリクエストは減る

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

もう一度、全文掲載<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 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType image/gif "access plus 10 years"
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>
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

コピペするだけ、時間にして2分

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

もうひとつのキャッシュ、.appcache• 通常のキャッシュとは別枠。
指定したファイルをキープしてくれる• サイズの大きい画像、
jQueryなどのライブラリなど• 強制的にネットワークを参照させることも可

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化.appcacheを有効にして、ファイルを列挙• キャッシュ・マニフェストを用意
CACHE MANIFEST# version 2
CACHE:
index̲Resources/PIE.htc
index̲Resources/TopImage̲Bg.jpg…
NETWORK:
index.html
index̲Resources/HYPE.js

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化.appcacheが有効になっている状態

chrome://appcache-internals/
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

変更の少ないファイルは、できるだけ配信しない工夫

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

さらに？ キャッシングサーバの導入• 大量のアクセスを処理するなら、キャッシングサーバを追加して静的なファイルだけはそこ経由で配信する• Apache + Varnish
https://www.varnish-cache.org/• Nginx によるリバースプロキシ
http://wiki.nginx.org/NginxJa

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

大量に配信するものは、
より高速なサーバで処理

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

自身の環境に合わせて、
キャッシュをうまく使って2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ご利用は計画的に2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

外部要因による遅延を極力抑えよう2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

自サイトのコンテンツ以外の要素が問題• 効果測定のためなど、
外部サービスのタグ（JavaScriptのコード）• サイト内にあれこれ貼られる広告• あれもこれもと追加した
ソーシャルメディア系のリソース群

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

大人の事情で減らせない…

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

外部の要素を取り込むことで起こる問題• 外部のサービスが止まった場合、最悪コンテンツのロードが途中で止まる• JavaScriptのdocument.write()• 外部ドメインに接続する時、起こっているのは、DNSルックアップ
document.writeでSCRIPTを書き出すなやで！: http://t32k.me/mol/log/dont-docwrite-scripts/
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

DNSルックアップは、極力減らすが吉• 接続先がわからなければ、初回はこのDNSルックアップが起きる• できる限り減らしておいた方がいいもの• 理想をいえば、4つぐらい2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

DNSプリフェッチの導入という手も• 接続する予定のドメインは、
あらかじめDNSに問い合わせさせておこう• 有効になる、ならないブラウザがある• link要素を使って、参照するドメインを記述
https://github.com/h5bp/html5-boilerplate/wiki/DNS-Prefetching2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

無駄を省いて、できる限り
外部ドメイン参照を減らす

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

外部要因といえば、もうひとつ

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

貼り付けた後、放置してない？

• Google Analyticsのコード• Twitterのボタン、Facebookの all.js• その他、
ソーシャル系サービスのJSの読み込み

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

放置はよくない、定期的にチェック• 最近のコードは、
非同期でロードするように改良• 微妙な変更なども入れると、貼り込み用のコードは頻繁に変わっている• 定期的に見直しを2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

コンテンツロードの阻害要因は、できるだけ解消しないと止まる

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

減らせないリクエスト。配信サーバを分けてしまう

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

HTTPリクエストを減らせと言われても…

• コンテンツはこれ以上少なくできない• 制作効率とかコストを考えた場合、ファイルの結合などもできれば避けたい• 画像も使わざるを得ない

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

コンテンツは減らせない、ならどうする？

• 同じホスト、同じネットワーク、
それでまかなうから限界が出てくる• それを何とかするには…

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

狭い道に車が押し寄せたら当然のように渋滞が起きる

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

ならば、バイパスを作るか、もっと速い高速道路を作るか

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

サーバを分割し、配信を効率化する• サイトで頻繁に使う画像だけ別サーバに• サブドメインでも分けないよりはマシ• コンテンツ内の画像は、Flickrなどの外部サービスを使ってみる

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

たとえば、みんな大好きjQuery• Googleなどから読み込むように変更• これで自サイトの接続数は、1本減ることに• 当たり前だけど、やっぱり速い

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

Google Libraries API

Google Developers: https://developers.google.com/speed/libraries/
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

外部からjQueryを読み込んでみる• フォールバックも忘れずに<script src="//ajax.googleapis.com/ajax/libs/jquery/バージョン/
jquery.min.js"></script><script type="text/javascript">window.jQuery ¦¦ document.write(unescape('%3Cscript
src="js/jquery/jquery-バージョン.min.js"%3E%3C/script%3E'));</script>2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

速いネットワークから配信できればなぁ…

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

そこで登場するのが、CDN• コンテンツ・デリバリー・ネットワークの略• データのコピーを世界中の拠点におき、ネットワークの距離的に近い場所から配信する• いまは、無償のサービスや有償でも手に届くレベルの存在に2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

代表的なCDNサービス• Akamai
http://www.akamai.co.jp/enja/• CloudFlare
http://jp.cloudflare.com/

Web Service（S3* / CloudFront）• Amazon
http://aws.amazon.com/jp/cloudfront/＊ S3はストレージサービスでCDNというわけではない
2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

無償から始められるCloud Flare2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

Amazonのインフラを使うCloudFront

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

サービスによって異なる仕組み• Cloud Flareは、ネームサーバを切り替える• オリジナルデータを、自分で指定されたサーバにアップする• リクエストがあったデータを、オリジナルから拾ってキャッシュする

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

従量制の場合は、コストチェックを

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

構成要素が多い場合など、使いどころ、利用頻度で分割

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

それを、より高速な環境から配信する

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

多くのサイトでネックなのは、そこに配置された画像ファイル

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

インフラそのものが弱い、
使用画像が多いときなど、その効果は絶大なはず

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

本体のサーバに極力仕事をさせない

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

このあたりの実際は、ライブデモで2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

今日のまとめ• 箱作りのファイルは、とにかく速く• キャッシュをうまく使えばリクエスト減• 外部要因による遅延を解消する• ファイルが多すぎるなら、サーバ分割• 設計段階からちゃんと考えること

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

これからのコンテンツ配信は、実装する人間だけじゃなく、
いろんな立場が意識をしないと2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき設計段階から実装まで、今すぐ始める高速化

本日はありがとうございました

2012. 06. 30 CSS Nite LP, Disk 23 | こもりまさあき