@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-capoto publish under my npm scope. - Make tag detection and sorting more comprehensive and accurate. (See issue #1)
- Updated order of
preloadtags 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-capoUsing a different package manager?
Using pnpm:
$ pnpm add @felixicaza/astro-capoUsing yarn:
$ yarn add @felixicaza/astro-capoUsing bun:
$ bun add @felixicaza/astro-capoUsage
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.
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.