Add a way to preload/preconnect injected script/css files #609

jagu-sayan · 2023-07-01T18:34:15Z

jagu-sayan
Jul 1, 2023

Body

Summary

I want a simple way to preload or preconnect injected script/css/fonts files.

Background & Motivation

It's help to improve performance and web vitals, see:

https://portal.gitnation.org/contents/top-core-web-vitals-recommendations-for-2023
https://portal.gitnation.org/contents/http3-performance-for-js-developers
It's impossible to customize injected script and know path names in advance.

Exemple:

Actual injected script in my html page:
<link href="/_astro/404.ae8dd206.css" rel="stylesheet">
<script src="/_astro/hoisted.bff9a731.js" type="module"></script>
I want:
<link rel="preload" as="style" href="/_astro/404.ae8dd206.css" />
<link rel="preload" as="script" href="/_astro/hoisted.bff9a731.js" />
<link href="/_astro/404.ae8dd206.css" rel="stylesheet">
<script src="/_astro/hoisted.bff9a731.js" type="module"></script>

Goals

Speed up improvement and better web vitals score
Allow to enable Early Hints on Cloudflare page
Allow more flexibility for future usage or usage I didn't know

Proposal

Add an Astro.injectedScripts in Runtime API:

type InjectedScript = {
  path: string;
  as: string;
};

Astro.injectedScripts: InjectedScript [] = [{
  path: "/_astro/404.ae8dd206.css",
  as: "style",
}, {
  path: "/_astro/hoisted.bff9a731.js",
  as: "script",
}];

Layout.astro:

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My webpage</title>
    {Astro.injectedScripts(({path, as}) => (
      <link rel="preload" as={as} href={path} />
    ))}
  </head>
  <body>
     <h1>42</h1>
  </body>
</html>

Limitation:

only useful for production build
my proposal is not very flexible, suggestions ?

Related to withastro/astro#5302
I try this vite plugin without success : https://github.com/Applelo/vite-plugin-inject-preload

natemoo-re · 2023-11-28T23:06:16Z

natemoo-re
Nov 28, 2023
Maintainer

Related proposal #561

0 replies

wtchnm · 2023-12-25T03:50:32Z

wtchnm
Dec 25, 2023

As an alternative, here is a middleware that add preloads for CSS files using rehype:

import { defineMiddleware } from 'astro:middleware'
import type { Element, Root } from 'hast'
import { rehype } from 'rehype'
import { visit } from 'unist-util-visit'
import { isCssLink } from 'hast-util-is-css-link'

const rehypeInstance = rehype().use(() => (tree: Root) => {
	let head: Element | undefined
	const links: Element[] = []
	visit(tree, 'element', node => {
		if (node.tagName === 'head') head = node
		if (isCssLink(node))
			links.push({
				type: 'element',
				tagName: 'link',
				properties: { rel: 'preload', as: 'style', href: node.properties.href },
				children: []
			})
	})
	head?.children.unshift(...links)
})

export const onRequest = defineMiddleware(async (_, next) => {
	const response = await next()
	if (response.headers.get('content-type') !== 'text/html') return response

	const html = await response.text()
	const file = await rehypeInstance.process(html)

	return new Response(file.toString(), response)
})

0 replies

josephmaxim · 2024-08-28T16:42:01Z

josephmaxim
Aug 28, 2024

+1 the bundled css is render blocking so this should be high priority.

0 replies

aldo-roman · 2025-02-10T16:21:11Z

aldo-roman
Feb 10, 2025

For anyone wondering, there is a way to achieve this. See https://docs.astro.build/en/guides/styling/#url-css-imports

---
import stylesUrl from '../styles/main.css?url';
---
<link rel="preload" href={stylesUrl} as="style">

0 replies

cerpow · 2025-05-12T23:40:23Z

cerpow
May 12, 2025

If you're using Sass, hot reload stops working. Here's what I did to fix it:

---
import '../css/app.scss'; 
import stylesUrl from '../css/app.scss?url';
---

<link rel="preload" href={stylesUrl} as="style" />

During the build step, Astro replaces the URLs with the generated .css file.

0 replies

delucis · 2025-05-26T10:57:39Z

delucis
May 26, 2025
Maintainer

Just noting that for most generic use cases, this is not necessary. For a browser, there is no difference between:

<head>
  <link href="/_astro/404.ae8dd206.css" rel="stylesheet">
</head>

and

<head>
  <link rel="preload" as="style" href="/_astro/404.ae8dd206.css" />
  <link href="/_astro/404.ae8dd206.css" rel="stylesheet">
</head>

With or without a <link rel="preload">, the browser’s preload scanner will discover scripts and styles in the <head> and load them the same way.

In general, you only need a preload if the resource is not also included in the head, e.g. because it’s something loaded dynamically (via a script for example).

It sounds like doing this might still help in the Cloudflare Pages “Early Hints” use case as it appears that feature parses preload tags and use them for that, but otherwise it generally shouldn’t be needed.

As mentioned above, when you do want to do this you can use a ?url import:

---
import scriptUrl from '../some-script.ts?url';
import styleUrl from '../some-style.css?url';
---

<link rel="preload" href={scriptUrl} as="script">
<link rel="preload" href={styleUrl} as="style">

0 replies

Fakerko · 2025-05-26T11:05:49Z

Fakerko
May 26, 2025

Sorry, I deleted my question because I found solution just right after I posted it.

Your example doesn't work for me. I must use ?worker&url to get working URL to TS file.
(I need to preload the script because of PageSpeed says that the script is blocking requests.)

But another problem is, that the builded JS file isn't minified. Is some param to force minified version?

// EDIT: I have already solved the file minification, using rollupOptions

2 replies

delucis May 26, 2025
Maintainer

I need to preload the script because of PageSpeed says that the script is blocking requests.

the builded JS file isn't minified.

How do you author your script? An Astro-bundled <script> should not be render blocking and should be minified, so might need to see your code to understand what you’re doing.

Fakerko May 26, 2025

I had SwiperJS script inside of <script> tag with some TypeScript in index.astro which was builded by Astro to a separate JS file.

Then I need to preload it, so I moved it from <script> tag to separate TS file, import using ?worker&url and solved the minification using rollupOptions inside of astro.config.mjs.

cerpow · 2025-05-26T11:34:04Z

cerpow
May 26, 2025

Yes, if you don't use is:inline, Astro should handle it properly

…

On Mon, 26 May 2025 at 14:24, Chris Swithinbank ***@***.***> wrote: I need to preload the script because of PageSpeed says that the script is blocking requests. the builded JS file isn't minified. How do you author your script? An Astro-bundled <script> should not be render blocking and should be minified, so might need to see your code to understand what you’re doing. — Reply to this email directly, view it on GitHub <#609 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATH4NYIXNTLEENS4JQP76D3AL2WFAVCNFSM6AAAAABNIVTTC2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMRXGE3DIOA> . You are receiving this because you commented.Message ID: ***@***.***>

0 replies

Add a way to preload/preconnect injected script/css files #609

Uh oh!

Uh oh!

Body

Summary

Background & Motivation

Goals

Proposal

Replies: 8 comments · 2 replies

Uh oh!

natemoo-re Nov 28, 2023 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

delucis May 26, 2025 Maintainer

Uh oh!

Uh oh!

Uh oh!

delucis May 26, 2025 Maintainer

Uh oh!

Uh oh!

Replies: 8 comments 2 replies

natemoo-re
Nov 28, 2023
Maintainer

delucis
May 26, 2025
Maintainer

delucis May 26, 2025
Maintainer