Fragment caching in Ruby on Rails - Performance & Optimization

Performance: Fragment caching

HIGH IMPACT

Fragment caching improves page load speed by storing parts of the page output to avoid repeated rendering.

Rendering a complex partial multiple times on a page

Ruby on Rails

<% cache('comments_fragment') do %>
  <%= render 'comments' %>
<% end %>

Stores rendered output once, reuses it on subsequent requests without reprocessing.

📈 Performance GainReduces server render time by 70-90%, improving LCP and reducing server load

Rendering a complex partial multiple times on a page

Ruby on Rails

<%= render 'comments' %> repeated multiple times without caching

Each render triggers full template processing and database queries, slowing response.

📉 Performance CostBlocks rendering for 100+ ms per render, increasing LCP significantly

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching, repeated partial renders	High (many nodes rendered repeatedly)	Multiple reflows per partial	High paint cost due to delayed content	[X] Bad
Fragment caching with stored HTML	Low (cached HTML reused)	Single reflow on initial load	Low paint cost, faster content display	[OK] Good

Rendering Pipeline

Fragment caching bypasses template rendering and database calls by serving stored HTML, reducing server processing before sending to browser.

→Server Rendering

→Network Transfer

→Browser Paint

⚠️ BottleneckServer Rendering (template processing and DB queries)

Core Web Vital Affected

LCP

Fragment caching improves page load speed by storing parts of the page output to avoid repeated rendering.

Optimization Tips

1Cache only parts of the page that are expensive to render and do not change often.

2Set proper expiration or cache keys to avoid showing stale content.

3Use fragment caching to reduce server rendering time and improve LCP.

Performance Quiz - 3 Questions

What is the main performance benefit of fragment caching in Rails?

A Reduces server rendering time by reusing cached HTML fragments

B Improves client-side JavaScript execution speed

C Decreases CSS file size

D Prevents browser reflows

DevTools: Performance

How to check: Record page load, look for long server-side scripting times and repeated template rendering calls.

What to look for: Reduced server scripting time and faster Time to First Byte indicate effective fragment caching.