マルチデバイス時代の高速化

マルチデバイス時代の高速化
〜高速化の基本からHTML5まで〜

#singtacks
SHIN Takeuchi
BIZREACH Inc. - Co-Founder/CTO
LUXA Inc. – Co-Founder/CTO
Lei Hau’oli Co., Ltd. – Founder/CEO

プロフィール

• SHIN Takeuchi #singtacks
– 創業企業＆所属
• 株式会社ビズリーチ CTO
• 株式会社ルクサ CTO
• 株式会社レイハウオリ CEO
– 略歴
• 10歳でBASICに出会い情報工学の道へ
• 富士ソフト➡リクルート➡創業3社
• 経営＆モノ作り全般

2 #singtacks supported by

アジェンダ

• #0 なぜ？なに？高速化
• #1 インターネットを理解する
• #2 高速化する3つ＋αの観点
• #3 現場で使える「表示速度」高速化
• #4 現場で使える「体感速度」高速化
• #5 HTML5/スマホ時代の高速化
• #6 実際に見てみよう


#0 なぜ？なに？高速化


なぜ？なに？高速化

• なぜ高速化？
– 欲しいものは早く手に入れたい。
• 大抵の場合、通販などでも早く届く方が嬉しい。
• 情報も一緒だよねー。
– クリックしたらすぐ見たい。

1分1秒も惜しいほど
みんな結構忙しいのです。。。



• 高速化ってなに？
– インターネットの世界では、色んなエンジニアさん
が0.001秒でも早く表示しようと頑張っている
• でも、意外と知られていないのが、「HTML」「CSS」
「JavaScript」をちょっと考えて書くだけで、もっともっと
早く表示できるということ。

Googleさんも、Yahooさんも
実は高速化に力を入れまくってます。



• ちょっと政治的なお話
– 「高速化」というのは結構ピンとくる話。
• だって、みんな早く表示された方がいい！って思うよね。
– コストがかかる
• 高速化するために、開発コストが上がるものもあります。
• 往々にして質の高い制作物というのはコストが高いもの。
– ビジネスモデルとの兼ね合い
• ユーザサイドからお金を貰わないビジネスモデルの場合、開
発コストと高速化に売上との相関関係を作りづらい。
• 事業としてコストが出せない判断があると、開発コストの上
がる施策はやりたくても出来ないこともあるでしょう。



• 本日のゴール
– 本質的理解
• 本質を理解すれば、応用が出来るもの。
• 短い時間を有意義なものに変えるため、本質を理解しよう。
– 現場フィット型施策
• 費用対効果の高い施策を中心にお届け。
• 細かい例外パターンは省いて王道を知ることに注力。
– メラメラする
• 高速化っていいじゃん！と心から思えたなら嬉しいです。
• モノを作る時にいつも気になるようになって欲しい。


#1 インターネットを理解する


インターネットを理解する

• インターネットの中ってどうなってるの？
– こんな意見があります
• Webサイトを見る
• URLを入力して通信して、うんぬんかんぬん。。。
• 望遠鏡で覗いているような感じ
• 地球が入っている感じ
• よくわからない。。。

– 正直、こんなんじゃ高速化ってできません。。。



• 今日はこんな風に理解してください



• インターネットは「キャッチボール」
– 僕：「www.bizreach.jp」さーん、「index.html」くださいなー。
– サーバーさん：はーいー。ありましたよー。どうぞー。
– 僕：こんどは「top.css」くださいなー。
– 僕：こんどは「top.js」くださいなー。

キャッチボールを何度も、何度も行います。



• たくさんの情報を要求して、貰って、ブラウザが解読し
て、ひとつのページを見ることが出来ます。

色々な要素が組み合わさって、ひとつのページが作られています



• その上で、高速化とは？
– 1セットのキャッチボールが早く終わったら良い。
• ただそれだけ。

– キャッチボールが早く終わるコツは？
• 回数が少なければ少ない方が良い。
• 投げ合うボールが軽ければ軽い方が良い。
– 軽すぎると空気抵抗が。。。という苦情は受付かねます。。
• 二人距離が近ければ近い方が良い。



• ようするに
– 少ない
– 軽い
– 近い

これが全てです。
この知識を持って、Let’s 高速化！
行ってみましょう。


#2 高速化する3つ＋αの観点


高速化する3つ＋αの観点

