webperf-snippets 0.1.0

package/snippets/Loading/Service-Worker-Analysis.js

@@ -0,0 +1,192 @@
+// Service Worker Analysis
+// https://webperf-snippets.nucliweb.net
+
+(async () => {
+  if (!('serviceWorker' in navigator)) {
+    console.log(
+      '%c⚠️ Service Workers not supported in this browser',
+      'color: #f59e0b; font-weight: bold;'
+    );
+    return;
+  }
+
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  const controller = navigator.serviceWorker.controller;
+  const navEntry = performance.getEntriesByType('navigation')[0];
+  const resources = performance.getEntriesByType('resource');
+
+  // Resources intercepted by SW (workerStart > 0)
+  const swResources = resources.filter((r) => r.workerStart > 0);
+  const fromCache = swResources.filter((r) => r.transferSize === 0);
+  const fromNetwork = swResources.filter((r) => r.transferSize > 0);
+  const notIntercepted = resources.filter((r) => r.workerStart === 0);
+
+  console.group(
+    '%c⚙️ Service Worker Analysis',
+    'font-weight: bold; font-size: 14px;'
+  );
+
+  // Registrations
+  console.log('');
+  console.log('%c📋 Registrations:', 'font-weight: bold;');
+
+  if (registrations.length === 0) {
+    console.log('%c   ❌ No Service Workers registered', 'color: #ef4444;');
+    console.groupEnd();
+    return;
+  }
+
+  for (const reg of registrations) {
+    console.log('');
+    console.log(`%c   Scope: ${reg.scope}`, 'font-family: monospace;');
+
+    if (reg.active) {
+      console.log(
+        `%c   ✅ Active: ${reg.active.state}`,
+        'color: #22c55e;'
+      );
+      console.log(`      Script: ${reg.active.scriptURL}`);
+    }
+    if (reg.waiting) {
+      console.log(
+        '%c   ⏳ Waiting SW detected — update pending',
+        'color: #f59e0b;'
+      );
+      console.log(`      Script: ${reg.waiting.scriptURL}`);
+      console.log(
+        '      💡 Call skipWaiting() to activate the new version'
+      );
+    }
+    if (reg.installing) {
+      console.log('%c   🔄 Installing...', 'color: #3b82f6;');
+    }
+
+    // Navigation Preload
+    if (reg.navigationPreload) {
+      try {
+        const preload = await reg.navigationPreload.getState();
+        console.log('');
+        console.log('%c   🚀 Navigation Preload:', 'font-weight: bold;');
+        if (preload.enabled) {
+          console.log('%c      ✅ Enabled', 'color: #22c55e;');
+          console.log(`      Header value: "${preload.headerValue}"`);
+        } else {
+          console.log('%c      ❌ Disabled', 'color: #ef4444;');
+          console.log(
+            '      💡 Enable with: registration.navigationPreload.enable()'
+          );
+        }
+      } catch {
+        // Access may be restricted
+      }
+    }
+  }
+
+  // Controller
+  console.log('');
+  console.log('%c🎮 Controller:', 'font-weight: bold;');
+  if (controller) {
+    console.log('%c   ✅ Page is controlled by SW', 'color: #22c55e;');
+    console.log(`   State: ${controller.state}`);
+  } else {
+    console.log('%c   ⚠️ Page is NOT controlled by SW', 'color: #f59e0b;');
+    console.log('   Hard reload detected or first visit. Do a normal reload.');
+  }
+
+  // SW Startup overhead
+  if (navEntry && navEntry.workerStart > 0) {
+    const workerStart = navEntry.workerStart - navEntry.startTime;
+    const fetchStart = navEntry.fetchStart - navEntry.startTime;
+    const swOverhead = Math.max(fetchStart - workerStart, 0);
+
+    console.log('');
+    console.log('%c⏱️ SW Startup Overhead:', 'font-weight: bold;');
+    console.log(`   Worker start:  ${workerStart.toFixed(1)}ms`);
+    console.log(`   Fetch start:   ${fetchStart.toFixed(1)}ms`);
+    console.log(`   SW overhead:   ${swOverhead.toFixed(1)}ms`);
+
+    if (swOverhead > 100) {
+      console.log(
+        '%c   🔴 High SW startup time — enable Navigation Preload',
+        'color: #ef4444;'
+      );
+    } else if (swOverhead > 50) {
+      console.log(
+        '%c   🟡 Moderate SW startup time',
+        'color: #f59e0b;'
+      );
+    } else {
+      console.log(
+        '%c   🟢 SW startup overhead is low',
+        'color: #22c55e;'
+      );
+    }
+  }
+
+  // Cache hit/miss ratio
+  console.log('');
+  console.log('%c📊 Resource Cache Analysis:', 'font-weight: bold;');
+  console.log(`   Total resources:     ${resources.length}`);
+  console.log(`   SW intercepted:      ${swResources.length}`);
+  console.log(`   Not intercepted:     ${notIntercepted.length}`);
+
+  if (swResources.length > 0) {
+    const hitRate = ((fromCache.length / swResources.length) * 100).toFixed(1);
+    const savedKB = (
+      fromCache.reduce((sum, r) => sum + (r.encodedBodySize || 0), 0) / 1024
+    ).toFixed(1);
+
+    console.log('');
+    console.log('   SW-intercepted breakdown:');
+    console.log(`   ├─ Served from cache:   ${fromCache.length} (${hitRate}% hit rate)`);
+    console.log(`   └─ Fetched from network: ${fromNetwork.length}`);
+    console.log(`   Network bytes saved: ~${savedKB} KB`);
+
+    const rate = parseFloat(hitRate);
+    if (rate >= 80) {
+      console.log('%c   🟢 Excellent cache hit rate', 'color: #22c55e;');
+    } else if (rate >= 50) {
+      console.log('%c   🟡 Good cache hit rate', 'color: #f59e0b;');
+    } else {
+      console.log(
+        '%c   🔴 Low cache hit rate — review caching strategy',
+        'color: #ef4444;'
+      );
+    }
+
+    console.log('');
+    console.log('%c📋 SW-intercepted Resources (top 20):', 'font-weight: bold;');
+    console.table(
+      swResources.slice(0, 20).map((r) => ({
+        'Cache': r.transferSize === 0 ? '✅ Cache' : '🌐 Network',
+        'Transfer (KB)': r.transferSize > 0 ? (r.transferSize / 1024).toFixed(1) : '0',
+        'Duration (ms)': r.duration.toFixed(0),
+        'Type': r.initiatorType,
+        'URL': r.name.length > 60 ? '...' + r.name.slice(-57) : r.name,
+      }))
+    );
+  }
+
+  // Cache Storage inventory
+  if ('caches' in window) {
+    try {
+      const cacheNames = await caches.keys();
+      if (cacheNames.length > 0) {
+        console.log('');
+        console.log('%c💾 Cache Storage:', 'font-weight: bold;');
+        let totalEntries = 0;
+        for (const name of cacheNames) {
+          const cache = await caches.open(name);
+          const keys = await cache.keys();
+          totalEntries += keys.length;
+          console.log(`   ├─ "${name}": ${keys.length} entries`);
+        }
+        console.log(`   Total entries: ${totalEntries}`);
+      }
+    } catch {
+      // Cross-origin restrictions may prevent cache access
+    }
+  }
+
+  console.groupEnd();
+})();

