Why should you care?

MarkupVerse teams track LCP and long tasks before shipping banking pages.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<footer id="perf-footer">
  <small>DOM ready: <span id="dcl">—</span> ms · Load: <span id="load">—</span> ms</small>
</footer>
<script>
window.addEventListener('load', () => {
  const nav = performance.getEntriesByType('navigation')[0];
  document.getElementById('dcl').textContent = Math.round(nav.domContentLoadedEventEnd);
  document.getElementById('load').textContent = Math.round(nav.loadEventEnd);
});
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Use PerformanceObserver for LCP/CLS in real apps.
• Navigation Timing summarizes page load phases.

Practice next

1. Read navigation entry on load.
2. Display two timings.
3. Compare cold vs cached reload.
4. Add PerformanceObserver for LCP.
5. Mark custom events with performance.mark.

Remember

Measure before optimize. Navigation Timing baseline. Observer for vitals.

MarkupVerse load probe

Dev footer shows DCL vs load on staging.

Outcome: Team spots a slow script blocking load.