サイト高速化案件

1. 速度系の話
@nakajima

2. me.
名前
なかじま たくや
主にHOME’Sの表側やってた
フロントエンドがメイン業務(去年は
)

3. 今日の話

4. フロントエンドから考える
サイト高速化

5. トピック
DOM Parserと向き合う高速化
レンダラーと向き合う高速化
体感速度チューニング
まとめ

6. トピック
DOM Parserと向き合う高速化
レンダラーと向き合う高速化
体感速度チューニング
まとめ

7. DOM Parserと向き合う
高速化

8. 事例で学ぶ

9. 事件で学ぶ

10. リターゲ広告事件
Aさん 「リターゲティング広告のCPAが非常にいいんで、
これからガンガン使っていきましょう」
Bさん 「はい、リターゲタグどんどん埋め込んでいきます
ね」
〜ある日〜
「あれ？ なんかページ表示されてるのにJS系のUI動いてい
なくない？(サジェストがでなかったりetc)」

11. 何が起こったのか?

12. の前にDOM Parsingについ
て
レスポンスが返却される
と右図のようにDOMを構
築する
一連のParsingが完了した
らDOM ContentLoadedが
発火する

13. 事件のトリガー
Tree ConstructionとScript
Excetionのところ
HTML中にScriptが含まれ
てると一旦実行し、新し
くHTML文字列が増えない
か確認しながらツリーが
できていく

14. リターゲのタグ
scriptタグだらけ・・・
おまけにこのscriptはさらに
scriptを作ってdocument.write
で突っ込むやつも多数いた

15. Script Execution地獄
リターゲ広告によって赤
色のところが大量にルー
プしていた
scriptはscriptタグを作って
document.writeで突っ込ん
でたので直列なリクエス
トが飛び交っていた
リターゲscript
いつまでたってもDOMが完成しない
= DOMContentLoadedがこない
=アプリのJSが発火しない

16. ジレンマと戦う
タグのdocument.writeをやめてほしいけど勝手に実装
変えたら保証きかないケースが多くて望めない
そもそもParserの知識ある人が少ないので実装ルー
ルつくってもすぐ破綻する
アプリケーションをDOMContentLoaded以外の何か
に紐づくように修正

17. トピック
DOM Parserと向き合う高速化
レンダラーと向き合う高速化
体感速度チューニング
まとめ

18. レンダラーと向き合う
高速化

19. レンダラの動き
さきほどのDOM Parsingとは平行してレンダリング
は行われる
一定の間隔で完成してるDOMを確認して、その分を
どんどんレンダリングする

20. CO事件
Aさん 「最近js読み込んで軽く設定するだけでコンテ
ンツの見せ方ABテストできるツールあるらしいね」
Bさん 「使いましょう」
〜ある日〜
「あれ、サイトが真っ白なんだけど・・・」

21. 何が起こったのか?

22. CO事件
ABテストツールのjs(外部リソース)が全然レスポンス
を返さない障害が起きてた
Parserはscriptの読み込み・実行が終わるまで先に進
まない
レンダラはDOMTreeの完了がすすまないとレンダリ
ングするものがない
コンテンツより前にABツールいれてた
-> ABツールが障害
= Parserがそこで止まってレンダラも止まる
= 画真っ白

23. トピック
DOM Parserと向き合う高速化
レンダラーと向き合う高速化
体感速度チューニング

24. 体感速度チューニング

25. よくあるサイト速度の指標
＼サブリソースの読み込み時間／
＼unload / DOMReadyまでの時間／
＼ドメインの名前解決にかかる時間／
＼レスポンスタイム／
etc.

26. 指標上では遅くても
速い風に見せることはできるケースもあ
る

27. サイトのページング(もっと見る)

28. 遅いのに早く見える
種は簡単でいわゆるprefech
ボタンを押される前にすでにコンテンツを先読みし
て、押されたと同時に表示 & 次の分をまた先読み
シンプルだけどすごく効果的
(スマホのUIによくマッチする)

29. 猫も杓子もprefetch

30. 間接的なprefetch PC地図

31. 以前のバージョン
一度に画面領域
全体を検索して
結果をプロット
していた

32. 新バージョン
地図をタイルごと
に区切って検索

33. タイルのもたらした変化
技術的な高速化要因
1つ1つの検索範囲が最小化され応
答が早まった(キャッシュもできる)
タイルに並列性が生まれた
UI的な高速化要因
見切れてる部分もすでに正方形分
はすでに検索されてるので多少動
かしてもそのタイル分はリアルタ
イムに返せる(間接的なprefetch)

34. UIと体感速度
サイトレスポンスは早くなってなくても体感的に早
く感じさせることはUIによっては可能
サイトを作るときにどんなUIにすれば早く見えるの
かを考える

35. トピック
DOM Parserと向き合う高速化
レンダラーと向き合う高速化
体感速度チューニング
まとめ

36. 一口に高速化といっても
切り口は沢山ある

37. レスポンスタイム
ブラウザ実行時間の最適化
体感速度のチューニング
etc..

38. 指標だけにとらわれずに多角的
に問題とぶつかろう

39. 終わり。