Figure component in Bootsrap - Performance & Optimization

Performance: Figure component

LOW IMPACT

This affects page load speed and rendering performance by how images and captions are loaded and displayed.

Displaying an image with a caption using Bootstrap's figure component

Bootsrap

<figure class="figure">
  <img src="optimized-image.webp" class="figure-img img-fluid rounded" alt="Example image" loading="lazy" width="600" height="400">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Using a smaller, optimized image with lazy loading reduces initial load time and speeds up rendering.

📈 Performance GainReduces blocking time by 300ms+, improves LCP by loading image only when needed

Displaying an image with a caption using Bootstrap's figure component

Bootsrap

<figure class="figure">
  <img src="large-unoptimized-image.jpg" class="figure-img img-fluid rounded" alt="Example image">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Using a large, unoptimized image increases load time and delays rendering of the main content.

📉 Performance CostBlocks rendering for 500ms+ depending on image size and network speed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large unoptimized image in figure	Minimal (1 img + 1 figcaption)	1 reflow due to image load	High paint cost due to large image	[X] Bad
Optimized image with lazy loading	Minimal (1 img + 1 figcaption)	Single reflow with fixed dimensions	Lower paint cost with smaller image	[OK] Good

Rendering Pipeline

The figure component loads the image resource, calculates styles including size and layout, then paints the image and caption. Large images delay the Layout and Paint stages.

→Resource Loading

→Style Calculation

→Layout

→Paint

⚠️ BottleneckResource Loading and Layout due to image size and dimensions

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by how images and captions are loaded and displayed.

Optimization Tips

1Always optimize images used in figure components for faster loading.

2Specify width and height attributes on images to prevent layout shifts.

3Use lazy loading on images to improve initial page load performance.

Performance Quiz - 3 Questions

What is the main performance benefit of specifying width and height on images in a figure component?

A It prevents layout shifts during loading

B It reduces image file size

C It improves image quality

D It enables lazy loading automatically

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load, and look for long tasks related to image decoding and layout shifts.

What to look for: Look for long image decode times and layout shifts caused by images without fixed dimensions.