スマートフォンの徹底検証とWebパフォーマンス

スマートフォンの徹底検証と
Webパフォーマンス
NHN Japan 株式会社
馬場宣孝
@pesblog

2011.7.2

Swap Skills doubbble01 2011

馬場宣孝
フロントエンドエンジニア

ハンゲームApp
初期メンバー(Web担当)
プラットフォーム構築や
ブラウザゲーム開発も担当


• なぜハイパフォーマンスが重要か
• 改善する方法
• 検証結果いろいろ


なぜハイパフォーマンスな
Webが求められるか


モバイルの
進化は速い


毎月々々
新しい端末が発売


iOS
5.0
4.0
3.0
2.1
2009 2010 2011
数ヶ月おきにOSが
バージョンアップ
Android
3.0
2.3 3.1
2.2
2.0
1.5 1.6 2.1
1.0 1.1
2009 2010 2011

どんどん最新が
塗り替えられる


Webは標準規格がある


Webサイトだけか？


NO


Webの技術で
アプリを創る時代


Webの技術でアプリ！
を推進しているもの


ネイティブアプリと
Webアプリの違い

• 表現性 → そんなに変わらない
• 利便性 → そんなに変わらない

•応答性 → 決定的な違い

パフォーマンスの
向上がより重要に


モバイルWebは特に
パフォーマンスを
気にするべき


３G回線の実態

回線速度サンプリング数比較

Softbank 645 Kbps 169 7.5%

docomo 1,436 Kbps 38 17%
※
PC(日本) 8,500 Kbps ?? 100%

auはサンプリング数が少なかったため省略させて頂いています。

※ http://news.searchina.ne.jp/disp.cgi?y=2011&d=0124&f=business_0124_117.shtml

デバイスのスペック比較
デスクトップPC
（10万円）
iPhone3GS iPhone4 Xperia Galaxy S

3.4GHz
CPU 600MHz 1GHz 1GHz 1GHz
Core i7 2600

メモリ 256MB 512MB 384MB 512MB

8GB


細く不安定な回線
貧弱なハードウェア


移動中や短い時間


Speed

http://www.ﬂickr.com/photos/chackachacka/3709971433/sizes/z/in/photostream/



何から始めればいいか


Webを表示する時間の
ほとんどが CSS JS 画像
の待ち時間


通信を減らす


Webの表示待ち時間
HTML CSS, JS Image

http://www.blaze.io/mobile/

• CSS の改善

•画像の改善
•CSS Sprite
• dataURI

• CSS3


CSS の改善


CSSや機能をシンプルにする

デザインをシンプルにする


CSSや機能をシンプルにする

デザインをシンプルにする
ワイヤーフレーム


最小構成の
テンプレート作成


シンプルな
テンプレートの例
http://jquerymobile.com/
designs/

.list .thmbTxt>.gameName{
font-size:15px;
line-height:17px;
font-weight:bold;
}
.list .thmbTxt>.sndr{
font-size:14px;
line-height:18px;
font-weight:bold;
}
.list .ntcItm .main{
font-size:14px;
line-height:17px;
font-weight:bold;
}


.list .thmbTxt>.gameName{
font-size:15px;
line-height:17px;
font-weight:bold;
} .list .thmbTxt>.gameName,
.list .thmbTxt>.sndr{ .list .thmbTxt>.sndr,
font-size:14px; .list .ntcItm .main{
line-height:18px; font-size:14px;
font-weight:bold; line-height:17px;
} font-weight:bold;
.list .ntcItm .main{ }
font-size:14px;
line-height:17px;
font-weight:bold;
}


7秒
6.41
約20%！
6秒
5.15
約15%！
5.08
5秒
4.46
4秒

3秒

2秒

1秒

0秒

外部CSS HTML内CSS

iPhone4 iOS4.2
Android X06HT Desire OS2.2

画像の改善


CSS Sprite vs dataURI vs CSS3


CSS Sprite


CSS Sprite

• リクエスト数を減らせる
• PCでは主流のパフォーマンス改善方法
• psdの管理やミス

dataURI


dataURI

• 小さい画像ごとに作成
• データは増えるが、CSSをgzip圧縮
配信してればCSS Spriteと同等レベル

• CSSに含めるためNOリクエスト

CSS3

http://graphicpeel.com/cssiosicons

CSS3

• 制作は困難、かつ単純な形状のみ
• 単純な形状だったら最速！
• ベクターデータ
• 細かくファイルにモジュール化してSSI

Results
CSS Sprite vs dataURI


4秒

3秒
ダントツ1位！
2秒

1秒

0秒
画像10個 CSS Sprite dataURI

iPhone4 iOS 4.2
Android Desire X06HT OS2.2


Results

dataURI vs CSS3


0.8秒

0.6秒
最大250%速い！
0.40
0.4秒
0.21
0.2秒 0.15
0.11
0秒
dataURI CSS3

iPhone4 iOS4.2 ※両方共、HTML内に記述

CSS化もdataURI化も
難しい画像について


100KBまで行くと
JPG １秒程度遅くなる
8.0秒

6.0秒

