# Critical Asset Optimization
> **Who is this for?**
> Frontend developers tuning Largest Contentful Paint (LCP) and page-load speed via critical asset registration, preload hints, and DNS prefetch.
> **TL;DR:** `CriticalAssetRegistry` lets you mark stylesheets and scripts as critical or deferred; `AssetOptimizationMiddleware` injects resource hints (``) into HTML responses to accelerate asset delivery.
---
## When to use this
Register assets when:
- You have a critical stylesheet (e.g. theme CSS) that should be preloaded to reduce render-blocking delays
- You have third-party scripts or fonts that benefit from DNS prefetch hints
- You want to defer non-critical JavaScript loads (e.g. insights, tracking)
The registry pairs with the asset optimization middleware to inject browser hints that signal the browser to resolve DNS, establish connections, or preload resources _before_ they're explicitly requested in the HTML.
## How it's wired
`CriticalAssetRegistry` is registered as a **singleton** in the Laravel container under both `CriticalAssetRegistry::class` and the alias `'capell-frontend.critical-assets'` (see [`packages/frontend/src/Providers/FrontendServiceProvider.php`](../../packages/frontend/src/Providers/FrontendServiceProvider.php) line 150–151).
`AssetOptimizationMiddleware` is **not auto-applied** to all responses. It is imported in the frontend service provider but registered only as a route middleware alias. You must explicitly apply it to routes where you want asset optimization hints injected.
To enable it on a route group:
```php
Route::middleware(['frontend.asset-optimization'])->group(function () {
// routes here will have asset hints injected
});
```
(Check your routes configuration for the exact alias name; the middleware class must be aliased in `FrontendServiceProvider::registerMiddlewareAliases()`.)
## Public API (CriticalAssetRegistry)
| Method | Returns | Purpose |
| --------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
| `registerCritical(string $handle, string $url, string $type = 'css'): void` | `void` | Register a critical asset (defaults to CSS) |
| `registerDeferred(string $handle, string $url, string $type = 'js'): void` | `void` | Register a deferred asset (defaults to JavaScript) |
| `getCriticalAssets(): array` | `array` | Get all registered critical assets as `[handle => ['url' => ..., 'type' => ...]]` |
| `getDeferredAssets(): array` | `array` | Get all registered deferred assets with same structure |
| `criticalCss(): string` | `string` | Render all critical CSS assets as HTML `` tags |
| `deferredScripts(): string` | `string` | Render all deferred JS assets as HTML `