Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web高速化のススメ
Search
Atsushi Nakatsugawa
PRO
May 30, 2019
Technology
0
670
Web高速化のススメ
ゆるWeb勉強会 with Monaca UG in Sapporoの発表資料です。
https://monacaug.connpass.com/event/130871/
Atsushi Nakatsugawa
PRO
May 30, 2019
Tweet
Share
More Decks by Atsushi Nakatsugawa
See All by Atsushi Nakatsugawa
DevRelファーストステップ
moongift
PRO
0
24
DevRelのフォーカス領域の変化とコンテンツのあり方
moongift
PRO
0
67
SendGrid + Googleスプレッドシートによる簡単Webサイト構築
moongift
PRO
0
360
コストを下げた動画作成テクニックの紹介
moongift
PRO
0
170
テックブログを分析して分かった始めるコツ・続けるコツ
moongift
PRO
8
3.6k
DevRelが失敗する企業の特徴とその対策
moongift
PRO
2
420
DevRel Regional Characteristics
moongift
PRO
0
10
月100本以上ブログ記事を書いて通して学んだ記事のアイディアの出し方
moongift
PRO
0
420
Google I/O 2021 Recap
moongift
PRO
1
58
Other Decks in Technology
See All in Technology
ServiceNow Knowledge Learning Rise up
manarobot
0
210
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
340
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
210
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
530
Building Dashboards as a Hobby
egmc
0
230
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Rails Girls Zürich Keynote
gr2m
91
13k
Infographics Made Easy
chrislema
238
18k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Adopting Sorbet at Scale
ufuk
68
8.6k
Writing Fast Ruby
sferik
621
60k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
What the flash - Photography Introduction
edds
64
11k
Designing for humans not robots
tammielis
248
25k
Faster Mobile Websites
deanohume
299
30k
Designing Experiences People Love
moore
136
23k
Transcript
PAGE DAY 2019/02/14 # MOONGIFT / 50 Web高速化のススメ 1
PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint
fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
PAGE # MOONGIFT / 50 DAY 2019/02/14 今日お話しすること •フロントエンドでユーザ体験を向上させる •格好良さだけでなく実益につながる改善
3
PAGE # MOONGIFT / 50 DAY 2019/02/14 今日お話しないこと •Monacaのこと •サーバサイドの改善(Monacaはフロント向けなので…)
•実装 4
PAGE # MOONGIFT / 50 DAY 2019/02/14 よく使うWebサービス 5
PAGE # MOONGIFT / 50 DAY 2019/02/14 遅い = •2016年01月 読み込みに3秒かかると20%が離脱
•2018年11月 読み込みに3秒かかると53%が離脱 6
PAGE # MOONGIFT / 50 DAY 2019/02/14 遅い = •ECサイトで1秒遅いとコンバージョン率△7%
•Amazonでは0.1秒遅いと売上△1% 7
PAGE # MOONGIFT / 50 DAY 2019/02/14 旅行先にて Gwifiは1日500MBまで 切れると128kbps制限
追加購入したい サイトめっちゃ遅い… JavaScript動かない jQueryの読み込みでエラー出てる 8
PAGE # MOONGIFT / 50 DAY 2019/02/14
PAGE # MOONGIFT / 50 DAY 2019/02/14 高速化' 10
PAGE # MOONGIFT / 50 DAY 2019/02/14 高速化? 11 *
サーバ増強! ネットワーク回線強化! DOM改善 ネットワーク改善 プログラム改善
PAGE # MOONGIFT / 50 DAY 2019/02/14 Webフロントエンドのボトルネック •レンダリングが遅い、重たい •ネットワークが遅い
•JavaScript自体が遅い 12
PAGE # MOONGIFT / 50 DAY 2019/02/14 DOM改善 13
PAGE # MOONGIFT / 50 DAY 2019/02/14 仮想DOMを使いましょう •React/Vue.js/Riotなど •DOMを更新すべきかどうかはフレームワー
クに任せる •UI情報をJavaScriptにあらかじめ持たせる ことで、データ通信量を大幅に減らせる 14
PAGE # MOONGIFT / 50 DAY 2019/02/14 DOMの幅/高さを指定する •画像の高さがずれた時のDOM再計算が重い •テキストも可変にせず、溢れた時の処理を入れる
•iframeを使うと再計算処理が走らないので高速化する ↑実際やると結構地獄なので注意 https://vimeo.com/55486684 15
PAGE # MOONGIFT / 50 DAY 2019/02/14 UI/UX •アニメーションはCSS3でGPUを使う でも実装するのは大変
•ライブラリ、フレームワークを採用する •Onsen UI/ionic/Framework7など モバイル向けはデスクトップブラウザをサポートしていない ことがあるので注意 16
PAGE # MOONGIFT / 50 DAY 2019/02/14 ϒϥβ ϑϨʔϜϫʔΫ 0OTFO6*
*POJD 'SBNFXPSL
PAGE # MOONGIFT / 50 DAY 2019/02/14 ネットワーク改善 18
PAGE # MOONGIFT / 50 DAY 2019/02/14 CACHE APIを使おう! •JavaScriptから操作できるローカルプロキシ
•任意のURL、コンテンツをキャッシュ可能 19
PAGE # MOONGIFT / 12 DAY 2019/05/15 CACHE API •
Service Worker内で動作するキャッシュシステム • URLをキー、レスポンスをバリューにしたKVS • 有効期限などがないのでWorkboxと組み合わせると吉 20 リクエスト リクエスト Service Worker Webブラウザ レスポンス レスポンス サーバ キャッシュなし
PAGE # MOONGIFT / 12 DAY 2019/05/15 CACHE API •
Service Worker内で動作するキャッシュシステム • URLをキー、レスポンスをバリューにしたKVS • 有効期限などがないのでWorkboxと組み合わせると吉 21 リクエスト Service Worker Webブラウザ レスポンス サーバ キャッシュあり
PAGE # MOONGIFT / 12 DAY 2019/05/15 キャッシュパターン 22 ΦϯϥΠϯ
ΦϑϥΠϯ උߟ Ωϟογϡ ͋Γ ͳ͠ ͋Γ ͳ͠ ΩϟογϡϑΝʔετ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ جຊ ωοτϫʔΫϑΝʔετ ωοτϫʔΫ ωοτϫʔΫ Ωϟογϡ Τϥʔ ։ൃ࣌ʹ͓קΊ ΩϟογϡΦϯϦʔ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ ωοτϫʔΫΦϯϦʔ ωοτϫʔΫ ωοτϫʔΫ ωοτϫʔΫ Τϥʔ ։ൃ࣌ʹ͓קΊ ฏߦ ߋ৽ Ωϟογϡ ωοτϫʔΫ Ωϟογϡ Τϥʔ ΦϯϥΠϯͳΒΩϟογϡߋ৽ via Workbox
PAGE # MOONGIFT / 50 DAY 2019/02/14 メリット •ネットワークアクセスを大幅に減らせます •オフラインでもWebアプリケーションが使えます
23
PAGE # MOONGIFT / 50 DAY 2019/02/14 注意点 •キャッシュを自動更新する仕組みはありません •削除、更新する仕組みを作っておかないと大変なこと
になります •開発中はネットワークファーストで開発しましょう 24
PAGE # MOONGIFT / 50 DAY 2019/02/14 JavaScriptの速度改善 25
PAGE # MOONGIFT / 50 DAY 2019/02/14 WebAssemblyを使おう! •Webブラウザ上で動くバイナリフォーマット •超高速!
26
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
PAGE # MOONGIFT / 50 DAY 2019/02/14 注意点 •WebAssemblyはプログラミング言語ではありません •WebAssemblyはDOMが扱えません
•WebAssemblyはネットワークが扱えません 28
PAGE # MOONGIFT / 50 DAY 2019/02/14 対応言語 •C/C++ •Rust
•C# •Java 29 •Go •AssemblyScript •Kotlin/Native •その他LLVM対応言語
PAGE # MOONGIFT / 50 DAY 2019/02/14 DOM/ネットワーク利用 30 1.
処理を依頼 2. 実行結果を返却
PAGE # MOONGIFT / 50 DAY 2019/02/14 DOM/ネットワークが使える言語 •Rust web-sysというcrate(ライブラリ)で実現
•Go syscall/jsというライブラリ 31
PAGE # MOONGIFT / 50 DAY 2019/02/14 Canvas/WebGLは使えます •メモリを直接書き換えるので複雑 •ゲーム、グラフィック描画には最適
32
PAGE # MOONGIFT / 50 DAY 2019/02/14 まとめ •DOM描画が遅い →
仮想DOMを使おう •ネットワークが遅い → CACHE APIを使おう •JavaScriptが遅い… → WebAssemblyを使おう 33
PAGE # MOONGIFT / 50 DAY 2019/02/14 + Thanks! @goofmint
fb.me/goofmint ご感想お待ちします!