The Critical Rendering Path Flashcards Preview

Frontend Developer Questions > The Critical Rendering Path > Flashcards

Flashcards in The Critical Rendering Path Deck (12):
1

What is the critical rendering path?

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

DOM > CSSOM > Render Tree > Layout > Paint

2

What is the process the browser follows to construct the DOM

Characters > Tokens > Nodes > DOM

3

Is css render blocking

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

4

What is the render tree

representation of what is visible on the screen

5

What is layout

how elements are arranged on the screen

6

What are 3 ways to optimize HTML for speed

1. minify
2. compress
3. cache

7

How would you prevent a style sheet from render blocking?

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:
''

8

Why would you use async on your script tag?

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

9

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

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

10

Is a script with async a critical resource?

no

11

How would you find the number of critical bytes?

get the byte amount of the critical resources

12

What does a css block an what does js block?

css blocks rendering to screen
js blocks the browser from parsing the markdown