Infraintermediate

Static Asset Optimization

Optimize static assets (JS, CSS, images, fonts) for minimal size and efficient delivery to improve page load performance.

Also known as: asset optimization, bundle optimization, asset pipeline, web performance optimization

Description

Static asset optimization encompasses techniques to minimize the size and maximize the delivery efficiency of JavaScript, CSS, images, fonts, and other static files served to browsers. These optimizations directly impact page load time, Core Web Vitals scores, and user experience. Modern build tools handle many optimizations automatically, but understanding and configuring them correctly is essential.

JavaScript optimization includes tree-shaking (removing unused exports), code splitting (loading code on demand via dynamic imports), minification (removing whitespace, shortening variable names), and dead code elimination. CSS optimization involves PurgeCSS or similar tools to remove unused selectors, minification, and critical CSS extraction (inlining above-the-fold CSS). Image optimization includes format selection (WebP/AVIF for photographs, SVG for icons, PNG for transparency), responsive images via srcset, lazy loading with loading='lazy', and automatic compression. Font optimization involves subsetting (including only needed characters), using font-display: swap, and preloading critical fonts.

Delivery optimization includes content-hash-based filenames for aggressive caching, Brotli/gzip compression at the CDN or server level, HTTP/2 or HTTP/3 for multiplexed delivery (eliminating domain sharding), preload/prefetch hints for critical resources, and proper Cache-Control headers. Bundle analysis tools (webpack-bundle-analyzer, source-map-explorer) help identify oversized dependencies and optimize chunk splitting strategies.

Prompt Snippet

Configure the Next.js build pipeline for optimal static asset delivery: enable SWC minification, configure output: 'standalone' for Docker deployments, set images.formats to ['image/avif', 'image/webp'] with a custom loader for the CDN. Implement route-based code splitting with dynamic imports and Suspense boundaries. Add a next.config.js webpack override for bundle analysis in CI (ANALYZE=true). Set Cache-Control headers for _next/static/** to public, max-age=31536000, immutable via custom headers config. Configure Brotli precompression at build time using the compression-webpack-plugin for static exports. Target a Lighthouse performance score >90 and set a 200KB JavaScript budget via bundlewatch in CI.