Releases: yoshidaman99/mega-menu-ajax
Releases · yoshidaman99/mega-menu-ajax
Release list
v1.0.37
v1.0.35
Changes
- Fix render-blocking CSS - Switched frontend.css preload strategy from
rel="preload"tomedia="print" onloadpattern for reliable non-blocking behavior across all CSS concatenation plugins - Fix unsupported preload type warnings - Removed
typeattribute from all font preload<link>tags (Font_Auto_Detect, Font_Preload, Early_Hints) to prevent Lighthouse warnings when CDN Content-Type headers don't match - Add defensive filters - Added
strip_preload_type_hintsandstrip_preload_type_attrfilters at priority 999 to striptypefrom any preload tags site-wide, preventing future regressions from other plugins
v1.0.25 - Simplified LCP Preload
Fixes
- Fixed 403 error - Removed performance-beacon.js that was causing 403 errors due to nonce authentication issues with
navigator.sendBeacon()
Changes
Simplified LCP Optimization
- Removed complex auto-detection (JS beacon, REST API, output buffering)
- Now uses manual entry - user pastes LCP image URL in settings
- Outputs single
<link rel="preload" as="image">tag if URL is set - Zero overhead when not configured
Files Removed
src/Performance/Module.phpsrc/Performance/LCP_Optimizer.phpsrc/Performance/CSS_Optimizer.phpsrc/Performance/CSS_Extractor.phpsrc/Performance/Beacon_Handler.phpassets/js/performance-beacon.js
Files Added
src/Performance/LCP_Preload.php(~30 lines)
Admin UI
- Reverted to single-page settings (removed tabs)
- Added LCP Preload Image field in Global Settings
How to Use LCP Preload
- Run PageSpeed Insights on your page
- Find the LCP element and copy the image URL
- Go to Mega Menu > Settings
- Paste the URL in LCP Preload Image field
- Save settings
The plugin will output <link rel="preload" as="image" href="your-image.jpg"> in the <head>.
Size Comparison
| Version | Size |
|---|---|
| v1.0.24 | 42.74 KB |
| v1.0.25 | 31.39 KB |
| Reduction | 26% |
Installation
Download the ZIP below and install via WordPress Admin > Plugins > Add New > Upload Plugin.
v1.0.24 - Site-wide Performance Optimization Modules
New Features
LCP Optimizer Module
- Auto-detects LCP elements via PerformanceObserver API
- Adds
fetchpriority="high"to LCP images - Preloads Elementor background images
- Disables lazy-loading for LCP content
- Caches LCP data per URL for subsequent visits
CSS Optimizer Module
- Extracts critical CSS for above-fold content
- Inlines critical CSS in
<head> - Loads remaining CSS asynchronously via
media="print"trick - Caches critical CSS per URL
Admin UI Improvements
- New tabbed settings interface (Menu Settings / Performance)
- Toggle modules on/off individually
- Configurable cache duration (1-30 days)
- Exclude selectors and CSS handles
- Clear cache button
Files Added
src/Performance/Module.phpsrc/Performance/LCP_Optimizer.phpsrc/Performance/CSS_Optimizer.phpsrc/Performance/CSS_Extractor.phpsrc/Performance/Beacon_Handler.phpassets/js/performance-beacon.js
Installation
Download the ZIP below and install via WordPress Admin > Plugins > Add New > Upload Plugin.
v1.0.23 - Critical inline JS for LCP optimization
Changes
LCP Optimization for Menu-as-LCP-Element
Added critical inline JavaScript (~400 bytes) in <head> for immediate menu interactivity:
- Mobile toggle works instantly (no jQuery dependency)
- Submenu interactions work immediately on mobile
- Menu functional before main JS loads
Technical Details
| Feature | Before | After |
|---|---|---|
| Menu toggle | Wait for jQuery | Immediate (inline JS) |
| Mobile submenu | Wait for jQuery | Immediate (inline JS) |
| JS dependency | jQuery required | Progressive enhancement |
LCP Recommendations
If your menu is the LCP element, also ensure:
- ✅ Disable "Lazy load entire menu" for header menus
- ✅ Menu HTML is server-rendered
- ✅ CSS is inline on mobile (already implemented in v1.0.22)
What This Fixes
- Menu is immediately interactive on page load
- No waiting for jQuery or external JS to load
- Progressive enhancement - full features load async
v1.0.22 - Zero render blocking CSS for mobile
Changes
Mobile Optimization: Zero Render Blocking CSS
Mobile:
- No external CSS file - Full CSS inlined in
<head> - Zero render blocking requests from plugin
- Zero HTTP requests for CSS
- Instant menu rendering
Desktop:
- External CSS with
fetchpriority="high"(v1.0.19 style) - Preconnect for AJAX endpoint
Technical Details
| Feature | Desktop | Mobile |
|---|---|---|
| CSS Loading | External + fetchpriority="high" | Inline in <head> |
| HTTP Requests | 1 CSS file | 0 CSS files |
| Render Blocking | Yes (fast broadband) | Zero |
| Preconnect | Yes | Yes |
Fixes
- Removed duplicate preload hint that was causing CSS delay
- Full CSS inlined (not just critical) for mobile
- Eliminated CSS file from critical path entirely on mobile
v1.0.21 - Device-based CSS loading
Changes
Device-Based CSS Loading Strategy
Desktop (v1.0.19 style):
fetchpriority="high"for CSS (render-blocking, fast on broadband)- No preload/preconnect overhead
- No inline CSS bloat
Mobile (optimized):
- Async CSS loading via
rel="preload" onload="this.rel='stylesheet'" - Critical CSS inlined in
<head>for instant rendering - Preload hint for CSS discovery
- Preconnect for AJAX endpoint
Technical Details
| Feature | Desktop | Mobile |
|---|---|---|
| CSS fetchpriority | high |
async preload |
| Preload hint | ❌ | ✅ |
| Preconnect | ❌ | ✅ |
| Critical inline CSS | ❌ | ✅ |
Performance Impact
- Mobile: CSS no longer render-blocking (~300ms saved)
- Desktop: Clean v1.0.19 behavior preserved
v1.0.20 - Critical CSS optimization for mobile
Changes
Mobile Performance Improvements
- Preload CSS hint: Adds
<link rel="preload">for frontend.css in<head>for early discovery - Preconnect for AJAX: Establishes early connection to admin-ajax.php endpoint
- Critical CSS inline: Outputs essential menu styles inline in
<head>for instant rendering
Other
- Added warning text for "Lazy load entire menu" option about LCP impact
Performance Impact
- Critical menu styles render immediately from inline CSS
- External CSS discovered earlier via preload hint
- AJAX requests benefit from preconnected origin
v1.0.19 - fetchpriority=high for critical resources
Changes
- Add
fetchpriority="high"to frontend CSS for faster rendering - Add
async fetchpriority="high"to frontend JS - Add
fetchPriority = 'high'to CSS/JS preload links for discoverable resource hints
Performance Impact
Critical resources are now discovered earlier in the initial document, improving Core Web Vitals and perceived load time.
v1.0.18
What's New
Background Preloading
- Network idle detection - Automatically preloads pages when the browser is idle
- Low priority loading - Uses fetchPriority=low to avoid interfering with user requests
- Smart deduplication - Skips URLs that already have preload attributes
- Top-level menu items only - Preloads main navigation links
Admin Settings (per menu location)
- Enable/disable background preloading
- Concurrent preload limit (1-10)
- Idle delay configuration (500-10000ms)
- Priority modes: Conservative / Balanced / Aggressive
- Option to preload only on fast connections
- Option to require network idle state
Full Changelog: v1.0.17...v1.0.18