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.

Practice

1. What is the main purpose of the add_menu_page function in WordPress?

easy

A. To register a new user role

B. To add a submenu item under an existing menu

C. To enqueue scripts and styles in the admin area

D. To add a new top-level menu page to the WordPress admin dashboard

Solution

1. Step 1: Understand the function purpose

   add_menu_page is used to create a new top-level menu in the WordPress admin dashboard.

2. Step 2: Compare with other options

   Adding submenu items uses add_submenu_page, user roles are registered differently, and scripts/styles are enqueued with other functions.

3. Final Answer:

   To add a new top-level menu page to the WordPress admin dashboard -> Option D

4. Quick Check:

   add_menu_page adds top-level menu [OK]

Hint: Remember: add_menu_page = top-level menu [OK]

Common Mistakes:

• Confusing add_menu_page with add_submenu_page
• Thinking it registers user roles
• Mixing it with script enqueue functions

2. Which of the following is the correct way to hook add_menu_page in WordPress?

easy

A. add_action('admin_menu', 'my_menu_function');

B. add_action('init', 'my_menu_function');

C. add_filter('admin_menu', 'my_menu_function');

D. add_action('wp_head', 'my_menu_function');

Solution

1. Step 1: Identify the correct hook for admin menus

   The admin_menu action hook is the correct place to add admin menu pages.

2. Step 2: Check other hooks

   init runs too early, wp_head is for front-end, and add_filter is incorrect for this purpose.

3. Final Answer:

   add_action('admin_menu', 'my_menu_function'); -> Option A

4. Quick Check:

   Use admin_menu hook for admin menus [OK]

Hint: Use admin_menu hook to add admin menus [OK]

Common Mistakes:

• Using init hook which is too early
• Using add_filter instead of add_action
• Hooking into front-end hooks like wp_head

3. What will happen if you run this code in your plugin?

add_action('admin_menu', function() {
  add_menu_page('My Plugin', 'My Plugin', 'manage_options', 'my-plugin', function() {
    echo 'Hello Admin!';
  });
});

medium

A. A fatal error occurs due to missing capability

B. Nothing happens because the callback function is missing

C. A new top-level menu named 'My Plugin' appears in admin, showing 'Hello Admin!' when clicked

D. The menu appears but clicking it shows a blank page

Solution

1. Step 1: Analyze the add_menu_page parameters

   The code adds a menu titled 'My Plugin' with capability 'manage_options' and a callback that echoes 'Hello Admin!'.

2. Step 2: Understand the callback behavior

   When the menu is clicked, the callback runs and outputs 'Hello Admin!'. No errors occur because capability and callback are valid.

3. Final Answer:

   A new top-level menu named 'My Plugin' appears in admin, showing 'Hello Admin!' when clicked -> Option C

4. Quick Check:

   Valid add_menu_page with callback shows output [OK]

Hint: Callback echoes content on menu page click [OK]

Common Mistakes:

• Assuming callback is missing
• Confusing capability with missing parameter
• Expecting blank page without callback

4. Identify the error in this code snippet:

add_action('admin_menu', 'register_my_menu');
function register_my_menu() {
  add_menu_page('Sample', 'Sample', 'manage_options');
}

medium

A. Callback function is missing but required

B. Missing menu slug parameter in add_menu_page

C. Capability 'manage_options' is invalid

D. Wrong hook used for adding menu page

Solution

1. Step 1: Check add_menu_page parameters

   The function call has only three parameters: page title, menu title, and capability.

2. Step 2: Verify required parameters

   The menu slug parameter is missing, which is required as the fourth argument.

3. Final Answer:

   Missing menu slug parameter in add_menu_page -> Option B

4. Quick Check:

   add_menu_page needs menu slug [OK]

Hint: add_menu_page needs 4+ parameters including slug [OK]

Common Mistakes:

• Forgetting the menu slug argument
• Assuming callback is mandatory (optional)
• Using wrong hook instead of admin_menu

5. You want to add a top-level admin menu page visible only to users who can edit posts, with the menu slug 'custom-editor'. Which code snippet correctly achieves this?

hard

A. add_action('admin_menu', function() {
add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() {
echo 'Editor Content';
});
});

B. add_action('admin_menu', function() {
add_menu_page('Editor Page', 'Editor Page', 'manage_options', 'custom-editor', function() {
echo 'Editor Content';
});
});

C. add_action('init', function() {
add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor');
});

D. add_action('admin_menu', function() {
add_submenu_page('custom-editor', 'Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() {
echo 'Editor Content';
});
});

Solution

1. Step 1: Check capability and hook

   The capability 'edit_posts' restricts menu visibility to users who can edit posts. The hook must be 'admin_menu'.

2. Step 2: Verify menu function and parameters

   add_menu_page is used correctly with all required parameters including slug 'custom-editor' and a callback function.

3. Step 3: Compare other options

   add_action('admin_menu', function() { add_menu_page('Editor Page', 'Editor Page', 'manage_options', 'custom-editor', function() { echo 'Editor Content'; }); }); uses 'manage_options' which is for admins, not editors. add_action('init', function() { add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor'); }); uses wrong hook 'init'. add_action('admin_menu', function() { add_submenu_page('custom-editor', 'Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() { echo 'Editor Content'; }); }); uses add_submenu_page which adds submenu, not top-level menu.

4. Final Answer:

   add_action('admin_menu', function() { add_menu_page('Editor Page', 'Editor Page', 'edit_posts', 'custom-editor', function() { echo 'Editor Content'; }); }); -> Option A

5. Quick Check:

   Capability edit_posts + add_menu_page + admin_menu hook [OK]

Hint: Use edit_posts capability with add_menu_page on admin_menu hook [OK]

Common Mistakes:

• Using manage_options instead of edit_posts
• Hooking into init instead of admin_menu
• Using add_submenu_page instead of add_menu_page