https://github.com/rumaan/astro-critical-css

Inline Critical (above-the-fold) CSS in your Astro Project
https://github.com/rumaan/astro-critical-css

astro critical-css css

Last synced: 2 days ago
JSON representation

Inline Critical (above-the-fold) CSS in your Astro Project

• Host: GitHub
• URL: https://github.com/rumaan/astro-critical-css
• Owner: rumaan
• License: mit
• Created: 2023-01-02T18:30:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-10T06:49:42.000Z (over 1 year ago)
• Last Synced: 2024-09-19T07:14:00.995Z (8 days ago)
• Topics: astro, critical-css, css
• Language: Astro
• Homepage: https://astro-critical-css.vercel.app
• Size: 193 KB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Astro Critical CSS Integration

Astro Integration for [Critical](https://github.com/addyosmani/critical) package which inlines critical-path CSS into HTML and lazy loads remaining CSS which can greatly improve [First Contentful Paint (FCP)](https://web.dev/fcp/).

Read more about it here: [Extracting Critical CSS](https://web.dev/extract-critical-css/).

## Installation & Usage

### Astro Add

```sh

npx astro add astro-critical-css

# or

yarn astro add astro-critical-css

```

### Manually

```sh

# npm

npm install -D astro-critical-css

# yarn

yarn add -D astro-critical-css

```

In your `astro.config.mjs`:

```ts

import criticalCSS from "astro-critical-css";

export default defineConfig({

  integrations: [criticalCSS()],

});

```

During your build this integration will look at all the static HTML files and run it through [Critical](https://github.com/addyosmani/critical).

## Astro SSR Mode

### Note for < Astro 2.0

⚠️ If your project uses [Astro SSR](https://docs.astro.build/en/guides/server-side-rendering/#enabling-ssr-in-your-project) mode, this integration will only inline HTML files that pre-rendered on build. You will need to enable [`experimental.prerender`](https://docs.astro.build/en/reference/configuration-reference/#experimentalprerender) in your astro config.

### Astro 2.0 and above

Check out [Hybrid Renderering](https://docs.astro.build/en/guides/server-side-rendering/#hybrid-rendering)

## Similar Libraries

- [astro-critters](https://github.com/astro-community/astro-critters)