Admin menu pages in Wordpress - Performance & Optimization

Performance: Admin menu pages

MEDIUM IMPACT

This affects the loading speed and responsiveness of WordPress admin dashboard pages, impacting how quickly menus and submenus appear and respond to user actions.

Adding custom admin menu pages with heavy database queries

Wordpress

<?php
add_action('admin_menu', function() {
  add_menu_page('Light Page', 'Light Page', 'manage_options', 'light-page', function() {
    echo '<div id="data-container">Loading data...</div>';
    ?>
    <script>
      fetch(ajaxurl + '?action=load_data')
        .then(res => res.text())
        .then(html => document.getElementById('data-container').innerHTML = html);
    </script>
    <?php
  });
});
add_action('wp_ajax_load_data', function() {
  global $wpdb;
  $results = $wpdb->get_results('SELECT * FROM wp_large_table LIMIT 50');
  foreach ($results as $row) {
    echo esc_html($row->data) . '<br>';
  }
  wp_die();
});
?>

Loads data asynchronously after initial page render, improving initial load speed and responsiveness.

📈 Performance GainInitial render is fast and non-blocking; data loads in background reducing blocking time by 150+ ms.

Adding custom admin menu pages with heavy database queries

Wordpress

<?php
add_action('admin_menu', function() {
  add_menu_page('Heavy Page', 'Heavy Page', 'manage_options', 'heavy-page', function() {
    global $wpdb;
    $results = $wpdb->get_results('SELECT * FROM wp_large_table');
    foreach ($results as $row) {
      echo esc_html($row->data) . '<br>';
    }
  });
});
?>

This loads a large dataset on page load, blocking rendering and causing slow menu page load and interaction delays.

📉 Performance CostBlocks rendering for 200+ ms depending on data size; triggers multiple reflows due to large DOM updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous data load in menu page	Large DOM tree generated at once	Multiple reflows triggered	High paint cost due to many elements	[X] Bad
Asynchronous data loading with AJAX	Small initial DOM, incremental updates	Single reflow after data load	Lower paint cost with fewer elements initially	[OK] Good

Rendering Pipeline

Admin menu pages first load PHP-generated HTML, then browser parses CSS and JS. Heavy PHP queries block HTML generation, delaying Style Calculation and Layout. Large DOM updates cause multiple reflows and paints, slowing interaction.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckHTML Parsing and Layout due to blocking PHP queries and large DOM updates

Core Web Vital Affected

INP

This affects the loading speed and responsiveness of WordPress admin dashboard pages, impacting how quickly menus and submenus appear and respond to user actions.

Optimization Tips

1Avoid heavy synchronous database queries in admin menu page callbacks.

2Use AJAX to load large data sets after initial page render.

3Keep initial DOM small to reduce reflows and paint costs.

Performance Quiz - 3 Questions

What is the main performance problem with loading large datasets synchronously in WordPress admin menu pages?

A It improves caching efficiency.

B It reduces server CPU usage.

C It blocks page rendering and delays user interaction.

D It decreases network latency.

DevTools: Performance

How to check: Open DevTools > Performance tab, record while loading the admin menu page, then analyze scripting and rendering times.

What to look for: Look for long scripting tasks blocking main thread and multiple layout/repaint events indicating heavy DOM updates.