phantomas 2.9.0 → 2.11.0

package/bin/program.js

@@ -131,6 +131,7 @@ function getProgram() {
 
     // Output and reporting
     .option("--analyze-css", "emit in-depth CSS metrics")
+    .option("--analyze-images", "emit in-depth image metrics")
     .option("--colors", "forces ANSI colors even when output is piped")
     .option(
       "--film-strip",

package/extensions/devices/devices.js

@@ -5,8 +5,8 @@
 
 module.exports = function (phantomas) {
   const puppeteer = require("puppeteer"),
-    devices = puppeteer.devices,
-    // @see https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js
+    devices = puppeteer.KnownDevices,
+    // @see https://github.com/puppeteer/puppeteer/blob/main/packages/puppeteer-core/src/common/Device.ts
     availableDevices = {
       phone: "Galaxy S5", // 360x640
       "phone-landscape": "Galaxy S5 landscape", // 640x360
@@ -14,7 +14,7 @@ module.exports = function (phantomas) {
       "tablet-landscape": "Kindle Fire HDX landscape", // 1280x800
     };
 
-  var device;
+  let device;
 
   // check if --phone or --tablet option was passed
   Object.keys(availableDevices).forEach(function (item) {

package/extensions/postLoadDelay/postLoadDelay.js

@@ -3,6 +3,8 @@
  */
 "use strict";
 
+const { setTimeout } = require("timers/promises");
+
 module.exports = function (phantomas) {
   // e.g. --post-load-delay 5
   var delay = parseInt(phantomas.getParam("post-load-delay"), 10);
@@ -14,9 +16,9 @@ module.exports = function (phantomas) {
   // https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#framewaitforselectororfunctionortimeout-options-args
   phantomas.log("Will wait %d second(s) after load", delay);
 
-  phantomas.on("beforeClose", (page) => {
+  phantomas.on("beforeClose", async () => {
     phantomas.log("Sleeping for %d seconds", delay);
 
-    return page.waitForTimeout(delay * 1000);
+    return setTimeout(delay * 1000);
   });
 };

package/lib/browser.js

@@ -221,13 +221,17 @@ Browser.prototype.init = async (phantomasOptions) => {
         const resp = await this.cdp.send("Network.getResponseBody", {
           requestId: data.requestId,
         });
+
+        // If the data is binary, decode from base64 and respond with a buffer
+        body = resp.base64Encoded
+          ? Buffer.from(resp.body, "base64")
+          : resp.body;
+
         networkDebug(
           "Content for #%s received (%d bytes)",
           data.requestId,
-          resp.body.length
+          body.length
         );
-
-        body = resp.body;
       } catch (err) {
         // In case the resource was dumped after a redirect
         // https://github.com/puppeteer/puppeteer/issues/2258

package/lib/metadata/metadata.json

@@ -243,6 +243,19 @@
         "cssInlineStyles"
       ]
     },
+    "analyzeImages": {
+      "file": "/modules/analyzeImages/analyzeImages.js",
+      "desc": "Adds Responsive Images metrics using analyze-images npm module.\nRun phantomas with --analyze-images option to use this module",
+      "events": [],
+      "metrics": [
+        "imagesWithoutDimensions",
+        "imagesNotOptimized",
+        "imagesScaledDown",
+        "imagesOldFormat",
+        "imagesExcessiveDensity",
+        "imagesWithIncorrectSizesParam"
+      ]
+    },
     "assetsTypes": {
       "file": "/modules/assetsTypes/assetsTypes.js",
       "desc": "Analyzes number of requests and sizes of different types of assets",
@@ -361,8 +374,6 @@
         "DOMelementMaxDepth",
         "nodesWithInlineCSS",
         "iframesCount",
-        "imagesScaledDown",
-        "imagesWithoutDimensions",
         "DOMidDuplicated"
       ]
     },
@@ -977,6 +988,48 @@
       "module": "analyzeCss",
       "testsCovered": true
     },
+    "imagesWithoutDimensions": {
+      "desc": "number of <img> nodes without both width and height attribute",
+      "offenders": true,
+      "unit": "number",
+      "module": "analyzeImages",
+      "testsCovered": true
+    },
+    "imagesNotOptimized": {
+      "desc": "number of loaded images that could be lighter it optimized",
+      "offenders": true,
+      "unit": "number",
+      "module": "analyzeImages",
+      "testsCovered": true
+    },
+    "imagesScaledDown": {
+      "desc": "number of loaded images scaled down when displayed",
+      "offenders": true,
+      "unit": "number",
+      "module": "analyzeImages",
+      "testsCovered": true
+    },
+    "imagesOldFormat": {
+      "desc": "number of loaded images that could benefit from new generation formats (WebP or AVIF)",
+      "offenders": true,
+      "unit": "number",
+      "module": "analyzeImages",
+      "testsCovered": true
+    },
+    "imagesExcessiveDensity": {
+      "desc": "number of images that could be served smaller as the human eye can hardly see the difference",
+      "offenders": true,
+      "unit": "number",
+      "module": "analyzeImages",
+      "testsCovered": false
+    },
+    "imagesWithIncorrectSizesParam": {
+      "desc": "number of responsive images with an improperly set sizes parameter",
+      "offenders": true,
+      "unit": "number",
+      "module": "analyzeImages",
+      "testsCovered": true
+    },
     "htmlCount": {
       "desc": "number of HTML responses",
       "offenders": true,
@@ -1304,20 +1357,6 @@
       "module": "domComplexity",
       "testsCovered": true
     },
-    "imagesScaledDown": {
-      "desc": "number of <img> nodes that have images scaled down in HTML",
-      "offenders": true,
-      "unit": "number",
-      "module": "domComplexity",
-      "testsCovered": true
-    },
-    "imagesWithoutDimensions": {
-      "desc": "number of <img> nodes without both width and height attribute",
-      "offenders": true,
-      "unit": "number",
-      "module": "domComplexity",
-      "testsCovered": true
-    },
     "DOMidDuplicated": {
       "desc": "number of duplicated IDs found in DOM",
       "offenders": true,
@@ -1876,8 +1915,8 @@
       "testsCovered": false
     }
   },
-  "metricsCount": 187,
-  "modulesCount": 36,
+  "metricsCount": 191,
+  "modulesCount": 37,
   "extensionsCount": 14,
-  "version": "2.4.0"
+  "version": "2.9.0"
 }

package/modules/analyzeImages/analyzeImages.js

@@ -0,0 +1,154 @@
+/**
+ * Adds Responsive Images metrics using analyze-images npm module.
+ *
+ * Run phantomas with --analyze-images option to use this module
+ */
+"use strict";
+
+module.exports = function (phantomas) {
+  phantomas.setMetric("imagesWithoutDimensions"); // @desc number of <img> nodes without both width and height attribute @offenders
+  phantomas.setMetric("imagesNotOptimized"); // @desc number of loaded images that could be lighter it optimized @offenders
+  phantomas.setMetric("imagesScaledDown"); // @desc number of loaded images scaled down when displayed @offenders
+  phantomas.setMetric("imagesOldFormat"); // @desc number of loaded images that could benefit from new generation formats (WebP or AVIF) @offenders
+  phantomas.setMetric("imagesExcessiveDensity"); // @desc number of images that could be served smaller as the human eye can hardly see the difference @offenders
+  phantomas.setMetric("imagesWithIncorrectSizesParam"); // @desc number of responsive images with an improperly set sizes parameter @offenders
+
+  if (phantomas.getParam("analyze-images") !== true) {
+    phantomas.log(
+      "To enable images in-depth metrics please run phantomas with --analyze-images option"
+    );
+    return;
+  }
+
+  const analyzer = require("analyze-image");
+  phantomas.log("Using version %s", analyzer.version);
+
+  async function analyzeImage(body, context) {
+    phantomas.log("Starting analyze-image on %j", context);
+    const results = await analyzer(body, context, {});
+    phantomas.log("Response from analyze-image: %j", results);
+
+    for (const offenderName in results.offenders) {
+      phantomas.log(
+        "Offender %s found: %j",
+        offenderName,
+        results.offenders[offenderName]
+      );
+
+      const newOffenderName = offenderName.replace("image", "images");
+      phantomas.incrMetric(newOffenderName);
+      phantomas.addOffender(newOffenderName, {
+        url: context.url || shortenDataUri(context.inline),
+        ...results.offenders[offenderName],
+      });
+    }
+  }
+
+  // prepare a list of images (both external and inline)
+  const images = [];
+
+  phantomas.on("recv", async (entry, res) => {
+    if (entry.isImage) {
+      images.push({
+        contentPromise: res.getContent, // defer getting the response content
+        url: entry.url,
+        htmlTags: [],
+      });
+    }
+  });
+
+  phantomas.on("base64recv", async (entry) => {
+    if (entry.isImage) {
+      images.push({
+        inline: entry.url,
+        htmlTags: [],
+      });
+    }
+  });
+
+  phantomas.on("imgtag", (context) => {
+    phantomas.log("Image tag found: %j", context);
+
+    // If we previously found a network/inline request that matches the currentSrc, attach tag to it.
+    const correspondingResp = images.find(
+      (resp) =>
+        resp.url === context.currentSrc || resp.inline === context.currentSrc
+    );
+    if (correspondingResp) {
+      phantomas.log(
+        "Attached to previously found network image %s",
+        correspondingResp.url || "[inline]"
+      );
+      correspondingResp.htmlTags.push(context);
+    } else {
+      phantomas.log("Can't attach to previously found network image");
+    }
+  });
+
+  // ok, now let's analyze the collected images
+  phantomas.on("beforeClose", () => {
+    const promises = [];
+
+    images.forEach((entry) => {
+      promises.push(
+        new Promise(async (resolve) => {
+          phantomas.log("Analyzing %s", entry.url || "inline image");
+          let imageBody;
+
+          if (entry.inline) {
+            imageBody = extractImageFromDataUri(entry.inline);
+          }
+
+          if (entry.contentPromise) {
+            imageBody = await entry.contentPromise();
+          }
+
+          if (imageBody && imageBody.length > 0) {
+            // If several img tags use the same source, then we only treat the largest one
+            // (because it's not a perf issue when an image is re-used on the page on a smaller size)
+            let largestTag;
+
+            entry.htmlTags.forEach((tag) => {
+              if (
+                !largestTag ||
+                tag.displayWidth * tag.displayHeight >
+                  largestTag.displayWidth * largestTag.displayHeight
+              ) {
+                largestTag = tag;
+              }
+            });
+
+            await analyzeImage(imageBody, {
+              url: entry.url,
+              inline: entry.inline,
+              ...largestTag,
+            });
+          }
+
+          resolve();
+        })
+      );
+    });
+
+    return Promise.all(promises);
+  });
+
+  function extractImageFromDataUri(str) {
+    const result = str.match(/^data:image\/[a-z+]*(?:;[a-z0-9]*)?,(.*)$/);
+    if (result) {
+      // Inline SVGs might be urlencoded
+      if (str.startsWith("data:image/svg+xml") && str.includes("%3Csvg")) {
+        return decodeURIComponent(result[1]);
+      }
+      return result[1];
+    }
+    return null;
+  }
+
+  function shortenDataUri(str) {
+    if (str.length > 100) {
+      return str.substring(0, 50) + " [...] " + str.substring(str.length - 50);
+    }
+    return str;
+  }
+};

package/modules/analyzeImages/scope.js

@@ -0,0 +1,60 @@
+(function analyzeImageScope(phantomas) {
+  window.addEventListener("load", function () {
+    phantomas.spyEnabled(false, "Checking images");
+    const images = document.querySelectorAll("img");
+    phantomas.spyEnabled(true);
+
+    images.forEach((node) => {
+      var imgWidth = node.hasAttribute("width")
+          ? parseInt(node.getAttribute("width"), 10)
+          : false,
+        imgHeight = node.hasAttribute("height")
+          ? parseInt(node.getAttribute("height"), 10)
+          : false;
+
+      // get dimensions from inline CSS (issue #399)
+      if (imgWidth === false || imgHeight === false) {
+        imgWidth = parseInt(node.style.width, 10) || false;
+        imgHeight = parseInt(node.style.height, 10) || false;
+      }
+
+      if (imgWidth === false || imgHeight === false) {
+        phantomas.incrMetric("imagesWithoutDimensions");
+        phantomas.addOffender("imagesWithoutDimensions", {
+          path: phantomas.getDOMPath(node, true /* dontGoUpTheDom */),
+          src: node.currentSrc,
+        });
+      }
+
+      const html =
+        node.parentNode.tagName === "PICTURE"
+          ? node.parentNode.outerHTML
+          : node.outerHTML;
+
+      // Check if the image or one of its parents is in display:none
+      // If it is the case, node.width and node.height values are not reliable.
+      // https://stackoverflow.com/a/53068496/4716391
+      const isVisible = !!node.offsetParent;
+      phantomas.log(
+        "analyzeImg: ignoring displayWidth and displayHeight because image is not visible"
+      );
+
+      if (node.currentSrc) {
+        phantomas.emit("imgtag", {
+          html: html,
+          displayWidth: isVisible ? node.width : undefined,
+          displayHeight: isVisible ? node.height : undefined,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          currentSrc: node.currentSrc,
+          dpr: window.devicePixelRatio,
+        });
+      } else {
+        phantomas.log(
+          "analyzeImg: image tag found without currentSrc: %s",
+          html
+        );
+      }
+    });
+  });
+})(window.__phantomas);

package/modules/domComplexity/domComplexity.js

@@ -21,35 +21,6 @@ module.exports = function (phantomas) {
 
   phantomas.setMetric("iframesCount"); // @desc number of iframe nodes @offenders
 
-  // images
-  // TODO: move to a separate module
-  phantomas.setMetric("imagesScaledDown"); // @desc number of <img> nodes that have images scaled down in HTML @offenders
-  phantomas.setMetric("imagesWithoutDimensions"); // @desc number of <img> nodes without both width and height attribute @offenders
-
-  // keep the track of SVG graphics (#479)
-  var svgResources = [];
-  phantomas.on("recv", (entry) => {
-    if (entry.isSVG) {
-      svgResources.push(entry.url);
-      phantomas.log(
-        "imagesScaledDown: will ignore <%s> [%s]",
-        entry.url,
-        entry.contentType
-      );
-    }
-  });
-
-  phantomas.on("imagesScaledDown", (image) => {
-    if (svgResources.indexOf(image.url) === -1) {
-      phantomas.log("Scaled down image: %j", image);
-
-      phantomas.incrMetric("imagesScaledDown");
-      phantomas.addOffender("imagesScaledDown", image);
-    } else {
-      phantomas.log("imagesScaledDown: ignored <%s> (is SVG)", image.url);
-    }
-  });
-
   // duplicated ID (issue #392)
   phantomas.setMetric("DOMidDuplicated"); // @desc number of duplicated IDs found in DOM
 

package/modules/domComplexity/scope.js

@@ -75,52 +75,6 @@
               return false;
             }
 
-            // images
-            if (node.nodeName === "IMG") {
-              var imgWidth = node.hasAttribute("width")
-                  ? parseInt(node.getAttribute("width"), 10)
-                  : false,
-                imgHeight = node.hasAttribute("height")
-                  ? parseInt(node.getAttribute("height"), 10)
-                  : false;
-
-              // get dimensions from inline CSS (issue #399)
-              if (imgWidth === false || imgHeight === false) {
-                imgWidth = parseInt(node.style.width, 10) || false;
-                imgHeight = parseInt(node.style.height, 10) || false;
-              }
-
-              if (imgWidth === false || imgHeight === false) {
-                phantomas.incrMetric("imagesWithoutDimensions");
-                phantomas.addOffender(
-                  "imagesWithoutDimensions",
-                  "%s <%s>",
-                  path,
-                  node.src
-                );
-              }
-
-              if (
-                node.naturalHeight &&
-                node.naturalWidth &&
-                imgHeight &&
-                imgWidth
-              ) {
-                if (
-                  node.naturalHeight > imgHeight ||
-                  node.naturalWidth > imgWidth
-                ) {
-                  phantomas.emit("imagesScaledDown", {
-                    url: node.src,
-                    naturalWidth: node.naturalWidth,
-                    naturalHeight: node.naturalHeight,
-                    imgWidth,
-                    imgHeight,
-                  });
-                }
-              }
-            }
-
             break;
 
           case Node.TEXT_NODE:

package/modules/lazyLoadableImages/scope.js

@@ -12,6 +12,7 @@
       len = images.length,
       offset,
       path,
+      native,
       processedImages = {},
       src,
       viewportHeight = window.innerHeight;
@@ -30,6 +31,9 @@
       // @see https://stackoverflow.com/questions/35586728/detect-used-srcset-or-picture-tag-source-with-javascript
       src = images[i].currentSrc;
 
+      // Chrome headless loads images with native lazyloading, therefore we need to filter by ourself.
+      native = images[i].loading === "lazy";
+
       // ignore base64-encoded images
       if (src === null || src === "" || /^data:/.test(src)) {
         continue;
@@ -42,6 +46,7 @@
         processedImages[src] = {
           offset: offset,
           path: path,
+          native: native,
         };
       }
 
@@ -50,6 +55,7 @@
         processedImages[src] = {
           offset: offset,
           path: path,
+          native: native,
         };
       }
     }
@@ -62,7 +68,7 @@
     Object.keys(processedImages).forEach((src) => {
       var img = processedImages[src];
 
-      if (img.offset > viewportHeight) {
+      if (img.offset > viewportHeight && !img.native) {
         phantomas.log(
           "lazyLoadableImages: <%s> image (%s) is below the fold (at %dpx)",
           src,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phantomas",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "author": "macbre <maciej.brencz@gmail.com> (http://macbre.net)",
   "description": "Headless Chromium-based web performance metrics collector and monitoring tool",
   "main": "./lib/index.js",
@@ -27,13 +27,14 @@
     "node": ">=16.0"
   },
   "dependencies": {
-    "analyze-css": "^2.0.0",
+    "analyze-css": "^2.1.89",
+    "analyze-image": "^1.0.0",
     "commander": "^9.0.0",
     "debug": "^4.1.1",
     "decamelize": "^5.0.0",
     "fast-stats": "0.0.6",
     "js-yaml": "^4.0.0",
-    "puppeteer": "^20.9.0"
+    "puppeteer": "^22.4.1"
   },
   "devDependencies": {
     "@jest/globals": "^28.0.0",