The Critical Rendering Path

Question 1

What is the critical rendering path?

Answer 1

process that the browser goes through to convert html and css to pixels on the screen

DOM > CSSOM > Render Tree > Layout > Paint

Question 2

What is the process the browser follows to construct the DOM

Answer 2

Characters > Tokens > Nodes > DOM

Question 3

Is css render blocking

Answer 3

Yes

The browser prevents the page from rendering until it receives all it’s css

Question 4

What is the render tree

Answer 4

representation of what is visible on the screen

Question 5

What is layout

Answer 5

how elements are arranged on the screen

Question 6

What are 3 ways to optimize HTML for speed

Answer 6

1. minify
2. compress
3. cache

Question 7

How would you prevent a style sheet from render blocking?

Answer 7

set media in the link tag to something like print or orientation:landscape

this tells the browser not to use these styles unless the conditions in the media are met

example:
‘’

Question 8

Why would you use async on your script tag?

Answer 8

To prevent the script from blocking the parser from parsing your html file

This allows you to place your script in the head and allows the css to be downloaded first then the async tag

Question 9

What are the 3 main buckets for optimizing the critical rendering path?

Answer 9

minimize bytes
reduce critical resources
shorten crp length -> number of round trips the browser must make to the server

Question 10

Is a script with async a critical resource?

Answer 10

no

Question 11

How would you find the number of critical bytes?

Answer 11

get the byte amount of the critical resources

Question 12

What does a css block an what does js block?

Answer 12

css blocks rendering to screen

js blocks the browser from parsing the markdown