Display how many elements that needed recaclualte style before FCP/LCP (

#3913)
sitespeedio · Jul 22, 2023 · d0f4d77 · d0f4d77
1 parent ef7bf7f
commit d0f4d77
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/lib/plugins/browsertime/default/metricsPageSummary.js b/lib/plugins/browsertime/default/metricsPageSummary.js
@@ -35,6 +35,7 @@ export const metricsPageSummary = [
   'statistics.pageinfo.domElements',
   'statistics.extras.*',
   'statistics.googleWebVitals.*',
+  'statistics.renderBlocking.*',
   'statistics.android.batteryTemperature.*',
   'markedAsFailure',
   'statistics.browser.cpuBenchmark'

diff --git a/lib/plugins/browsertime/index.js b/lib/plugins/browsertime/index.js
@@ -352,6 +352,11 @@ export default class BrowsertimePlugin extends SitespeedioPlugin {
                 run.fullyLoaded = result[resultIndex].fullyLoaded[runIndex];
               }
 
+              if (result[resultIndex].renderBlocking) {
+                run.renderBlocking =
+                  result[resultIndex].renderBlocking[runIndex];
+              }
+
               if (result[resultIndex].info.title) {
                 run.title = result[resultIndex].info.title;
               }

diff --git a/lib/plugins/html/templates/url/metrics/index.pug b/lib/plugins/html/templates/url/metrics/index.pug
@@ -9,6 +9,7 @@ if browsertime
   - const extras = medianRun ? pageInfo.data.browsertime.pageSummary.extras[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.extras 
   - const custom = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1].custom : pageInfo.data.browsertime.run.custom
   - const cdp = medianRun ? pageInfo.data.browsertime.pageSummary.cdp[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.cdp
+  - const renderBlocking = medianRun ? pageInfo.data.browsertime.pageSummary.renderBlocking[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.renderBlocking
 
   small 
     | | 
@@ -182,6 +183,17 @@ if browsertime
               td
                 a(href=baseHelpURL + 'totalBlockingTime') Total Blocking Time (TBT)
               td.number #{h.time.ms(cpu.longTasks.totalBlockingTime)}
+
+      if renderBlocking && renderBlocking.recalculateStyle.beforeFCP
+        table
+          tr
+            th(colspan='2') First Contentful Paint info
+          tr 
+            td Elements that needed recalculate style before FCP
+                td #{renderBlocking.recalculateStyle.beforeFCP.elements}    
+          tr
+            td Time spent in recalculate style before FCP
+                td #{h.time.ms(renderBlocking.recalculateStyle.beforeFCP.durationInMillis)}  
       table
         tr
           th(colspan='2') Extra timings

diff --git a/lib/plugins/html/templates/url/metrics/lcp.pug b/lib/plugins/html/templates/url/metrics/lcp.pug
@@ -21,6 +21,17 @@ if timings.largestContentfulPaint
               td 
                 b Render time 
               td #{h.time.ms(timings.largestContentfulPaint.renderTime)}
+
+            if renderBlocking && renderBlocking.recalculateStyle.beforeLCP
+              tr 
+                td
+                  b Elements that needed recalculate style before LCP
+                td #{renderBlocking.recalculateStyle.beforeLCP.elements}    
+              tr
+                td 
+                  b Time spent in recalculate style before LCP
+                td #{h.time.ms(renderBlocking.recalculateStyle.beforeLCP.durationInMillis)}  
+
             if timings.largestContentfulPaint.id !== ''
               tr 
                 td