この範囲なら
4.0秒
速度に影響は少ない
2.0秒

.0秒

15KB 35KB

初回 iPhone4 iOS4.2 ※面積＋圧縮率を変更
初回 Android X06HT OS2.2

GIF
8.0秒

6.0秒

4.0秒

2.0秒

.0秒

15KB 35KB

初回 iPhone4 iOS4.2 ※面積＋色数を変更

PNG
8.0秒

6.0秒

4.0秒

2.0秒

.0秒

15KB 35KB

初回 iPhone4 iOS4.2 ※面積を変更

リッチな表現は
控えめに使う


0秒
0.2秒
0.4秒
0.6秒
0.8秒
bo
rd
er-
im

ag
bo
rd e

CSS無しの場合
er-
ra
tra diu
nc s
ef
or
tra m-
nc sc
ef ale
or
m-
tra
iPhone4 iOS4.2

ns
op late
ac
tra ity
nc
ef
or
m-
tra ro
nc tat
ef e
or
m-
ov sk

er ew
flo
w-
hi dd
bo en
x-s
ha
do
w
gr
ad
a tio
n
rg
ba

bo
rd
er
※p要素1,000個に適用して計測

パフォーマンス改善の
ためのワークフロー
3ステップ


１. 計測する
主要なページだけでも
やってみる


カケル

表示速度の検証方法ｘ２

http://webwait.com/

カケル

表示速度の検証方法ｘ２


で Hangameサイトで計測

iPhone4 Android(※)

トップページ
5.37秒 3.62秒
（画像多い）

文章が多く
1.87秒 4.76秒
画像が少ない
画像も文章も少
1.43秒 2.46秒
ないページ
2011/06/10時点 ※X06HT Desire OS2.2


その他に計測すべき値

ファイル数


２. 計測結果は周知する
企画・ディレクター・デザイナー
エンジニア・偉い人


3. 継続的に計測
一回測っただけで充分か？


• 訪問者が増えたら…？
• バナーリンク JavaScript CSS
• 一つ追加したら…？
• 何か減らしたら…？


基準を元に評価する
• 表示速度
• ファイルサイズ
• ファイル数

１．計測主要なページの結果を
記録する

２．計測結果は周知する

３．継続的に計測


ここまでやってから
提案



参考資料
検証結果の数々


iOS 検証機 iPhone4 iOS4.2

2010/06

Android 検証機 X06HT OS2.2

2010/04

画像容量は
どの位減らせる？


Windows
GIFeq carmine PNGGauntlet

Mac
ImageOptim


ファイルサイズ圧縮率(Win) 圧縮率(Mac)
画像種類 byte ％％

イラスト小 375573 4% 8.5%
イラスト大 1088298 5% 14.1%
PNG
写真小 531930 3% 0.9%

写真大 1960739 3% 0.9%

イラスト小 272988 0.2% 3.3%
イラスト大 930761 0.1% 2.9%
JPG
写真小 273098 0.1% 4.5%
写真大 927517 0.1% 4.3%
イラスト小 131184 0.9% 0.9%

イラスト大 391948 0.3% 0.3%
GIF
写真小 183629 0.6% 0.6%

写真大 664134 0.2% 0.2%


タグの種類で
速度はどうなる？


0秒
1秒
2秒
3秒
4秒
<s 5秒
ele
ct>

<a
>
<u
l>
<li>
<in
pu

iPhone4 iOS4.2
<d t>
iv>
<im
<te g>
xta
r
<fo ea>
rm
<n >
av
<la >
<c bel>
an

<h vas
ea >
<a der>
rti
<s cle>
ec
tio
<h n>
1>
<h
2>
<h
3>
<h
4>
<p
<s >
pa
<ti n>
me
<s
tro >
※1000個配置して計測

ng
>

9秒

7秒

5秒

4秒

2秒

0秒

<iframe>
iPhone4 iOS4.2 ※1000個配置して計測

タグの数で
速度はどうなる？


2.0秒

1.5秒

1.0秒

.5秒

.0秒
100 300 600 1000 2000 3000 4000 5000

iPhone4 iOS4.2
※p要素の数

同スタイルの時の
id vs class


1.2秒 1.15

.9秒
0.73
.6秒

.3秒
0.20 0.20
.0秒

ID Class

iPhone4 iOS4.2
※100個ずつ

JPGの圧縮率と
ファイルサイズ


http://www.impulseadventure.com/photo/jpeg-compression.html


まとめ
ハイパフォーマンスは重要
• HTTPリクエストを減らす

• シンプルなデザインやテンプレートから始める

• 細か過ぎて伝わらないデザインは切り捨てる

• 画像リクエスト減らす手法ｘ３つ

検証・周知・継続・改善

Thank You
NHN Japan 株式会社
馬場宣孝
@pesblog


スマートフォンの徹底検証とWebパフォーマンス

Recommended

Recommended

More Related Content

Similar to スマートフォンの徹底検証とWebパフォーマンス

Similar to スマートフォンの徹底検証とWebパフォーマンス (20)

スマートフォンの徹底検証とWebパフォーマンス