webperf-snippets 0.1.0

package/snippets/Media/Video-Element-Audit.js

@@ -0,0 +1,282 @@
+// Video Element Audit
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  function isInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.top < window.innerHeight &&
+      rect.bottom > 0 &&
+      rect.left < window.innerWidth &&
+      rect.right > 0 &&
+      rect.width > 0 &&
+      rect.height > 0
+    );
+  }
+
+  function detectBestCodec(video) {
+    const sources = Array.from(video.querySelectorAll("source"));
+    const types = sources
+      .map((s) => s.getAttribute("type") || "")
+      .filter(Boolean)
+      .map((t) => t.toLowerCase());
+
+    const allSrcs = [
+      (video.currentSrc || "").toLowerCase(),
+      (video.getAttribute("src") || "").toLowerCase(),
+      ...sources.map((s) => (s.getAttribute("src") || "").toLowerCase()),
+    ];
+
+    if (types.some((t) => t.includes("av01") || t.includes("av1"))) return "AV1";
+    if (types.some((t) => t.includes("vp9"))) return "VP9";
+    if (types.some((t) => t.includes("webm")) || allSrcs.some((s) => s.endsWith(".webm")))
+      return "WebM";
+    if (
+      types.some((t) => t.includes("mp4")) ||
+      allSrcs.some((s) => s.endsWith(".mp4") || s.endsWith(".mov"))
+    )
+      return "MP4";
+    if (types.some((t) => t.includes("ogg")) || allSrcs.some((s) => s.endsWith(".ogv")))
+      return "OGG";
+
+    return sources.length > 0 || video.getAttribute("src") ? "unknown" : "no source";
+  }
+
+  function isModernCodec(codec) {
+    return ["AV1", "VP9", "WebM"].includes(codec);
+  }
+
+  function shortSrc(url) {
+    if (!url) return "";
+    return url.split("/").pop()?.split("?")[0]?.slice(0, 40) || url.slice(-40);
+  }
+
+  const videos = Array.from(document.querySelectorAll("video"));
+
+  if (videos.length === 0) {
+    console.log("No <video> elements found on this page.");
+    return { script: "Video-Element-Audit", status: "ok", count: 0, items: [], issues: [] };
+  }
+
+  const audited = videos.map((video) => {
+    const inViewport = isInViewport(video);
+    const rect = video.getBoundingClientRect();
+    const src = video.currentSrc || video.getAttribute("src") || "";
+
+    const preload = video.getAttribute("preload");
+    const autoplay = video.hasAttribute("autoplay");
+    const muted = video.hasAttribute("muted") || video.muted;
+    const playsinline = video.hasAttribute("playsinline");
+    const loop = video.hasAttribute("loop");
+    const controls = video.hasAttribute("controls");
+    const poster = video.getAttribute("poster");
+    const hasDimensions = video.hasAttribute("width") && video.hasAttribute("height");
+    const sources = Array.from(video.querySelectorAll("source"));
+    const codec = detectBestCodec(video);
+
+    const issues = [];
+
+    if (preload === "auto" && !autoplay) {
+      issues.push({
+        s: "error",
+        msg: 'preload="auto" loads the full video eagerly — use preload="none" or preload="metadata"',
+      });
+    }
+
+    if (!autoplay && !inViewport && preload !== "none") {
+      issues.push({
+        s: "warning",
+        msg: 'Off-viewport video without preload="none" — set preload="none" to avoid unnecessary loading',
+      });
+    }
+
+    if (autoplay && !muted) {
+      issues.push({
+        s: "error",
+        msg: "autoplay without muted — browsers block unmuted autoplay",
+      });
+    }
+
+    if (autoplay && !playsinline) {
+      issues.push({
+        s: "warning",
+        msg: "autoplay without playsinline — iOS Safari forces fullscreen mode",
+      });
+    }
+
+    if (!poster) {
+      issues.push({
+        s: "warning",
+        msg: "Missing poster — no preview frame shown before playback starts",
+      });
+    }
+
+    if (!hasDimensions) {
+      issues.push({
+        s: "warning",
+        msg: "Missing width/height attributes (CLS risk)",
+      });
+    }
+
+    if (!isModernCodec(codec) && codec !== "no source") {
+      issues.push({
+        s: "info",
+        msg: "No modern codec source detected — consider adding a WebM source (VP9 or AV1) for better compression",
+      });
+    }
+
+    if (!controls && !autoplay) {
+      issues.push({
+        s: "info",
+        msg: "No controls attribute and no autoplay — users may not be able to play the video",
+      });
+    }
+
+    return {
+      video,
+      inViewport,
+      src,
+      codec,
+      preload: preload ?? "(not set)",
+      autoplay,
+      muted,
+      playsinline,
+      loop,
+      controls,
+      poster: poster ? "✓" : "(not set)",
+      hasDimensions,
+      sourceCount: sources.length,
+      dimensions: `${Math.round(rect.width)}×${Math.round(rect.height)}`,
+      issues,
+    };
+  });
+
+  const withIssues = audited.filter((r) => r.issues.length > 0);
+  const totalErrors = audited.flatMap((r) => r.issues.filter((i) => i.s === "error")).length;
+  const totalWarnings = audited.flatMap((r) => r.issues.filter((i) => i.s === "warning")).length;
+  const totalInfos = audited.flatMap((r) => r.issues.filter((i) => i.s === "info")).length;
+
+  console.group("%c🎬 Video Element Audit", "font-weight: bold; font-size: 14px;");
+
+  // Summary
+  console.log("");
+  console.log("%cSummary", "font-weight: bold;");
+  console.log(`   Total videos : ${videos.length}`);
+  console.log(`   In viewport  : ${audited.filter((r) => r.inViewport).length}`);
+  console.log(`   Off viewport : ${audited.filter((r) => !r.inViewport).length}`);
+  console.log(
+    `   Issues       : ${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info`,
+  );
+
+  // Full table
+  console.log("");
+  console.group(`%c📋 All Videos (${videos.length})`, "font-weight: bold;");
+  console.table(
+    audited.map((r) => ({
+      src: shortSrc(r.src),
+      codec: r.codec,
+      viewport: r.inViewport ? "✓" : "",
+      preload: r.preload,
+      autoplay: r.autoplay ? "✓" : "",
+      muted: r.muted ? "✓" : "",
+      playsinline: r.playsinline ? "✓" : "",
+      controls: r.controls ? "✓" : "",
+      poster: r.poster,
+      "w/h": r.hasDimensions ? "✓" : "⚠️",
+      sources: r.sourceCount,
+      issues:
+        r.issues.length === 0
+          ? "✅"
+          : r.issues
+              .map((i) => (i.s === "error" ? "🔴" : i.s === "warning" ? "⚠️" : "ℹ️"))
+              .join(" "),
+    })),
+  );
+  console.groupEnd();
+
+  // Issues detail
+  if (withIssues.length > 0) {
+    console.log("");
+    console.group(
+      `%c⚠️ Issues Detail (${totalErrors} errors · ${totalWarnings} warnings · ${totalInfos} info)`,
+      "color: #ef4444; font-weight: bold;",
+    );
+
+    withIssues.forEach((r) => {
+      const hasError = r.issues.some((i) => i.s === "error");
+      const icon = hasError ? "🔴" : "⚠️";
+      console.log("");
+      console.log(`%c${icon} ${shortSrc(r.src) || "(no src)"}`, "font-weight: bold;");
+      r.issues.forEach((issue) => {
+        const prefix = issue.s === "error" ? "   🔴" : issue.s === "warning" ? "   ⚠️" : "   ℹ️";
+        console.log(`${prefix} ${issue.msg}`);
+      });
+      console.log("   Element:", r.video);
+    });
+
+    console.groupEnd();
+  } else {
+    console.log("");
+    console.log("%c✅ No issues found.", "color: #22c55e; font-weight: bold;");
+  }
+
+  // Quick reference
+  console.log("");
+  console.group("%c📝 Quick Reference", "color: #3b82f6; font-weight: bold;");
+  console.log("");
+  console.log("%c  🎬 Autoplay hero/background video:", "color: #22c55e;");
+  console.log(
+    '%c  <video autoplay muted playsinline loop poster="preview.avif" width="1280" height="720">\n    <source src="hero.av1.webm" type="video/webm; codecs=av01.0.04M.08">\n    <source src="hero.vp9.webm" type="video/webm; codecs=vp9">\n    <source src="hero.mp4" type="video/mp4">\n  </video>',
+    "font-family: monospace;",
+  );
+  console.log("");
+  console.log("%c  ✅ User-controlled video:", "color: #22c55e;");
+  console.log(
+    '%c  <video controls preload="metadata" poster="thumbnail.avif" width="800" height="450">\n    <source src="video.vp9.webm" type="video/webm; codecs=vp9">\n    <source src="video.mp4" type="video/mp4">\n  </video>',
+    "font-family: monospace;",
+  );
+  console.log("");
+  console.log("%c  ✅ Below-fold video:", "color: #22c55e;");
+  console.log(
+    '%c  <video controls preload="none" poster="thumbnail.avif" width="800" height="450">\n    <source src="video.vp9.webm" type="video/webm; codecs=vp9">\n    <source src="video.mp4" type="video/mp4">\n  </video>',
+    "font-family: monospace;",
+  );
+  console.groupEnd();
+
+  console.groupEnd();
+
+  return {
+    script: "Video-Element-Audit",
+    status: "ok",
+    count: videos.length,
+    details: {
+      totalVideos: videos.length,
+      inViewport: audited.filter((r) => r.inViewport).length,
+      offViewport: audited.filter((r) => !r.inViewport).length,
+      totalErrors,
+      totalWarnings,
+      totalInfos,
+    },
+    items: audited.map((r) => ({
+      src: r.src,
+      codec: r.codec,
+      inViewport: r.inViewport,
+      preload: r.preload,
+      autoplay: r.autoplay,
+      muted: r.muted,
+      playsinline: r.playsinline,
+      loop: r.loop,
+      controls: r.controls,
+      hasPoster: r.poster !== "(not set)",
+      hasDimensions: r.hasDimensions,
+      sourceCount: r.sourceCount,
+      issues: r.issues.map((i) => ({ severity: i.s, message: i.msg })),
+    })),
+    issues: audited.flatMap((r) =>
+      r.issues.map((i) => ({
+        severity: i.s,
+        message: `${shortSrc(r.src) || "(no src)"}: ${i.msg}`,
+      }))
+    ),
+  };
+})();

