Pagination with custom queries in Wordpress - Performance & Optimization

Performance: Pagination with custom queries

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how much data is fetched and rendered at once.

Loading posts with pagination using custom queries

Wordpress

<?php
$paged = max(1, get_query_var('paged'));
$args = array('posts_per_page' => 10, 'paged' => $paged);
$query = new WP_Query($args);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
  the_title();
endwhile; endif;
wp_reset_postdata();
?>

Limits posts per page to 10, reducing data fetched and DOM nodes, improving load and render speed.

📈 Performance GainReduces initial load by 90%+, triggers only 1 reflow per page load

Loading posts with pagination using custom queries

Wordpress

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => -1, 'paged' => $paged);
$query = new WP_Query($args);
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
  the_title();
endwhile; endif;
wp_reset_postdata();
?>

Fetching all posts at once with 'posts_per_page' set to -1 loads too many items, causing slow page load and heavy DOM.

📉 Performance CostBlocks rendering for 300+ ms on large sites, triggers many reflows due to large DOM

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Load all posts at once	High (hundreds of nodes)	Multiple reflows	High paint cost	[X] Bad
Paginate with limited posts	Low (10-20 nodes)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Pagination controls how many posts are queried and rendered, affecting the browser's layout and paint stages by limiting DOM size.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to large DOM when too many posts are loaded

Core Web Vital Affected

LCP

This affects page load speed and interaction responsiveness by controlling how much data is fetched and rendered at once.

Optimization Tips

1Always limit posts_per_page in custom queries to a reasonable number (e.g., 10-20).

2Avoid querying all posts at once to prevent large DOM and slow rendering.

3Use pagination controls to fetch and render only needed data per page.

Performance Quiz - 3 Questions

What is the main performance benefit of limiting posts per page in a custom WordPress query?

A Makes the page load slower by adding more JavaScript

B Reduces the number of DOM nodes and speeds up page rendering

C Increases the total number of database queries

D Causes more layout shifts on the page

DevTools: Performance

How to check: Record a performance profile while loading the paginated page. Look at the Layout and Paint sections for time spent and number of reflows.

What to look for: High layout or paint times and many reflows indicate poor pagination; low times and fewer reflows indicate good pagination.