Get your `<head>` in order

How you order elements in the <head> can have an effect on the (perceived) performance of the page. The order of elements matters because the browser processes them sequentially.

Recommended `<head>` element order

Priority	Element	Why
1	`<meta charset>`	Must be in first 1024 bytes
2	`<meta http-equiv>`	May affect parsing
3	`<meta name="viewport">`	Needed before first paint
4	`<title>`	Shown in browser tab early
5	`<link rel="preconnect">`	Start connections early
6	`<script async>`	Start download early
7	`<style>` with `@import`	Blocks until imports loaded
8	`<script>` (sync)	Blocks parsing
9	`<link rel="stylesheet">`	Blocks rendering
10	`<link rel="preload">`	Hints for current page
11	`<script defer>` / `<script type="module">`	Execute after parsing
12	`<link rel="prefetch">` / `<link rel="prerender">`	Hints for future navigation
13	Everything else	Non-critical meta tags, etc.

Capo.js

The best tool to analyze your <head> order is capo.js (opens in a new tab) by Rick Viscomi (opens in a new tab).

How to use

Browser extension (recommended): Install Capo for Chrome (opens in a new tab) or Firefox (opens in a new tab), then read the console logs.
NPM package: For programmatic use:


npm install @rviscomi/capo.js

What capo.js shows

Visual color-coded representation of your <head> order
Actual vs optimal (sorted) element order
Validation warnings for invalid elements
Detailed element-by-element breakdown

Note: For the most up-to-date version, always refer to the official capo.js repository (opens in a new tab).

Get your <head> in order

Recommended <head> element order