1. Browser requests and downloads HTML, parses it and builds DOM (Document Object Model). The first response packet will be 14Kb (each next will be doubled until a predetermined threshold is reached, or congestion is experienced). The parsing process involves:
   • reading bytes from a stream
   • converting bytes to characters
   • characters to tokens (consider them as tags)
   • tokens to nodes (JS objects)
   • nodes to DOM (linking nodes to become a tree)
     In short: Bytes → characters → tokens → nodes → object model
2. Whenever browser discovers links to CSS during the parsing of HTML page it requests and downloads this CSS, parses it and builds CSSOM (CSS Object Model) the same way as with an HTML: Bytes → characters → tokens → nodes → object model
3. Other processes:
   • JavaScript compilation (JavaScript is interpreted, compiled, parsed and executed)
   • Building the Accessibility Tree
   • Other assets are downloading. They may be blocking (as fonts in some cases) or non-blocking
4. Combining the DOM and CSSOM into a Render tree.
5. Layout/Reflow is a process of calculation of the size and position of every object on the page.
6. Paint is a rasterization phase with drawing pixels to the display.
7. Compositing of different layers (e.g., GPU layers) overlapping each other.

In short:

DOM → CSSOM (in parallel) → JavaScript → Other trees → Render tree → Layout → Paint → Composition

Critical resources are resources that could block rendering (DOM construction): HTML, CSS, JS, sometimes fonts.

• Critical resources number - the number of initial rendering blocking resources.
• Critical bytes number - the number of given bytes.
• Critical path length - the number of roundtrips.

1. Minimize critical resources number.
   • inlining resources
2. Minimize critical bytes number.
   • splitting and deferring
   • compressing
   • minifying
   • excluding useless
3. Minimize critical path length.
   • unifying
   • avoiding usage of outer domains
   • usage of HTTP2

• HTML
  • minify
  • compress
• CSS
  • minify
  • compress
  • split and use queries (print, screen)
  • place as high as possible
  • exclude not used
  • inline
• JS
  • minify
  • compress
  • split and delay loading with async/defer
    • async - may happen after DOMContentLoaded, execute in any order
    • defer - wait until DOMContentLoaded happens, then execute in order of their defining
  • place not deferred scripts at the bottom of the page if it's not important for them to be higher (e.g., analytics)
  • inline
• Fonts
  • use @font-face { display: fallback } (there can be another value than 'fallback') or JS FontFace API
  • use only necessary (regular, italic, ...), exclude extra symbols (e.g. national or special unicode)
  • download from the own domain

• preload
  • useful for resources required almost immediately, might be implemented either as a 'push' or as a 'preload' itself (on a server)
  • mandatory for a browser
  • don't execute scripts, apply CSS, etc.
• prefetch
  • useful for anything that can be downloaded later
  • optional for a browser
  • don't execute scripts, apply CSS, etc.
• preconnect
  • establish a connection to reduce the number of roundtrips
  • optional for a browser
• dns-prefetch
  • is exactly the thing it sounds as (is a part of 'preconnect')
  • optional for a browser
• prerender
  • downloads URL and renders it
  • optional for a browser

1. with <Link rel="..." />
2. via Link HTTP header Link: </css/style.css>; rel="preload"; as="style"
3. using Webpack import(_/* webpackPreload: true */_ "CriticalChunk")

Browser calculates them watching something like <link rel="preload" as css ...>

• highest
• high
• medium
• low
• lowest
• idle

• Critical rendering path - Crash course on web performance (Fluent 2013)