Flashcards in The Critical Rendering Path Deck (12):
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
What is the process the browser follows to construct the DOM
Characters > Tokens > Nodes > DOM
Is css render blocking
The browser prevents the page from rendering until it receives all it's css
What is the render tree
representation of what is visible on the screen
What is layout
how elements are arranged on the screen
What are 3 ways to optimize HTML for speed
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
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
What are the 3 main buckets for optimizing the critical rendering path?
reduce critical resources
shorten crp length -> number of round trips the browser must make to the server
Is a script with async a critical resource?
How would you find the number of critical bytes?
get the byte amount of the critical resources