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)

Build tools such as Vite minify JS and CSS, remove unused code (tree shaking) and add a content hash to the file names. Run the build in the build commands, so the optimized files never need to be in git.

# Images, video and fonts

Images, video and web fonts are usually the heaviest assets on a page. Right-size and compress images, crunch or outsource video, and subset fonts. See reduce page weight.

# Caching and compression

A file the browser has cached costs no request at all. Set Cache-Control headers for static files, long for files with a content hash in the name, see HTTP headers.

Text files such as HTML, CSS, JS and SVG shrink to a fraction with GZIP or Brotli. fortrabbit compresses only after .htaccess turns it on, see GZIP and Brotli. Precompress CSS and JS during the build for the smallest files.

# Cookies

Browsers send every cookie of a domain with every request to it, also for images and CSS. Keep cookies few and small.

# Check your speed

Use the browser developer tools (Network, Lighthouse) and external services such as Google PageSpeed Insights to find 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.