Frontend performance best practices

# JS & CSS

Assets are static files, such as JS, CSS, SVG and some images. It's common to have two versions of your asset files:

• the original files, that you can edit, probably Sass, PostCSS, TypeScript … (included in Git)
• the optimized files that are served in production (usually not included in Git)

Minifying JS/CSS files removes unnecessary extra spaces, line breaks and indentations. Modern tools support tree shaking as well. Another technique is to combine — concating — different JS or CSS files into one file. This brings you: less requests and probably better GZIP compression ratios. Finally, there are specific techniques to further reduce size: For JS, variable names can be changed automatically for shorter ones, in CSS you can use shorthands and short notations of colors and values.

You can hook in Node.js pipelining tasks during deployment build steps.

# Images, video and fonts

Images, video and web fonts are usually the heaviest assets on a page, and shrinking them is the fastest way to cut load time. Right-size and compress images, crunch or outsource video, and subset fonts — see reduce page weight for the how-to.

# Caching assets

Don't serve the same content to the same client twice. Cache it with their browser. While modern browsers are already doing great work here. You can further control the caching by altering the Cache-Control with the HTTP headers.

GZIP provides lossless compression for text files such as HTML, CSS, and JavaScript. It's implemented on the web server (Apache or nginx) as a module. You can enable and configure it in your .htaccess file (see also our htaccess GZIP article).

The process works like this: after HTML is rendered on the server side, it gets compressed before being sent to the browser. The browser decompresses it on receipt. This saves bandwidth but uses additional CPU on both sides. GZIP is generally recommended, though it can sometimes cause unexpected interactions with other caching techniques.

# Cookies

Minimize cookie size and usage. Cookies are sent in the HTTP headers in every request. Using a different domain for serving static assets can help reduce cookie overhead.

# DNS lookups

You can parallelize downloads across multiple host names to speed up delivery. However, excessive host names have diminishing returns: domain name resolution time increases, and browsers limit concurrent connections per host.

# Check your speed

Performance measurement is essential: faster sites improve user experience and search rankings. Use browser developer tools (Network, Lighthouse) and external services like Google PageSpeed Insights and GTmetrix to identify bottlenecks. For ongoing monitoring, see performance metrics specific to your hosting environment.

# External data sources

External service dependencies can become performance bottlenecks. When integrating REST APIs or third-party services, set aggressive timeouts and log response times that exceed your threshold to identify problematic endpoints before they impact users.