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

速度系の話 @nakajima

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

今日の話

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

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

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

DOM Parserと向き合う 高速化

事例で学ぶ

事件で学ぶ

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

何が起こったのか?

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

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

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

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

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

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

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

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

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

何が起こったのか?

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

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

体感速度チューニング

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

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

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

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

猫も杓子もprefetch

間接的なprefetch PC地図

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

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

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

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

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

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

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

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

終わり。