feat: defer page timing caching until load event and add global metrics

Author: dermatz

src/view/frontend/web/js/inspector.js

@@ -96,7 +96,14 @@ function _registerMageforgeInspector() {
             this.createHighlightBox();
             this.createInfoBadge();
             this.initWebVitalsTracking();
-            this.cachePageTimings();
+
+            // Defer page timings until the load event so that loadEventEnd and
+            // domContentLoadedEventEnd are actually populated by the browser.
+            if (document.readyState === 'complete') {
+                setTimeout(() => this.cachePageTimings(), 0);
+            } else {
+                window.addEventListener('load', () => setTimeout(() => this.cachePageTimings(), 0), { once: true });
+            }
 
             // Listen for inspector-state sync from toolbar
             this._inspectorStateHandler = (e) => {

src/view/frontend/web/js/inspector/performance.js

@@ -114,6 +114,37 @@ export const performanceMethods = {
         if (!hasMetrics) {
             this.renderNoBrowserMetrics(container);
         }
+
+        this.renderPageTimingsSection(container);
+    },
+
+    /**
+     * Render page-level timing metrics (not element-specific)
+     *
+     * @param {HTMLElement} container
+     */
+    renderPageTimingsSection(container) {
+        // Re-read if not yet cached or still 0 (init ran before load event)
+        if (!this.pageTimings || this.pageTimings.domContentLoaded === 0) {
+            this.cachePageTimings();
+        }
+
+        if (!this.pageTimings || this.pageTimings.domContentLoaded === 0) {
+            return;
+        }
+
+        const divider = document.createElement('div');
+        divider.style.cssText = 'border-top: 1px solid rgba(255,255,255,0.1); margin: 12px 0 8px; padding-top: 8px; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;';
+        divider.textContent = 'Global Page-Metrics';
+        container.appendChild(divider);
+
+        const dclColor = this.pageTimings.domContentLoaded < 1500 ? '#34d399' : (this.pageTimings.domContentLoaded < 3000 ? '#f59e0b' : '#ef4444');
+        container.appendChild(this.createInfoSection('DOM Content Loaded', `${this.pageTimings.domContentLoaded} ms`, dclColor));
+
+        if (this.pageTimings.loadComplete > 0) {
+            const loadColor = this.pageTimings.loadComplete < 2500 ? '#34d399' : (this.pageTimings.loadComplete < 5000 ? '#f59e0b' : '#ef4444');
+            container.appendChild(this.createInfoSection('Page Load Complete', `${this.pageTimings.loadComplete} ms`, loadColor));
+        }
     },
 
     renderRenderTimeMetric(container, element) {

src/view/frontend/web/js/inspector/vitals.js

@@ -97,7 +97,7 @@ export const vitalsMethods = {
         if (navEntries && navEntries.length > 0) {
             const nav = navEntries[0];
             this.pageTimings = {
-                domContentLoaded: Math.round(nav.domContentLoadedEventEnd - nav.domContentLoadedEventStart),
+                domContentLoaded: Math.round(nav.domContentLoadedEventEnd - nav.startTime),
                 loadComplete: Math.round(nav.loadEventEnd - nav.fetchStart)
             };
         } else if (performance.timing) {
@@ -125,7 +125,7 @@ export const vitalsMethods = {
         this.webVitals.cls.forEach(shift => {
             if (shift.sources) {
                 shift.sources.forEach(source => {
-                    if (source.node === element || element.contains(source.node) || source.node.contains(element)) {
+                    if (source.node && (source.node === element || element.contains(source.node) || source.node.contains(element))) {
                         totalCLS += shift.value;
                     }
                 });
@@ -224,96 +224,6 @@ export const vitalsMethods = {
         return result;
     },
 
-    /**
-     * Calculate DOM complexity metrics
-     *
-     * @param {HTMLElement} element - The element to analyze
-     * @return {{childCount: number, depth: number, totalNodes: number}}
-     */
-    calculateDOMComplexity(element) {
-        if (!element || !(element instanceof HTMLElement)) {
-            return { childCount: 0, depth: 0, totalNodes: 0 };
-        }
-
-        const childCount = element.childElementCount;
-        const totalNodes = element.querySelectorAll('*').length;
-        const depth = this.getMaxDepth(element);
-
-        return { childCount, depth, totalNodes };
-    },
-
-    /**
-     * Get maximum depth of element tree
-     *
-     * @param {HTMLElement} element
-     * @param {number} currentDepth
-     * @return {number}
-     */
-    getMaxDepth(element, currentDepth = 0) {
-        if (!element.children.length) {
-            return currentDepth;
-        }
-
-        let maxChildDepth = currentDepth;
-        for (const child of element.children) {
-            const depth = this.getMaxDepth(child, currentDepth + 1);
-            maxChildDepth = Math.max(maxChildDepth, depth);
-        }
-
-        return maxChildDepth;
-    },
-
-    /**
-     * Get complexity rating based on total nodes
-     *
-     * @param {{childCount: number, depth: number, totalNodes: number}} complexity
-     * @return {string} 'low' | 'medium' | 'high'
-     */
-    getComplexityRating(complexity) {
-        if (complexity.totalNodes < this.PERF_DOM_COMPLEXITY_LOW) {
-            return 'low';
-        } else if (complexity.totalNodes < this.PERF_DOM_COMPLEXITY_HIGH) {
-            return 'medium';
-        } else {
-            return 'high';
-        }
-    },
-
-    /**
-     * Get Web Vitals information for specific element
-     *
-     * @param {HTMLElement} element
-     * @return {{isLCP: boolean, contributesCLS: number, isInteractive: boolean}}
-     */
-    getWebVitalsForElement(element) {
-        const result = {
-            isLCP: false,
-            contributesCLS: 0,
-            isInteractive: false
-        };
-
-        // Check if element is LCP candidate
-        if (this.webVitals.lcp && this.webVitals.lcp.element) {
-            result.isLCP = this.webVitals.lcp.element === element ||
-                           element.contains(this.webVitals.lcp.element);
-        }
-
-        // Calculate CLS contribution
-        if (this.webVitals.cls && this.webVitals.cls.length > 0) {
-            this.webVitals.cls.forEach(shift => {
-                if (shift.sources) {
-                    shift.sources.forEach(source => {
-                        if (source.node === element || element.contains(source.node)) {
-                            result.contributesCLS += shift.value;
-                        }
-                    });
-                }
-            });
-        }
-
-        return result;
-    },
-
     /**
      * Get color for render time based on thresholds
      *