New project announcement
I shipped skillcraft.ai - a tool that helps you find the best learning resources tailored to your goals. All you need to do is tell it what you want to learn, and I’ll find the right resources to get you there.
Up to date
Published
Updated on
3 min read

Trevor I. Lasn

Building tools for developers. Currently building skillcraft.ai and blamesteve.lol

Optimize Your Astro Site's <head> with astro-capo

Automatically improve your Astro site's performance using astro-capo

astro-capo categorizes your <head> elements into 11 groups, each with a specific weight. It then sorts these elements based on their weight, ensuring that the most critical ones (like charset declarations) appear first. Within each group, it preserves the original order of elements.

The result? A perfectly organized <head> that helps your site render faster and more efficiently. Using astro-capo is simpler than trying to remember the optimal order yourself.

This website you’re reading right now uses astro-capo. Install the official Capo browser extension from the Chrome Web Store. Once installed, click the extension icon on any page here. You’ll see firsthand how astro-capo optimizes my <head> elements. It’s a great way to visualize the impact of proper <head> organization.

Stack Overflow capo.js

First, install the package:

Terminal window
npm install astro-capo

Then, in your Astro layout or page, import and use the Head component:

---
import { Head } from 'astro-capo'
---
<html lang="en">
<Head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>My Awesome Astro Site</title>
</Head>
<body>
<!-- Your content here -->
</body>
</html>

That’s it! astro-capo will take care of the rest, ensuring your <head> elements are in the optimal order for performance.

So, what exactly is astro-capo doing? Here’s a breakdown of the 11 groups it uses to categorize your <head> elements:

  1. Pragma Directives (Weight: 11): These are the highest priority. Things like <meta charset="utf-8"> and <meta http-equiv="x-ua-compatible" content="ie=edge"> go here. They tell the browser how to interpret your document.
  2. Title (Weight: 10): Your <title> tag. It’s high up because it’s essential for SEO and user experience.
  3. Preconnect Hints (Weight: 9): <link rel="preconnect"> tags. These establish early connections to important third-party origins.
  4. Asynchronous Scripts (Weight: 8): Scripts with the async attribute. They load in parallel with other resources.
  5. Import Styles (Weight: 7): Any @import statements in your CSS.
  6. Synchronous Scripts (Weight: 6): Regular <script> tags without async or defer.
  7. Synchronous Styles (Weight: 5): Your <link rel="stylesheet"> and <style> tags.
  8. Preload Hints (Weight: 4): <link rel="preload"> and <link rel="modulepreload"> tags.
  9. Deferred Scripts (Weight: 3): Scripts with the defer attribute.
  10. Prefetch and Prerender Hints (Weight: 2): <link rel="prefetch">, <link rel="dns-prefetch">, and <link rel="prerender"> tags.
  11. Everything Else (Weight: 1): Any other elements in your <head>.

Here’s a visual representation of how astro-capo organizes your <head>:

representation of how astro-capo organizes your <head>

Elements are categorized into 11 groups. Each group has an associated weight to determine the optimal sort order. Elements within the same group are considered equal weight and displayed in the order they’re found in the document. —The rules of capo.js

Is all this fuss really worth it? It absolutely can be.

  1. Faster Rendering: By prioritizing critical resources, your browser can start rendering the page sooner.
  2. Improved SEO: Search engines love fast-loading pages. A well-organized <head> can contribute to better search rankings.
  3. Better User Experience: Faster load times mean happier users, especially on mobile devices.
  4. Reduced Cognitive Load: With astro-capo handling the optimization, you can focus on building great content instead of worrying about <head> element order.

While astro-capo is a great tool, it’s not always necessary. If you’re building a small, simple site with just a few elements in the <head>, manually organizing them might be just as effective. astro-capo shines in more complex projects where keeping track of numerous <head> elements becomes challenging.

So go ahead, give astro-capo a try in your next Astro project. Your <head> (and your users) will thank you.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
4 min read

LH and RLH: The CSS Units That Make Vertical Spacing Easy

Exploring new CSS line-height units that eliminate guesswork from vertical rhythm

Dec 3, 2024
Read article
Webdev
12 min read

Robust Data Fetching Architecture For Complex React/Next.js Apps

How I use the 'Three Layers of Data' architecture pattern for React and Next.js apps to avoid common pitfalls, tech debt, and improve performance

May 4, 2025
Read article
Webdev
3 min read

Improve PageSpeed Insights Score with Lazy Loading Iframes

How to save bandwidth and speed up your site by lazy-loading iframes

Sep 13, 2024
Read article
Webdev
4 min read

The What, Why, and How of Using a Skeleton Loading Screen

Skeleton loading screens enhance user experience and make your app feel faster

Nov 12, 2020
Read article
Webdev
4 min read

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

Sep 13, 2024
Read article
Webdev
6 min read

Micro Frontends: The LEGO Approach to Web Development

Explore the concept of micro frontends in web development, understand their benefits, and learn when this architectural approach is most effective for building scalable applications.

Oct 2, 2024
Read article
Webdev
3 min read

CSS :has() - The Parent Selector We've Always Wanted

Transform your CSS with :has(), the game-changing selector that finally lets us style elements based on their children.

Dec 4, 2024
Read article
Webdev
3 min read

CSS content-visibility: The Web Performance Boost You Might Be Missing

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed

Dec 5, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/astro-capo. It was written by a human and polished using grammar tools for clarity.