Optimizing web assets: images, fonts, JavaScript and CSS

Optimizing web assets means sending fewer bytes and loading them in the right order. Images are often the largest files on a page, so start there with modern formats, the right dimensions and lazy loading below the fold. Then subset and preload fonts, split and compress JavaScript and CSS, and question every third-party script.

Measure before and after each change. The Network panel in browser developer tools shows each file's transfer size. In Chrome DevTools, the Coverage panel also shows how much of each script and stylesheet a page uses.

WebP and AVIF usually produce smaller files than JPEG and PNG at similar visual quality, and current versions of the major browsers support both. AVIF is often smaller still but slower to encode. A picture element can offer AVIF or WebP with a JPEG fallback for older browsers.

Serve images at the size they are displayed. A 4000-pixel-wide photo in a 400-pixel slot wastes most of its bytes. The srcset and sizes attributes let the browser pick the right file for the screen width and pixel density.

Add loading="lazy" to images and iframes below the fold so they load only as the user scrolls near them. Never lazy-load the main image at the top of the page, because that delays Largest Contentful Paint; give it fetchpriority="high" instead.

Set width and height attributes on every image. The browser uses them to reserve the right aspect ratio before the file arrives, which prevents layout shift, and CSS such as height: auto keeps the image responsive.

Web fonts can hide text or shift the layout while they load. The font-display descriptor in @font-face controls what happens meanwhile. With swap, the browser shows a fallback font at once and switches when the web font arrives. With optional, it uses the web font only if it is available within a short block period, and otherwise keeps the fallback, which avoids a late swap.

Subset fonts to the characters you need. A font that covers many writing systems can be much larger than a Latin-only subset. With the unicode-range descriptor, the browser downloads only the subsets a page uses. Serve fonts as WOFF2, which is compressed.

Preload the one or two fonts used above the fold, so the browser fetches them before it finds them in the CSS. Font preloads need the crossorigin attribute, even for fonts on your own domain.

Code splitting breaks one large bundle into smaller files, so each page loads only the code it needs. Most bundlers create a separate file for each dynamic import(), which suits features that most visitors never open, such as an editor or a chart.

Minification strips whitespace and comments and shortens names. Tree shaking removes exported code that nothing imports. Bundlers can do both in production builds, and the Coverage panel shows what is still unused. Unused CSS costs more than its size suggests, because stylesheets in the head block rendering until they load.

Compress text responses (HTML, CSS, JavaScript, JSON and SVG) with Brotli or gzip. The browser lists what it accepts in the Accept-Encoding header, and the server names its choice in Content-Encoding. Browsers offer Brotli only over HTTPS.

Brotli usually produces smaller files than gzip. Pre-compress static files at build time at the highest level, and use a faster level for responses generated per request. Skip formats that are already compressed, such as JPEG, PNG, WebP, AVIF, WOFF2 and video.

Analytics, tag managers, chat widgets, ads and embedded videos add requests to other origins and compete with your code for the main thread. You control less of their size and timing, so treat each one as a cost that has to earn its place.

Current browsers partition their HTTP cache by the site that loads a resource. A library loaded from a public CDN is downloaded again for each site that uses it, so a shared CDN copy no longer saves your visitors a download.