Suche senden
Hochladen
モバイル時代のWebパフォーマンス
•
78 gefällt mir
•
18,648 views
yoshikawa_t
Folgen
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 49
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
jQuery Mobile
jQuery Mobile
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Empfohlen
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
jQuery Mobile
jQuery Mobile
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
マークアップの作業効率をあげよう!
マークアップの作業効率をあげよう!
Mitsuo Kawashima
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
HTML5 によるロボット制御
HTML5 によるロボット制御
Honma Masashi
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
Akihiro Matsumura
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Hayashi Yuichi
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
Espruinoの紹介
Espruinoの紹介
Masakazu Muraoka
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Docker技術情報アップデート 2015年7月号
Docker技術情報アップデート 2015年7月号
Masahito Zembutsu
俺的フロントエンド開発
俺的フロントエンド開発
Kotaro Kawashima
Weitere ähnliche Inhalte
Was ist angesagt?
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
マークアップの作業効率をあげよう!
マークアップの作業効率をあげよう!
Mitsuo Kawashima
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
HTML5 によるロボット制御
HTML5 によるロボット制御
Honma Masashi
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
Akihiro Matsumura
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Hayashi Yuichi
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
Espruinoの紹介
Espruinoの紹介
Masakazu Muraoka
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Was ist angesagt?
(20)
Chrome DevTools.next
Chrome DevTools.next
Sencha touch vs j query mobile
Sencha touch vs j query mobile
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Chrome apps for mobile 概要
Chrome apps for mobile 概要
マークアップの作業効率をあげよう!
マークアップの作業効率をあげよう!
次世代Web業務アプリケーション
次世代Web業務アプリケーション
HTML5 によるロボット制御
HTML5 によるロボット制御
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
Angularおじさんの1年
Angularおじさんの1年
Enterprise x AngularJS
Enterprise x AngularJS
Swaggerのさわりだけ
Swaggerのさわりだけ
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
LIGでのDocker活用
LIGでのDocker活用
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
Espruinoの紹介
Espruinoの紹介
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Andere mochten auch
Docker技術情報アップデート 2015年7月号
Docker技術情報アップデート 2015年7月号
Masahito Zembutsu
俺的フロントエンド開発
俺的フロントエンド開発
Kotaro Kawashima
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
Thun der
Dockerのネットワークについて
Dockerのネットワークについて
Nobuyuki Matsui
sqldf for pandas
sqldf for pandas
airtoxin Ishii
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
Hiroshi Kawada
pandasによるデータ加工時の注意点やライブラリの話
pandasによるデータ加工時の注意点やライブラリの話
Masashi Shibata
ログ勉 Vol.1
ログ勉 Vol.1
Kenji Kobayashi
SekainoKAO by TeamKAO
SekainoKAO by TeamKAO
Hideki
Django から各種チャットツールに通知するライブラリを作った話
Django から各種チャットツールに通知するライブラリを作った話
Yusuke Miyazaki
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
Atsuo Ishimoto
ssh_configのススメ
ssh_configのススメ
Hisaharu Ishii
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
Katayanagi Nobuko
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Takayuki Shimizukawa
Ry pyconjp2015 karaoke
Ry pyconjp2015 karaoke
Renyuan Lyu
Python と型ヒント (Type Hints)
Python と型ヒント (Type Hints)
Tetsuya Morimoto
アドネットワークのデータ解析チームを支える技術
アドネットワークのデータ解析チームを支える技術
hagino 3000
第8回oss運用管理勉強会 Zabbix入門&Zabbix3.0先取り紹介
第8回oss運用管理勉強会 Zabbix入門&Zabbix3.0先取り紹介
Daisuke Ikeda
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
SaitoTsutomu
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
Takuya Oikawa
Andere mochten auch
(20)
Docker技術情報アップデート 2015年7月号
Docker技術情報アップデート 2015年7月号
俺的フロントエンド開発
俺的フロントエンド開発
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
英語の組み立て方と学び方―高校英語へのステップアップ,その先へ
Dockerのネットワークについて
Dockerのネットワークについて
sqldf for pandas
sqldf for pandas
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
pandasによるデータ加工時の注意点やライブラリの話
pandasによるデータ加工時の注意点やライブラリの話
ログ勉 Vol.1
ログ勉 Vol.1
SekainoKAO by TeamKAO
SekainoKAO by TeamKAO
Django から各種チャットツールに通知するライブラリを作った話
Django から各種チャットツールに通知するライブラリを作った話
tse - Pythonによるテキスト整形ユーティリティ
tse - Pythonによるテキスト整形ユーティリティ
ssh_configのススメ
ssh_configのススメ
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
PyLadies Tokyo - 初心者向けPython体験ワークショップ開催の裏側
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Sphinxで作る貢献しやすいドキュメント翻訳の仕組み
Ry pyconjp2015 karaoke
Ry pyconjp2015 karaoke
Python と型ヒント (Type Hints)
Python と型ヒント (Type Hints)
アドネットワークのデータ解析チームを支える技術
アドネットワークのデータ解析チームを支える技術
第8回oss運用管理勉強会 Zabbix入門&Zabbix3.0先取り紹介
第8回oss運用管理勉強会 Zabbix入門&Zabbix3.0先取り紹介
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
組合せ最適化を体系的に知ってPythonで実行してみよう PyCon 2015
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
Ähnlich wie モバイル時代のWebパフォーマンス
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Osamu Monoe
20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)
Takahiro Kujirai
Attractive HTML5
Attractive HTML5
Sho Ito
JavaScript And Keywords
JavaScript And Keywords
uupaa
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
アジャイルソフトウェア開発の道具箱
アジャイルソフトウェア開発の道具箱
Koichi ITO
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Masakazu Muraoka
JS非同期処理のいま
JS非同期処理のいま
Masakazu Muraoka
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
tksyokoyama
Agile 459 | 11/17 資料
Agile 459 | 11/17 資料
智治 長沢
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
Ähnlich wie モバイル時代のWebパフォーマンス
(20)
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
最近のブラウザ状況
最近のブラウザ状況
Html5概要 & デモ
Html5概要 & デモ
Html5 and Graphics
Html5 and Graphics
Thing.jsについて
Thing.jsについて
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)
Attractive HTML5
Attractive HTML5
JavaScript And Keywords
JavaScript And Keywords
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
パンダの会 Html5概説
パンダの会 Html5概説
アジャイルソフトウェア開発の道具箱
アジャイルソフトウェア開発の道具箱
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
JS非同期処理のいま
JS非同期処理のいま
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
20111203 gdd2011フィードバック 公開用
20111203 gdd2011フィードバック 公開用
Agile 459 | 11/17 資料
Agile 459 | 11/17 資料
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
Mehr von yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
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 DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
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
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
Mehr von yoshikawa_t
(15)
Ionicで作るTechfeed
Ionicで作るTechfeed
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
オフライン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 DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
Chrome Apps 概要
Chrome Apps 概要
いまさら聞けない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
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
Kürzlich hochgeladen
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Kürzlich hochgeladen
(9)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
モバイル時代のWebパフォーマンス
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.
11.
API モバイルアプリ(Andorid、US)のうち、61% が
APIが⾜足りないためにネイティブアプリを選択して いる しかし、Power Management APIとWifi APIが実装 されていれば、そのうちの 21% はWebアプリを選 択する ちょっとした⼀一部機能でAPIが⾜足りない状況
12.
13.
Tools、Education スキルセットがない⼈人が実装するのは難しい(ス キルセットがある⼈人でも簡単にはできない)
まだまだHTML5を使いこなしている⼈人が少ない 適当に作っただけでは、⼗十分な品質のアプリが作 れない
14.
Performance 既にデスクトップでは、⼗十分なパフォーマンスがある スマートフォンはPCの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.
Page Load リソースの最適化
リクエスト数を抑える リダイレクトを避ける レンダリングの優先度度
19.
リソースの最適化 Webサイトのサイズのうち63%は画像 画像を⼩小さくすれば多くの通信容量量を削減することができる
貧弱なモバイル回線ではとても重要 ツールを利利⽤用する JPEG: jpegtran、jpegoptim PNG: OptiPNG、PNGOUT (私はMacでImageAlpha、ImageOptimを使ってます) その他、JS、CSSファイルのminifyなど
20.
リクエスト数を抑える モバイル回線ではHTTPリクエストは⾮非常に⾼高コスト 電波状況にもよるが、1リクエスト増えたら200ms〜~
1000ms増えてもおかしくない JS、CSSの結合など 画像の結合(CSS Sprite) JS、CSS、画像の埋め込み(data URL)など
21.
DNSプリフェッチ <link rel="dnp-prefetch"
href="example.com"> ! 事前にDNS Lookupを済ませてキャッシュしておく 別ドメインへのアクセスがある場合は⾼高速化できる かも(SNSボタン等)
22.
リダイレクトを避ける モバイルサイトへのリダイレクトなどを避ける 同⼀一のURLで複数のUAに対応したり、レスポンシブに
する
23.
WebPageTest http://www.webpagetest.org/
24.
WebPageTestの結果
25.
Page Load Page
Loadで重要なのは、ファーストビューが描 画されるまでの時間(画⾯面外のレンダリングや画 像の読込みなどは体感速度度には影響しない) WebPageTestでは、「Speed Index」が良良い指 標になる 「Speed Index」は、ファーストビューが描画さ れるまで平均時間(ミリ秒)
26.
WebPageTestの結果 White screen
Visually complete
27.
レンダリングの優先度度 レンダリングをブロックするリソースを取り除く ファーストビューのリソースを再優先に
画像の遅延読込みなど(Lazy Loadなど) スクロールしなければ表⽰示されない領領域は後回しに プログレッシブJPEG、インターレースPNGを使う
28.
Optimizing the Critical
Rendering Path https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
29.
Runtime 60Hz >
60fps > 16ms
30.
Chrome DevTools/Timeline Chrome
DevToolsを起動(Cmd+Opt+i/Ctrl+Alt+i)して Timelineパネル上で記録、停止( )。Frames mode( )で表示
31.
Runtime アニメーションにおいて過度度な装飾を抑える requestAnimationFrameを使う
DOMアクセスの最適化 メモリの最適化(JavaScript)
32.
アニメーションにおいて過 度度な装飾を抑える 過度度な装飾は重い
border-‐‑‒radius、box-‐‑‒shadow、text-‐‑‒shadow、*-‐‑‒gradient などなど とくにアニメーションする場合には注意が必要 場合によっては画像を使うことも検討 特定のプロパティを利利⽤用してアニメーションをするように 再構築する
33.
Hight Performance Animation
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
34.
Frames on Chrome
DevTools
35.
requestAnimationFrame を使う setIntervalやsetTimeoutでは、単に処理理をスタックさせ
るだけなので16msのリフレッシュレートに合わせて実⾏行行 させるには不不⼗十分 ⾮非対応ブラウザにはPolyfillもあるので、積極的に requestAnimationFrameを使う
36.
DOMアクセスの最適化 DOMプロパティを変数のように使わない(必要があれば 変数に格納)
DOMプロパティへのアクセスはレイアウトの再計算など が⾛走ることがあるため必要最⼩小限に(キャッシュを利利 ⽤用) 特に注意が必要なプロパティ getComputedStyle()、offset*系のプロパティ、 client*系のプロパティ、scroll*系のプロパティ
37.
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);
38.
DOMアクセスの最適化 Chrom DevTools
> Timelineパネル 記録・停止 > 警告マークのレコードをクリック
39.
メモリの最適化 GCが発⽣生しないようにメモリの使⽤用量量をコントロールする 最初に必要なメモリをすべて確保する、オブジェクトプール
を作る(オブジェクトの再利利⽤用)などの⽅方法がある よくある誤解としては、GCはいったん発⽣生すると200msの Stop the worldが発⽣生すると思われがちだが、最近ではイン クリメンタルGCの採⽤用で、1度度の停⽌止は10ms程度度に収まっ ている(その代わり何度度も発⽣生するので気にしなくて良良いと いうわけではない)
40.
Writing Fast, Memory-‐‑‒Efficient
JavaScript http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
41.
JavaScript Memory Management
Masterclass https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass
42.
その他
43.
PageSpeed Insight http://developers.google.com/speed/pagespeed/insights/
44.
45.
Extra: Service Worker
オフラインWebアプリケーションのためのAppCache に代わる仕様 Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する 個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる http://html5experts.jp/myakura/8365/
46.
Appendix: Web Components
独⾃自の要素(例例えばUIパーツなど)を個別に作成、イ ンポートできる仕様 詳細は他のセッションで。 将来的には、ツールでの活⽤用や、⾼高品質なコンポーネ ントを再利利⽤用することによって全体的な品質の底上げ が期待できる http://html5experts.jp/1000ch/8906/
47.
ネイティブとの差を埋めて よりよいHTML5ライフを
48.
Thank you!! (@yoshikawa_̲t)
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
Jetzt herunterladen