SPAの

速度改善について

PUX / sogo ohta

SPAの

表示速度改善について

SPAの

　ファーストビューを

如何に速く表示するか

PageSpeed Insights

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はもっと速くなる・・・

成長し続けるWebに

ご期待下さい！！