#How to defer non-critical SCSS

4 messages · Page 1 of 1 (latest)

still zodiac
#

I have a animated background that has quite a lot of scss code that is delivered when page is loaded and it is not necessary to load it quickly as it is just for good looks. Therefor I want to defer the loading to whenever the browser is idle. I just dont know how to go about it since I cant follow this https://web.dev/articles/defer-non-critical-css as im using scss and astro instead of just a vanilla setup.

web.dev
Defer non-critical CSS  |  Articles  |  web.dev

Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving FCP (First Contentful Paint).

dull patrol
#

How are you loading it right now?

still zodiac
#

Currently I just have a style tag in the astro with the background.

#

Here is the background component. I load this like so:

---
import StarryNightBackground from "../components/StarryNightBackground.astro";
---

<body>
    <StarryNightBackground />
    <div class="z-10">
---content---
</div>
</body>
📎 StarryNightBackground.astro