package/snippets/Media/WORKFLOWS.md

@@ -0,0 +1,190 @@
+## Common Workflows
+
+### Complete Media Audit
+
+When the user asks for media optimization or "audit images and videos":
+
+1. **Image-Element-Audit.js** - Analyze all images (format, lazy loading, sizing, fetchpriority)
+2. **Video-Element-Audit.js** - Analyze all videos (poster, preload, formats, autoplay)
+3. **SVG-Embedded-Bitmap-Analysis.js** - Detect inefficient bitmap images embedded in SVGs
+
+### Image Optimization Workflow
+
+When the user asks "optimize images" or "check image performance":
+
+1. **Image-Element-Audit.js** - Full image audit
+2. Cross-reference with **webperf-loading** skill:
+   - Find-Above-The-Fold-Lazy-Loaded-Images.js (incorrectly lazy-loaded images)
+   - Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js (missing lazy loading)
+   - Find-Images-With-Lazy-and-Fetchpriority.js (contradictory attributes)
+   - Priority-Hints-Audit.js (LCP image should have fetchpriority="high")
+
+### Video Performance Audit
+
+When the user asks "optimize videos" or "check video performance":
+
+1. **Video-Element-Audit.js** - Full video audit
+2. Cross-reference with **webperf-core-web-vitals** skill:
+   - LCP-Video-Candidate.js (check if video/poster is LCP)
+3. Cross-reference with **webperf-loading** skill:
+   - Priority-Hints-Audit.js (video poster priority)
+   - Resource-Hints-Validation.js (video preload)
+
+### LCP Image Investigation
+
+When LCP is an image and needs optimization:
+
+1. Cross-reference with **webperf-core-web-vitals** skill:
+   - LCP.js (measure LCP)
+   - LCP-Image-Entropy.js (analyze image complexity)
+2. **Image-Element-Audit.js** - Check format, dimensions, lazy loading
+3. Cross-reference with **webperf-loading** skill:
+   - Find-Above-The-Fold-Lazy-Loaded-Images.js (should NOT be lazy)
+   - Priority-Hints-Audit.js (should have fetchpriority="high")
+   - Resource-Hints-Validation.js (consider preload)
+
+### Layout Shift from Images
+
+When CLS is caused by images without dimensions:
+
+1. **Image-Element-Audit.js** - Check for missing width/height attributes
+2. Cross-reference with **webperf-core-web-vitals** skill:
+   - CLS.js (measure total CLS)
+3. Cross-reference with **webperf-interaction** skill:
+   - Layout-Shift-Loading-and-Interaction.js (when shifts occur)
+
+### SVG Optimization Audit
+
+When the user asks about SVG performance or file sizes are large:
+
+1. **SVG-Embedded-Bitmap-Analysis.js** - Detect raster images embedded in vector SVGs
+2. Recommend SVGO optimization for SVGs without embedded bitmaps
+3. Recommend extracting bitmaps to separate image files with proper formats
+
+## Decision Tree
+
+Use this decision tree to automatically run follow-up snippets based on results:
+
+### After Image-Element-Audit.js
+
+- **If images missing width/height attributes** → Layout shift risk, run:
+  1. **webperf-core-web-vitals:CLS.js** (measure CLS impact)
+  2. **webperf-interaction:Layout-Shift-Loading-and-Interaction.js** (timing of shifts)
+  3. Recommend adding explicit dimensions to all images
+
+- **If images using wrong format (JPEG for graphics, PNG for photos)** → Recommend:
+  - Modern formats: WebP, AVIF
+  - Appropriate format for content type
+  - Format-specific compression settings
+
+- **If images much larger than display size** → Recommend:
+  - Responsive images with srcset
+  - Appropriate image CDN sizing
+  - srcset with multiple sizes for different viewports
+
+- **If above-the-fold images are lazy-loaded** → Run:
+  1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (confirm)
+  2. **webperf-core-web-vitals:LCP.js** (measure LCP impact)
+  3. Recommend removing loading="lazy" from above-fold images
+
+- **If LCP image lacks fetchpriority="high"** → Run:
+  1. **webperf-core-web-vitals:LCP.js** (measure current LCP)
+  2. **webperf-loading:Priority-Hints-Audit.js** (full priority audit)
+  3. Recommend adding fetchpriority="high" to LCP image
+
+- **If below-the-fold images are NOT lazy-loaded** → Run:
+  1. **webperf-loading:Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js** (confirm)
+  2. Recommend adding loading="lazy" to offscreen images
+
+- **If images have both loading="lazy" AND fetchpriority="high"** → Run:
+  1. **webperf-loading:Find-Images-With-Lazy-and-Fetchpriority.js** (confirm contradiction)
+  2. Recommend removing one of the conflicting attributes
+
+- **If images competing with critical resources** → Run:
+  1. **webperf-loading:Find-render-blocking-resources.js** (resource priority conflicts)
+  2. **webperf-loading:TTFB-Resources.js** (identify slow image CDN)
+
+- **If images missing alt text** → Accessibility issue, recommend adding descriptive alt text
+
+### After Video-Element-Audit.js
+
+- **If video is LCP candidate** → Run:
+  1. **webperf-core-web-vitals:LCP-Video-Candidate.js** (confirm)
+  2. **webperf-core-web-vitals:LCP.js** (measure LCP)
+  3. **webperf-core-web-vitals:LCP-Subparts.js** (break down timing)
+  4. Optimize video poster image or consider image alternative
+
+- **If video missing poster** → Recommend:
+  - Adding poster image for better perceived performance
+  - Using first frame or custom thumbnail
+  - Optimizing poster as you would an image
+
+- **If video uses preload="auto"** → Bandwidth concern, evaluate:
+  - Is video above-the-fold? Keep preload="auto"
+  - Is video below-the-fold? Change to preload="metadata" or "none"
+  - Is autoplay intended? Verify preload matches intent
+
+- **If autoplay video without muted** → Browser will block, recommend:
+  - Adding muted attribute
+  - Or removing autoplay
+
+- **If video missing multiple formats** → Recommend:
+  - WebM for Chrome/Firefox
+  - MP4 as fallback for Safari
+  - Order sources by efficiency (WebM first)
+
+- **If large video files (>5MB)** → Recommend:
+  - Compression/transcoding
+  - Adaptive bitrate streaming (HLS, DASH)
+  - Loading strategy optimization
+
+### After SVG-Embedded-Bitmap-Analysis.js
+
+- **If bitmap images found in SVGs** → Recommend:
+  1. Extract bitmaps to separate files
+  2. Use WebP/AVIF format for extracted images
+  3. Reference images from SVG with <image> element
+  4. Or convert to pure vector if possible
+
+- **If large embedded bitmaps (>100KB)** → Critical inefficiency:
+  - SVG parsing overhead + large bitmap = worst of both worlds
+  - Urgently recommend extraction
+
+- **If multiple small bitmaps in SVG** → Consider:
+  - CSS sprites for small icons
+  - SVG symbols for reusable graphics
+  - Extracting to individual optimized images
+
+### Performance Budget Thresholds
+
+Use these thresholds to trigger recommendations:
+
+**Image File Sizes:**
+- **Warning**: Individual image > 500KB → Check format and compression
+- **Critical**: Individual image > 1MB → Urgent optimization needed
+- **Total images**: > 5MB on initial load → Implement lazy loading
+
+**Image Formats:**
+- **JPEG for graphics/icons** → Recommend PNG or SVG
+- **PNG for photos** → Recommend JPEG, WebP, or AVIF
+- **GIF for animations** → Recommend video (MP4/WebM) or animated WebP
+- **No modern formats (WebP/AVIF)** → Recommend upgrading
+
+**Image Dimensions:**
+- **Intrinsic size > 2x display size** → Recommend responsive images
+- **Intrinsic size < display size** → Upscaling = blurry, provide larger source
+
+**Video File Sizes:**
+- **Warning**: Video > 10MB → Consider compression or streaming
+- **Critical**: Video > 50MB → Urgent optimization or streaming needed
+
+**Lazy Loading:**
+- **Above-fold images lazy-loaded** → Critical LCP impact, fix immediately
+- **Below-fold images NOT lazy-loaded** → Wasted bandwidth, implement lazy loading
+- **>10 images eager-loaded** → Excessive, implement lazy loading
+
+**Priority Hints:**
+- **LCP image without fetchpriority="high"** → Add for 10-30% LCP improvement
+- **Non-LCP images with fetchpriority="high"** → Remove, wasting browser hints
+- **Lazy + fetchpriority="high" conflict** → Fix contradiction
+

