show me the page - 介紹 critical rendering path

SHOW ME THE PAGE介紹 Critical Rendering Path

By Yvonne Yu

⾃自我介紹暨⼯工商服務

www.ssaab

圖⽚片來源：http://blog.xuite.net/tj41920/tj419201/318188942

??

究竟瀏覽器怎麼呈現網站的呢？

HTML

CSS

JavaScript

Critical Rendering Path關鍵 渲染 路徑

從瀏覽器收到資料後到初始化網站畫⾯面中間所經歷 渲染 網⾴頁

畫⾯面的過程

會影響到從無到渲染畫⾯面前的事情

為什麼要認識 Critical Rendering Path？

效能很重要！空⽩白畫⾯面讓⼈人抓狂！

等了快10秒了...

圖⽚片來源：Google Developers - Critical Rendering Path

效能好

效能不好

Critical Rendering Path

Critical Rendering Path

究竟，Critical Rendering Path 中間發⽣生什麼事情呢？

GETHTML

NetworkCSS CSSOM

HTML DOM

圖⽚片參考：https://www.igvita.com/slides/2013/fluent-perfcourse.pdf

JavaScriptRender

Tree Layout Paint

Critical Rendering Path

從簡單的範例開始吧～

Network - 跟 server 要求資源

★ DNS Lookup - 依照 domain name 找尋 server 真正的 IP 位址 ★ New TCP Connection - handshake roundtrip to the server ★ Http Request - 對 server 最少會有⼀一次 roundtrip

（包含 server 處理 request 的時間）

圖⽚片來源：google - Delivering the goods

注意！只要跟 server 要求的資料，都會經過以上步驟！！

開始解析 HTML

HTMLDocument Object Model ⽂文件物件模型

『⼀一種語⾔言介⾯面提供了⼀一個⽂文件（樹）的結構化表⽰示法，並定義讓程式可以存取並改變⽂文件架

構、⾵風格和內容的⽅方法。DOM 提供了⽂文件以擁有屬性與函式的節點與物件組成的結構化表⽰示。』- from mozilla developer network

DOM

怎麼從 HTML 解析成 DOM︖？

圖⽚片來源：Google developers - constructing the object model

開始解析 HTML DOM

GETHTML HTML DOM

HTML

head

metatitle

linklink!?

title

HTML

CSS is Critical（關鍵的）！

GETHTML

NetworkCSS CSSOM

DOM HT DO

CS CSS

HTML

head

meta

body

plink

開始下載並取得 CSS ，且解析建⽴立 CSSOM

CSSOM (CSS Object Model)

CSS

body

p a

acolor: #f00; font-size: 16px;

text-decoration: none;

font-size: 16px;

color: #f00; font-size: 16px;

color: #f00; font-size: 16px;

CSS 物件模型

title

Image is NOT Critical

開始下載圖⽚片，建⽴立 Img DOM Node， 然後持續解析 DOM…

HTML

headbody

pmeta link

img

圖⽚片不會讓 DOM 停⽌止解析， 並不在 Critical Rendering Path 流程中

JavaScript is Critical !

HTML

GETHTML

Network CSS CSSOM

DOM

JavaScript

title

HTML

headbody

pmeta link

imgscript

HTM DO

CSSOCSS

JavaScript 可動態改變 DOM 跟 CSSOM

JavaScript

JavaScript is Critical !

假如⺫⽬目前有 CSSOM 正在解析中的話，瀏覽器會先確定 Critical CSS 有載⼊入且解析完成後，才會執⾏行載⼊入完畢的 JavaScript

HTML

GETHTML

Network CSS CSSOM

DOM

JavaScript

HTM DO

JavaScript

2. CSSOM 會全部解析完畢

3. 才會開始執⾏行 JavaScript

1. 解析 DOM 是暫停的！

DOM 全部解析完畢

HTML

GETHTML

Network CSS CSSOM

DOM

JavaScript

title

HTML

headbody

pmeta link

imgscript

DOMContentLoaded event jQuery(document).ready

等等！這時候畫⾯面還沒有出現喔！

GETHTML

NetworkCSS CSSOM

HTML DOM

JavaScriptRender

Tree Layout Paint

Critical Rendering Path

建⽴立 Render Tree

描述內容 描述樣式

圖⽚片來源：render tree construction

Render Tree 只會含有『可⾒見的』Node，被 CSS 隱藏的 display:none 或是無法被察覺的 Node ( scripts, meta) 皆會被省略在 Render Tree 中

