外掛說明
Menu Optimizer is a powerful performance optimization plugin that generates static HTML files for your WordPress menus, dramatically reducing server load and improving page load times.
Real-World Success: This optimization technique helped achieve the first WooCommerce store with a perfect 100/100 mobile score on Google PageSpeed Insights. Read the WP Rocket case study
Why Menu Caching Matters
Menu generation requires significant compute time on WordPress and WooCommerce sites. Every page load requires WordPress to:
* Query the database for menu items
* Process menu hierarchy
* Apply filters and hooks
* Render HTML output
Menu Optimizer eliminates this overhead by pre-generating menu HTML files that are served instantly.
The DOM Size Problem
Google Lighthouse triggers warnings when a page exceeds 1,500 DOM nodes (HTML elements). For e-commerce sites with extensive product categories:
- A mega menu with 200-300 categories can generate 3,000-5,000+ DOM elements
- Each nested menu item multiplies the element count
- This exceeds Google’s limits and hurts Core Web Vitals scores
Menu Optimizer’s lazy loading keeps your initial DOM size under 1,500 nodes by loading only top-level items (typically 50-100 elements). Submenus load on-demand, maintaining excellent performance.
Key Features
- Performance Boost – Reduces menu rendering time with static file caching
- Multiple Menu Support – Cache and display multiple menus independently on the same page
- Horizontal & Vertical Layouts – Supports both menu orientations for flexible placement
- Static File Generation – Pre-generates HTML files for instant delivery
- Lazy Loading – Top-level items load instantly; submenus load on first hover
- Smart Caching – Uses localStorage for even faster subsequent loads
- Max Mega Menu Compatible – Fully supports complex mega menu layouts
- Easy Integration – Simple shortcode implementation
- Translation Ready – Full i18n support with included POT file
- CDN Compatible – Works seamlessly with caching plugins and CDNs
Performance Benefits
✓ Keeps DOM size under Google’s 1,500-node limit with lazy loading
✓ Reduces server CPU usage by offloading menu generation
✓ Decreases Time To First Byte (TTFB)
✓ Improves Core Web Vitals scores (LCP, CLS, INP)
✓ Reduces database queries per page load
✓ Compatible with WP Rocket, W3 Total Cache, and other caching plugins
Perfect For
- WooCommerce stores with complex category menus
- Sites with large mega menus
- High-traffic websites
- Sites on shared hosting
- Performance-critical applications
- Stores aiming for 100/100 PageSpeed scores
Proven Results
This menu optimization technique was used in a WooCommerce store that achieved a 100/100 Google PageSpeed mobile score.
Learn more: WP Rocket Case Study – 100/100 Mobile Score for WooCommerce
Credits
Developed by Oxford Metadata Ltd
Contact: dimitris.vayenas@oxfordmetadata.co.uk
Special thanks to the WordPress community for their valuable feedback and contributions.
Support
For support, please visit the WordPress.org support forum or contact us at dimitris.vayenas@oxfordmetadata.co.uk.
Privacy
This plugin:
* Does not collect any user data
* Does not make external API calls
* Does not use cookies
* Stores cached menu files locally on your server
* Uses localStorage only for client-side caching (optional)
Performance Tips
- Combine with a caching plugin – Use WP Rocket or similar for full-page caching
- Enable lazy loading – The plugin does this automatically
- Use a CDN – Serve static menu files from a CDN for global performance
- Regenerate regularly – Update cache whenever you modify your menu structure
- Customize CSS via Customizer – Use WordPress’s built-in Customizer for menu styling
Technical Details
File Structure:
* Top menu file – Loads instantly with page (minimal HTML)
* Full menu file – Lazy loads on first interaction (complete with submenus)
* CSS options – None, Max Mega Menu auto-detect, or custom
* Storage location – wp-content/uploads/menu-optimizer/
Browser Compatibility:
* Chrome 90+
* Firefox 88+
* Safari 14+
* Edge 90+
Server Requirements:
* PHP 7.4 or higher
* WordPress 5.8 or higher
* Write permissions to uploads directory
螢幕擷圖
Admin settings page – Configure your menu and CSS options 
Performance comparison – Before and after metrics
安裝方式
- Upload the
menu-optimizerfolder to the/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
- Go to Menu Optimizer in your WordPress admin menu
- Select your WordPress menu from the dropdown
- Choose menu layout (horizontal or vertical)
- Configure CSS source (optional – for Max Mega Menu support)
- Click Save Settings
- Click Regenerate Menu Files to generate static cache
- Add the shortcode
[menu_optimizer id="MENU_ID"]to your theme where you want the menu to appear (replace MENU_ID with your menu’s ID)
常見問題集
-
How much performance improvement can I expect?
-
Performance improvements vary based on your menu complexity, server configuration, and current optimization level. The plugin reduces menu rendering time by using static file caching instead of dynamic generation. Sites with complex mega menus typically see the most benefit.
-
Yes. Whenever you add, remove, or modify menu items in WordPress, you should click “Regenerate Menu Files” to update the static cache.
-
Yes! Menu Optimizer has full support for Max Mega Menu, including grid layouts, column spans, and all advanced features.
-
Will this work on mobile devices?
-
The plugin automatically detects mobile devices and doesn’t load on mobile to preserve your mobile menu functionality. This ensures compatibility with responsive menus.
-
Is it compatible with caching plugins?
-
Yes, Menu Optimizer is designed to work seamlessly with WP Rocket, W3 Total Cache, WP Super Cache, and other caching plugins.
-
Yes! You can customize the menu styling using WordPress’s built-in Customizer (Appearance > Customize > Additional CSS) or by adding CSS rules in your theme’s stylesheet.
-
What happens if I deactivate the plugin?
-
The plugin cleans up after itself. When deactivated, your site will revert to normal WordPress menu rendering. When uninstalled, all options and cached files are removed.
-
Does this support multilingual sites?
-
Yes, the plugin is translation-ready with an included POT file. It works with WPML, Polylang, and other translation plugins.
-
Yes! Menu Optimizer supports multiple menus independently. Simply generate each menu in the admin panel and use the shortcode with different menu IDs:
[menu_optimizer id="123"] for your header menu [menu_optimizer id="456"] for your footer menuEach menu maintains its own cache and configuration.
-
How does this help with Google’s DOM size limits?
-
Google Lighthouse warns when pages exceed 1,500 DOM nodes (HTML elements). A typical WooCommerce mega menu with 200-300 categories can create 3,000-5,000+ DOM elements, significantly hurting your Core Web Vitals scores.
Menu Optimizer’s lazy loading technique loads only the top-level menu items initially (usually 50-100 elements), keeping your initial DOM size well under the 1,500-node threshold. Submenus load on-demand when users interact with the menu, maintaining excellent Lighthouse scores while preserving full functionality.
-
Yes! Menu Optimizer supports both horizontal and vertical menu layouts:
- Horizontal – Perfect for top navigation bars and header menus
- Vertical – Ideal for sidebar navigation and side menus
Simply select your preferred layout in the admin settings before generating your menu files. Each menu can have its own layout configuration.
使用者評論
這個外掛目前沒有任何使用者評論。
參與者及開發者
變更記錄
1.0
- Initial release
- Static menu file generation for improved performance
- Lazy loading support to keep DOM size under 1,500 nodes
- Max Mega Menu compatibility with full grid layout support
- Multiple menu support on same page
- Horizontal and vertical layout options
- Translation ready with included POT file
- CDN compatible
- Works seamlessly with WP Rocket, W3 Total Cache, and other caching plugins