webperf-snippets 0.1.0

package/snippets/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js

@@ -0,0 +1,300 @@
+// Execute after page load without user interaction (scroll, click, etc)
+// https://webperf-snippets.nucliweb.net
+
+(function () {
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const name = el.nodeName.toLowerCase();
+        const part = el.id
+          ? "#" + el.id
+          : name +
+            (el.classList && el.classList.value && el.classList.value.trim()
+              ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".")
+              : "");
+        if (sel.length + part.length > 80) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch {}
+    return sel;
+  }
+
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top < window.innerHeight &&
+      rect.bottom > 0 &&
+      rect.left < window.innerWidth &&
+      rect.right > 0 &&
+      rect.width > 0 &&
+      rect.height > 0
+    );
+  }
+
+  function isInHiddenContainer(element) {
+    let parent = element.parentElement;
+    const hiddenSelectors = [
+      "[hidden]",
+      '[aria-hidden="true"]',
+      ".modal:not(.show)",
+      ".tab-pane:not(.active)",
+      '[role="tabpanel"]:not(.active)',
+      ".accordion-collapse:not(.show)",
+      ".carousel-item:not(.active)",
+      ".swiper-slide:not(.swiper-slide-active)",
+    ];
+
+    while (parent && parent !== document.body) {
+      const cs = window.getComputedStyle(parent);
+      if (cs.display === "none" || cs.visibility === "hidden") {
+        return { hidden: true, reason: "CSS hidden", container: getSelector(parent) };
+      }
+      for (const selector of hiddenSelectors) {
+        try {
+          if (parent.matches(selector)) {
+            return { hidden: true, reason: selector, container: getSelector(parent) };
+          }
+        } catch {}
+      }
+      parent = parent.parentElement;
+    }
+    return { hidden: false };
+  }
+
+  function getImageSize(imgElement) {
+    const src = imgElement.currentSrc || imgElement.src;
+    if (!src || src.startsWith("data:")) return 0;
+
+    const perfEntries = performance.getEntriesByType("resource");
+    const imgEntry = perfEntries.find((entry) => entry.name === src);
+
+    if (imgEntry) {
+      return imgEntry.transferSize || imgEntry.encodedBodySize || 0;
+    }
+    return 0;
+  }
+
+  function formatBytes(bytes) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+  }
+
+  // Find LCP candidate (largest visible image) to exclude from recommendations
+  const allViewportImages = Array.from(document.querySelectorAll("img")).filter(
+    (img) => isInViewport(img) && img.getBoundingClientRect().width > 0
+  );
+
+  let lcpCandidate = null;
+  let maxArea = 0;
+
+  allViewportImages.forEach((img) => {
+    const rect = img.getBoundingClientRect();
+    const area = rect.width * rect.height;
+    if (area > maxArea) {
+      maxArea = area;
+      lcpCandidate = img;
+    }
+  });
+
+  // Find images without lazy loading
+  const notLazyImages = document.querySelectorAll('img:not([data-src]):not([loading="lazy"])');
+
+  const results = {
+    belowFold: [],
+    hiddenContainers: [],
+    excluded: {
+      inViewport: 0,
+      lcpCandidate: null,
+      tooSmall: 0,
+    },
+    elements: [],
+  };
+
+  notLazyImages.forEach((img) => {
+    const rect = img.getBoundingClientRect();
+
+    // Skip images in viewport (they shouldn't be lazy loaded)
+    if (isInViewport(img)) {
+      if (img === lcpCandidate) {
+        results.excluded.lcpCandidate = getSelector(img);
+      } else {
+        results.excluded.inViewport++;
+      }
+      return;
+    }
+
+    // Skip very small images (likely icons/tracking pixels)
+    if (rect.width < 50 || rect.height < 50) {
+      results.excluded.tooSmall++;
+      return;
+    }
+
+    const src = img.currentSrc || img.src;
+    const size = getImageSize(img);
+    const hiddenCheck = isInHiddenContainer(img);
+
+    const imageData = {
+      selector: getSelector(img),
+      src: src.length > 60 ? "..." + src.slice(-57) : src,
+      fullSrc: src,
+      dimensions: `${img.naturalWidth}×${img.naturalHeight}`,
+      size: size,
+      sizeFormatted: size > 0 ? formatBytes(size) : "unknown",
+      element: img,
+    };
+
+    if (hiddenCheck.hidden) {
+      imageData.hiddenReason = hiddenCheck.reason;
+      imageData.container = hiddenCheck.container;
+      results.hiddenContainers.push(imageData);
+    } else {
+      imageData.distanceFromViewport = Math.round(rect.top - window.innerHeight) + "px";
+      results.belowFold.push(imageData);
+    }
+
+    results.elements.push(img);
+  });
+
+  // Sort below-fold images by distance (furthest first)
+  results.belowFold.sort((a, b) => parseInt(b.distanceFromViewport) - parseInt(a.distanceFromViewport));
+
+  const totalImages = results.belowFold.length + results.hiddenContainers.length;
+  const totalSize = [...results.belowFold, ...results.hiddenContainers].reduce((sum, img) => sum + img.size, 0);
+
+  // Display results
+  console.group("💡 Lazy Loading Opportunities");
+
+  if (totalImages === 0) {
+    console.log(
+      "%c✅ Good job! All images outside the viewport have lazy loading.",
+      "background: #222; color: #22c55e; padding: 0.5ch 1ch; font-weight: bold"
+    );
+  } else {
+    console.log(
+      `%c⚠️ Found ${totalImages} image(s) that should have lazy loading`,
+      "color: #f59e0b; font-weight: bold; font-size: 14px"
+    );
+
+    if (totalSize > 0) {
+      console.log(
+        `%c📊 Potential savings: ${formatBytes(totalSize)} on initial load`,
+        "color: #22c55e; font-weight: bold"
+      );
+    }
+    console.log("");
+
+    // Below the fold images
+    if (results.belowFold.length > 0) {
+      console.group(`📍 Below The Fold (${results.belowFold.length} images)`);
+      const tableData = results.belowFold.slice(0, 20).map((img) => ({
+        selector: img.selector,
+        src: img.src,
+        dimensions: img.dimensions,
+        size: img.size,
+        sizeFormatted: img.sizeFormatted,
+        distanceFromViewport: img.distanceFromViewport,
+      }));
+      console.table(tableData);
+      if (results.belowFold.length > 20) {
+        console.log(`... and ${results.belowFold.length - 20} more images`);
+      }
+      console.groupEnd();
+    }
+
+    // Hidden container images
+    if (results.hiddenContainers.length > 0) {
+      console.log("");
+      console.group(`🔒 In Hidden Containers (${results.hiddenContainers.length} images)`);
+      console.log("Images in tabs, modals, carousels, or other hidden elements:");
+      console.log("");
+      const tableData = results.hiddenContainers.slice(0, 15).map((img) => ({
+        selector: img.selector,
+        src: img.src,
+        dimensions: img.dimensions,
+        size: img.size,
+        sizeFormatted: img.sizeFormatted,
+        hiddenReason: img.hiddenReason,
+        container: img.container,
+      }));
+      console.table(tableData);
+      if (results.hiddenContainers.length > 15) {
+        console.log(`... and ${results.hiddenContainers.length - 15} more images`);
+      }
+      console.groupEnd();
+    }
+
+    // Excluded summary
+    console.log("");
+    console.group("ℹ️ Correctly Excluded (should NOT be lazy loaded)");
+    console.log(`• LCP candidate: ${results.excluded.lcpCandidate || "none detected"}`);
+    console.log(`• Other in-viewport images: ${results.excluded.inViewport}`);
+    console.log(`• Too small (<50px): ${results.excluded.tooSmall}`);
+    console.groupEnd();
+
+    // Elements for inspection
+    console.log("");
+    console.group("🔎 Elements for inspection");
+    console.log("Click to inspect in Elements panel:");
+    results.elements.slice(0, 15).forEach((img, i) => console.log(`${i + 1}.`, img));
+    if (results.elements.length > 15) {
+      console.log(`... and ${results.elements.length - 15} more`);
+    }
+    console.groupEnd();
+
+    // Quick fix
+    console.log("");
+    console.group("📝 Quick Fix");
+    console.log("Add lazy loading to these images:");
+    console.log("");
+    console.log(
+      '%c<img src="image.jpg" loading="lazy" alt="...">',
+      "font-family: monospace; background: #1e1e1e; color: #9cdcfe; padding: 8px; border-radius: 4px"
+    );
+    console.groupEnd();
+  }
+
+  console.groupEnd();
+
+  return {
+    script: "Find-non-Lazy-Loaded-Images-outside-of-the-viewport",
+    status: "ok",
+    count: totalImages,
+    details: {
+      belowFoldCount: results.belowFold.length,
+      hiddenContainerCount: results.hiddenContainers.length,
+      totalSizeBytes: totalSize,
+      excluded: {
+        inViewport: results.excluded.inViewport,
+        lcpCandidate: results.excluded.lcpCandidate,
+        tooSmall: results.excluded.tooSmall,
+      },
+    },
+    items: [
+      ...results.belowFold.map((img) => ({
+        selector: img.selector,
+        src: img.fullSrc,
+        sizeBytes: img.size,
+        category: "below-fold",
+        distancePx: parseInt(img.distanceFromViewport),
+      })),
+      ...results.hiddenContainers.map((img) => ({
+        selector: img.selector,
+        src: img.fullSrc,
+        sizeBytes: img.size,
+        category: "hidden-container",
+        hiddenReason: img.hiddenReason,
+        container: img.container,
+      })),
+    ],
+    issues: totalImages > 0
+      ? [{ severity: "warning", message: `${totalImages} image(s) outside the viewport are missing loading="lazy"` }]
+      : [],
+  };
+})();