• 先ほど話したことのおさらい
– 少ない
– 軽い
– 近い

– これを具体的に分解してみましょう
• ここからはちょっとエンジニアリングっぽくしてみます。



• ちょっと全体理解
– Webシステム全体概要はなんとなくこんな感じ
• たくさんキャッチボールしてそうですねー。



• 「キャッチボールの回数を少なくする」
– ひとつのWebページ（HTML）が沢山のファイルを読
み込もうとすると回数が増える
• 例えばどんなファイル？
– 画像
– CSS
– JavaScript
– その他（動画ファイルなど）

– ようするに、読み込むファイルが少なければ良い！



• 「それぞれのボールが軽ければ良い」
• 正直、重いものを投げるって大変ですよね。。。

– ようするに、それぞれのファイルを軽くすれば良
い！



• 「キャッチボールの距離を近くする」
• 近い方が早くボールを受け渡せそうです。

– ようするに、サーバまでの距離が近い方が良い！
• 実際にはこの考え方は難しいので、現時点ではLANケーブル
の長さが短ければ短い方が良い、くらいのイメージを持って
いてください。



• 「＋α」の観点
– キャッチボールはあくまでも情報の受け渡し
• キャッチボールが終わっても表示されていませんね。

– ブラウザが情報を組み立て「表示する」処理がある
• 実際はHTML/CSS/JavaScriptの書き方で、早く表示するため
の観点は色々あるが、今回は割愛
• ブラウザの性質を利用して「早く表示されているように体感
させる」方法に今回はフォーカスします。


#3 現場で使える「表示速度」高速化


現場で使える「表示速度」高速化

• gzip圧縮（DEFLATE）
効果大きい

コスト施策自体は小さい

観点「軽い」

オススメ度 ★★★★★

– テキスト情報をサーバ側で圧縮する
• Zip圧縮してメール送信するような感じ
– 70〜90%くらいサイズを小さくできる
• 効果絶大
– Apacheなどのサーバ設定だけで施策可能



• gzip圧縮（DEFLATE）
– 具体的な設定例（Apache/httpd.conf）

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
DeflateCompressionLevel 9

#Skip browsers with known problems
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html



• CSSスプライト
効果大きい

コスト大きい（制作コストが上がる）

観点「少ない」「軽い」

オススメ度 ★★★☆☆

– 複数の画像を1枚に統合してファイル数を少なくする
• 個別画像の表示はCSSでポジション指定
– 100ファイルを5〜10ファイル程度の削減可能
• 効果絶大
– 制作コスト（技術力）が必要になる



• Google
– 右のように画像を1枚にまとめている
– CSSで画像内の座標指定可能
• 個別の画像のように表示できる

• 上手くまとめるにはスキルが必要
– CSSスプライト設計と呼んだりします
• 自動でまとめ画像を作るツールもあります
• http://ja.spritegen.website-performance.org/
– シンプルなサイトには利用価値あり！
– CSSも一緒に出力してくれます



• CDN（Contents Delivery Network）
効果大きい

コスト中くらい（お金がかかる）

観点「近い」

オススメ度 ★★★★☆

– 特に画像ファイルを、うまーくユーザの近くにコ
ピーしておいてくれて、すぐ表示してくれるサービ
ス
– 基本的にレンタルサーバみたいなものと同じで、業
者にお金を払って使うサービスになる
– 難しく言うとキャッシュサーバ


• CDNのイメージ
– 世界中のいたるところに自動的にコピーしといてく
れるサーバがあるイメージ



• CDNサービス業者
– AWS（CloudFront）※お手軽、安価に始められる

– Akamai
– Limelight Networks
• 世界的に有名な2社、老舗。
• 契約するには100万単位になるので個人では辛い。



• 世界展開しなくても
– 今のイメージだと日本国内のサービスでは意味無さ
そうに見えますが、それは違います。
• 例えば
– OCNの契約の人は、同じOCN回線で契約しているサー
バはすごく「近い」距離にある、と言える。
• 物理的に光信号が通る道筋の距離が短いと、やっぱり速い。

– CDNはキャッシュサーバが沢山、いろんなところに
あったりするので、国内でも速い。
• あとは自分のサーバの負荷が減ります。



• ルクサ（LUXA）
– 画像の多いEC系サイトは効果大
• ルクサはCDNが無いと負荷的にも相当辛くなります。
• ルクサにおいてCDNは最強の高速化施策です。


