• Like
モバイル時代のWebパフォーマンス
Upcoming SlideShare
Loading in...5
×

モバイル時代のWebパフォーマンス

  • 14,419 views
Uploaded on

2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。

2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
14,419
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
78
Comments
0
Likes
78

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. モバイル時代のWebパフォーマンス 2014/8/30 HTML5とか勉強会 in IWATE Toru Yoshikawa (@yoshikawa_̲t)
  • 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t html5j 代表/html5jビギナー部 (副部⻑⾧長) Google Developer Experts (Chrome) HTML5 Experts.jp エキスパート Web先端技術味⾒見見部 (顧問)/⽇日本jQuery Mobileユーザー会 (管理理⼈人)/Sublime Text 2 Japan Users Group (管理理⼈人)など など Blog: http://d.hatena.ne.jp/pikotea/
  • 3. PR: HTML教科書 HTML5レベル1 書きました 「HTML教科書 HTML5レベル 1」9/17発売! LPIの資格試験「HTML5プロフェッ ショナル試験 レベル1」対策本です 執筆陣: 吉川 徹、秋葉葉 秀樹、窪⽥田 則⼦子、⽩白⽯石 俊平 http://www.amazon.co.jp/dp/ 4798135836/
  • 4. 時代はモバイル
  • 5. モバイルの現状 2014年年の端末出荷台数は当然ながらPCに⽐比べて モバイル(スマフォ+タブレット)が8倍 (Gatner) 2017年年には、タブレット単体でPCの出荷台数を 抜く(Gatner) インターネットトラフィックシェアは、2014年年7 ⽉月を堺に逆転(Intelligent Positioning)
  • 6. http://www.intelligentpositioning.com/blog/2014/01/mobile-and-tablet-traffic-set-to-overtake-desktop-by-mid- 2014/
  • 7. ネイティブとHTML5 Facebookのザッカーバーグが「HTML5は時期尚早 だった」(http://www.publickey1.jp/blog/12/html5html5.html) サイバーエージェントがネイティブアプリに注⼒力力 (http://jp.techcrunch.com/2014/07/24/jp20140724cyberagent/) 機能的にはアプリのほとんどは、HTML5での実装 が可能なものにも関わらずネイティブアプリが強い モバイルアプリの隆盛とハイブリッドアプリの登場
  • 8. Webアプリ(HTML5)に ⾜足りないものはなにか?
  • 9. mobile vision - How Can HTML Compete with Native?
  • 10. API モバイルアプリ(Andorid、US)のうち、61% が APIが⾜足りないためにネイティブアプリを選択して いる しかし、Power Management APIとWifi APIが実装 されていれば、そのうちの 21% はWebアプリを選 択する ちょっとした⼀一部機能でAPIが⾜足りない状況
  • 11. Tools、Education スキルセットがない⼈人が実装するのは難しい(ス キルセットがある⼈人でも簡単にはできない) まだまだHTML5を使いこなしている⼈人が少ない 適当に作っただけでは、⼗十分な品質のアプリが作 れない
  • 12. Performance 既にデスクトップでは、⼗十分なパフォーマンスがある スマートフォンはPCの1/5の性能である ハードとブラウザの進化によって⽇日々パフォーマンス は向上しているものの、まだまだ過渡期できちんとし た作り込みが必要 パフォーマンスを向上して、ネイティブアプリに近づ ける努⼒力力が必要
  • 13. Google I/O 2014の ”Mobile Web performance auditing”を 中⼼心に参考になるTipsを紹介 ! 同じセッションを題材にしたHTML5 Expert.jpの記事 http://html5experts.jp/furoshiki/8582/
  • 14. パフォーマンスチューニング 2つの視点 Page Load … ページのローディング、表⽰示まで のチューニング Runtime … ページ中の動作を60fpsで実現する ためのチューニング
  • 15. Page Load ページのローディング
  • 16. Page Load リソースの最適化 リクエスト数を抑える リダイレクトを避ける レンダリングの優先度度
  • 17. リソースの最適化 Webサイトのサイズのうち63%は画像 画像を⼩小さくすれば多くの通信容量量を削減することができる 貧弱なモバイル回線ではとても重要 ツールを利利⽤用する JPEG: jpegtran、jpegoptim PNG: OptiPNG、PNGOUT (私はMacでImageAlpha、ImageOptimを使ってます) その他、JS、CSSファイルのminifyなど
  • 18. リクエスト数を抑える モバイル回線ではHTTPリクエストは⾮非常に⾼高コスト 電波状況にもよるが、1リクエスト増えたら200ms〜~ 1000ms増えてもおかしくない JS、CSSの結合など 画像の結合(CSS Sprite) JS、CSS、画像の埋め込み(data URL)など
  • 19. DNSプリフェッチ <link rel="dnp-prefetch" href="example.com"> ! 事前にDNS Lookupを済ませてキャッシュしておく 別ドメインへのアクセスがある場合は⾼高速化できる かも(SNSボタン等)
  • 20. リダイレクトを避ける モバイルサイトへのリダイレクトなどを避ける 同⼀一のURLで複数のUAに対応したり、レスポンシブに する
  • 21. WebPageTest http://www.webpagetest.org/
  • 22. WebPageTestの結果
  • 23. Page Load Page Loadで重要なのは、ファーストビューが描 画されるまでの時間(画⾯面外のレンダリングや画 像の読込みなどは体感速度度には影響しない) WebPageTestでは、「Speed Index」が良良い指 標になる 「Speed Index」は、ファーストビューが描画さ れるまで平均時間(ミリ秒)
  • 24. WebPageTestの結果 White screen Visually complete
  • 25. レンダリングの優先度度 レンダリングをブロックするリソースを取り除く ファーストビューのリソースを再優先に 画像の遅延読込みなど(Lazy Loadなど) スクロールしなければ表⽰示されない領領域は後回しに プログレッシブJPEG、インターレースPNGを使う
  • 26. Optimizing the Critical Rendering Path https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
  • 27. Runtime 60Hz > 60fps > 16ms
  • 28. Chrome DevTools/Timeline Chrome DevToolsを起動(Cmd+Opt+i/Ctrl+Alt+i)して Timelineパネル上で記録、停止( )。Frames mode( )で表示
  • 29. Runtime アニメーションにおいて過度度な装飾を抑える requestAnimationFrameを使う DOMアクセスの最適化 メモリの最適化(JavaScript)
  • 30. アニメーションにおいて過 度度な装飾を抑える 過度度な装飾は重い border-‐‑‒radius、box-‐‑‒shadow、text-‐‑‒shadow、*-‐‑‒gradient などなど とくにアニメーションする場合には注意が必要 場合によっては画像を使うことも検討 特定のプロパティを利利⽤用してアニメーションをするように 再構築する
  • 31. Hight Performance Animation http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
  • 32. Frames on Chrome DevTools
  • 33. requestAnimationFrame を使う setIntervalやsetTimeoutでは、単に処理理をスタックさせ るだけなので16msのリフレッシュレートに合わせて実⾏行行 させるには不不⼗十分 ⾮非対応ブラウザにはPolyfillもあるので、積極的に requestAnimationFrameを使う
  • 34. DOMアクセスの最適化 DOMプロパティを変数のように使わない(必要があれば 変数に格納) DOMプロパティへのアクセスはレイアウトの再計算など が⾛走ることがあるため必要最⼩小限に(キャッシュを利利 ⽤用) 特に注意が必要なプロパティ getComputedStyle()、offset*系のプロパティ、 client*系のプロパティ、scroll*系のプロパティ
  • 35. DOMアクセスの最適化 毎回、レイアウトの再計算が発生して重い setInterval(function(){ div.style.left = (div.offsetLeft + 1) + 'px'; }, 1000/60); キャッシュ化して高速に var cache = div.offsetLeft; setInterval(function(){ cache++; div.style.left = cache + 'px'; }, 1000/60);
  • 36. DOMアクセスの最適化 Chrom DevTools > Timelineパネル 記録・停止 > 警告マークのレコードをクリック
  • 37. メモリの最適化 GCが発⽣生しないようにメモリの使⽤用量量をコントロールする 最初に必要なメモリをすべて確保する、オブジェクトプール を作る(オブジェクトの再利利⽤用)などの⽅方法がある よくある誤解としては、GCはいったん発⽣生すると200msの Stop the worldが発⽣生すると思われがちだが、最近ではイン クリメンタルGCの採⽤用で、1度度の停⽌止は10ms程度度に収まっ ている(その代わり何度度も発⽣生するので気にしなくて良良いと いうわけではない)
  • 38. Writing Fast, Memory-‐‑‒Efficient JavaScript http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
  • 39. JavaScript Memory Management Masterclass https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass
  • 40. その他
  • 41. PageSpeed Insight http://developers.google.com/speed/pagespeed/insights/
  • 42. Extra: Service Worker オフラインWebアプリケーションのためのAppCache に代わる仕様 Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する 個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる http://html5experts.jp/myakura/8365/
  • 43. Appendix: Web Components 独⾃自の要素(例例えばUIパーツなど)を個別に作成、イ ンポートできる仕様 詳細は他のセッションで。 将来的には、ツールでの活⽤用や、⾼高品質なコンポーネ ントを再利利⽤用することによって全体的な品質の底上げ が期待できる http://html5experts.jp/1000ch/8906/
  • 44. ネイティブとの差を埋めて よりよいHTML5ライフを
  • 45. Thank you!! (@yoshikawa_̲t)
  • 46. Resources HTML5 Experts.jp 「Google I/O 2014 特集」 http://html5experts.jp/series/google-‐‑‒io-‐‑‒2014-‐‑‒2/ http://www.visionmobile.com/blog/2013/12/html5-‐‑‒performance-‐‑‒ is-‐‑‒fine-‐‑‒what-‐‑‒we-‐‑‒are-‐‑‒missing-‐‑‒is-‐‑‒tools/ https://www.google.com/events/io/schedule/session/ c8300366-‐‑‒03ed-‐‑‒e311-‐‑‒903f-‐‑‒00155d5066d7