Slide 1
Slide 1 text
PAGE
DAY 2019/02/14
# MOONGIFT / 50
Web高速化のススメ
1
Slide 2
Slide 2 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
自己紹介
2
@goofmint
fb.me/goofmint
中津川 篤司
株式会社MOONGIFT代表取締役
エバンジェリスト
コミュニティ
主催
https://www.moongift.jp
Slide 3
Slide 3 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
今日お話しすること
•フロントエンドでユーザ体験を向上させる
•格好良さだけでなく実益につながる改善
3
Slide 4
Slide 4 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
今日お話しないこと
•Monacaのこと
•サーバサイドの改善（Monacaはフロント向けなので…）
•実装
4
Slide 5
Slide 5 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
よく使うWebサービス
5
Slide 6
Slide 6 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
遅い =
•2016年01月 読み込みに3秒かかると20%が離脱
•2018年11月 読み込みに3秒かかると53%が離脱
6
Slide 7
Slide 7 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
遅い =
•ECサイトで1秒遅いとコンバージョン率△7%
•Amazonでは0.1秒遅いと売上△1%
7
Slide 8
Slide 8 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
旅行先にて
Gwifiは1日500MBまで
切れると128kbps制限
追加購入したい
サイトめっちゃ遅い…
JavaScript動かない
jQueryの読み込みでエラー出てる
8
Slide 9
Slide 9 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
Slide 10
Slide 10 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
高速化'
10
Slide 11
Slide 11 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
高速化？
11
*
サーバ増強！
ネットワーク回線強化！
DOM改善
ネットワーク改善
プログラム改善
Slide 12
Slide 12 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
Webフロントエンドのボトルネック
•レンダリングが遅い、重たい
•ネットワークが遅い
•JavaScript自体が遅い
12
Slide 13
Slide 13 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
DOM改善
13
Slide 14
Slide 14 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
仮想DOMを使いましょう
•React/Vue.js/Riotなど
•DOMを更新すべきかどうかはフレームワー
クに任せる
•UI情報をJavaScriptにあらかじめ持たせる
ことで、データ通信量を大幅に減らせる
14
Slide 15
Slide 15 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
DOMの幅/高さを指定する
•画像の高さがずれた時のDOM再計算が重い
•テキストも可変にせず、溢れた時の処理を入れる
•iframeを使うと再計算処理が走らないので高速化する
↑実際やると結構地獄なので注意
https://vimeo.com/55486684
15
Slide 16
Slide 16 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
UI/UX
•アニメーションはCSS3でGPUを使う
でも実装するのは大変
•ライブラリ、フレームワークを採用する
•Onsen UI/ionic/Framework7など
モバイル向けはデスクトップブラウザをサポートしていない
ことがあるので注意
16
Slide 17
Slide 17 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
ϒϥβ ϑϨʔϜϫʔΫ
0OTFO6*
*POJD
'SBNFXPSL
Slide 18
Slide 18 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
ネットワーク改善
18
Slide 19
Slide 19 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
CACHE APIを使おう！
•JavaScriptから操作できるローカルプロキシ
•任意のURL、コンテンツをキャッシュ可能
19
Slide 20
Slide 20 text
PAGE
# MOONGIFT / 12
DAY 2019/05/15
CACHE API
• Service Worker内で動作するキャッシュシステム
• URLをキー、レスポンスをバリューにしたKVS
• 有効期限などがないのでWorkboxと組み合わせると吉
20
リクエスト リクエスト
Service Worker
Webブラウザ
レスポンス レスポンス
サーバ
キャッシュなし
Slide 21
Slide 21 text
PAGE
# MOONGIFT / 12
DAY 2019/05/15
CACHE API
• Service Worker内で動作するキャッシュシステム
• URLをキー、レスポンスをバリューにしたKVS
• 有効期限などがないのでWorkboxと組み合わせると吉
21
リクエスト
Service Worker
Webブラウザ
レスポンス
サーバ
キャッシュあり
Slide 22
Slide 22 text
PAGE
# MOONGIFT / 12
DAY 2019/05/15
キャッシュパターン
22
ΦϯϥΠϯ ΦϑϥΠϯ උߟ
Ωϟογϡ ͋Γ ͳ͠ ͋Γ ͳ͠
ΩϟογϡϑΝʔετ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ جຊ
ωοτϫʔΫϑΝʔετ ωοτϫʔΫ ωοτϫʔΫ Ωϟογϡ Τϥʔ ։ൃ࣌ʹ͓קΊ
ΩϟογϡΦϯϦʔ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ
ωοτϫʔΫΦϯϦʔ ωοτϫʔΫ ωοτϫʔΫ ωοτϫʔΫ Τϥʔ ։ൃ࣌ʹ͓קΊ
ฏߦߋ৽ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ ΦϯϥΠϯͳΒΩϟογϡߋ৽
via Workbox
Slide 23
Slide 23 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
メリット
•ネットワークアクセスを大幅に減らせます
•オフラインでもWebアプリケーションが使えます
23
Slide 24
Slide 24 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
注意点
•キャッシュを自動更新する仕組みはありません
•削除、更新する仕組みを作っておかないと大変なこと
になります
•開発中はネットワークファーストで開発しましょう
24
Slide 25
Slide 25 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
JavaScriptの速度改善
25
Slide 26
Slide 26 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
WebAssemblyを使おう！
•Webブラウザ上で動くバイナリフォーマット
•超高速！
26
Slide 27
Slide 27 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
速度比較（フィボナッチ）
27
JAVASCRIPT WASM
20 2 1
30 69 4
40 6,733 423
42 17,356 1,061
44 46,195 2,839
Slide 28
Slide 28 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
注意点
•WebAssemblyはプログラミング言語ではありません
•WebAssemblyはDOMが扱えません
•WebAssemblyはネットワークが扱えません
28
Slide 29
Slide 29 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
対応言語
•C/C++
•Rust
•C#
•Java
29
•Go
•AssemblyScript
•Kotlin/Native
•その他LLVM対応言語
Slide 30
Slide 30 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
DOM/ネットワーク利用
30
1. 処理を依頼
2. 実行結果を返却
Slide 31
Slide 31 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
DOM/ネットワークが使える言語
•Rust
web-sysというcrate（ライブラリ）で実現
•Go
syscall/jsというライブラリ
31
Slide 32
Slide 32 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
Canvas/WebGLは使えます
•メモリを直接書き換えるので複雑
•ゲーム、グラフィック描画には最適
32
Slide 33
Slide 33 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
まとめ
•DOM描画が遅い → 仮想DOMを使おう
•ネットワークが遅い → CACHE APIを使おう
•JavaScriptが遅い… → WebAssemblyを使おう
33
Slide 34
Slide 34 text
PAGE
# MOONGIFT / 50
DAY 2019/02/14
+ Thanks!
@goofmint
fb.me/goofmint
ご感想お待ちします！