Handling environment variables in Astro - Performance & Optimization

Performance: Handling environment variables

MEDIUM IMPACT

This affects page load speed and bundle size by controlling which environment variables are exposed to client-side code.

Exposing environment variables in Astro for client-side use

Astro

const apiKey = import.meta.env.PUBLIC_API_KEY;
// Only variables prefixed with PUBLIC_ are exposed to client
console.log(apiKey);

Limits exposed variables to only those needed on client, reducing bundle size and improving load speed.

📈 Performance Gainsaves 10-50kb in bundle size, faster LCP due to smaller JS payload

Exposing environment variables in Astro for client-side use

Astro

const apiKey = import.meta.env.PUBLIC_API_KEY;
// Using PUBLIC_ prefix for unnecessary or sensitive vars in client-side code
console.log(apiKey);

Exposes unnecessary or sensitive environment variables to client bundle, increasing bundle size and risking sensitive data leaks.

📉 Performance Costadds 10-50kb to client bundle depending on exposed env vars size, blocks rendering until bundle loads

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Exposing unnecessary env vars client-side	N/A	0	Increased due to larger JS	[X] Bad
Exposing only PUBLIC_ prefixed vars	N/A	0	Minimal JS size impact	[OK] Good

Rendering Pipeline

Environment variables are injected at build time. Variables without PUBLIC_ prefix are only available server-side, so client bundles stay smaller. Exposing too many variables increases JS size, delaying parsing and execution.

→Bundle Generation

→Network Transfer

→JS Parsing & Execution

⚠️ BottleneckJS Parsing & Execution due to larger bundle size

Core Web Vital Affected

LCP

This affects page load speed and bundle size by controlling which environment variables are exposed to client-side code.

Optimization Tips

1Only prefix environment variables with PUBLIC_ if they must be exposed to client.

2Avoid exposing sensitive or large environment variables to client-side code.

3Check client bundle size regularly to ensure environment variables are not bloating it.

Performance Quiz - 3 Questions

What is the main performance risk of exposing all environment variables to client-side code in Astro?

A Slower server response time

B Increased client bundle size slowing page load

C More DOM nodes created

D Higher CSS repaint cost

DevTools: Network

How to check: Open DevTools > Network tab > Filter by JS files > Check size of main JS bundle

What to look for: Smaller JS bundle size indicates fewer env vars exposed; large bundles suggest unnecessary exposure