More Related Content
Similar to モバイル時代のWebパフォーマンス (20)
More from yoshikawa_t (15)
モバイル時代のWebパフォーマンス
- 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/
- 15. Google I/O 2014の
”Mobile Web performance auditing”を
中⼼心に参考になるTipsを紹介
!
同じセッションを題材にしたHTML5 Expert.jpの記事
http://html5experts.jp/furoshiki/8582/
- 25. Page Load
Page Loadで重要なのは、ファーストビューが描
画されるまでの時間(画⾯面外のレンダリングや画
像の読込みなどは体感速度度には影響しない)
WebPageTestでは、「Speed Index」が良良い指
標になる
「Speed Index」は、ファーストビューが描画さ
れるまで平均時間(ミリ秒)
- 28. Optimizing the Critical Rendering Path
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
- 32. アニメーションにおいて過
度度な装飾を抑える
過度度な装飾は重い
border-‐‑‒radius、box-‐‑‒shadow、text-‐‑‒shadow、*-‐‑‒gradient
などなど
とくにアニメーションする場合には注意が必要
場合によっては画像を使うことも検討
特定のプロパティを利利⽤用してアニメーションをするように
再構築する
- 45. Extra: Service Worker
オフラインWebアプリケーションのためのAppCache
に代わる仕様
Webアプリのローカルプロキシとして、バックグラウ
ンドプロセスで動作する
個別ファイルごとにキャッシュするかどうかを
JavaScriptから制御できる
http://html5experts.jp/myakura/8365/
- 46. Appendix: Web Components
独⾃自の要素(例例えばUIパーツなど)を個別に作成、イ
ンポートできる仕様
詳細は他のセッションで。
将来的には、ツールでの活⽤用や、⾼高品質なコンポーネ
ントを再利利⽤用することによって全体的な品質の底上げ
が期待できる
http://html5experts.jp/1000ch/8906/
- 49. 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