package/snippets/Loading/Find-render-blocking-resources.js

@@ -0,0 +1,161 @@
+// Find render-blocking resources
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  // Check browser support
+  const testEntry = performance.getEntriesByType("resource")[0];
+  if (testEntry && !("renderBlockingStatus" in testEntry)) {
+    console.log(
+      "%c⚠️ renderBlockingStatus not supported in this browser",
+      "color: #f59e0b; font-weight: bold;"
+    );
+    console.log("This API is currently Chromium-only (Chrome 107+, Edge 107+).");
+    console.log("Try using Chrome or Edge to analyze render-blocking resources.");
+    return { script: "Find-render-blocking-resources", status: "unsupported", error: "renderBlockingStatus API requires Chrome 107+" };
+  }
+
+  const blockingResources = performance
+    .getEntriesByType("resource")
+    .filter((entry) => entry.renderBlockingStatus === "blocking")
+    .map((entry) => {
+      const url = new URL(entry.name);
+      return {
+        name: entry.name,
+        shortName: url.pathname.split("/").pop() || url.pathname,
+        type: entry.initiatorType,
+        startTime: entry.startTime,
+        duration: entry.duration,
+        responseEnd: entry.responseEnd,
+        size: entry.transferSize || 0,
+      };
+    })
+    .sort((a, b) => b.responseEnd - a.responseEnd);
+
+  console.group("%c🚧 Render-Blocking Resources", "font-weight: bold; font-size: 14px;");
+
+  if (blockingResources.length === 0) {
+    console.log(
+      "%c✅ No render-blocking resources found!",
+      "color: #22c55e; font-weight: bold;"
+    );
+    console.log("The page has no resources blocking initial render.");
+    console.log("");
+    console.log("%c💡 This could mean:", "font-weight: bold;");
+    console.log("   • CSS is inlined or loaded asynchronously");
+    console.log("   • Scripts use async or defer attributes");
+    console.log("   • Critical resources are optimized");
+  } else {
+    // Calculate metrics
+    const lastBlockingEnd = Math.max(...blockingResources.map((r) => r.responseEnd));
+    const totalSize = blockingResources.reduce((sum, r) => sum + r.size, 0);
+    const byType = blockingResources.reduce((acc, r) => {
+      acc[r.type] = (acc[r.type] || 0) + 1;
+      return acc;
+    }, {});
+
+    // Summary
+    console.log(
+      `%c⚠️ Found ${blockingResources.length} render-blocking resource(s)`,
+      "color: #ef4444; font-weight: bold; font-size: 14px;"
+    );
+    console.log("");
+
+    console.log("%c📊 Impact Summary:", "font-weight: bold;");
+    console.log(`   Rendering blocked until: ${lastBlockingEnd.toFixed(0)}ms`);
+    console.log(`   Total blocking resources: ${blockingResources.length}`);
+    if (totalSize > 0) {
+      const sizeKB = (totalSize / 1024).toFixed(1);
+      console.log(`   Total size: ${sizeKB} KB`);
+    }
+    console.log(`   By type: ${Object.entries(byType).map(([k, v]) => `${k} (${v})`).join(", ")}`);
+
+    // Timeline visualization
+    console.log("");
+    console.log("%c⏱️ Timeline (sorted by completion):", "font-weight: bold;");
+
+    const formatBar = (end, max) => {
+      const pct = (end / max) * 100;
+      const width = Math.round(pct / 5);
+      return "█".repeat(width) + "░".repeat(20 - width);
+    };
+
+    blockingResources.forEach((r) => {
+      const bar = formatBar(r.responseEnd, lastBlockingEnd);
+      const sizeInfo = r.size > 0 ? ` (${(r.size / 1024).toFixed(1)} KB)` : "";
+      console.log(
+        `   ${r.type.padEnd(8)} ${r.responseEnd.toFixed(0).padStart(5)}ms ${bar} ${r.shortName}${sizeInfo}`
+      );
+    });
+
+    // Table with details
+    console.log("");
+    console.log("%c📋 Details:", "font-weight: bold;");
+    const tableData = blockingResources.map((r) => ({
+      Type: r.type,
+      "Response End": r.responseEnd.toFixed(0) + "ms",
+      Duration: r.duration.toFixed(0) + "ms",
+      Size: r.size > 0 ? (r.size / 1024).toFixed(1) + " KB" : "N/A",
+      Resource: r.name.length > 60 ? "..." + r.name.slice(-57) : r.name,
+    }));
+    console.table(tableData);
+
+    // Recommendations
+    console.log("");
+    console.log("%c📝 How to fix:", "color: #3b82f6; font-weight: bold;");
+    console.log("");
+
+    if (byType.script) {
+      console.log("%c   Scripts:", "font-weight: bold;");
+      console.log("   • Add 'defer' for scripts that don't need to run immediately");
+      console.log("   • Add 'async' for independent scripts (analytics, etc.)");
+      console.log("   • Move non-critical scripts to end of <body>");
+      console.log('%c   <script src="app.js" defer></script>', "font-family: monospace; color: #22c55e;");
+      console.log("");
+    }
+
+    if (byType.link || byType.css) {
+      console.log("%c   CSS:", "font-weight: bold;");
+      console.log("   • Inline critical CSS in <head>");
+      console.log("   • Load non-critical CSS asynchronously with media='print' trick");
+      console.log("   • Use <link rel='preload'> for critical stylesheets");
+      console.log('%c   <link rel="preload" href="style.css" as="style" onload="this.rel=\'stylesheet\'">', "font-family: monospace; color: #22c55e;");
+      console.log("");
+    }
+
+    if (byType.font) {
+      console.log("%c   Fonts:", "font-weight: bold;");
+      console.log("   • Use font-display: swap in @font-face");
+      console.log("   • Preload critical fonts");
+      console.log("   • Consider system font stack for initial render");
+      console.log('%c   <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>', "font-family: monospace; color: #22c55e;");
+      console.log("");
+    }
+  }
+
+  console.groupEnd();
+
+  const lastBlockingEnd = blockingResources.length ? Math.max(...blockingResources.map((r) => r.responseEnd)) : 0;
+  const totalSizeBytes = blockingResources.reduce((sum, r) => sum + r.size, 0);
+  const byType = blockingResources.reduce((acc, r) => { acc[r.type] = (acc[r.type] || 0) + 1; return acc; }, {});
+  return {
+    script: "Find-render-blocking-resources",
+    status: "ok",
+    count: blockingResources.length,
+    details: {
+      totalBlockingUntilMs: Math.round(lastBlockingEnd),
+      totalSizeBytes,
+      byType,
+    },
+    items: blockingResources.map((r) => ({
+      type: r.type,
+      url: r.name,
+      shortName: r.shortName,
+      responseEndMs: Math.round(r.responseEnd),
+      durationMs: Math.round(r.duration),
+      sizeBytes: r.size,
+    })),
+    issues: blockingResources.length > 0
+      ? [{ severity: "error", message: `${blockingResources.length} render-blocking resource(s) delay rendering until ${Math.round(lastBlockingEnd)}ms` }]
+      : [],
+  };
+})();