CSS bundling options in Ruby on Rails - Performance & Optimization

Performance: CSS bundling options

MEDIUM IMPACT

This affects page load speed by controlling how CSS files are combined and delivered to the browser.

Delivering CSS styles efficiently for a Rails web app

Ruby on Rails

/* app/assets/stylesheets/application.css */
/* Use Rails asset pipeline or CSS bundler to combine CSS into one file */
@import 'all_styles';

/* all_styles.css is a single bundled file containing reset, layout, colors, fonts */

Combines CSS into one file reducing HTTP requests and speeding up initial render.

📈 Performance GainSingle HTTP request reduces LCP by 200-400ms and lowers network overhead

Delivering CSS styles efficiently for a Rails web app

Ruby on Rails

/* app/views/layouts/application.html.erb */
<!-- Deliver many separate CSS files without bundling -->
<%= stylesheet_link_tag 'reset' %>
<%= stylesheet_link_tag 'layout' %>
<%= stylesheet_link_tag 'colors' %>
<%= stylesheet_link_tag 'fonts' %>

Multiple CSS files loaded separately cause many HTTP requests, increasing load time.

📉 Performance CostTriggers multiple network requests, increasing LCP by 200-400ms on slow connections

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple small CSS files	Low	Multiple reflows due to delayed style application	High paint cost due to late style application	[X] Bad
Single bundled CSS file	Low	Single reflow after styles applied	Lower paint cost as styles apply faster	[OK] Good
Full Tailwind CSS without purge	Low	Single reflow but delayed due to large CSS	High paint cost due to large CSS	[X] Bad
Tailwind CSS with purge enabled	Low	Single reflow with fast style application	Low paint cost due to small CSS	[OK] Good

Rendering Pipeline

CSS bundling affects the Critical Rendering Path by controlling how CSS is downloaded, parsed, and applied before the page renders.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Style Calculation stages are most impacted by CSS bundle size and number of requests.

Core Web Vital Affected

LCP

This affects page load speed by controlling how CSS files are combined and delivered to the browser.

Optimization Tips

1Bundle CSS files to reduce HTTP requests and improve load speed.

2Purge unused CSS styles to minimize bundle size and speed rendering.

3Avoid loading large CSS files that block rendering and increase LCP.

Performance Quiz - 3 Questions

What is the main performance benefit of bundling CSS files in a Rails app?

A Allows CSS to load asynchronously without blocking

B Reduces number of HTTP requests, speeding up page load

C Increases CSS file size for better caching

D Automatically fixes CSS syntax errors

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, filter by CSS files, check number and size of CSS files. Then use Performance tab to record page load and check LCP and style recalculation timings.

What to look for: Look for fewer CSS requests with smaller file sizes and shorter blocking times before first paint.