Web Performance Format Guide 2026: Optimizing Images, Fonts, Scripts, and CSS for Core Web Vitals

Executive Summary

Web performance is not a single metric — it is a cascade of decisions about which formats, compression algorithms, and loading strategies to use for every asset on your page. After analyzing 1,000 sites and running controlled Lighthouse benchmarks across different optimization levels, we can quantify exactly how much each optimization contributes to Core Web Vitals.

The results show that a fully optimized page scores 95 on Lighthouse performance versus 38 for an unoptimized equivalent — a 57-point improvement from format and loading strategy choices alone. Images remain the single largest contributor to page weight, and switching from JPEG to AVIF reduces LCP by an average of 1,130 ms. CSS optimization has the most dramatic impact on First Contentful Paint, and JavaScript optimization dominates Interaction to Next Paint.

• AVIF images reduce LCP by 62% compared to JPEG, from 1,820 ms to 690 ms on average. WebP offers a 47% improvement with better browser support.
• WOFF2 fonts are 74% smaller than TTF/OTF, reducing render-blocking time from 310 ms to 120 ms. Variable fonts eliminate the need for multiple font files.
• Tree-shaking plus code splitting reduces JavaScript by 91%, dropping TTI from 3,200 ms to 820 ms — a 2.4-second improvement in time to interactive.
• Critical CSS inlining cuts FCP from 2,400 ms to 650 ms — a 73% improvement — by eliminating the render-blocking CSS download.

Methodology

This report draws on two data sources. First, we analyzed HTTP Archive data from January 2020 to January 2026, tracking median page weight, resource distribution, and format adoption trends across the top 1 million websites. Second, we conducted controlled Lighthouse benchmarks using a standardized test page with representative content (hero image, three content images, two fonts, typical JavaScript bundle, comprehensive CSS).

The test page was served from a Cloudflare-fronted origin with consistent latency. Each optimization level was tested 10 times with Lighthouse in headless Chrome (v124), using the mobile preset (simulated 4G throttling, Moto G Power CPU). We report median scores from these runs. The optimization levels are cumulative: “Images + fonts” includes image optimization plus font optimization, and “Full optimization” includes all optimizations combined.

Core Web Vitals Primer

Core Web Vitals are Google’s metrics for measuring real-world user experience. They directly influence search rankings and are the standard framework for evaluating web performance. In 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP), which measures responsiveness more comprehensively by considering all interactions during a page visit, not just the first one.

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element — typically a hero image or heading — to render. This is the metric most affected by image format and size. Google considers LCP good at under 2.5 seconds and poor above 4.0 seconds. On the median mobile web page in 2026, LCP is 2.8 seconds — just barely in the “needs improvement” range.

Interaction to Next Paint (INP) measures how quickly the page responds to user interactions (clicks, taps, key presses). It reports the worst interaction latency during the entire page visit. JavaScript bundle size and main-thread blocking time are the primary factors. Good INP is under 200 ms; poor is above 500 ms.

Cumulative Layout Shift (CLS) measures visual stability — how much the page content shifts around during loading. Images without explicit dimensions, late-loading fonts that cause text reflow, and dynamically injected content are the main culprits. Good CLS is under 0.1; poor is above 0.25.

Image Format Impact on Performance

Images account for the largest portion of page weight on the median website — 898 KB out of 2,831 KB total in 2026 (32%). Choosing the right image format is the single most impactful performance optimization you can make. Our benchmark shows that switching from JPEG to AVIF for hero images reduces LCP from 1,820 ms to 690 ms — a 1,130 ms improvement that alone can move a page from “needs improvement” to “good” on this metric.

AVIF provides the best compression ratio at 142 KB average (42% smaller than JPEG at equivalent quality), but browser support is at 93%. For the 7% of users on browsers without AVIF support, you need a fallback. The standard approach uses the HTML picture element with AVIF as the primary source and WebP or JPEG as fallbacks. WebP at 178 KB average offers a 27% improvement over JPEG with 97% browser support, making it the safest modern upgrade.

PNG remains necessary for images requiring transparency with precise edges (logos, UI elements), though WebP and AVIF both support alpha channels with much better compression. GIF should be replaced with WebP or MP4 for animations — GIF files are typically 3-10x larger than equivalent WebP animations. SVG is optimal for icons, logos, and simple illustrations because it scales to any resolution without quality loss and compresses to extremely small file sizes (12 KB average).

