Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
First_Paintと_クリティカルレンダリングパス
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
howdy39
April 13, 2018
Programming
0
580
First_Paintと_クリティカルレンダリングパス
howdy39
April 13, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
640
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
210
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.7k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
780
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
740
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.9k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.5k
Promise
howdy39
1
410
カラーユニバーサルデザイン / color universal design
howdy39
0
1k
Other Decks in Programming
See All in Programming
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
n4mlz
0
120
Agent Skills Workshop - AIへの頼み方を仕組み化する
gotalab555
15
8.3k
ロボットのための工場に灯りは要らない
watany
4
560
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
320
社内規程RAGの精度を73.3% → 100%に改善した話
oharu121
13
7.8k
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
konokenj
10
3.3k
PostgreSQL を使った快適な go test 環境を求めて
otakakot
0
520
Rで始めるML・LLM活用入門
wakamatsu_takumu
0
170
CSC307 Lecture 14
javiergs
PRO
0
460
Claude Code の Skill で複雑な既存仕様をすっきり整理しよう
yuichirokato
1
350
15年目のiOSアプリを1から作り直す技術
teakun
1
620
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
3
1.2k
Featured
See All Featured
The SEO identity crisis: Don't let AI make you average
varn
0
400
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
670
Test your architecture with Archunit
thirion
1
2.2k
Statistics for Hackers
jakevdp
799
230k
The agentic SEO stack - context over prompts
schlessera
0
680
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.9k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
170
Crafting Experiences
bethany
1
81
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.8k
Being A Developer After 40
akosma
91
590k
Transcript
First Paintと クリティカルレンダリングパス 2018/04/13 トップゲート社 第3回 フロントエンド勉強会 1
Web画面を表示するとき ブラウザは裏でどんなことを やっているのか 2
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 3
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 4
preload scanner 5
6 HTML読み込み→ css/js/画像などのサブリソースを 同時に読み込む CSS JavaScript image HTML プリロード スキャナ
Highest High/Medium/Low Low Priority
7 デモ) http://topgate.co.jp
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 8
Document Object Model (DOM) 9
10 ツリー状にHTMLノードを構築
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 11
CSS Object Model (CSSOM) 12
13 ツリー状にCSSノードを構築
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 14
Render Tree 15
16 DOMとCSSOMを関連付ける
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 17
Layout & Paint 18
19 画面の幅や高さからレイアウトを決めて描画
Critical Rendering Path (CRP) 20
1. サブリソースを読み込む 2. a. DOMツリーを構築 b. CSSOMツリーを構築 3. レンダリングツリーを構築 4.
レイアウト 5. ペイント 21 ペイントまでの 一連の流れ のこと
クリティカルレンダリングパスを 短縮すると 22
First Paint が早くなる 23
クリティカルレンダリングパス とCSSOMの関係 24
CSSOMの構築がおわるまでレ ンダリングツリーが作られない =描画されない 25
26 CSSOMツリー構築 DOMツリー構築
27 デモ) 1. コードの解説 2. h1は何色になる? 3. https://howdy39.github.io/study-critical- render-path/css-block.html ※回線速度を(10kb/s)程度に遅くして実
行
28 CSSOMツリー構築 めっちゃ時間か かった DOMツリー構築 すぐ終わった
クリティカルレンダリングパス とJavaScriptの関係 29
JavaScriptはDOMツリー構築を ストップさせる =描画されない 30
31 JavaScriptはDOM ツリーの構築を止 める
32 デモ) 1. コードの解説 2. https://howdy39.github.io/study-critical- render-path/js-block.html
33 CSSOMツリー構築 すぐ終わった DOMツリー構築 めっちゃ時間か かった
まとめ 34
DOMツリー・CSSOMツリー の構築を意識 した実装をすることで First Paint を早くすることが出来る 35
CSS最適化 36 • 圧縮 • メディアクエリ • インラインスタイル • セレクタ最適化
• 画面単位でCSSを読み込む
JS最適化 37 • 圧縮 • 後実行(</body>の直前/async/defer) • 画面単位でJavaScriptを読み込む
参考 38 https://developers.google.com/web/fundamentals/performance/critical-rendering-path https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork https://coliss.com/articles/build-websites/operation/work/about-the-critical-rendering-path.html https://qiita.com/mamo/items/ff336b5cc0a1a95e03a7