package/snippets/Loading/TTFB-Resources.js

@@ -0,0 +1,115 @@
+// Measure TTFB for all resources with sorting and summary
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  new PerformanceObserver((entryList) => {
+  const entries = entryList.getEntries();
+
+  const resourcesData = entries
+    .filter((entry) => entry.responseStart > 0)
+    .map((entry) => {
+      const url = new URL(entry.name);
+      const isThirdParty = url.hostname !== location.hostname;
+
+      return {
+        ttfb: entry.responseStart,
+        duration: entry.duration,
+        type: entry.initiatorType,
+        thirdParty: isThirdParty,
+        resource: entry.name.length > 70 ? "..." + entry.name.slice(-67) : entry.name,
+        fullUrl: entry.name,
+      };
+    })
+    .sort((a, b) => b.ttfb - a.ttfb);
+
+  if (resourcesData.length === 0) {
+    console.log("%c⚠️ No resources with TTFB data available", "color: #f59e0b;");
+    console.log("Resources may be cached or missing Timing-Allow-Origin header.");
+    return;
+  }
+
+  // Summary statistics
+  const ttfbValues = resourcesData.map((r) => r.ttfb);
+  const avgTtfb = ttfbValues.reduce((a, b) => a + b, 0) / ttfbValues.length;
+  const maxTtfb = Math.max(...ttfbValues);
+  const minTtfb = Math.min(...ttfbValues);
+  const thirdPartyCount = resourcesData.filter((r) => r.thirdParty).length;
+  const slowResources = resourcesData.filter((r) => r.ttfb > 500).length;
+
+  console.group(`%c📊 Resource TTFB Analysis (${resourcesData.length} resources)`, "font-weight: bold; font-size: 14px;");
+
+  // Summary
+  console.log("");
+  console.log("%cSummary:", "font-weight: bold;");
+  console.log(`   Average TTFB: ${avgTtfb.toFixed(0)}ms`);
+  console.log(`   Fastest: ${minTtfb.toFixed(0)}ms | Slowest: ${maxTtfb.toFixed(0)}ms`);
+  console.log(`   Third-party resources: ${thirdPartyCount}`);
+  if (slowResources > 0) {
+    console.log(`%c   ⚠️ Slow resources (>500ms): ${slowResources}`, "color: #f59e0b;");
+  }
+
+  // Table (sorted by TTFB, slowest first)
+  console.log("");
+  console.log("%cResources (sorted by TTFB, slowest first):", "font-weight: bold;");
+  const tableData = resourcesData.slice(0, 25).map((resource) => ({
+    "TTFB (ms)": resource.ttfb.toFixed(0),
+    "Duration (ms)": resource.duration.toFixed(0),
+    Type: resource.type,
+    "3rd Party": resource.thirdParty ? "Yes" : "",
+    Resource: resource.resource,
+  }));
+  console.table(tableData);
+
+  if (resourcesData.length > 25) {
+    console.log(`... and ${resourcesData.length - 25} more resources`);
+  }
+
+  // Slowest resources highlight
+  const slowest = resourcesData.slice(0, 5);
+  if (slowest[0].ttfb > 500) {
+    console.log("");
+    console.log("%c🐌 Slowest resources:", "color: #ef4444; font-weight: bold;");
+    slowest.forEach((r, i) => {
+      const marker = r.thirdParty ? " [3rd party]" : "";
+      console.log(`   ${i + 1}. ${r.ttfb.toFixed(0)}ms - ${r.type}${marker}: ${r.resource}`);
+    });
+  }
+
+  console.groupEnd();
+  }).observe({
+    type: "resource",
+    buffered: true,
+  });
+
+  // Synchronous return for agent
+  const resourcesSync = performance.getEntriesByType("resource")
+    .filter((entry) => entry.responseStart > 0)
+    .map((entry) => {
+      const url = new URL(entry.name);
+      return {
+        url: entry.name,
+        ttfbMs: Math.round(entry.responseStart),
+        durationMs: Math.round(entry.duration),
+        type: entry.initiatorType,
+        isThirdParty: url.hostname !== location.hostname,
+      };
+    })
+    .sort((a, b) => b.ttfbMs - a.ttfbMs);
+  if (resourcesSync.length === 0) {
+    return { script: "TTFB-Resources", status: "error", error: "No resources with TTFB data available" };
+  }
+  const ttfbVals = resourcesSync.map((r) => r.ttfbMs);
+  return {
+    script: "TTFB-Resources",
+    status: "ok",
+    count: resourcesSync.length,
+    details: {
+      avgTtfbMs: Math.round(ttfbVals.reduce((a, b) => a + b, 0) / ttfbVals.length),
+      maxTtfbMs: Math.max(...ttfbVals),
+      minTtfbMs: Math.min(...ttfbVals),
+      thirdPartyCount: resourcesSync.filter((r) => r.isThirdParty).length,
+      slowCount: resourcesSync.filter((r) => r.ttfbMs > 500).length,
+    },
+    items: resourcesSync,
+  };
+})();