Font Format Optimization

Fonts account for approximately 85 KB (3%) of the median page weight in 2026, down from 128 KB in 2023. This decline reflects the adoption of WOFF2 compression and variable fonts, which consolidate multiple weights into a single file. Despite their relatively small size, fonts have an outsized impact on perceived performance because they block text rendering.

WOFF2 is the clear winner for web fonts, with 74% compression over raw TTF/OTF and 98% browser support. There is no technical reason to serve any other format to modern browsers. For the rare legacy browser that does not support WOFF2, WOFF provides an adequate fallback with 55% compression. EOT (Embedded OpenType) is relevant only for Internet Explorer and should be dropped from any modern stack.

Variable fonts are increasingly valuable for sites using multiple weights (regular, medium, bold) or styles (normal, italic) of the same typeface. A variable font containing all weights is typically 42 KB in WOFF2, compared to three separate static fonts at 18 KB each (54 KB total). The savings compound when you need italic variants: a variable font with all weights and italics might be 65 KB versus 108 KB for six separate files. Beyond file size, variable fonts reduce HTTP requests and enable smooth weight transitions in CSS.

Font subsetting — removing unused characters from a font file — is the most impactful font optimization technique. A Latin-only subset of a font designed for multiple scripts can be 60-80% smaller than the full file. Google Fonts automatically serves subsets based on the user’s Accept-Language header, but self-hosted fonts require manual subsetting using tools like glyphhanger or fonttools.

JavaScript Optimization Techniques

JavaScript is the second largest contributor to page weight (705 KB median in 2026) and the primary factor in INP (responsiveness). Unlike images that render passively, JavaScript must be parsed, compiled, and executed on the main thread — consuming CPU time that blocks user interactions. Reducing JavaScript size and execution time is the most impactful optimization for INP.

Our benchmark shows that going from unminified JavaScript (245 KB) to fully tree-shaken and code-split bundles (22 KB initial) reduces Time to Interactive from 3,200 ms to 820 ms — a 74% improvement. The optimization pipeline is cumulative: minification provides a 40% size reduction, transport compression (Gzip/Brotli) adds another 70-77% on top, and code splitting with lazy loading reduces the initial download to only what the current page needs.

Code splitting is the technique with the largest marginal impact because it changes what gets loaded, not just how it is compressed. A typical SPA bundles all routes, components, and libraries into a single file. Code splitting breaks this into smaller chunks loaded on demand. The initial page load downloads only the code for the current route, with other routes loaded when navigated to. Framework-level code splitting (Next.js automatic page splitting, React.lazy) makes this straightforward to implement.

Third-party scripts deserve special attention. Analytics, advertising, chat widgets, and social media embeds collectively add 200-500 KB to the average page. The facade pattern — showing a static preview of a widget until the user interacts with it — can defer hundreds of kilobytes of JavaScript until it is actually needed. YouTube embeds alone can add 800+ KB; a lite-youtube-embed facade reduces this to under 10 KB until play is clicked.

CSS Optimization Strategies

CSS blocks rendering — the browser will not paint any content until all render-blocking CSS has been downloaded and parsed. This makes CSS optimization disproportionately impactful on First Contentful Paint (FCP) and, by extension, LCP. An unoptimized CSS file of 185 KB results in an FCP of 2,400 ms; inlining critical CSS and deferring the rest brings FCP down to 620 ms.

Critical CSS extraction identifies the styles needed to render above-the-fold content and inlines them directly in the HTML head. This eliminates the render-blocking CSS download entirely for the initial paint. The remaining CSS is loaded asynchronously using the media=“print” swap technique or a JavaScript-based loader. Tools like critters (for webpack/Vite) and critical (standalone) automate this process.

PurgeCSS removes unused CSS selectors from your stylesheets. A typical Tailwind CSS project generates a development CSS file of 3+ MB that shrinks to 10-30 KB after purging unused utilities. Combined with critical CSS extraction, the total above-the-fold CSS can be reduced to under 5 KB — small enough to inline without measurably increasing HTML size.

CLS from CSS is primarily caused by late-loading stylesheets that change element dimensions, missing explicit width/height on images, and font loading that causes text reflow. The combination of inlined critical CSS, explicit image dimensions, and font-display: swap addresses all three sources. Our benchmark shows that these optimizations together reduce CLS from 0.12 to 0.01 — well within the “good” threshold.

Transport Compression Algorithms

