Doctype Present.

Performance Best Practices

Missing doctype triggers quirks mode — inconsistent rendering across browsers

What does this check test?

This check verifies that the HTML document begins with a `<!DOCTYPE html>` declaration. The doctype tells the browser to render the page in 'standards mode' — following modern HTML and CSS specifications. Without a doctype (or with an incorrect one), browsers fall back to 'quirks mode,' which emulates the rendering behavior of 1990s-era browsers for backward compatibility. In quirks mode, the CSS box model works differently, table layouts behave unexpectedly, and many modern CSS features may not work correctly or consistently across browsers.

Why does it matter?

Quirks mode causes widespread rendering inconsistencies across browsers because each browser implements different quirks from the pre-standards era. CSS box model calculations differ (content-box vs border-box behavior), vertical alignment in table cells changes, font sizing in forms varies, and percentage-based heights behave unpredictably. These inconsistencies make it extremely difficult to build a consistent, responsive design. From a performance perspective, quirks mode can trigger additional layout recalculations as the browser applies legacy rendering rules, and it prevents the use of certain modern CSS features that improve rendering performance (like `contain` and `content-visibility`). Debugging layout issues in quirks mode is significantly harder because standard CSS documentation does not apply.

Who is affected?

Older websites that were created before HTML5 standardization, pages generated by legacy CMS systems, email templates repurposed as web pages, and auto-generated HTML from export tools are most likely to be missing the doctype. Developer-created HTML that was copied from old boilerplate or examples may also lack the proper doctype. Any page in quirks mode will have cross-browser rendering issues.

Where does this apply?

The doctype must be the very first thing in the HTML document — before any whitespace, comments, or other content. Check the very first line of the HTML source (View Source or Elements panel > right-click html element > Edit as HTML). Chrome DevTools renders a warning icon in the Elements panel if the document is in quirks mode. You can also check `document.compatMode` in the Console — it should return `'CSS1Compat'` (standards mode), not `'BackCompat'` (quirks mode).

How to fix it

Add `<!DOCTYPE html>` as the very first line of your HTML document, before any other content. Proper HTML5 document structure:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
</head>
<body>
  <!-- content -->
</body>
</html>

After adding the doctype, add border-box to prevent layout changes:

css

*, *::before, *::after {
  box-sizing: border-box;
}

Ensure there are no characters (including BOM markers, whitespace, or server-side script output) before the doctype. For server-rendered pages, verify that your template engine does not output whitespace or error messages before the doctype. For PHP: ensure no whitespace exists before `<?php` in included files, as this can push the doctype down.

References

AppVet checks Doctype Present automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks