Submit Search
Upload
モバイル時代のWebパフォーマンスTips
•
14 likes
•
4,571 views
yoshikawa_t
Follow
2014/8/22に開催された第2回HTML5minites!での講演資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 35
Download now
Download to read offline
Recommended
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Potato03 KotlinでAndroidアプリ開発(後編)
Potato03 KotlinでAndroidアプリ開発(後編)
Toshihiro Yagi
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
The Perils of Perception in 2016: Ipsos MORI
The Perils of Perception in 2016: Ipsos MORI
Ipsos UK
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Recommended
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Potato03 KotlinでAndroidアプリ開発(後編)
Potato03 KotlinでAndroidアプリ開発(後編)
Toshihiro Yagi
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
The Perils of Perception in 2016: Ipsos MORI
The Perils of Perception in 2016: Ipsos MORI
Ipsos UK
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Masakazu Muraoka
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
HTML5 for Beginners
HTML5 for Beginners
Shumpei Shiraishi
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
Taku Unno
HTML5の話
HTML5の話
Hiroyuki Nozaki
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
WebアプリをElectronに乗せる
WebアプリをElectronに乗せる
Hiroyuki Anai
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
More Related Content
Similar to モバイル時代のWebパフォーマンスTips
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Masakazu Muraoka
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
HTML5 for Beginners
HTML5 for Beginners
Shumpei Shiraishi
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
Taku Unno
HTML5の話
HTML5の話
Hiroyuki Nozaki
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
WebアプリをElectronに乗せる
WebアプリをElectronに乗せる
Hiroyuki Anai
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
Similar to モバイル時代のWebパフォーマンスTips
(20)
jQuery MobileとHTML5
jQuery MobileとHTML5
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
初めてのHtml5 20120612
初めてのHtml5 20120612
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Htmlのコトバ
Htmlのコトバ
HTML5 for Beginners
HTML5 for Beginners
Swaggerのさわりだけ
Swaggerのさわりだけ
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
HTML5の話
HTML5の話
パンダの会 Html5概説
パンダの会 Html5概説
Thing.jsについて
Thing.jsについて
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Html5 and Graphics
Html5 and Graphics
WebアプリをElectronに乗せる
WebアプリをElectronに乗せる
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
More from yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Let's begin WebRTC
Let's begin WebRTC
yoshikawa_t
Chrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Devtools.next
Devtools.next
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
More from yoshikawa_t
(18)
Ionicで作るTechfeed
Ionicで作るTechfeed
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
HTML5開発最前線
HTML5開発最前線
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
Chrome Apps 概要
Chrome Apps 概要
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
Let's begin WebRTC
Let's begin WebRTC
Chrome DevTools for beginners
Chrome DevTools for beginners
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
Devtools.next
Devtools.next
Chrome DevTools.next
Chrome DevTools.next
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
Recently uploaded
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(12)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
モバイル時代のWebパフォーマンスTips
1.
モバイル時代のWebパフォーマンスTips 2014/8/22 第2回 HTML5minutes!
Toru Yoshikawa (@yoshikawa_̲t)
2.
Who? 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/ 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t
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
10.
11.
API モバイルアプリ(Andorid、US)のうち、61% が APIが⾜足りないためにネイティブアプリを選択して いる しかし、Power
Management APIとWifi APIが実装 されていれば、そのうちの 21% はWebアプリを選 択する ちょっとした⼀一部機能でAPIが⾜足りない状況
12.
13.
Tools、Education スキルセットがない⼈人が実装するのは難しい(ス キルセットがある⼈人でも簡単にはできない) まだまだHTML5を使いこなしている⼈人が少ない 適当に作っただけでは、⼗十分な品質のアプリが作 れない
14.
Performance 既にデスクトップでは、⼗十分なパフォーマンスがある モバイルはスマートフォンの1/5の性能である ハードとブラウザの進化によって⽇日々パフォーマンス は向上しているものの、まだまだ過渡期できちんとし た作り込みが必要
パフォーマンスを向上して、ネイティブアプリに近づ ける努⼒力力が必要
15.
Google I/O 2014の
”Mobile Web performance auditing”を 中⼼心に参考になるTipsを紹介 ! 同じセッションを題材にしたHTML5 Expert.jpの記事 http://html5experts.jp/furoshiki/8582/
16.
パフォーマンスチューニング 2つの視点 Page Load
… ページのローディング、表⽰示まで のチューニング Runtime … ページ中の動作を60fpsで実現する ためのチューニング
17.
Page Load リソースの最適化 リクエスト数を抑える
リダイレクトを避ける レンダリングの優先度度
18.
リソースの最適化 Webサイトのサイズのうち63%は画像 画像を⼩小さくすれば多くの通信容量量を削減することができる 貧弱なモバイル回線ではとても重要
ツールを利利⽤用する JPEG: jpegtran、jpegoptim PNG: OptiPNG、PNGOUT (私はMacでImageAlpha、ImageOptimを使ってます) その他、JS、CSSファイルのminifyなど
19.
リクエスト数を抑える モバイル回線ではHTTPリクエストは⾮非常に⾼高コスト 電波状況にもよるが、1リクエスト増えたら200ms〜~ 1000ms増えてもおかしくない JS、CSSの結合など
画像の結合(CSS Sprite) JS、CSS、画像の埋め込み(data URL)など
20.
DNSプリフェッチ ! 事前にDNS Lookupを済ませてキャッシュしておく 別ドメインへのアクセスがある場合は⾼高速化できる かも(SNSボタン等) <link
rel="dnp-prefetch" href="example.com">
21.
リダイレクトを避ける モバイルサイトへのリダイレクトなどを避ける 同⼀一のURLで複数のUAに対応したり、レスポンシブに する
22.
レンダリングの優先度度 レンダリングをブロックするリソースを取り除く ファーストビューのリソースを再優先に 画像の遅延読込みなど(Lazy
Loadなど) スクロールしなければ表⽰示されない領領域は後回しに プログレッシブJPEG、インターレースPNGを使う
23.
Runtime 変形や透過処理理を抑える requestAnimationFrameを使う DOMアクセスの最適化
メモリの最適化(JavaScript)
24.
過度度な装飾は重い border-‐‑‒radius、box-‐‑‒shadow、text-‐‑‒shadow、*-‐‑‒gradient などなど transformによる変形(移動はそうでもない)、opacityは 特に重い
とくにアニメーションする場合には注意が必要 場合によっては画像を使うことも検討 変形や透過処理理を抑える
25.
setIntervalやsetTimeoutでは、単に処理理をスタックさせ るだけなので16msのリフレッシュレートに合わせて実⾏行行 させるには不不⼗十分 ⾮非対応ブラウザにはPolyfillもあるので、積極的に requestAnimationFrameを使う requestAnimationFrame を使う
26.
DOMアクセスの最適化 DOMプロパティを変数のように使わない DOMプロパティへのアクセスはレイアウトの再計算など が⾛走ることがあるため必要最⼩小限に(必要があれば キャッシュするなど) 特に注意が必要なプロパティ
getComputedStyle()、offset*系のプロパティ、 client*系のプロパティ、scroll*系のプロパティ
27.
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); 毎回、レイアウトの再計算が発生して重い キャッシュ化して高速に
28.
メモリの最適化 GCが発⽣生しないようにメモリの使⽤用量量をコントロールする 最初に必要なメモリをすべて確保する、オブジェクトプール を作る(オブジェクトの再利利⽤用)などの⽅方法がある よくある誤解としては、GCはいったん発⽣生すると200msの Stop
the worldが発⽣生すると思われがちだが、最近ではイン クリメンタルGCの採⽤用で、1度度の停⽌止は10ms程度度に収まっ ている(その代わり何度度も発⽣生するので気にしなくて良良いと いうわけではない)
29.
PageSpeed Insight http://developers.google.com/speed/pagespeed/insights/
30.
31.
Extra: Service Worker オフラインWebアプリケーションのためのAppCache に代わる仕様
Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する 個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる http://html5experts.jp/myakura/8365/
32.
Appendix: Web Components 独⾃自の要素(例例えばUIパーツなど)を個別に作成、イ ンポートできる仕様
詳細は他のセッションで。 将来的には、ツールでの活⽤用や、⾼高品質なコンポーネ ントを再利利⽤用することによって全体的な品質の底上げ が期待できる http://html5experts.jp/1000ch/8906/
33.
ネイティブとの差を埋めて よりよいHTML5ライフを
34.
Thank you!! (@yoshikawa_̲t)
35.
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
Download now