Enviar pesquisa
Carregar
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
•
35 gostaram
•
8,945 visualizações
Eiji Kodama
Seguir
第一回Build Insider OFFLINEでの資料です。
Leia menos
Leia mais
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 53
Baixar agora
Baixar para ler offline
Recomendados
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
無料で始めるアプリのバックエンド開発
無料で始めるアプリのバックエンド開発
Shoichi Takagi
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
nanapi IGNITIONチームの開発フローとその構築
nanapi IGNITIONチームの開発フローとその構築
晃 遠山
小さく早い改善がスマホのサービス開発を変える
小さく早い改善がスマホのサービス開発を変える
Hiroto Igarashi
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
Azure Mobile ServicesとAzure Mobile Apps
Azure Mobile ServicesとAzure Mobile Apps
Masaki Yamamoto
Recomendados
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
無料で始めるアプリのバックエンド開発
無料で始めるアプリのバックエンド開発
Shoichi Takagi
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
nanapi IGNITIONチームの開発フローとその構築
nanapi IGNITIONチームの開発フローとその構築
晃 遠山
小さく早い改善がスマホのサービス開発を変える
小さく早い改善がスマホのサービス開発を変える
Hiroto Igarashi
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
Azure Mobile ServicesとAzure Mobile Apps
Azure Mobile ServicesとAzure Mobile Apps
Masaki Yamamoto
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
Microsoft Azureで始めるサクサクAndroid開発 in jazug青森
Microsoft Azureで始めるサクサクAndroid開発 in jazug青森
Masaki Yamamoto
Crunchtimer会社案内
Crunchtimer会社案内
Yuya Miyamoto
PWAがたぶんくる
PWAがたぶんくる
Ryu Shindo
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
ServiceWorkerでつくるWebの未来
ServiceWorkerでつくるWebの未来
Yoshiki Kobayashi
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Imamura Masayuki
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
WordPressサイトをスマホアプリにしちゃおう!
WordPressサイトをスマホアプリにしちゃおう!
Ryu Shindo
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
Ryu Shindo
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
Tomokatsu Iguchi
チーム「ヘップバーン」- 2020/09 キャンプハッカソン
チーム「ヘップバーン」- 2020/09 キャンプハッカソン
Saito Kotaro
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
iPride Co., Ltd.
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
H2O Space. Co., Ltd.
スケーラビリティと耐障害性を両立するWeb アプリケーション
スケーラビリティと耐障害性を両立するWeb アプリケーション
Masayoshi Hagiwara
Mais conteúdo relacionado
Mais procurados
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
アシアル株式会社
Microsoft Azureで始めるサクサクAndroid開発 in jazug青森
Microsoft Azureで始めるサクサクAndroid開発 in jazug青森
Masaki Yamamoto
Crunchtimer会社案内
Crunchtimer会社案内
Yuya Miyamoto
PWAがたぶんくる
PWAがたぶんくる
Ryu Shindo
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
ServiceWorkerでつくるWebの未来
ServiceWorkerでつくるWebの未来
Yoshiki Kobayashi
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
アシアル株式会社
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
アシアル株式会社
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Imamura Masayuki
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
アシアル株式会社
WordPressサイトをスマホアプリにしちゃおう!
WordPressサイトをスマホアプリにしちゃおう!
Ryu Shindo
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
アシアル株式会社
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
Ryu Shindo
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Shin Ogata
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
Tomokatsu Iguchi
チーム「ヘップバーン」- 2020/09 キャンプハッカソン
チーム「ヘップバーン」- 2020/09 キャンプハッカソン
Saito Kotaro
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
iPride Co., Ltd.
Mais procurados
(20)
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
Microsoft Azureで始めるサクサクAndroid開発 in jazug青森
Microsoft Azureで始めるサクサクAndroid開発 in jazug青森
Crunchtimer会社案内
Crunchtimer会社案内
PWAがたぶんくる
PWAがたぶんくる
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
ServiceWorkerでつくるWebの未来
ServiceWorkerでつくるWebの未来
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
iQONの開発手法 at iQONエンジニアセミナー
iQONの開発手法 at iQONエンジニアセミナー
Web標準技術でiOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発
WordPressサイトをスマホアプリにしちゃおう!
WordPressサイトをスマホアプリにしちゃおう!
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
チーム「ヘップバーン」- 2020/09 キャンプハッカソン
チーム「ヘップバーン」- 2020/09 キャンプハッカソン
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
Hello, React!! まで導く Reactの基礎
Hello, React!! まで導く Reactの基礎
Destaque
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
H2O Space. Co., Ltd.
スケーラビリティと耐障害性を両立するWeb アプリケーション
スケーラビリティと耐障害性を両立するWeb アプリケーション
Masayoshi Hagiwara
ProductManagement / front-endin Sansan( & remote work)
ProductManagement / front-endin Sansan( & remote work)
Iwashita Hironori
よりよい開発を目指すための、プロセス&ツール活用
よりよい開発を目指すための、プロセス&ツール活用
Kaoru NAKAMURA
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Marie Suenaga
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Marie Suenaga
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
一生食える強みの作り方 まとめ
一生食える強みの作り方 まとめ
Manabu Uekusa
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
Tusyoshi Matsuzaki
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
短期間でのスマホ向けWeb開発
短期間でのスマホ向けWeb開発
Manabu Uekusa
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Yossy Taka
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
Yossy Taka
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
Destaque
(20)
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
スケーラビリティと耐障害性を両立するWeb アプリケーション
スケーラビリティと耐障害性を両立するWeb アプリケーション
ProductManagement / front-endin Sansan( & remote work)
ProductManagement / front-endin Sansan( & remote work)
よりよい開発を目指すための、プロセス&ツール活用
よりよい開発を目指すための、プロセス&ツール活用
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
スマートフォン対応とレスポンシブWebデザイン
スマートフォン対応とレスポンシブWebデザイン
Css nite fukuoka8 suenaga
Css nite fukuoka8 suenaga
Node.js Hands-On
Node.js Hands-On
一生食える強みの作り方 まとめ
一生食える強みの作り方 まとめ
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
.NET Web プログラミングにおける非同期 IO のすべて (Build Insider OFFLINE)
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
短期間でのスマホ向けWeb開発
短期間でのスマホ向けWeb開発
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Semelhante a スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
CData Software Japan
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
アシアル株式会社
AppPot製品概要
AppPot製品概要
Ryohei Sogo
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
Masakazu Muraoka
アジャイル開発のためのDatadog
アジャイル開発のためのDatadog
Nobuyasu Seki
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
Masakazu Muraoka
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
Ryohei Sogo
業務アプリを安全に効率的に開発・運用するためのポイント
業務アプリを安全に効率的に開発・運用するためのポイント
アシアル株式会社
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
Monaca
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
Kaz Furukawa
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Masakazu Muraoka
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
久司 中村
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
Yahoo!デベロッパーネットワーク
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
Shunsuke Kawai
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
Yuta Sayama
Yahoo!ブラウザーにおける市場環境の分析と戦略化
Yahoo!ブラウザーにおける市場環境の分析と戦略化
Yahoo!デベロッパーネットワーク
誰もがアプリ開発に携われる時代へ ビジネスを加速させるローコードプラットフォーム Power Platform のご紹介
誰もがアプリ開発に携われる時代へ ビジネスを加速させるローコードプラットフォーム Power Platform のご紹介
Junichi Kodama
4.5G/5G環境でのECサイトの高速化 ― 変わるモバイル購買体験
4.5G/5G環境でのECサイトの高速化 ― 変わるモバイル購買体験
Yoichiro Takehora
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
Semelhante a スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
(20)
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
AppPot製品概要
AppPot製品概要
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
アジャイル開発のためのDatadog
アジャイル開発のためのDatadog
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
業務アプリを安全に効率的に開発・運用するためのポイント
業務アプリを安全に効率的に開発・運用するためのポイント
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
非エンジニアのためのIT勉強会 ハイブリッドフレームワーク
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
パーソナライズニュースを支えるML業務のまわしかた@Yahoo! JAPAN
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
20180206 Lay App Grow App で進める DevOps アプリ開発アプローチ
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
Yahoo!ブラウザーにおける市場環境の分析と戦略化
Yahoo!ブラウザーにおける市場環境の分析と戦略化
誰もがアプリ開発に携われる時代へ ビジネスを加速させるローコードプラットフォーム Power Platform のご紹介
誰もがアプリ開発に携われる時代へ ビジネスを加速させるローコードプラットフォーム Power Platform のご紹介
4.5G/5G環境でのECサイトの高速化 ― 変わるモバイル購買体験
4.5G/5G環境でのECサイトの高速化 ― 変わるモバイル購買体験
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
1.
スマホ向けWebアプリ開発で使える フロントエンド高速化手法 株式会社gloops 児玉 映治
2.
2 自己紹介 • 児玉 映治 •
株式会社gloops UI/UXグループマネージャー 兼WEBデザイングループマネージャー • 元々サーバサイドのエンジニア
3.
3 弊社紹介 • 株式会社gloops • 事業内容:ソーシャルアプリケーション事業 •
累計ユーザー数1800万人 • 主なタイトル
4.
4 アジェンダ 1. フロントエンド高速化の基本 ① ページサイズとHTTPリクエストの軽減 ②
ソースコードの最適化 2. ユーザーの体感速度 ① レンダリング ② イベント
5.
5 1. フロントエンド高速化の基本
6.
6 なぜフロントエンドの高速化が必要なのか ・ネイティブアプリ並のリッチさとパフォーマンスを スマホのWebアプリにも求められる ・UXに直結 ・継続率、離脱率、売上などに影響
7.
7 代表的な高速化の方法 ・ページサイズを軽くする ・HTTPリクエストを減らす ・styleは上に、scriptは下に書く ・CSSセレクタの最適化 ・処理速度の速いJavaScriptを書く ここと ここの話
8.
8 ① ページサイズとHTTPリクエストの軽減
9.
9 ページサイズを軽くする方法 ・画像最適化 ・画像をCSSで代用する ・minify化、gzip圧縮 ・キャッシュを使う
10.
10 HTTPリクエストを減らす方法 ・CSSスプライトを使う ・DataURIスキームを使う ・画像をCSSで代用する ・cssファイルや、jsファイルを纏める ここの話
11.
11 ・HTTPリクエストを一気に減らせる CSSスプライトの特徴 ・画像の表示は遅い ⇒CSSの解釈が終わってから画像を取りに行くため ・画像を用意する人とCSSを作る人が別々の場合 運用が少々面倒
12.
12 DataURIスキームの特徴 ・CSSスプライトより表示処理は早い ・画像ファイルの時より容量が増加する =キャッシュ必須 ・画像を更新するにはCSSファイルも更新する必要がある =キャッシュクリアされ、初回の読込みに時間がかかる ・HTTPリクエストが発生しない
13.
13 CSSスプライト ・更新頻度が少ない ・一つの画面で1回くらいしか使わない それぞれどう使い分ける? DataURIスキーム ・更新頻度が少ない ・一つの画面で何度も使う ・色数やサイズが小さい
14.
14 ・ページサイズは何kb? HTTPリクエストは何回? どの程度まで軽減するべきか? ・1秒以内を目指す ⇒2秒を超えると人は遅いと感じる ・速ければ速い程良い ・あとはデザインのクオリティと相談
15.
15 ページサイズを軽くした結果 ページサイズ HTTPリクエスト 時間 1120kb
50 1238.36ms 725kb 50 1036.88ms 508kb 50 910.67ms 308kb 50 689.29ms あるアプリでのLoadイベントまでの時間 ※iPhone4S(ios6.1) 3G回線を使用
16.
16 HTTPリクエストを減らした結果 ページサイズ HTTPリクエスト 時間 447kb
80 1006.86ms 436kb 50 939.71ms 442kb 35 662.50ms
17.
17 ページサイズ HTTPリクエスト 時間 447kb
80 1006.86ms 436kb 50 939.71ms 442kb 35 662.50ms
18.
18 あるアプリBで、2倍以上の差が発生 ページサイズ HTTPリクエスト 時間 アプリA
508kb 57 910.67ms アプリA 442kb 35 662.50ms アプリB 517kb 33 2091.90ms 減らすだけでは不十分
19.
19 ページサイズとHTTPリクエストを 減らしても遅い場合
20.
20 ② ソースコードの最適化 その1. CSS編
21.
21 CSSセレクタの高速化 ・セレクタは右から左へ解釈されるので 細かくするよりもシンプルにする方が高速
22.
22 計ってみた iPhone4 iPhone5 Galaxy
Nexus div > div > div > div.hoge 432ms 203ms 605ms .hoge 405ms 201ms 595ms 1000回実行してみると
23.
23 CSSセレクタの高速化 ・セレクタは右から左へ解釈されるので 細かくするよりもシンプルにする方が高速 ・運用性を重視した方が総合的に見て良い ・難解なセレクタ、汎用性のないセレクタ、 複雑な構造のHTMLにならないようにする
24.
24 セレクタよりも描画処理に注意する ・Google Chromeの開発ツールでTimelineを確認すると ボトルネックは大抵描画(緑色:Painting)
25.
25 ・重めのCSS ・スマホでCSSスプライトを使う場合 RetinaDisplay対応のためにbackground-size指定はほぼ必須 ⇒スプライト画像が大きいと background-sizeの処理も重くなる 描画が重くなるCSS
26.
26 描画が重い原因を探す ・Google Chrome Canaryの開発ツール ・CSSプロパティを調整し 重い原因を探す
27.
27 ② ソースコードの最適化 その2. JavaScript編
28.
28 変数を利用する ・DOM, 関数, style,
length etc… 複数回使うなら変数の中に入れてそっちを使う ・必ずvarで宣言してローカル変数にする ・基本中の基本 ・だけど見落としやすい
29.
29 変数を利用してDOM操作の回数を減らす
30.
30 一度に処理してDOM操作の回数を減らす
31.
31 かかる時間はJavaScriptだけではない ・DOM操作を行うと、ブラウザ側でも スタイルやレイアウトの再計算が行われている ・DOM操作の回数を減らすことで JavaScriptの処理だけでなく ブラウザ側の処理も軽くすることができる
32.
32 ② ソースコードの最適化 その3. jQuery編
33.
33 jQueryの最適化 ・jQueryオブジェクトの生成 速いのはどっち?
34.
34 jQueryの最適化 ・jQueryオブジェクトの生成 ○ × 速いのはどっち? ※ただしgetElementsByClassNameが実装されていないブラウザの場合はBが速い スマホの場合はA
35.
35 jQueryのセレクタの仕組み ① 初めにgetElementBy系が使われる (getElementById, getElementsByClassName,
getElementsByTagName) ② ①で取れない場合はquerySelectorAllが使われる ③ ②でもダメならsizzleエンジンが使われる
36.
36 jQueryのセレクタの仕組み ① 初めにgetElementBy系が使われる (getElementById, getElementsByClassName,
getElementsByTagName) ② ①で取れない場合はquerySelectorAllが使われる ③ ②でもダメならsizzleエンジンが使われる
37.
37 jQueryなどライブラリ利用時の注意点 ・確かに便利 ・だけど中でどういう処理がされているのかを 知っておくことで、 より速い処理を選択することができる
38.
38 1. フロントエンド高速化の基本 まとめ ・様々な高速化の手法が既に公開されている ・必ず自分自身で確かめる ・しかし自分と全く同じ環境で効果があるとは限らない
39.
39 2. ユーザーの体感速度
40.
40 ・ページサイズとHTTPリクエストを軽減すれば 速くなる 高速化のジレンマ ・ある程度まで軽減すると、 そこから先はデザインのクオリティが犠牲になる
41.
41 デザインのクオリティは下げられない 表示速度をこれ以上速くするのは難しい
42.
42 ① レンダリング ユーザーは読み込み中であろうと 操作できると思ったら即座に操作を始める 操作できると思う部分を先に表示して ユーザーにとっての待ち時間を短くする
43.
43 ・画像のレンダリングは表示方法によって順番が異なる 画像のレンダリング順を入れ替える ・img要素か、CSSのbackground-imageか ・img要素の方が、CSSのbackground-imageより 速く表示される(先にレンダリングされる) ・速く表示したい部分はimg要素で実装する
44.
44 <a href=“#” style=“position:absolute;
width:20px; height:20px; overflow:hidden; display:block;”> <img src=“sprite.png” width=“100” height=“200” alt=“hoge” style=“position:absolute; top:50px; left:0px;” /> </a> スプライト画像を使う ・img要素でもスプライト画像は使える ※但しHTMLの階層が深くなりやすい
45.
45 ② イベント ユーザーは何かの操作に対する応答が 100ms以上かかると違和感を持つ ユーザーの操作に対して速く応答する
46.
46 タップ時のイベントの種類 ・スマホでのタップ関連のイベントは主に次の6つがある mousedown, mousemove, mouseup touchstart,
touchmove, touchend
47.
47 touchイベントとmouseイベントの違い ・PCはtouchイベントが発生しない ・スマホでもmouseイベントやclickイベントは発生するが 違和感を感じるレベルでtouchイベントよりも遅い ・スマホであればtouchイベントを使う 何でもかんでもonclickで作らない
48.
48 touchstartとtouchend ・touchstart⇒指が触れただけで発生する touchend⇒ディスプレイから指を離すと発生する ・モーダルウィンドウやアコーディオンの表示など、 瞬時に処理を実行したい場合はtouchstartを使う ・ただしスマホの場合、画面をスクロールする時に ボタンに触れてしまうことがよくある。 画面遷移の実行など 全て反応が速ければ良いというわけでもない
49.
49 2. ユーザーの体感速度 まとめ ・基本的な高速化の対応をしたら 後はどれだけ気付き、気遣えるか ・そのためにはユーザーと同じ目線、 通信環境、心理状態になって 自分のアプリを触ってみることが必要 ・ユーザーに取って重要な部分がわかったら、 徹底的にそこをチューニングする
50.
50 3. さいごに
51.
51 なぜフロントエンドの高速化が必要なのか ・ネイティブアプリ並のリッチさとパフォーマンスを スマホのWebアプリにも求められる ・UXに直結 ・継続率、離脱率、売上などに影響
52.
52 なぜフロントエンドの高速化が必要なのか ・より良いUXの提供を目指す上で 操作時の不自然さは大きな障害 ・その不自然さを取り除くことが 高速化の役割 ・方法は色々あるので、 ユーザー目線に立って根気強くベストプラクティスを探す
Baixar agora