Pagination and sorting with Pageable in Spring Boot - Performance & Optimization

Performance: Pagination and sorting with Pageable

MEDIUM IMPACT

This concept affects how much data is loaded and rendered at once, impacting page load speed and responsiveness when displaying lists.

Loading large lists of data in a web app

Spring Boot

Pageable pageable = PageRequest.of(page, size, Sort.by("name").ascending());
Page<Item> items = itemRepository.findAll(pageable);

Loads only a subset of data per request with sorting, reducing memory and network load.

📈 Performance GainReduces initial load time significantly; triggers only necessary database queries; improves LCP

Loading large lists of data in a web app

Spring Boot

List<Item> items = itemRepository.findAll(); // loads all items without pagination or sorting

Loads entire dataset into memory and sends all data to client, causing slow page loads and high memory use.

📉 Performance CostBlocks rendering for hundreds of milliseconds or more depending on data size; high memory usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Load all data at once	High (many nodes)	Multiple reflows due to large DOM	High paint cost	[X] Bad
Use Pageable for pagination and sorting	Low (limited nodes)	Single reflow per page load	Low paint cost	[OK] Good

Rendering Pipeline

Pagination limits data fetched and sent to the client, reducing the amount of DOM nodes created and CSS painted. Sorting ensures data is ordered before rendering, avoiding client-side reordering.

→Data Fetching

→DOM Construction

→Layout

→Paint

⚠️ BottleneckData Fetching and DOM Construction when loading large datasets without pagination

Core Web Vital Affected

LCP

This concept affects how much data is loaded and rendered at once, impacting page load speed and responsiveness when displaying lists.

Optimization Tips

1Always fetch only the data needed for the current page to reduce load time.

2Use server-side sorting to avoid client-side layout shifts and reflows.

3Avoid loading entire datasets at once to prevent blocking rendering and high memory use.

Performance Quiz - 3 Questions

What is the main performance benefit of using Pageable for pagination?

A It limits the amount of data fetched and rendered per page.

B It caches all data on the client for faster access.

C It sorts data on the client side after loading all items.

D It increases the number of DOM nodes to improve layout.

DevTools: Performance

How to check: Record a performance profile while loading the page with and without pagination. Compare scripting and rendering times.

What to look for: Look for long scripting tasks and large layout or paint times indicating heavy DOM or data processing.