Form submission basics in HTML - Performance & Optimization

Performance: Form submission basics

MEDIUM IMPACT

Form submission affects page load speed and interaction responsiveness when sending data to the server.

Submitting a form without blocking the page or causing layout shifts

HTML

<form id="myForm">
  <input type="text" name="name" required>
  <button type="submit">Send</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', async e => {
    e.preventDefault();
    const formData = new FormData(e.target);
    await fetch('/submit', { method: 'POST', body: formData });
    alert('Form sent without page reload!');
  });
</script>

Prevents full reload by sending data asynchronously, keeping page interactive and stable.

📈 Performance GainNon-blocking submit, improves INP by avoiding page reload delays

Submitting a form without blocking the page or causing layout shifts

HTML

<form action="/submit" method="post">
  <input type="text" name="name" required>
  <button type="submit">Send</button>
</form>

This causes a full page reload on submit, blocking rendering and resetting page state.

📉 Performance CostBlocks rendering during page reload, increases INP due to waiting for server response

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Traditional form submit (full reload)	Destroys and rebuilds entire DOM	Multiple reflows due to full page layout	High paint cost for entire page	[X] Bad
JavaScript async submit (fetch API)	No DOM rebuild, only updates needed	No reflows triggered by submit itself	Minimal paint cost, only updates if needed	[OK] Good

Rendering Pipeline

Traditional form submission triggers a full page reload, causing the browser to discard current DOM and styles, then re-parse and repaint the new page. Using JavaScript to submit forms asynchronously avoids this by keeping the current DOM and styles intact.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint during full page reload

Core Web Vital Affected

INP

Form submission affects page load speed and interaction responsiveness when sending data to the server.

Optimization Tips

1Avoid full page reloads on form submit to keep interactions fast.

2Use JavaScript fetch or XMLHttpRequest for asynchronous form submission.

3Prevent default form submit behavior to control page updates and reduce layout shifts.

Performance Quiz - 3 Questions

What happens to page performance when a form submits with a full page reload?

A The page stays fully interactive without delay.

B The page blocks rendering and reloads, causing slower interaction.

C Only the form inputs are updated without reload.

D The browser caches the form data automatically.

DevTools: Performance

How to check: Record a session while submitting the form. Look for long tasks or page reload events.

What to look for: Long blocking tasks or full page reloads indicate poor performance; smooth async submit shows minimal blocking.