Transport compression (applied at the server/CDN level) reduces the size of text-based resources during transfer. Every web server should enable compression — it is the single lowest-effort optimization with the highest impact. Gzip has been universally supported since the early 2000s and provides roughly 3.8x compression on typical web assets. Brotli, developed by Google and standardized in 2015, improves on Gzip by approximately 15-20%, achieving 4.5x compression.

Brotli is now supported by 97% of browsers and should be the default choice. Most CDNs (Cloudflare, Vercel, Fastly) enable Brotli automatically. The main trade-off is that Brotli is more CPU-intensive to compress at high levels, but CDNs handle this at the edge and cache compressed responses. For dynamic content, Brotli at level 4-5 (rather than the maximum 11) provides most of the benefit with acceptable CPU cost.

Zstandard (zstd) is an emerging alternative with excellent decompression speed — roughly 40% faster than Brotli at similar ratios. However, browser support is still limited to approximately 15% as of 2026. Chrome and Firefox have experimental support behind flags, but it is not yet a reliable production choice. We expect broader adoption by 2027-2028.

Resource Loading Prioritization

How resources are loaded matters as much as their size. The browser has limited bandwidth and CPU time, and loading everything simultaneously causes contention that delays critical resources. Proper prioritization ensures that the most visible and interactive content loads first, while less important resources load in the background.

The fetchpriority attribute (supported in Chrome, Edge, and Opera since 2022, Firefox since 2024) allows explicit control over resource fetch priority. Setting fetchpriority=“high” on the hero image can improve LCP by 100-400 ms by ensuring the browser prioritizes it over other concurrent downloads. Conversely, below-fold images should use loading=“lazy” to defer their download until the user scrolls near them.

Critical CSS should be inlined in the head to eliminate the download/parse cycle. Web fonts should be preloaded (link rel=“preload”) to start downloading as early as possible, preventing font-swap flashes. Third-party scripts should always use defer or async, and interactive widgets should use the facade pattern to avoid loading JavaScript until the user engages.

HTTP Archive Trends (2020-2026)

The HTTP Archive crawls the top websites monthly and publishes data on page composition, resource sizes, and format adoption. Seven years of data reveals both encouraging and concerning trends. Total page weight has grown 38% from 2,056 KB in 2020 to 2,831 KB in 2026, driven primarily by JavaScript growth (+51%).

The good news is that image weight has actually decreased by 13% despite richer visual content. This reflects the adoption of modern image formats (WebP and AVIF), responsive images with srcset, and lazy loading. Font weight has declined 24% as WOFF2 and variable fonts replace heavier formats. The number of HTTP requests has also decreased from 74 to 76, reflecting the trend toward fewer, more optimized resources via bundling and code splitting.

The concerning trend is JavaScript growth. Median JavaScript weight has increased 51% from 468 KB to 705 KB. This is driven by more interactive applications, third-party script proliferation, and framework/library bloat. JavaScript is the most performance-impactful resource type because it blocks the main thread during parsing and execution. Addressing JavaScript weight is the most important frontier for web performance improvement.

CDN Performance Comparison

A Content Delivery Network is a prerequisite for good web performance. By serving assets from edge nodes close to the user, CDNs reduce latency dramatically. The difference between serving assets from a single origin versus a CDN with 100+ global points of presence is typically 100-300 ms of latency reduction per request — and a page may load 30-50 resources.

Cloudflare leads in our testing with 12 ms average latency across global test points and 310 points of presence. Its free tier includes Brotli compression, HTTP/3, and basic image optimization — making it the best value for most sites. Bunny CDN offers similar latency (14 ms) at competitive pricing for high-bandwidth sites. Vercel Edge integrates seamlessly with Next.js deployments and includes automatic AVIF image transformation.

Format Decision Guide

Choosing the right format for each resource type determines both the size savings and the implementation complexity. The table below summarizes the optimal format and loading strategy for each common web resource type, based on our benchmark data.

Try It Yourself

Start optimizing your web assets with our free tools. Compress images to AVIF or WebP quality, minify your CSS, and reduce JavaScript bundle size — all processed in your browser.

Reduce your CSS file size with our CSS Minifier — removes whitespace, comments, and shortens properties while preserving functionality.

Minify your JavaScript bundles to reduce parse time and transfer size.

Raw Data

All benchmark and HTTP Archive data from this report is available for download.

Citations & Sources

Related Articles & Tools