Public directory for static assets in Astro - Performance & Optimization

Performance: Public directory for static assets

MEDIUM IMPACT

This affects page load speed by controlling how static files like images, fonts, and scripts are served directly without extra processing.

Serving scripts efficiently in an Astro project

Astro

<script src="/analytics.js" defer></script>
// Placing analytics.js in the public directory and referencing it directly

Assets load directly from the server without JS bundling, enabling faster browser caching and parallel loading.

📈 Performance Gainreduces JS bundle size by 50-100kb, improves LCP by 100-200ms

Serving scripts efficiently in an Astro project

Astro

import '../assets/analytics.js';
// Importing JS files bundles them into the app's JavaScript bundle

Bundling static scripts inside JavaScript increases bundle size and delays script loading until JS executes.

📉 Performance Costadds 50-100kb to JS bundle, delays LCP by 100-200ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Importing assets in JS bundle	Low	0	High (due to delayed load)	[X] Bad
Serving assets from public directory	Low	0	Low (loads early)	[OK] Good

Rendering Pipeline

Static assets in the public directory are served directly by the server, bypassing JavaScript bundling and processing, allowing the browser to fetch them early during page load.

→Network Request

→Resource Fetching

→Paint

⚠️ BottleneckNetwork Request latency if assets are large or not cached

Core Web Vital Affected

LCP

This affects page load speed by controlling how static files like images, fonts, and scripts are served directly without extra processing.

Optimization Tips

1Place static files in the public directory to serve them directly.

2Avoid importing static assets into JavaScript bundles to reduce bundle size.

3Use caching and optimized file sizes to speed up asset loading.

Performance Quiz - 3 Questions

What is the main performance benefit of placing static assets in Astro's public directory?

A Assets are converted to base64 strings automatically

B Assets are bundled into JavaScript for better caching

C Assets load directly without bundling, improving load speed

D Assets are lazy loaded by default

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by scripts, and check if assets load as separate files with status 200.

What to look for: Look for assets served directly with small transfer size and fast response time indicating efficient static serving.