package/snippets/Loading/TTFB-Sub-Parts.js

@@ -0,0 +1,117 @@
+// Measure TTFB sub-parts breakdown
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  new PerformanceObserver((entryList) => {
+    const [pageNav] = entryList.getEntriesByType("navigation");
+
+    const activationStart = pageNav.activationStart || 0;
+    const waitEnd = Math.max((pageNav.workerStart || pageNav.fetchStart) - activationStart, 0);
+    const dnsStart = Math.max(pageNav.domainLookupStart - activationStart, 0);
+    const tcpStart = Math.max(pageNav.connectStart - activationStart, 0);
+    const sslStart = Math.max(pageNav.secureConnectionStart - activationStart, 0);
+    const tcpEnd = Math.max(pageNav.connectEnd - activationStart, 0);
+    const responseStart = Math.max(pageNav.responseStart - activationStart, 0);
+
+    const formatMs = (ms) => ms.toFixed(2) + " ms";
+    const formatBar = (ms, total) => {
+      const pct = total > 0 ? (ms / total) * 100 : 0;
+      const width = Math.round(pct / 5);
+      return "█".repeat(width) + "░".repeat(20 - width) + ` ${pct.toFixed(1)}%`;
+    };
+
+    // Rating
+    let rating, color;
+    if (responseStart <= 800) {
+      rating = "Good";
+      color = "#22c55e";
+    } else if (responseStart <= 1800) {
+      rating = "Needs Improvement";
+      color = "#f59e0b";
+    } else {
+      rating = "Poor";
+      color = "#ef4444";
+    }
+
+    console.group(`%c⏱️ TTFB: ${responseStart.toFixed(0)}ms (${rating})`, `color: ${color}; font-weight: bold; font-size: 14px;`);
+
+    // Sub-parts breakdown
+    const subParts = [
+      { name: "Redirect/Wait", duration: waitEnd, icon: "🔄" },
+      { name: "Service Worker/Cache", duration: dnsStart - waitEnd, icon: "⚙️" },
+      { name: "DNS Lookup", duration: tcpStart - dnsStart, icon: "🔍" },
+      { name: "TCP Connection", duration: sslStart - tcpStart, icon: "🔌" },
+      { name: "SSL/TLS", duration: tcpEnd - sslStart, icon: "🔒" },
+      { name: "Server Response", duration: responseStart - tcpEnd, icon: "📥" },
+    ];
+
+    console.log("");
+    console.log("%cBreakdown:", "font-weight: bold;");
+    subParts.forEach(({ name, duration, icon }) => {
+      if (duration > 0) {
+        console.log(`${icon} ${name.padEnd(20)} ${formatMs(duration).padStart(10)}  ${formatBar(duration, responseStart)}`);
+      }
+    });
+
+    console.log("");
+    console.log(`%c${"─".repeat(60)}`, "color: #666;");
+    console.log(`%c📊 Total TTFB${" ".repeat(15)} ${formatMs(responseStart).padStart(10)}`, "font-weight: bold;");
+
+    // Recommendations based on longest phase
+    const longestPhase = subParts.reduce((a, b) => (a.duration > b.duration ? a : b));
+    if (longestPhase.duration > responseStart * 0.4 && responseStart > 800) {
+      console.log("");
+      console.log("%c💡 Recommendation:", "color: #3b82f6; font-weight: bold;");
+      const tips = {
+        "Redirect/Wait": "Minimize redirects. Use direct URLs where possible.",
+        "Service Worker/Cache": "Optimize service worker. Consider cache-first strategies.",
+        "DNS Lookup": "Use DNS prefetching. Consider a faster DNS provider.",
+        "TCP Connection": "Enable HTTP/2 or HTTP/3. Use connection keep-alive.",
+        "SSL/TLS": "Enable TLS 1.3. Use session resumption. Check certificate chain.",
+        "Server Response": "Optimize server processing. Add caching. Check database queries.",
+      };
+      console.log(`   ${longestPhase.name} is ${((longestPhase.duration / responseStart) * 100).toFixed(0)}% of TTFB.`);
+      console.log(`   ${tips[longestPhase.name]}`);
+    }
+
+    console.groupEnd();
+  }).observe({
+    type: "navigation",
+    buffered: true,
+  });
+
+  // Synchronous return for agent
+  const [navSync] = performance.getEntriesByType("navigation");
+  if (!navSync) return { script: "TTFB-Sub-Parts", status: "error", error: "No navigation entry" };
+  const activStartSync = navSync.activationStart || 0;
+  const ttfbValueSync = Math.max(0, navSync.responseStart - activStartSync);
+  const value = Math.round(ttfbValueSync);
+  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
+  const waitEndSync = Math.max((navSync.workerStart || navSync.fetchStart) - activStartSync, 0);
+  const dnsStartSync = Math.max(navSync.domainLookupStart - activStartSync, 0);
+  const tcpStartSync = Math.max(navSync.connectStart - activStartSync, 0);
+  const sslStartSync = Math.max(navSync.secureConnectionStart - activStartSync, 0);
+  const tcpEndSync = Math.max(navSync.connectEnd - activStartSync, 0);
+  const subPartsSync = [
+    { key: "redirectWait", duration: waitEndSync },
+    { key: "serviceWorkerCache", duration: dnsStartSync - waitEndSync },
+    { key: "dnsLookup", duration: tcpStartSync - dnsStartSync },
+    { key: "tcpConnection", duration: sslStartSync - tcpStartSync },
+    { key: "sslTls", duration: tcpEndSync - sslStartSync },
+    { key: "serverResponse", duration: ttfbValueSync - tcpEndSync },
+  ];
+  const slowestSync = subPartsSync.reduce((a, b) => a.duration > b.duration ? a : b);
+  return {
+    script: "TTFB-Sub-Parts",
+    status: "ok",
+    metric: "TTFB",
+    value,
+    unit: "ms",
+    rating,
+    thresholds: { good: 800, needsImprovement: 1800 },
+    details: {
+      subParts: Object.fromEntries(subPartsSync.map((p) => [p.key, { value: Math.round(p.duration), unit: "ms" }])),
+      slowestPhase: slowestSync.key,
+    },
+  };
+})();