package/snippets/README.md

@@ -0,0 +1,98 @@
+# Snippets Directory
+
+This directory contains the source JavaScript files for all web performance measurement snippets, organized by category.
+
+## Structure
+
+```
+snippets/
+├── CoreWebVitals/        # LCP, CLS, INP metrics
+│   ├── *.js             # Snippet source files
+│   └── WORKFLOWS.md     # Optional workflows & decision trees (if applicable)
+├── Loading/              # TTFB, FCP, scripts, fonts, resource hints
+│   ├── *.js
+│   └── WORKFLOWS.md     # Workflows & decision trees for loading optimization
+├── Interaction/          # Long tasks, animation frames, scroll performance
+│   ├── *.js
+│   └── WORKFLOWS.md     # Optional workflows & decision trees (if applicable)
+├── Media/                # Images, videos, SVGs
+│   ├── *.js
+│   └── WORKFLOWS.md     # Optional workflows & decision trees (if applicable)
+└── Resources/            # Network bandwidth, connection quality
+    ├── *.js
+    └── WORKFLOWS.md     # Optional workflows & decision trees (if applicable)
+```
+
+## Adding Workflows & Decision Trees
+
+To add intelligent workflows and decision trees to a skill category:
+
+1. **Create `WORKFLOWS.md`** in the category directory (e.g., `snippets/Loading/WORKFLOWS.md`)
+
+2. **Structure the file** with two main sections:
+
+   ```markdown
+   ## Common Workflows
+
+   ### Workflow Name
+
+   When the user asks about [scenario]:
+
+   1. **Snippet1.js** - Brief description
+   2. **Snippet2.js** - Brief description
+
+   ## Decision Tree
+
+   Use this decision tree to automatically run follow-up snippets based on results:
+
+   ### After Snippet1.js
+
+   - **If condition** → Run **Snippet2.js**
+   - **If other condition** → Run **Snippet3.js**
+   ```
+
+3. **Run the generator** to inject workflows into skills:
+
+   ```bash
+   node scripts/generate-skills.js
+   ```
+
+   The generator will:
+   - Read `WORKFLOWS.md` from each category
+   - Inject the content into the generated `SKILL.md`
+   - Copy to both `/skills/` (for distribution) and `/.claude/skills/` (for local use)
+
+## Example: Loading Workflows
+
+See `snippets/Loading/WORKFLOWS.md` for a complete example with:
+
+- 8 common workflow scenarios (Complete Audit, Server Investigation, Font Optimization, etc.)
+- 16 decision trees with conditional logic for follow-up snippets
+- Threshold-based triggers (e.g., "If TTFB > 600ms, run TTFB-Sub-Parts.js")
+
+## Benefits
+
+**For agents:**
+- Autonomous multi-snippet execution based on results
+- Context-aware snippet selection
+- Progressive diagnostic workflows
+
+**For maintainability:**
+- Workflows persist across regenerations
+- Single source of truth in `snippets/` directory
+- Version-controlled expertise and best practices
+
+## Build System
+
+The `generate-skills.js` script:
+
+1. Reads all `.js` files from each category
+2. Extracts metadata from corresponding MDX documentation in `/pages/`
+3. Injects `WORKFLOWS.md` content (if exists)
+4. Generates complete `SKILL.md` files with:
+   - Snippet table
+   - Execution instructions
+   - Workflows & decision trees
+   - Individual snippet documentation with thresholds
+
+**Note:** Never edit generated files directly. Always modify source files in `/snippets/` and regenerate.

