sitespeed.io 33.2.0 → 33.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG - sitespeed.io  (we use [semantic versioning](https://semver.org))
 
+## 33.3.0 - 2024-03-16
+### Added
+* Show Long Animation frames (enabled in Chrome 123) [#4180](https://github.com/sitespeedio/sitespeed.io/pull/4108). Using the timeline/profiling is still best doing your tests but long animation frames can help you if you do not have it turned on or familiar with thart data in RUM. Please create an issue if you have any ideas on how we shoudl display the metrics/information!
+* Show CPU power consumption (when using Firefox) [#4104](https://github.com/sitespeedio/sitespeed.io/pull/4104). You can try it with: `sitespeed.io -b firefox -n 1 --firefox.geckoProfiler --firefox.geckoProfilerParams.features "power" --firefox.powerConsumption https://www.sitespeed.io/`
+
+### Fixed
+*  Updated to [Browsertime 21.5.3](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#2153---2024-03-12) containing various bug fixes.
+
 ## 33.2.0 - 2024-03-12
 ### Added
 * Updated to Browsertime 21.5.0 in [#4103](https://github.com/sitespeedio/sitespeed.io/pull/4103) also included changes released in 21.4.0.

package/README.md

@@ -209,7 +209,7 @@ We welcome contributions from the community! Whether you're fixing a bug, adding
 5. **Test**: Run tests to ensure everything works as expected.
 6. **Submit a Pull Request**: Push your changes to your fork and submit a pull request to the main repository.
 
-Before contributing, please read our [CONTRIBUTING.md](.gitub/CONTRIBUTING.md) for more detailed information on how to contribute.
+Before contributing, please read our [CONTRIBUTING.md](.github/CONTRIBUTING.md) for more detailed information on how to contribute.
 
 # Reporting Issues
 Found a bug or have a feature request? Please use the [GitHub Issues](https://github.com/sitespeedio/sitespeed.io/issues) to report them. Be sure to check existing issues to avoid duplicates.

package/lib/plugins/browsertime/index.js

@@ -356,6 +356,11 @@ export default class BrowsertimePlugin extends SitespeedioPlugin {
                 run.cpu = result[resultIndex].cpu[runIndex];
               }
 
+              if (result[resultIndex].powerConsumption) {
+                run.powerConsumption =
+                  result[resultIndex].powerConsumption[runIndex];
+              }
+
               if (result[resultIndex].memory) {
                 run.memory = result[resultIndex].memory[runIndex];
               }

package/lib/plugins/html/templates/url/iteration/index.pug

@@ -66,6 +66,11 @@ block content
               tr
                 td Memory
                 td #{h.size.format(memory)}
+            - cpuPower = get(d, 'browsertime.run.cpuConsumption')
+            if cpuConsumption
+              tr
+                td Firefox CPU power consumption 
+                td #{cpuConsumption} µWh
             - requests = get(d, 'pagexray.run.requests')
             if (requests)
               tr

package/lib/plugins/html/templates/url/metrics/index.pug

@@ -10,6 +10,7 @@ if browsertime
   - 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
+  - const loaf = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1].pageinfo.loaf : pageInfo.data.browsertime.run.pageinfo.loaf 
 
   small 
     | | 
@@ -27,6 +28,9 @@ if browsertime
     if timings.interactionToNextPaint
       a(href='#interactionToNextPaint') Interaction To Next Paint
       |  | 
+    if loaf
+      a(href='#longAnimationFrames') Long Aninimation Frames
+      |  | 
     if timings.elementTimings && Object.keys(timings.elementTimings).length > 0
       a(href='#elementTimings') Element Timings
       |  | 
@@ -271,6 +275,7 @@ if browsertime
   include ./firstInput.pug
   include ./layoutShift.pug
   include ./inp.pug
+  include ./loaf.pug
   include ./elementTimings.pug
   include ./serverTimings.pug
 

package/lib/plugins/html/templates/url/metrics/loaf.pug

@@ -0,0 +1,53 @@
+if loaf
+    a#longAnimationFrames
+    h3 Long Animation Frames
+    p Read more about the Long Animation Frames API here 
+        a(href='https://developer.chrome.com/docs/web-platform/long-animation-frames') here.  
+    p The top 10 longest animation frames entries
+    
+    each oneLoaf in loaf
+        table 
+            tr 
+                th Blocking duration 
+                th Work duration
+                th Render duration
+                th PreLayout Duration
+                th Style And Layout Duration
+            tr 
+                td #{h.time.ms(h.decimals(oneLoaf.blockingDuration))}
+                td #{h.time.ms(h.decimals(oneLoaf.workDuration))}
+                td #{h.time.ms(h.decimals(oneLoaf.renderDuration))}
+                td #{h.time.ms(h.decimals(oneLoaf.preLayoutDuration))}
+                td #{h.time.ms(h.decimals(oneLoaf.styleAndLayoutDuration))}
+
+            if oneLoaf.scripts.length > 0  
+                each theScript in oneLoaf.scripts 
+                    if theScript.sourceURL !== ''
+                        tr 
+                            td.url.assetsurl(colspan=5)
+                                 a(href=theScript.sourceURL)= theScript.sourceURL
+                    tr 
+                        td(colspan=5)
+                            if theScript.forcedStyleAndLayoutDuration !== 0
+                                p Forced Style And Layout Duration:  #{h.time.ms(h.decimals(theScript.forcedStyleAndLayoutDuration))}
+                            p 
+                                b Invoker: 
+                                | #{theScript.invoker}
+                                br
+                                b Invoker Type: 
+                                | #{theScript.invokerType}
+                                br
+                                if theScript.sourceFunctionName
+                                    b Source Function Name: 
+                                    | #{theScript.sourceFunctionName}
+                                    br
+                                if theScript.windowAttribution
+                                    b Window attribution: 
+                                    | #{theScript.windowAttribution}
+                                    br
+                                if theScript.sourceCharPosition
+                                    b Source char position: 
+                                    | #{theScript.sourceCharPosition}
+            else
+                tr 
+                    td(colspan=5) No availible script information.

package/lib/plugins/html/templates/url/summary/index.pug

@@ -96,6 +96,11 @@ block content
               tr
                 td Memory
                 td #{h.size.format(memory)}
+            - powerConsumption = get(d, 'browsertime.pageSummary.statistics.powerConsumption.median')
+            if powerConsumption 
+              tr
+                td Firefox CPU Power Consumption
+                td #{powerConsumption} µWh
             - requests = get(d, 'pagexray.pageSummary.requests')
             if requests
               tr
@@ -142,7 +147,6 @@ block content
                 tr
                   td Cumulative Layout Shift (CLS) [median]
                   td #{cls.toFixed(2)}
-            - tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
             if inp
                 tr
                   td Interaction To Next Paint (INP) [median]

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "sitespeed.io",
-  "version": "33.2.0",
+  "version": "33.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "sitespeed.io",
-      "version": "33.2.0",
+      "version": "33.3.0",
       "license": "MIT",
       "dependencies": {
         "@google-cloud/storage": "6.9.5",
@@ -15,7 +15,7 @@
         "@tgwf/co2": "0.14.2",
         "aws-sdk": "2.1327.0",
         "axe-core": "4.8.2",
-        "browsertime": "21.5.0",
+        "browsertime": "21.5.4",
         "cli-color": "2.0.3",
         "coach-core": "8.0.2",
         "concurrent-queue": "7.0.2",
@@ -1759,9 +1759,9 @@
       }
     },
     "node_modules/browsertime": {
-      "version": "21.5.0",
-      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-21.5.0.tgz",
-      "integrity": "sha512-9t10vVc9/WolALi4cXsTvQ0Y+SWf2j2I5SMUtWC/uFADKJAaZauEbO+EcZTqz6ezzNOxD1AoblxPO5uMbgWtug==",
+      "version": "21.5.4",
+      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-21.5.4.tgz",
+      "integrity": "sha512-lHM5qGWdGS9DiM4iofkih03dVLLARZwduaxYkFW8XTEk/j4GkijvzW5OO9oqFSiA6Xyxn4fDiQcYaboNLvWNzA==",
       "dependencies": {
         "@cypress/xvfb": "1.2.4",
         "@devicefarmer/adbkit": "3.2.6",
@@ -10601,9 +10601,9 @@
       }
     },
     "browsertime": {
-      "version": "21.5.0",
-      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-21.5.0.tgz",
-      "integrity": "sha512-9t10vVc9/WolALi4cXsTvQ0Y+SWf2j2I5SMUtWC/uFADKJAaZauEbO+EcZTqz6ezzNOxD1AoblxPO5uMbgWtug==",
+      "version": "21.5.4",
+      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-21.5.4.tgz",
+      "integrity": "sha512-lHM5qGWdGS9DiM4iofkih03dVLLARZwduaxYkFW8XTEk/j4GkijvzW5OO9oqFSiA6Xyxn4fDiQcYaboNLvWNzA==",
       "requires": {
         "@cypress/xvfb": "1.2.4",
         "@devicefarmer/adbkit": "3.2.6",

package/package.json

@@ -5,7 +5,7 @@
     "sitespeed.io": "./bin/sitespeed.js",
     "sitespeed.io-wpr": "./bin/browsertimeWebPageReplay.js"
   },
-  "version": "33.2.0",
+  "version": "33.3.0",
   "description": "sitespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.",
   "keywords": [
     "performance",
@@ -85,7 +85,7 @@
     "@tgwf/co2": "0.14.2",
     "aws-sdk": "2.1327.0",
     "axe-core": "4.8.2",
-    "browsertime": "21.5.0",
+    "browsertime": "21.5.4",
     "coach-core": "8.0.2",
     "cli-color": "2.0.3",
     "concurrent-queue": "7.0.2",