diff --git a/src/component-arguments/component-argument.ts b/src/component-arguments/component-argument.ts
index f2192e6..2a4e8c7 100644
--- a/src/component-arguments/component-argument.ts
+++ b/src/component-arguments/component-argument.ts
@@ -1,47 +1,47 @@
-import { ComponentArguments, JDDContext, List, ShortText } from "../index";
+import { JDDContext, List, ShortText } from "../index";
 import { MaybePromise } from "../utils/util-types";
 
 export type ExtractComponentArgumentValue<C> = C extends List<infer S>
 	? S[]
 	: C extends ComponentArgument<infer T>
 	? T
 	: never;
 
 export type ExtractStructuredComponentArgumentsValues<C> = {
 	[property in keyof C]: ExtractComponentArgumentValue<C[property]>;
 };
 
 export abstract class ComponentArgument<ARG> {
 	public example_values: ARG[] = [];
 	public parent_argument: ComponentArgument<unknown> | null = null;
 	abstract getTypeName(): string;
 	abstract getEmptyValue(): ARG;
 	abstract countWords(value: ARG): number;
 	abstract parseFormInput(
 		context: JDDContext,
 		input: unknown,
 		arg_name: string
 	): MaybePromise<ARG | ARG[] | null>;
 
 	getExampleValue(_context: JDDContext): Promise<ARG> | ARG {
 		return this.example_values[
 			Math.floor(this.example_values.length * Math.random())
 		];
 	}
 
 	setExampleValues(values: ARG[]): this {
 		this.example_values = values;
 		return this;
 	}
 
 	hasParent(type: string) {
 		let parent = this.parent_argument;
 		while (parent) {
 			if (parent.getTypeName() == type) {
 				return true;
 			}
 			parent = parent.parent_argument;
 		}
 		return false;
 	}
 }
diff --git a/src/index.ts b/src/index.ts
index a271dc6..bdd4ecf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,120 +1,132 @@
 import { tempstream } from "tempstream";
 
 import { JDDContext } from "./jdd-context";
 import { Registry } from "./registry";
 import { EarlyAsset } from "./component";
 import { hasField } from "@sealcode/ts-predicates";
 
 export * from "./component";
 export * from "./component-arguments/component-argument";
 export * as ComponentArguments from "./component-arguments/component-arguments";
 export * from "./component-arguments/component-arguments"; // exporting this also as root elements to make it easier to auto-import those
 export * from "./jdd-context";
 export * from "./registry";
 export { insert_nbsp } from "./utils/insert_nbsp";
 
 export type JDDocument = Array<{
 	component_name: string;
 	args: Record<string, unknown>;
 }>;
 
 export function countWords(registry: Registry, document: JDDocument): number {
 	return document.reduce((acc, { component_name, args }) => {
 		const component = registry.get(component_name);
 		if (!component) {
 			console.warn(
 				"Component not found in the registry: " + component_name
 			);
 			return acc + 0;
 		}
 
 		return acc + component.countWords(args);
 	}, 0);
 }
 
 export async function renderEarlyAssets(
 	registry: Registry,
 	document: JDDocument,
 	context: JDDContext
 ) {
 	const early_assets = (
 		await Promise.all(
 			document.map(async ({ component_name, args }) => {
 				const component = registry.get(component_name);
 				if (!component) {
 					console.warn(
 						"Component not found in the registry: " + component_name
 					);
 					return [];
 				}
 				for (const arg_name in component?.getArguments()) {
 					if (!Object.prototype.hasOwnProperty.call(args, arg_name)) {
 						args[arg_name] = component
 							?.getArguments()
 							[arg_name]?.getEmptyValue();
 					}
 				}
 				return await component.getEarlyAssets(args, context);
 			})
 		)
 	).flat();
 	const deduplicated_assets: Record<string, EarlyAsset> = {};
 	for (const asset of early_assets) {
 		deduplicated_assets[asset.identity] = asset;
 	}
 	return Object.values(deduplicated_assets)
 		.map((asset) => {
 			if (asset.type == "script") {
 				if (hasField("url", asset)) {
 					return /* HTML */ `<script
+						async
 						src="${asset.url}"
 						onLoad="document.dispatchEvent(new Event('loaded-${asset.identity}'))"
 						${(asset.integrity &&
 							`integrity="${asset.integrity}" crossorigin=""`) ||
 						""}
 					></script>`;
 				} else {
 					return /* HTML */ `<script><${asset.content}/script>`;
 				}
 			} else if (asset.type == "style") {
 				if (hasField("url", asset)) {
-					return /* HTML */ `<link
-						rel="stylesheet"
-						href="${asset.url}"
-						${(asset.integrity &&
+					const integrity =
+						(asset.integrity &&
 							`integrity="${asset.integrity}" crossorigin=""`) ||
-						""}
-					/>`;
+						"";
+					// see https://web.dev/articles/defer-non-critical-css
+					return /* HTML */ `<link
+							rel="preload"
+							href="${asset.url}"
+							as="style"
+							onload="this.onload=null;this.rel='stylesheet'"
+							${integrity}
+						/>
+						<noscript
+							><link
+								rel="stylesheet"
+								href="${asset.url}"
+								${integrity}
+						/></noscript>`;
 				} else {
 					return /* HTML */ `<style>
 						${asset.content}
 					</style>`;
 				}
 			}
 		})
 		.join(" ");
 }
 
 export function render(
 	registry: Registry,
 	document: JDDocument,
 	context: JDDContext
 ) {
 	return tempstream`${document.map(({ component_name, args }) => {
 		const component = registry.get(component_name);
 		if (!component) {
 			console.warn(
 				"Component not found in the registry: " + component_name
 			);
 			return "";
 		}
 		for (const arg_name in component?.getArguments()) {
 			if (!Object.prototype.hasOwnProperty.call(args, arg_name)) {
 				args[arg_name] = component
 					?.getArguments()
 					[arg_name]?.getEmptyValue();
 			}
 		}
 		return component.toHTML(args, context);
 	})}`;
 }