2025-06-12

It's all in the `head`

Harry Roberts published 🧠 ct.css - Let's take a look inside your <head> which is a great guide to how to arrange everything and the impact that makes.

<head>

		<!-- First things first -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark">

    <!-- Upgrade http to https -->
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

    <!-- Preconnect to required origins -->
		<link rel="preconnect" href="https://republic.imgix.net" />
		…

		<!-- Asynchronous JS -->
    <script src="{{ rev('/assets/js/lazysizes.min.js') }}" async></script>
		…

		<!-- Synchronous JS -->
    {{ source("_inline/hoverintent.html") }}
    {{ source("_inline/offline-script.html") }}

		<!-- Critical CSS + Load CSS files asynchronous -->
    {{ include("_inline/critical-css-blitz.html") }}

    <!-- Preloads -->
    <link rel="preload" href="/assets/fonts/foreday/ForedayVarGX.woff2" as="font" crossorigin="anonymous" />
		…

		<!-- Deferred JS -->
	  <script src="{{ rev('/assets/js/script.min.js') }}" defer></script>
	  <script src="{{ rev('/assets/js/stimulus.min.js') }}" defer></script>

		<!-- Icons -->
    <link rel="icon" href="/favicon.ico" sizes="any" /><!-- 32×32 -->
    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /><!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest" />

		<!-- Manifest -->
    <meta name="mobile-web-app-capable" content="yes">
		…

		<!-- Splash screens -->
    {{ source("_inline/splashscreens.html") }}

</head>

#It's all in the head

It's all in the `head`