Custom metric for content-visibility

Author: burakguneli

dist/almanac.js

@@ -777,5 +777,39 @@ return JSON.stringify({
 
   'length_of_h1s': (() => {
     return [...document.querySelectorAll('h1')].map(node => node.innerText.length);
+  })(),
+
+  'content_visibility': (() => {
+    // Detects elements using the content-visibility CSS property
+    const elements = document.querySelectorAll('*');
+    const contentVisibilityElements = [];
+    const contentVisibilityValues = {};
+    
+    for (const element of elements) {
+      try {
+        const computedStyle = getComputedStyle(element);
+        const contentVisibility = computedStyle.getPropertyValue('content-visibility');
+        
+        if (contentVisibility && contentVisibility !== 'visible') {
+          contentVisibilityElements.push({
+            tagName: element.tagName.toLowerCase(),
+            contentVisibility: contentVisibility.trim(),
+            className: element.className || '',
+            id: element.id || ''
+          });
+
+          const value = contentVisibility.trim();
+          contentVisibilityValues[value] = (contentVisibilityValues[value] || 0) + 1;
+        }
+      } catch (e) {
+        // continue regardless of error
+      }
+    }
+    
+    return {
+      total: contentVisibilityElements.length,
+      elements: contentVisibilityElements,
+      values: contentVisibilityValues
+    };
   })()
 });

metric-summary.md

@@ -723,6 +723,36 @@ Example response:
 [5, 12, 11]
 ```
 
+## content_visibility
+
+Detects elements using the `content-visibility` CSS property for performance optimization analysis. Returns information about elements that have content-visibility set to values other than 'visible' (such as 'auto', 'hidden', or 'skip').
+
+Example response:
+
+```json
+{
+  "total": 15,
+  "elements": [
+    {
+      "tagName": "div",
+      "contentVisibility": "auto",
+      "className": "lazy-section",
+      "id": "section-1"
+    },
+    {
+      "tagName": "section",
+      "contentVisibility": "hidden",
+      "className": "hidden-content",
+      "id": ""
+    }
+  ],
+  "values": {
+    "auto": 12,
+    "hidden": 3
+  }
+}
+```
+
 ## [Images.js](https://github.com/HTTPArchive/custom-metrics/blob/main/dist/Images.js) metrics
 
 A JSON array of `<img>` elements on the page.