Pagination (PageNumber, Cursor, Limit/Offset) in Django - Performance & Optimization

Performance: Pagination (PageNumber, Cursor, Limit/Offset)

MEDIUM IMPACT

Pagination affects how much data is loaded and rendered at once, impacting page load speed and responsiveness.

Loading large lists of items in a web page

Django

def get_items(request):
    cursor = request.GET.get('cursor')
    limit = 100
    if cursor:
        items = Item.objects.filter(id__gt=cursor).order_by('id')[:limit]
    else:
        items = Item.objects.all().order_by('id')[:limit]
    return render(request, 'items.html', {'items': items})

Cursor pagination uses indexed queries for faster, stable data retrieval and reduces load time.

📈 Performance GainReduces query time by 50%+; lowers reflows by loading fewer items per page

Loading large lists of items in a web page

Django

def get_items(request):
    page = int(request.GET.get('page', 1))
    limit = 100
    offset = (page - 1) * limit
    items = Item.objects.all()[offset:offset+limit]
    return render(request, 'items.html', {'items': items})

Using limit/offset pagination on large datasets causes slow database queries and inconsistent results when data changes.

📉 Performance CostBlocks rendering for 200+ ms on large pages; triggers multiple reflows if many items render

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Limit/Offset Pagination on large data	High (many nodes)	Multiple reflows per page	High paint cost	[X] Bad
Cursor Pagination with indexed queries	Low (limited nodes)	Single reflow per page	Low paint cost	[OK] Good

Rendering Pipeline

Pagination controls how much data is fetched and rendered, affecting layout and paint stages by limiting DOM nodes.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to many DOM nodes when loading large pages

Core Web Vital Affected

LCP

Pagination affects how much data is loaded and rendered at once, impacting page load speed and responsiveness.

Optimization Tips

1Avoid large offset values in limit/offset pagination to reduce slow queries.

2Use cursor pagination with indexed columns for faster, stable data retrieval.

3Limit the number of items rendered per page to reduce layout and paint costs.

Performance Quiz - 3 Questions

Which pagination method generally improves page load speed for large datasets?

A Loading all data at once without pagination

B Cursor pagination using indexed queries

C Limit/offset pagination with large offsets

D Using random page numbers without order

DevTools: Performance

How to check: Record a page load with pagination, observe the flame chart for scripting and rendering times, and check the number of layout and paint events.

What to look for: Look for long scripting or layout times and many reflows indicating inefficient pagination.