DOMContentLoaded vs the load event in performance analysis

DOMContentLoaded and the load event are two browser lifecycle moments that performance tools report, and they answer different questions. Confusing them leads to optimising the wrong thing.

Know the two events

• DOMContentLoaded (DCL). Fires on the document as soon as the HTML has been parsed and the DOM tree is built, before external images, stylesheets and scripts have necessarily finished loading. It marks when the document structure is ready to be read and manipulated.
• The load event. Fires on window only after the entire page and all its subresources, including images, script files and stylesheets, have finished loading.

The difference is usually the page weight outside the initial HTML: images, iframes and other resources that keep the load event waiting long after the DOM is ready.

Read them in tools

• In DevTools. The Performance panel draws a blue vertical line for DOMContentLoaded and a red line for load. The gap between them shows how much work happens between "structure ready" and "everything loaded".
• In the Network panel. The same two indicators are marked, and "Finish" timing sits at or near load.
• What a large gap tells you. If DCL is fast but load is slow, the page is probably carrying many or heavy subresources (images, big scripts) that load late. That is normal for a media-heavy page, but can be trimmed.

Optimise deliberately

• Identify which matters for your goal. For interactive pages, making the DOM ready quickly (that is, a fast DCL) often matters more than a fast load. For fully static landing pages users perceive, the time until the load event can be closer to what they experience.
• Speed up DCL. Parse the HTML fast by keeping scripts from blocking parsing: use defer or async on non-critical scripts (see HTML defer vs async), move scripts to the end or load them asynchronously, and inline only the critical CSS.
• Speed up load. Images and iframes dominate the tail. Lazy-load below-fold media, size images explicitly (see image sizing), and avoid auto-playing large assets.
• Do not chase load for its own sake. A fast load event on a page with heavy below-fold images may cost you by blocking useful earlier rendering. Modern pages often intentionally let the load event lag behind a performant first paint.