Order of Operations

  1. HTTP Response Received
  2. HTML Parsing Begins
  3. Link Preload Requests Processed: Preloading critical assets like stylesheets, scripts, and fonts.
  4. Prefetch Requests Sent: Requests sent with low priority and processed async and non blocking for future navigation or use.
  5. Downloading normal CSS and Other Resources
  6. CSS Parsing and CSSOM Construction (Render-blocking)
  7. Render Tree Construction (Dependent on CSSOM and DOM)
  8. Layout Calculation (Dependent on Render Tree)
  9. Downloading and Execution of Synchronous Scripts (Render-blocking)
  10. Async Scripts Processing: Downloaded in parallel and executed as soon as they are downloaded (Can halt parsing temporarily).
  11. Deferred Scripts Processing: Downloaded in parallel but executed only after HTML parsing is complete.
  12. HTML Parsing Complete: All HTML has been parsed.
  13. Subresources Load: Eagerly loaded images contribute to FCP. (Non-blocking for HTML parsing). Subresources that are not deferered can block rendering. The loading of these subresources can occur in parallel with HTML parsing.
  14. Document.readyState: loading: The document is still loading.
  15. DOMContentLoaded Event
  16. Document.readyState: interactive: DOM is fully interactive, but stylesheets, images, frames, and subframes might still be loading.

    17. The relationship between FCP and the DOMContentLoaded event can vary depending on how a page is structured and the nature of its resources. In some cases, FCP may happen before the DOMContentLoaded event if the browser is able to render meaningful content quickly. In other cases, particularly on more complex sites where scripts and styles significantly affect rendering, FCP might occur after the DOMContentLoaded event.

  17. First Contentful Paint (FCP): First content from DOM is painted.
  18. DOMContentLoaded Handlers Execute
  19. Largest Contentful Paint (LCP): This metric marks the point at which the largest content element in the viewport becomes visible.
  20. Lazy-loaded Images in viewport
  21. Window.onload Event (Indicates end of all blocking resources)
  22. Lazy-loaded Images not in viewport