Layout ＆ Paint

Layout (reflow) - 依照 Render Tree 內容計算在螢幕上視埠 (viewpoint) 確切的 pixel size 跟 位置（幾何資訊）。

painting (rasterizing) - 把在 Layout 計算完成的 Node 資訊，繪製在瀏覽器上

Render Tree Layout Paint

圖⽚片來源：render tree construction

Critical Rendering Path 總結

GETHTML

NetworkCSS CSSOM

HTML DOM

JavaScriptRender

Tree Layout Paint

取得HTML 解析DOM

GET CSS CSSOM

GET JS 跑 JS

停⽌止解析等 JS 跑完

等 CSSOM 完成

Render Page

計算 Critical Rendering Path 時間

取得HTML 解析DOM

GET CSS CSSOM

GET JS 跑 JS

停⽌止解析等 JS 跑完

等 CSSOM 完成

Render Page10kb, 0.5s

35kb, 0.4s

38kb, 0.4s

0.05s

解析中 0.1s

Critical Rendering Path 的時間： 0.5 + 0.1 + 0.4 (平⾏行下載) + 0.07 約= 1.0 s

0.01s

0.01s

1.0 秒

網站需載⼊入過⼤大外部 Critical 檔案

圖⽚片來源

網站需載⼊入過多外部 Critical 檔案， 造成Critical Rendering Path 太久，

使⽤用者很晚看到 first paint

圖⽚片來源

Critical Rendering Path關鍵 渲染 路徑

網站上裡關鍵、重要的！

什麼是 Critical CSS !?

圖⽚片來源：CSS and the critical path

名詞介紹

‣ 關鍵資源 - 可能禁⽌止網⾴頁初次轉譯的資源。 ‣ 關鍵位元組 - 實現網⾴頁初次轉譯所需的總位元組數，這是所有關鍵資源

的傳輸檔案⼤大⼩小總和。

取得HTML 解析DOM

GET CSS CSSOM

GET JS 跑 JS

停⽌止解析等 JS 跑完

等 CSSOM 完成

Render Page10kb, 0.5s

35kb, 0.4s

38kb, 0.4s

0.05s

解析 0.1s

0.01s

0.01s 資料來源

3 種 關鍵資源（HTML, CSS, JS） 83 kb 關鍵位元組 (HTML + CSS + JS)

取得HTML 解析DOM

GET CSS CSSOM

GET JS 跑 JS

停⽌止解析等 JS 跑完

等 CSSOM 完成

Render Page10kb, 0.5s

35kb, 0.4s

38kb, 0.4s

0.05s

解析 0.1s

優化 Critical Rendering Path 重點就是讓關鍵資源越少越⼩小越快下載完畢越好！！

0.01s

0.01s

優化 Critical Rendering Path 效能

✓ 區分 critical CSS 跟 non-critical CSS，並使⽤用 Inline CSS <style> 載⼊入 critical CSS。 - 減少 ⼀一次 Request 的時間！ - 假如 CSS 檔案不⼤大，不需硬拆成多份檔案。✓ 把 CSS 放在 head 標籤裡，樣式越快先處理越好。因為

需要等 CSSOM 完成才會開始 render page

優化 Critical Rendering Path 效能

✓JavaScript 改成⾮非同步載⼊入 (async)，讓 JavaScript 準備好之前不會禁⽌止 DOM 建構作業 - 改成 async 無法確保 JavaScript 執⾏行順序 - 在畫⾯面顯⽰示時，假如 JavaScript 沒有準備執⾏行，畫⾯面要確保不會有問題

CanIUse.com

更多優化效能關鍵字

Pixel Pipeline 因 JavaScript 可修改 DOM 跟 CSSOM，修改後可能會重新計算 DOM 的 style, layout 等資訊。暸解後對動畫跟使⽤用者體驗加分

(Udacity 線上教學網址)

HTTP/2 傳輸協定

(Google Dev Summit - HTTP2 101 教學)

經過 16 年，HTTP/2 終於在 2015 年正式發佈。改進了很多現在依然普遍的 HTTP 1.1 限制（另如，Header 壓縮等）

References

• Google developers - Critical Rendering Path

• Building Faster Website by Ilya Grigorik

• Delivering the goods by Paul Irish

• CSS and the Critical Path by Patrick Hamann

• Critical Rendering Path by Patrick Sexton

• Understanding the critical rendering path, rendering pages in 1 second by Luis Vieira

Q&A