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

229 Views

November 30, 17

スライド概要

サイト高速化案件

profile-image

LIFULL HOME'Sを運営する株式会社LIFULLのアカウントです。 LIFULLが主催するエンジニア向けイベント「Ltech」等で公開されたスライド等をこちらで共有しております。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

何が起こったのか?

22.

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

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.

終わり。