🔷🚀 @felixicaza/astro-capo

The most accurate and modern <head> sorting in Astro!

Forked from natemoo-re/astro-capo.

Changes made in this fork:

• 🖥️ Changed package name to @felixicaza/astro-capo to publish under my npm scope.
• 🧩 Make tag detection and sorting more comprehensive and accurate. (See issue #1)
• ⚠️ Updated order of preload tags to be higher priority and avoid CLS issues (see why? section).
• 🧪 Added unit and fixtures tests.

Now rules related changes are in capo-rules.

Get your <head> in order automatically!

@felixicaza/astro-capo is a component that automatically optimizes the order of elements in your <head> tag, adapted from Rick Viscomi's wonderful capo.js library.

Unlike capo.js, which makes it easy to debug the optimal order in the browser, @felixicaza/astro-capo automatically optimizes your <head> tag on the server while rendering your page.

📦 Installation

You can install @felixicaza/astro-capo using npm:

$ npm install @felixicaza/astro-capo

Using pnpm:

$ pnpm add @felixicaza/astro-capo

Using yarn:

$ yarn add @felixicaza/astro-capo

Using bun:

$ bun add @felixicaza/astro-capo

🚀 Usage

Replace your regular <head> element with this custom <Head> component. That's it!

---
import { Head } from '@felixicaza/astro-capo'
---

<!DOCTYPE html>
<html lang="en">
  <Head>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <title>@felixicaza/astro-capo</title>
  </Head>
  <body>
    <h1>@felixicaza/astro-capo</h1>
  </body>
</html>

💡 Why?

The previous order placed the preload tags very low, which caused some resources to be preloaded too late, for example, when there were @font-face declarations in inline style tags, resulting in Cumulative Layout Shift (CLS) issues. (See commit test ada71429 and capo.js issue #113).

Now rules related changes are in capo-rules.

[!NOTE] This change is opinionated and actually is under investigation. If you have any insights on this, please share them in the issues tab.

🏆 Credits

Many thanks to Nate Moore for creating the first version of astro-capo and to Rick Viscomi for creating capo.js.

📚 Related Projects

capo-rules: The most accurate and modern <head> sorting.

🤝 Contributing

Contributions to this library are welcome! If you have any ideas for improvements or new features, please feel free to open an issue or submit a pull request. I appreciate your help in making @felixicaza/astro-capo better for everyone. Please read the CONTRIBUTING.md.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.