SlideShare a Scribd company logo

Critical Rendering Path

•
•
B
BarbaraFellner1

The sequels of steps the browser goes through to convert HTML, CSS and JavaScript into actual pixels on the screen – that’s the critical rendering path. By understanding what happens between writing the markup and looking at our websites we can optimize the performance of each page.

Related slideshows

Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 
Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web Development
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
1 of 88
Download to read offline
Critical Rendering Path Walkthrough @BarbaraFellner
Critical Rendering Path
What features do you want from a news experience?
Critical Rendering Path
62.8% News automatically available in the morning.
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript DOM
Converting HTML to the DOM <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head> <body> <p>Hello <span>VlbgWebDev</span> people!</p> <div><img src="awesome-photo.jpg"></div> </body> </html>
Characters Tokens Nodes DOM Bytes
Characters Tokens Nodes DOM Bytes
Characters Tokens Nodes DOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E
Characters Tokens Nodes DOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E <html><head>…</head><body><p>Hello <span>VlbgWebDev</span>…
Characters Tokens Nodes DOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E <html><head>…</head><body><p>Hello <span>VlbgWebDev</span>… StartTag: html StartTag: head EndTag: head… StartTag: body StartTag: p Hello …
Characters Tokens Nodes DOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E <html><head>…</head><body><p>Hello <span>VlbgWebDev</span>… StartTag: html StartTag: head EndTag: head… StartTag: body StartTag: p Hello … html head meta body p Hello
Characters Tokens Nodes DOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E <html><head>…</head><body><p>Hello <span>VlbgWebDev</span>… StartTag: html StartTag: head EndTag: head… StartTag: body StartTag: p Hello … html head meta body p Hello html body meta link p div img span head Hello VlbgWebDev people!
Critical Rendering Path
Critical Rendering Path
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head> <body> <p>Hello <span>VlbgWebDev</span> people!</p> <div><img src="awesome-photo.jpg"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head> <body> <p>Hello <span>VlbgWebDev</span> people!</p> <div><img src="awesome-photo.jpg"></div> </body> </html>
body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { border: 1px solid red }
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript DOM
Characters Tokens Nodes CSSOM Bytes
Characters Tokens Nodes CSSOM Bytes
Characters Tokens Nodes CSSOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E
Characters Tokens Nodes CSSOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E body {font-size: 16px} p {font-weight: bold} p span {display: none} …
Characters Tokens Nodes CSSOM Bytes 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E body {font-size: 16px} p {font-weight: bold} p span {display: none} … body p img span font-size: 16px
 font-weight: bold font-size: 16px font-weight: bold color: red display: none font-size: 16px border: 1px solid red font-size: 16px
Critical Rendering Path
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript DOM
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript DOM
Critical Rendering Path
html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body font-size: 16px html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body p font-size: 16px html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body p font-size: 16px Hello html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body p font-size: 16px Hello font-size: 16px
 font-weight: bold html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body p font-size: 16px Hello font-size: 16px
 font-weight: bold people! html body meta link p div img span head Hello VlbgWebDev people! DOM
body p img span font-size: 16px font-weight: bold color: red display: none font-size: 16px font-weight: bold font-size: 16px border: 1px solid red font-size: 16px CSSOM Render Tree body p font-size: 16px img font-size: 16px border: 1px solid red div Hello font-size: 16px
 font-weight: bold people! html body meta link p div img span head Hello VlbgWebDev people! DOM
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript DOM
Layout
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html> Layout
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html> Layout
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html> Layout viewport size = device-width
div (50%) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html> Layout viewport size = device-width
div (50%) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html> Layout viewport size = device-width div (50%) Hello world!
display position top left width height margin padding flex-direction justify-content align-items … Layout
Critical Rendering Path
Critical Rendering Path
Critical Rendering Path
Critical Rendering Path
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript
Critical Rendering Path DOM CSSOM Render Tree Layout Paint JavaScript DOM
Paint background-image color shadows text-decoration font-style font-weight z-index …
Critical Rendering Path
Critical Rendering Path
Critical Rendering Path
Critical Rendering Path
Optimizing
Critical Rendering Path
Measure first then optimize.
Critical Rendering Path
Reduce number of critical resources.
Critical Rendering Path
Optimize the number of critical bytes.
Critical Rendering Path
Minify.
Critical Rendering Path
Compress.
Critical Rendering Path
Cache.
Critical Rendering Path
Add async tags.
Critical Rendering Path
Add js to the bottom of the page.
Critical Rendering Path
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" media="orientation:landscape"> <link href="style.css" rel="stylesheet" media="screen and (max-device-height: 799px)"> <link href="style.css" rel="stylesheet" media="only screen and (color)"> <link href="style.css" rel="stylesheet" media="all and (min-color-index: 256)"> <link href="style.css" rel="stylesheet" media="print"> <title>Critical Path</title> </head> </html>
Critical Rendering Path
Critical Rendering Path
Critical Rendering Path
Paint background-image color shadows text-decoration font-style font-weight z-index … Composite transform opacity display position top left width height margin padding flex-direction justify-content align-items … Layout
Critical Rendering Path
Resources • https://paul.kinlan.me/what-news-readers-want/ • https://developers.google.com/web/fundamentals/ performance/critical-rendering-path/ • https://classroom.udacity.com/courses/ud884

More Related Content

Critical Rendering Path