#4 現場で使える「体感速度」高速化


現場で使える「体感速度」高速化

• 体感速度の高速化？
• 人って、錯覚する生き物なんです。

– 「早く表示しているように見える」
• それだけで、結構充分なんですね。
• 表示処理が続いているんだけど、先に見える分だけ見せとい
てあげる、的なことが出来れば満足してくれる。

– だから、「体感速度」の高速化も大事。
• 僕は「UX高速化」と勝手に呼んだりしてます。



• <script>タグを一番下に持ってくる
効果場合によっては大きい

コスト極小

観点「＋α」


– JavaScriptは「表示処理の天敵」
• 遅いJavaScriptがあると表示処理が全部ストップする！
– 一番下に置いておけば、ブラウザは取りあえず先に表示
してからJavaScriptを実行してくれる
– トラッキング系のスクリプトが多い場合はやや注意
• 口頭でお話しますね。



• 具体的にはこんな感じ
– HTMLファイルの例

<html>
<head>
:
</head>
<body>
<div>
:
</div>
<script ... />
<script ... />
<script ... />
</body>
</html>



• <link>タグを<head>タグの中に持ってくる
効果たいして無い

コスト極小

観点「＋α」

オススメ度 ★★★★★（？）

– CSSは<head>内に定義することで最も高速表示する
• 非常に基本的なことなのでやってないことが少ない
– なので、効果は薄いと思われる。
– 間違って変なところに定義してないか、確認する。
• くらいのイメージで充分。



• 具体的にはこんな感じ
– HTMLファイルの例

<html>
<head>
:
<link ... />
<link ... />
</head>
<body>
<div>
:
</div>
<script ... />
</body>
</html>



• 404エラーを無くす
効果意外とある

コスト少ないはず

観点「＋α」


– 長年メンテナンスしているページは意外と多い
• JavaScriptが無くなっているとか、画像が無いとか、何百
ファイルも読み込んでいるページには、1,2個存在しない
ファイルを読み込もうとしている場合がある。
• タイムアウト待ちとかで表示処理が停滞することもある
– Yslow/Firebugとかで見れば一目瞭然


#5 HTML5/スマホ時代の高速化


HTML5/スマホ時代の高速化

• 「スマホ」をどう捉えるか？
– PCと比較して
• CPU/GPU含めて処理性能は基本的に劣る
• ネットワークは無線ベースのため、基本遅い
• 通信状況の影響も受けるため、ネットワークは常に不安定
– ガラケーと比較して
• 表現方法の幅が広がり、ページあたりの容量が増大
• 容量の増大と比較して、性能、帯域の増強は鈍い

– 基本的に技術は常に限界を突破しようとする
• 常に高速化を考えていることに損は無い。



• HTML5時代を最大限活用する
– デザインに画像を使用する時代の終焉
• CSS3による表現方法の多様化
– 角丸の表現可能
– 透過の表現可能（簡易になった）
• JavaScriptのcanvasによる描写表現の広がり
– JavaScriptで普通に絵が描ける時代になった
» ただし、JSの処理コストも掛かるため、乱用はむし
ろ高速化を阻害する可能性もアリ
• SVGによるグラフィック表現
– ピクトやアイコンなどの表現をSVGへ。
» テキストデータなので非常に軽い



• CSS3を利用した角丸、グラデーション表現
• これからは、CSS3で表現するのが当たり前の時代。



• グラフィックスはSVGへ
• テキストデータなのでGzip圧縮も可能！


#6 実際に見てみよう


実際に見てみよう

• せっかくなので、僕に関係あるサイトを見てみましょう
• 良いところも、悪いところも解説しながら

– ビズリーチ
• http://www.bizreach.jp/

– LUXA
• http://luxa.jp/

– レイハウオリ
• http://www.leihauoli.com/


ご清聴ありがとうございました


質疑応答

この本の特集で
もっと詳しく書いてるよ。
http://gihyo.jp/magazine/wdpress/archive/2010/vol59


了。ありがとうございました。


マルチデバイス時代の高速化

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a マルチデバイス時代の高速化

Semelhante a マルチデバイス時代の高速化 (20)

Mais de Shin Takeuchi

Mais de Shin Takeuchi (8)

Último

Último (11)

マルチデバイス時代の高速化