package/snippets/Resources/Network-Bandwidth-Connection-Quality.js

@@ -0,0 +1,103 @@
+// Network Bandwidth & Connection Quality Analysis
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const connection =
+    navigator.connection ||
+    navigator.mozConnection ||
+    navigator.webkitConnection;
+
+  if (!connection) {
+    console.warn(
+      "%c⚠️ Network Information API not supported in this browser",
+      "color: #f59e0b; font-weight: bold;"
+    );
+    console.log("Available in Chrome and Android browsers.");
+    return { script: "Network-Bandwidth-Connection-Quality", status: "unsupported", error: "Network Information API not supported" };
+  }
+
+  const effectiveTypeRating = {
+    "slow-2g": { label: "Slow 2G", color: "#ef4444" },
+    "2g": { label: "2G", color: "#f97316" },
+    "3g": { label: "3G", color: "#f59e0b" },
+    "4g": { label: "4G", color: "#22c55e" },
+  };
+
+  const effectiveType = connection.effectiveType || "unknown";
+  const rating = effectiveTypeRating[effectiveType] || {
+    label: effectiveType,
+    color: "#6b7280",
+  };
+
+  console.group(
+    `%c📡 Network Quality: ${rating.label}`,
+    `color: ${rating.color}; font-weight: bold; font-size: 14px;`
+  );
+
+  console.log("");
+  console.log("%cConnection details:", "font-weight: bold;");
+  console.table({
+    "Connection Type": connection.type || "unknown",
+    "Effective Type": effectiveType,
+    "Downlink (Mbps)":
+      connection.downlink !== undefined ? connection.downlink : "N/A",
+    "RTT (ms)": connection.rtt !== undefined ? connection.rtt : "N/A",
+    "Save-Data": connection.saveData ? "Enabled" : "Disabled",
+  });
+
+  // Recommendations
+  console.log("");
+  if (connection.saveData) {
+    console.log(
+      "%c💡 Save-Data is enabled — consider serving reduced assets:",
+      "color: #3b82f6; font-weight: bold;"
+    );
+    console.log("   - Omit non-essential images and videos");
+    console.log("   - Disable autoplay and animations");
+    console.log("   - Defer non-critical resources");
+  }
+
+  if (effectiveType === "slow-2g" || effectiveType === "2g") {
+    console.log(
+      "%c💡 Slow connection detected — performance tips:",
+      "color: #3b82f6; font-weight: bold;"
+    );
+    console.log("   - Prioritize critical resources with fetchpriority=high");
+    console.log("   - Minimize render-blocking scripts and stylesheets");
+    console.log("   - Consider skeleton screens over layout shifts");
+  }
+
+  // Monitor connection changes
+  const onChange = () => {
+    const updated = connection.effectiveType || "unknown";
+    const updatedRating = effectiveTypeRating[updated] || {
+      label: updated,
+      color: "#6b7280",
+    };
+    console.log(
+      `%c🔄 Connection changed → ${updatedRating.label} (${updated})`,
+      `color: ${updatedRating.color}; font-weight: bold;`
+    );
+  };
+
+  connection.addEventListener("change", onChange);
+  console.log("");
+  console.log(
+    "%c👂 Listening for connection changes... (navigate to trigger)",
+    "color: #6b7280;"
+  );
+
+  console.groupEnd();
+
+  return {
+    script: "Network-Bandwidth-Connection-Quality",
+    status: "ok",
+    details: {
+      effectiveType,
+      downlink: connection.downlink,
+      rtt: connection.rtt,
+      saveData: connection.saveData,
+      type: connection.type || "unknown",
+    },
+  };
+})();