package/snippets/Loading/TTFB.js

@@ -0,0 +1,37 @@
+// Measure TTFB with threshold indicator
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  new PerformanceObserver((entryList) => {
+    const [pageNav] = entryList.getEntriesByType("navigation");
+    const ttfb = pageNav.responseStart;
+
+    let rating, color;
+    if (ttfb <= 800) {
+      rating = "Good";
+      color = "#22c55e";
+    } else if (ttfb <= 1800) {
+      rating = "Needs Improvement";
+      color = "#f59e0b";
+    } else {
+      rating = "Poor";
+      color = "#ef4444";
+    }
+
+    console.log(
+      `%cTTFB: ${ttfb.toFixed(0)}ms (${rating})`,
+      `color: ${color}; font-weight: bold; font-size: 14px;`
+    );
+  }).observe({
+    type: "navigation",
+    buffered: true,
+  });
+
+  // Synchronous return for agent
+  const [nav] = performance.getEntriesByType("navigation");
+  if (!nav) return { script: "TTFB", status: "error", error: "No navigation entry" };
+  const value = Math.round(nav.responseStart);
+  const rating = value <= 800 ? "good" : value <= 1800 ? "needs-improvement" : "poor";
+  return { script: "TTFB", status: "ok", metric: "TTFB", value, unit: "ms", rating,
+    thresholds: { good: 800, needsImprovement: 1800 } };
+})();