Today, I want to share a powerful development tool I’ve been working on – a real-time performance monitor for WordPress sites. This tool helps track loading times, resource usage, and Core Web Vitals right in your browser.

What Does It Do?

The performance monitor provides real-time insights into:

  1. Basic Metrics:
    • File Size
    • DOM Load Time
    • Page Load Time
  2. Core Web Vitals:
    • Largest Contentful Paint (LCP)
    • First Input Delay (FID)
    • Cumulative Layout Shift (CLS)
  3. Resource Tracking:
    • Detailed breakdown by type (JS, CSS, Images, Fonts)
    • Size and loading time for each resource
    • Real-time event logging

How to Add It to Your Site

1. Setup Required Files

First, create a new file called terminal-monitor.js in your theme’s js directory. You’ll also need GSAP for animations, so make sure to include it in your dependencies.

Add to your functions.php:

phpCopyfunction enqueue_performance_monitor() {
    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js', [], null, true);
    wp_enqueue_script('terminal-monitor', get_template_directory_uri() . '/js/terminal-monitor.js', ['gsap'], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_performance_monitor');

2. Add the HTML Structure

Add this HTML just before your closing </body> tag:

htmlCopy<div id="page-load-info" class="terminal-window collapsed">
    <header>
        <div class="button green"></div>
        <div class="button yellow"></div>
        <div class="button red"></div>
        <div class="terminal-title">Performance Monitor</div>
    </header>
    <section class="terminal">
        <div id="load-stats" class="row">
            <div class="col-4">
                <p>File Size: <span id="file-size-value">Loading...</span></p>
            </div>
            <div class="col-4">
                <p>DOM Load Time: <span id="dom-load-time-value">Loading...</span></p>
            </div>
            <div class="col-4">
                <p>Page Load Time: <span id="page-load-time-value">Loading...</span></p>
            </div>
        </div>
        <div id="events-log">
            <ul id="events-list"></ul>
        </div>
    </section>
</div>
<div id="toggle-stats">
    <svg width="24" height="24">
        <line x1="5" y1="12" x2="19" y2="12" style="stroke:white;stroke-width:2" />
    </svg>
</div>

3. Add Basic Styling

Add this CSS to your stylesheet:

cssCopy.terminal-window {
    position: fixed;
    right: 0;
    bottom: 20px;
    width: 500px;
    background: rgba(30, 30, 30, 0.95);
    color: white;
    font-family: monospace;
    border-radius: 6px;
    z-index: 9999;
    transform: translateX(100%);
}

.terminal-window.collapsed {
    transform: translateX(0);
}

.terminal-window header {
    background: #383838;
    padding: 10px;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
}

.button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}

.button.green { background: #00ca56; }
.button.yellow { background: #e6c029; }
.button.red { background: #ff1616; }

.terminal {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
}

#toggle-stats {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: rgba(30, 30, 30, 0.95);
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 9999;
}

Current Functionality Analysis

The monitor is working well for:

  1. Real-time performance tracking
  2. Resource usage monitoring
  3. Core Web Vitals measurement
  4. Event logging

Areas for Improvement:

  1. Memory Usage:
    • Add memory consumption tracking
    • Monitor memory leaks
  2. Enhanced WordPress Integration:
    • Track admin-ajax.php calls
    • Monitor WP REST API performance
    • Plugin-specific resource tracking
  3. Visualization:
    • Add waterfall charts for loading sequence
    • Visual graphs for Core Web Vitals trends
    • Resource size visualization
  4. Export & Analysis:
    • Add ability to export performance logs
    • Compare performance across pages
    • Historical data tracking

Next Steps

I’m currently working on several improvements:

  1. Better Plugin Integration:
    • Tracking plugin-specific resource usage
    • Identifying performance bottlenecks
  2. Enhanced Metrics:
    • Server response time monitoring
    • TTFB (Time To First Byte) tracking
    • Resource caching analysis
  3. Developer Tools:
    • Debug mode with detailed logging
    • Performance budget warnings
    • Custom metric tracking

Would love to hear your thoughts and suggestions for improving this tool further!

Technical Notes

  • The tool uses the Performance API and PerformanceObserver
  • Core Web Vitals are measured using modern web APIs
  • All measurements are done client-side
  • Minimal impact on page performance
  • Works with any WordPress theme

Stay tuned for more updates and improvements!