Optimized Head

  • Updated:
  • HTML

Summary

Jump to section titled: 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

Jump to section titled: Code 
Copy 👋<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>Optomised 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="">

</head>