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.

Practice

1. What is the main purpose of CSS bundling in a Rails application?

easy

A. To disable CSS caching in browsers

B. To separate CSS files for easier debugging

C. To convert CSS into JavaScript files

D. To combine multiple CSS files into one for faster page loading

Solution

1. Step 1: Understand CSS bundling concept

   CSS bundling means merging many CSS files into a single file to reduce the number of requests a browser makes.

2. Step 2: Identify the benefit in Rails context

   Combining CSS files speeds up page loading by reducing HTTP requests, which is the main goal of bundling.

3. Final Answer:

   To combine multiple CSS files into one for faster page loading -> Option D

4. Quick Check:

   CSS bundling = faster loading [OK]

Hint: Bundling means merging files to speed up loading [OK]

Common Mistakes:

• Thinking bundling separates files instead of combining
• Confusing CSS bundling with JavaScript bundling
• Assuming bundling disables caching

2. Which command correctly installs Tailwind CSS bundling in a Rails project?

easy

A. rails css:install:tailwind

B. rails css:setup:tailwind

C. rails css:bundle:tailwind

D. rails css:compile:tailwind

Solution

1. Step 1: Recall Rails CSS bundling command pattern

   The correct command pattern is rails css:install:<bundler> to install a CSS bundler.

2. Step 2: Match the bundler name

   For Tailwind CSS, the bundler name is 'tailwind', so the command is rails css:install:tailwind.

3. Final Answer:

   rails css:install:tailwind -> Option A

4. Quick Check:

   Install command = rails css:install:tailwind [OK]

Hint: Use rails css:install:<bundler> for setup [OK]

Common Mistakes:

• Using 'setup' or 'bundle' instead of 'install'
• Typing 'compile' which is not a valid command
• Misspelling 'tailwind'

3. Given the command rails css:install:bootstrap, what is the expected outcome?

medium

A. Rails generates JavaScript files for Bootstrap

B. Bootstrap CSS bundling setup files are added to the project

C. The project removes all CSS files

D. The command throws an error because Bootstrap is unsupported

Solution

1. Step 1: Understand the command purpose

   The command rails css:install:bootstrap installs Bootstrap CSS bundling support in the Rails app.

2. Step 2: Identify the expected effect

   This adds necessary Bootstrap CSS files and configuration to enable bundling, not removing files or generating JS.

3. Final Answer:

   Bootstrap CSS bundling setup files are added to the project -> Option B

4. Quick Check:

   rails css:install:bootstrap adds Bootstrap CSS [OK]

Hint: Install commands add setup files, not remove them [OK]

Common Mistakes:

• Thinking it deletes CSS files
• Expecting JavaScript files instead of CSS
• Assuming Bootstrap bundling is unsupported

4. You run rails css:install:sass but get an error. What is the likely cause?

medium

A. You need to install Node.js first

B. You must run the command with sudo

C. The bundler name should be 'dart-sass', not 'sass'

D. Rails does not support any Sass bundler

Solution

1. Step 1: Check the correct bundler name for Sass

   Rails uses 'dart-sass' as the bundler name, not just 'sass'. Using 'sass' causes an error.

2. Step 2: Verify other options

   Running with sudo is unnecessary, Rails supports Sass via dart-sass, and Node.js is not required for this command.

3. Final Answer:

   The bundler name should be 'dart-sass', not 'sass' -> Option C

4. Quick Check:

   Correct bundler name = dart-sass [OK]

Hint: Use exact bundler names like 'dart-sass' [OK]

Common Mistakes:

• Using partial or incorrect bundler names
• Assuming sudo fixes all errors
• Believing Node.js is required for CSS bundling commands

5. You want to switch from Tailwind to Bootstrap CSS bundling in your Rails app. Which steps should you follow?

hard

A. Remove Tailwind files, run rails css:install:bootstrap, then update your CSS imports

B. Run rails css:install:bootstrap directly without removing Tailwind files

C. Delete all CSS files manually and restart the server

D. Change the bundler name in config files without reinstalling

Solution

1. Step 1: Remove existing Tailwind CSS files

   To avoid conflicts, remove Tailwind CSS files and configurations first.

2. Step 2: Install Bootstrap bundling

   Run rails css:install:bootstrap to add Bootstrap bundling setup.

3. Step 3: Update CSS imports

   Modify your CSS files or imports to use Bootstrap styles instead of Tailwind.

4. Final Answer:

   Remove Tailwind files, run rails css:install:bootstrap, then update your CSS imports -> Option A

5. Quick Check:

   Switch bundlers = remove old + install new + update imports [OK]

Hint: Remove old bundler before installing new one [OK]

Common Mistakes:

• Installing new bundler without removing old files
• Only deleting CSS files without reinstalling bundler
• Changing config without running install commands