Summary
This guide comes from Harry Roberts and offers the best order to place elements in your head for performance.
More detail is provided in this talk called Get Your "head" Straight.
Code
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSP headers -->
<meta http-equiv="Content-Security-Policy" content="upgrage-insecure-requests">
<!-- Page title -->
<title>Optimized Head</title>
<!-- preconnect -->
<link rel="preconnect" href="#" />
<!-- Asynchronous JavaScript -->
<script src="" async></script>
<!-- CSS that includes @import -->
<style>
@import "file.css";
</style>
<!-- Synchronous JavaScript -->
<script src=""></script>
<!-- Synchronous CSS -->
<link rel="stylesheet" href="/assets/style.css">
<!-- preload -->
<link rel="preload" href="#" />
<!-- Deferred JavaScript -->
<script type="module">document.documentElement.classList.replace('no-js', 'js');</script>
<script src="" defer></script>
<!-- prefetch / prerender -->
<link rel="prefetch" href="#" />
<link rel="prerender" href="#" />
<!-- Everything else (meta tags, icons, open graphs, etc.) -->
<meta name="description" content="">
<!-- JSON-LD schema markup. Added by David Waumsley-->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "..."
}
</script>
</head>Key points
- HTML renders line by line. The <head> is the primary render blocker.
- Move all we can from the head (trackers, synchronous JS and CSS).
- Avoid @import and redirect to 3rd parties.
- Synchronous JS before CSS. Browsers check JS for CSS references.
- Apart from <title> put SEO meta last.
- Put CSP headers at the top as they break parallel preloading.