![[CGWCC2016] UE4でリギング](https://cdn.slidesharecdn.com/ss_thumbnails/cgworldcreativeconference2016ueta-161110122008-thumbnail.jpg?width=560&fit=bounds)
![[INSIGHT OUT 2011] C12 50分で理解する SQL Serverでできることできないこと(uchiyama)](https://cdn.slidesharecdn.com/ss_thumbnails/insightout2011c1250sqlserveruchiyama-111206190505-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to スマートフォンの徹底検証とWebパフォーマンス (20)
スマートフォンの徹底検証とWebパフォーマンス
- 1. スマートフォンの徹底検証と Webパフォーマンス NHN Japan 株式会社 馬場 宣孝 @pesblog 2011.7.2 Swap Skills doubbble01 2011
- 2. 馬場 宣孝 フロントエンドエンジニア ハンゲームApp 初期メンバー(Web担当) プラットフォーム構築や ブラウザゲーム開発も担当 Swap Skills doubbble01 2011
- 3. • なぜハイパフォーマンスが重要か • 改善する方法 • 検証結果いろいろ Swap Skills doubbble01 2011
- 4. なぜハイパフォーマンスな Webが求められるか Swap Skills doubbble01 2011
- 5. モバイルの 進化は速い Swap Skills doubbble01 2011
- 6. 毎月々々 新しい端末が発売 Swap Skills doubbble01 2011
- 7. 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 Swap Skills doubbble01 2011
- 8. どんどん最新が 塗り替えられる Swap Skills doubbble01 2011
- 10. Webサイトだけか？ Swap Skills doubbble01 2011
- 11. NO Swap Skills doubbble01 2011
- 12. Webの技術で アプリを創る時代 Swap Skills doubbble01 2011
- 13. Webの技術でアプリ！ を推進しているもの Swap Skills doubbble01 2011
- 14. ネイティブアプリと Webアプリの違い • 表現性 → そんなに変わらない • 利便性 → そんなに変わらない •応答性 → 決定的な違い Swap Skills doubbble01 2011
- 15. パフォーマンスの 向上がより重要に Swap Skills doubbble01 2011
- 16. モバイルWebは特に パフォーマンスを 気にするべき Swap Skills doubbble01 2011
- 17. ３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 Swap Skills doubbble01 2011
- 18. デバイスのスペック比較 デスクトップPC （10万円） iPhone3GS iPhone4 Xperia Galaxy S 3.4GHz CPU 600MHz 1GHz 1GHz 1GHz Core i7 2600 メモリ 256MB 512MB 384MB 512MB 8GB Swap Skills doubbble01 2011
- 19. 細く不安定な回線 貧弱なハードウェア Swap Skills doubbble01 2011
- 20. 移動中や短い時間 Swap Skills doubbble01 2011
- 21. Speed http://www.flickr.com/photos/chackachacka/3709971433/sizes/z/in/photostream/ Swap Skills doubbble01 2011
- 22. • なぜハイパフォーマンスが重要か • 改善する方法 • 検証結果いろいろ 何から始めればいいか Swap Skills doubbble01 2011
- 23. Webを表示する時間の ほとんどが CSS JS 画像 の待ち時間 Swap Skills doubbble01 2011
- 24. 通信を減らす Swap Skills doubbble01 2011
- 25. Webの表示待ち時間 HTML CSS, JS Image http://www.blaze.io/mobile/ Swap Skills doubbble01 2011
- 26. • CSS の改善 •画像 の改善 •CSS Sprite • dataURI • CSS3 Swap Skills doubbble01 2011
- 27. CSS の改善 Swap Skills doubbble01 2011
- 28. Webの表示待ち時間 HTML CSS, JS Image http://www.blaze.io/mobile/ Swap Skills doubbble01 2011
- 29. CSSや機能をシンプルにする デザインをシンプルにする Swap Skills doubbble01 2011
- 30. CSSや機能をシンプルにする デザインをシンプルにする ワイヤーフレーム Swap Skills doubbble01 2011
- 31. 最小構成の テンプレート作成 Swap Skills doubbble01 2011
- 32. シンプルな テンプレートの例 http://jquerymobile.com/ designs/ Swap Skills doubbble01 2011
- 33. Swap Skills doubbble01 2011
- 34. Swap Skills doubbble01 2011
- 35. Swap Skills doubbble01 2011
- 36. Swap Skills doubbble01 2011
- 37. Swap Skills doubbble01 2011
- 38. Swap Skills doubbble01 2011
- 39. Swap Skills doubbble01 2011
- 40. .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; } Swap Skills doubbble01 2011
- 41. .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; } Swap Skills doubbble01 2011
- 42. Swap Skills doubbble01 2011
- 43. Swap Skills doubbble01 2011
- 44. Swap Skills doubbble01 2011
- 45. 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 Swap Skills doubbble01 2011
- 46. 画像 の改善 Swap Skills doubbble01 2011
- 47. Webの表示待ち時間 HTML CSS, JS Image http://www.blaze.io/mobile/ Swap Skills doubbble01 2011
- 48. CSS Sprite vs dataURI vs CSS3 Swap Skills doubbble01 2011
- 49. CSS Sprite Swap Skills doubbble01 2011
- 50. CSS Sprite • リクエスト数を減らせる • PCでは主流のパフォーマンス改善方法 • psdの管理やミス Swap Skills doubbble01 2011
- 51. dataURI Swap Skills doubbble01 2011
- 52. dataURI • 小さい画像ごとに作成 • データは増えるが、CSSをgzip圧縮 配信してればCSS Spriteと同等レベル • CSSに含めるためNOリクエスト Swap Skills doubbble01 2011
- 53. CSS3 http://graphicpeel.com/cssiosicons Swap Skills doubbble01 2011
- 54. CSS3 • 制作は困難、かつ単純な形状のみ • 単純な形状だったら最速！ • ベクターデータ • 細かくファイルにモジュール化してSSI Swap Skills doubbble01 2011
- 55. CSS3 • 制作は困難、かつ単純な形状のみ • 単純な形状だったら最速！ • ベクターデータ • 細かくファイルにモジュール化してSSI Swap Skills doubbble01 2011
- 56. Results CSS Sprite vs dataURI Swap Skills doubbble01 2011
- 57. 4秒 3秒 ダントツ1位！ 2秒 1秒 0秒 画像10個 CSS Sprite dataURI iPhone4 iOS 4.2 Android Desire X06HT OS2.2 Swap Skills doubbble01 2011
- 58. Results dataURI vs CSS3 Swap Skills doubbble01 2011
- 59. Swap Skills doubbble01 2011
- 60. 0.8秒 0.6秒 最大250%速い！ 0.40 0.4秒 0.21 0.2秒 0.15 0.11 0秒 dataURI CSS3 iPhone4 iOS4.2 ※両方共、HTML内に記述 Android X06HT Desire OS2.2 Swap Skills doubbble01 2011
- 61. CSS化もdataURI化も 難しい画像について Swap Skills doubbble01 2011
- 62. Swap Skills doubbble01 2011
- 63. 100KBまで行くと JPG １秒程度遅くなる 8.0秒 6.0秒 この範囲なら 4.0秒 速度に影響は少ない 2.0秒 .0秒 15KB 35KB 初回 iPhone4 iOS4.2 ※面積＋圧縮率を変更 初回 Android X06HT OS2.2 Swap Skills doubbble01 2011
- 64. GIF 8.0秒 6.0秒 4.0秒 2.0秒 .0秒 15KB 35KB 初回 iPhone4 iOS4.2 ※面積＋色数を変更 初回 Android X06HT OS2.2 Swap Skills doubbble01 2011
- 65. PNG 8.0秒 6.0秒 4.0秒 2.0秒 .0秒 15KB 35KB 初回 iPhone4 iOS4.2 ※面積を変更 初回 Android X06HT OS2.2 Swap Skills doubbble01 2011
- 66. リッチな表現は 控えめに使う Swap Skills doubbble01 2011
- 67. 0秒 0.2秒 0.4秒 0.6秒 0.8秒 bo rd er- im Swap Skills doubbble01 2011 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 Android X06HT Desire OS2.2 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個に適用して計測
- 68. パフォーマンス改善の ためのワークフロー 3ステップ Swap Skills doubbble01 2011
- 69. １. 計測する 主要なページだけでも やってみる Swap Skills doubbble01 2011
- 70. カケル 表示速度の検証方法 ｘ２ http://webwait.com/ Swap Skills doubbble01 2011
- 71. カケル 表示速度の検証方法 ｘ２ http://www.blaze.io/mobile/ Swap Skills doubbble01 2011
- 74. で Hangameサイトで計測 iPhone4 Android(※) トップページ 5.37秒 3.62秒 （画像多い） 文章が多く 1.87秒 4.76秒 画像が少ない 画像も文章も少 1.43秒 2.46秒 ないページ 2011/06/10時点 ※X06HT Desire OS2.2 Swap Skills doubbble01 2011
- 75. その他に計測すべき値 http://www.blaze.io/mobile/ ファイル数 Swap Skills doubbble01 2011
- 76. ２. 計測結果は周知する 企画・ディレクター・デザイナー エンジニア・偉い人 Swap Skills doubbble01 2011
- 77. 3. 継続的に計測 一回測っただけで充分か？ Swap Skills doubbble01 2011
- 78. • 訪問者が増えたら…？ • バナー リンク JavaScript CSS • 一つ追加したら…？ • 何か減らしたら…？ Swap Skills doubbble01 2011
- 79. 基準を元に評価する • 表示速度 • ファイルサイズ • ファイル数 Swap Skills doubbble01 2011
- 80. １．計測 主要なページの結果を 記録する ２．計測結果は周知する ３．継続的に計測 Swap Skills doubbble01 2011
- 81. ここまでやってから 提案 Swap Skills doubbble01 2011
- 82. • なぜハイパフォーマンスが重要か • 改善する方法 • 検証結果いろいろ 参考資料 検証結果の数々 Swap Skills doubbble01 2011
- 83. iOS 検証機 iPhone4 iOS4.2 2010/06 Swap Skills doubbble01 2011
- 84. Android 検証機 X06HT OS2.2 2010/04 Swap Skills doubbble01 2011
- 85. 画像容量は どの位減らせる？ Swap Skills doubbble01 2011
- 86. Windows GIFeq carmine PNGGauntlet Mac ImageOptim Swap Skills doubbble01 2011
- 87. ファイルサイズ 圧縮率(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% Swap Skills doubbble01 2011
- 88. タグの種類で 速度はどうなる？ Swap Skills doubbble01 2011
- 89. 0秒 1秒 2秒 3秒 4秒 <s 5秒 ele ct> Swap Skills doubbble01 2011 <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 Android X06HT Desire OS2.2 <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 >
- 90. 9秒 7秒 5秒 4秒 2秒 0秒 <iframe> iPhone4 iOS4.2 ※1000個配置して計測 Android X06HT Desire OS2.2 Swap Skills doubbble01 2011
- 91. タグの数で 速度はどうなる？ Swap Skills doubbble01 2011
- 92. 2.0秒 1.5秒 1.0秒 .5秒 .0秒 100 300 600 1000 2000 3000 4000 5000 iPhone4 iOS4.2 ※p要素の数 Android X06HT Desire OS2.2 Swap Skills doubbble01 2011
- 93. 同スタイルの時の id vs class Swap Skills doubbble01 2011
- 94. 1.2秒 1.15 .9秒 0.73 .6秒 .3秒 0.20 0.20 .0秒 ID Class iPhone4 iOS4.2 ※100個ずつ Android X06HT Desire OS2.2 Swap Skills doubbble01 2011
- 95. JPGの圧縮率と ファイルサイズ Swap Skills doubbble01 2011
- 97. まとめ ハイパフォーマンスは重要 • HTTPリクエストを減らす • シンプルなデザインやテンプレートから始める • 細か過ぎて伝わらないデザインは切り捨てる • 画像リクエスト減らす手法ｘ３つ 検証・周知・継続・改善 Swap Skills doubbble01 2011
- 98. Thank You NHN Japan 株式会社 馬場 宣孝 @pesblog Swap Skills doubbble01 2011