SPAの
速度改善について
PUX / sogo ohta
SPAの
表示速度改善について
SPAの
ファーストビューを
如何に速く表示するか
SPAでありがちなこと
SPAでありがちなこと
JS／CSSファイルが肥大化する
SPAでありがちなこと
JS／CSSファイルが肥大化する
↓
ダウンロード時間が長い
SPAでありがちなこと
JS／CSSファイルが肥大化する
↓
ダウンロード時間が長い
レンダリングブロックが長い
↓
SPAでありがちなこと
JS／CSSファイルが肥大化する
↓
ダウンロード時間が長い
レンダリングブロックが長い
↓
ファーストビューの表示が遅い
↓
理想
ファーストビューを表示するときには
ファーストビューに必要な
最小限のHTML／CSS／JSだけを
ロードする
残りのリソースは必要なときに必要な分
をロードする
現実に立ち向かう
-
画像最適化
-
ファーストビューCSSのインライン化
-
ファーストビュー以外のCSSファイルを非同期ロード
-
CSS/JSファイルのlong term caching
画像最適化
OptiPNGで画像サイズを小さくした
ファーストビューCSSの
インライン化
外部CSSファイルのダウンロードと処理が完了するまで
レンダリングはブロックされる
<link rel="stylesheet" href="/public/css/sp.css?version=-v20170829130621">ファーストビューCSSの
インライン化
HTMLに直接styleタグを埋め込んで
レンダリングブロックを回避
ファーストビュー以外のCSSを
非同期ロード
同期（レンダリングブロックする）
Text
<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">
<link rel="stylesheet" href="style.css">非同期（レンダリングブロックしない）
ファーストビュー以外のCSSを
非同期ロード
Text
iOS Safari...
ログイン画面以外のCSSを
非同期ロードする
Text
preloadのJavaScript polyfill
CSS/JSファイルの
long term caching
Text
ビルドごとに出力するJS／CSSをファイルの名前を一意にして
強いブラウザキャッシュを指定することで2度と通信させない
CSS/JSファイルの
long term caching
Text
ファイル名にハッシュ値を埋め込むか
or
クエリストリングに一意値を指定するか
で一意性を実現する
CSS/JSファイルの
long term caching
Text
それ、Webpackでできるよ！
もっと速くなれる
もっと速くなれる
- Service Worker
- HTTP/2
iOS SafariでService Worker
が動くようになる気配
んなこたーない
でもService WorkerやHTTP/2でWebはもっと速くなる・・・
