webperf-snippets 0.1.0

package/snippets/Loading/Fonts-Preloaded-Loaded-and-used-above-the-fold.js

@@ -0,0 +1,317 @@
+// Font Loading Analysis - Preloaded, Loaded, and Used Above The Fold
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  // Helper to extract font filename from URL
+  function getFontName(url) {
+    try {
+      const path = new URL(url).pathname;
+      return path.split("/").pop() || path;
+    } catch {
+      return url;
+    }
+  }
+
+  // Check if URL is third-party
+  function isThirdParty(url) {
+    try {
+      return new URL(url).hostname !== location.hostname;
+    } catch {
+      return false;
+    }
+  }
+
+  // Normalize font family name for comparison
+  function normalizeFontFamily(family) {
+    return family
+      .split(",")[0]
+      .trim()
+      .replace(/["']/g, "")
+      .toLowerCase();
+  }
+
+  // 1. Get preloaded fonts
+  const preloadedFonts = Array.from(
+    document.querySelectorAll('link[rel="preload"][as="font"]')
+  ).map((link) => ({
+    href: link.href,
+    name: getFontName(link.href),
+    crossorigin: link.crossOrigin,
+    type: link.type || "unknown",
+    thirdParty: isThirdParty(link.href),
+  }));
+
+  // 2. Get loaded fonts from document.fonts API
+  const loadedFonts = Array.from(document.fonts.values())
+    .filter((font) => font.status === "loaded")
+    .map((font) => ({
+      family: font.family.replace(/["']/g, ""),
+      weight: font.weight,
+      style: font.style,
+      display: font.display || "unknown",
+      key: `${font.family.replace(/["']/g, "")}-${font.weight}-${font.style}`,
+    }));
+
+  // Deduplicate loaded fonts
+  const uniqueLoadedFonts = Array.from(
+    new Map(loadedFonts.map((f) => [f.key, f])).values()
+  );
+
+  // 3. Get fonts used above the fold
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+
+  const aboveFoldElements = Array.from(
+    document.querySelectorAll("body *:not(script):not(style):not(link):not(source)")
+  ).filter((el) => {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.top < viewportHeight &&
+      rect.bottom > 0 &&
+      rect.left < viewportWidth &&
+      rect.right > 0 &&
+      rect.width > 0 &&
+      rect.height > 0
+    );
+  });
+
+  const usedFontsMap = new Map();
+  aboveFoldElements.forEach((el) => {
+    const style = getComputedStyle(el);
+    const family = style.fontFamily;
+    const weight = style.fontWeight;
+    const fontStyle = style.fontStyle;
+    const key = `${family}-${weight}-${fontStyle}`;
+
+    if (!usedFontsMap.has(key)) {
+      usedFontsMap.set(key, {
+        family: family.split(",")[0].trim().replace(/["']/g, ""),
+        fullFamily: family,
+        weight,
+        style: fontStyle,
+        elements: 1,
+      });
+    } else {
+      usedFontsMap.get(key).elements++;
+    }
+  });
+
+  const usedFonts = Array.from(usedFontsMap.values());
+
+  // 4. Analysis - find mismatches
+  const preloadedNames = preloadedFonts.map((f) =>
+    normalizeFontFamily(f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, ""))
+  );
+
+  const usedFamilies = usedFonts.map((f) => normalizeFontFamily(f.family));
+
+  // Fonts preloaded but not used above the fold
+  const preloadedNotUsed = preloadedFonts.filter((f) => {
+    const name = normalizeFontFamily(
+      f.name.replace(/\.(woff2?|ttf|otf|eot)$/i, "")
+    );
+    return !usedFamilies.some(
+      (used) => used.includes(name) || name.includes(used)
+    );
+  });
+
+  // Fonts used but not preloaded (potential optimization)
+  const usedNotPreloaded = usedFonts.filter((f) => {
+    const family = normalizeFontFamily(f.family);
+    // Exclude system fonts
+    const systemFonts = [
+      "arial",
+      "helvetica",
+      "times",
+      "georgia",
+      "verdana",
+      "system-ui",
+      "-apple-system",
+      "segoe ui",
+      "roboto",
+      "sans-serif",
+      "serif",
+      "monospace",
+    ];
+    if (systemFonts.some((sf) => family.includes(sf))) return false;
+    return !preloadedNames.some(
+      (preloaded) => preloaded.includes(family) || family.includes(preloaded)
+    );
+  });
+
+  // Display results
+  console.group("%c🔤 Font Loading Analysis", "font-weight: bold; font-size: 14px;");
+
+  // Summary
+  console.log("");
+  console.log("%cSummary:", "font-weight: bold;");
+  console.log(`   Preloaded fonts: ${preloadedFonts.length}`);
+  console.log(`   Loaded fonts: ${uniqueLoadedFonts.length}`);
+  console.log(`   Used above the fold: ${usedFonts.length}`);
+
+  // Preloaded fonts
+  console.log("");
+  console.group(
+    `%c⬇️ Preloaded Fonts (${preloadedFonts.length})`,
+    "color: #8b5cf6; font-weight: bold;"
+  );
+
+  if (preloadedFonts.length === 0) {
+    console.log("No fonts preloaded via <link rel='preload'>.");
+  } else {
+    const preloadTable = preloadedFonts.map((f) => ({
+      Font: f.name,
+      Type: f.type,
+      "Third-Party": f.thirdParty ? "Yes" : "No",
+      Crossorigin: f.crossorigin || "missing ⚠️",
+    }));
+    console.table(preloadTable);
+
+    // Check for missing crossorigin
+    const missingCrossorigin = preloadedFonts.filter((f) => !f.crossorigin);
+    if (missingCrossorigin.length > 0) {
+      console.log(
+        "%c⚠️ Fonts preloaded without crossorigin attribute will be fetched twice!",
+        "color: #f59e0b;"
+      );
+    }
+  }
+  console.groupEnd();
+
+  // Loaded fonts
+  console.log("");
+  console.group(
+    `%c📦 Loaded Fonts (${uniqueLoadedFonts.length})`,
+    "color: #3b82f6; font-weight: bold;"
+  );
+
+  if (uniqueLoadedFonts.length === 0) {
+    console.log("No web fonts loaded (using system fonts only).");
+  } else {
+    const loadedTable = uniqueLoadedFonts.map((f) => ({
+      Family: f.family,
+      Weight: f.weight,
+      Style: f.style,
+      Display: f.display,
+    }));
+    console.table(loadedTable);
+
+    // Check font-display
+    const autoDisplay = uniqueLoadedFonts.filter(
+      (f) => f.display === "auto" || f.display === "unknown"
+    );
+    if (autoDisplay.length > 0) {
+      console.log(
+        `%c💡 ${autoDisplay.length} font(s) using default font-display. Consider using 'swap' or 'optional'.`,
+        "color: #f59e0b;"
+      );
+    }
+  }
+  console.groupEnd();
+
+  // Used above the fold
+  console.log("");
+  console.group(
+    `%c👁️ Fonts Used Above The Fold (${usedFonts.length})`,
+    "color: #22c55e; font-weight: bold;"
+  );
+
+  if (usedFonts.length === 0) {
+    console.log("No text elements found above the fold.");
+  } else {
+    const usedTable = usedFonts
+      .sort((a, b) => b.elements - a.elements)
+      .map((f) => ({
+        Family: f.family,
+        Weight: f.weight,
+        Style: f.style,
+        "Elements Using": f.elements,
+      }));
+    console.table(usedTable);
+  }
+  console.groupEnd();
+
+  // Issues and recommendations
+  const hasIssues = preloadedNotUsed.length > 0 || usedNotPreloaded.length > 0;
+
+  if (hasIssues) {
+    console.log("");
+    console.group("%c⚠️ Potential Issues", "color: #ef4444; font-weight: bold;");
+
+    if (preloadedNotUsed.length > 0) {
+      console.log("");
+      console.log(
+        `%c🗑️ Preloaded but NOT used above the fold (${preloadedNotUsed.length}):`,
+        "font-weight: bold;"
+      );
+      console.log("   These preloads may be wasting bandwidth:");
+      preloadedNotUsed.forEach((f) => {
+        console.log(`   • ${f.name}`);
+      });
+      console.log("");
+      console.log("   Consider:");
+      console.log("   • Removing the preload if font is only used below the fold");
+      console.log("   • The font may be for a different viewport/breakpoint");
+    }
+
+    if (usedNotPreloaded.length > 0) {
+      console.log("");
+      console.log(
+        `%c🚀 Used above the fold but NOT preloaded (${usedNotPreloaded.length}):`,
+        "font-weight: bold;"
+      );
+      console.log("   These fonts could benefit from preloading:");
+      usedNotPreloaded.forEach((f) => {
+        console.log(`   • ${f.family} (${f.weight})`);
+      });
+      console.log("");
+      console.log("%cExample preload:", "font-weight: bold;");
+      console.log(
+        '%c<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>',
+        "font-family: monospace; color: #22c55e;"
+      );
+    }
+
+    console.groupEnd();
+  } else if (preloadedFonts.length > 0 && usedFonts.length > 0) {
+    console.log("");
+    console.log(
+      "%c✅ Font loading looks optimized! Preloaded fonts match usage above the fold.",
+      "color: #22c55e; font-weight: bold;"
+    );
+  }
+
+  // Best practices
+  console.log("");
+  console.group("%c📝 Font Loading Best Practices", "color: #3b82f6; font-weight: bold;");
+  console.log("");
+  console.log("1. Preload critical fonts used above the fold");
+  console.log("2. Use font-display: swap or optional");
+  console.log("3. Always include crossorigin attribute on font preloads");
+  console.log("4. Self-host fonts when possible for better control");
+  console.log("5. Subset fonts to include only needed characters");
+  console.log("6. Use WOFF2 format for best compression");
+  console.groupEnd();
+
+  console.groupEnd();
+
+  return {
+    script: "Fonts-Preloaded-Loaded-and-used-above-the-fold",
+    status: "ok",
+    count: uniqueLoadedFonts.length,
+    details: {
+      preloadedCount: preloadedFonts.length,
+      loadedCount: uniqueLoadedFonts.length,
+      usedAboveFoldCount: usedFonts.length,
+      preloadedNotUsedCount: preloadedNotUsed.length,
+      usedNotPreloadedCount: usedNotPreloaded.length,
+    },
+    items: uniqueLoadedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
+  usedFonts: usedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
+    issues: [
+      ...preloadedNotUsed.map(f => ({ severity: "warning", message: `Preloaded but not used above fold: ${f.name}` })),
+      ...usedNotPreloaded.map(f => ({ severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})` })),
+      ...preloadedFonts.filter(f => !f.crossorigin).map(f => ({ severity: "error", message: `Font preloaded without crossorigin (double fetch): ${f.name}` })),
+    ],
+  };
+})();

package/snippets/Loading/Inline-CSS-Info-and-Size.js

@@ -0,0 +1,234 @@
+// Inline CSS Analysis - Find and analyze all inline style tags
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatBytes = (bytes) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  };
+
+  const formatKB = (bytes) => (bytes / 1024).toFixed(2);
+
+  // Get all inline style tags
+  const styleTags = Array.from(document.querySelectorAll("style"));
+
+  if (styleTags.length === 0) {
+    console.group("%c📝 Inline CSS Analysis", "font-weight: bold; font-size: 14px;");
+    console.log("%c✅ No inline <style> tags found.", "color: #22c55e; font-weight: bold;");
+    console.log("The page uses external stylesheets only.");
+    console.groupEnd();
+    return { script: "Inline-CSS-Info-and-Size", status: "ok", count: 0, items: [], issues: [] };
+  }
+
+  // Analyze each style tag
+  const styles = styleTags.map((style, index) => {
+    const content = style.innerHTML;
+    const size = new Blob([content]).size;
+    const parent = style.parentElement?.tagName.toLowerCase() || "unknown";
+    const inHead = style.closest("head") !== null;
+
+    // Count approximate number of rules
+    const ruleCount = (content.match(/\{[^}]*\}/g) || []).length;
+
+    // Get preview (first 100 chars, cleaned up)
+    const preview = content
+      .replace(/\s+/g, " ")
+      .trim()
+      .slice(0, 80);
+
+    // Check for media queries
+    const hasMediaQueries = /@media/i.test(content);
+
+    // Check for keyframes (animation)
+    const hasKeyframes = /@keyframes/i.test(content);
+
+    return {
+      index: index + 1,
+      element: style,
+      size,
+      sizeKB: formatKB(size),
+      parent,
+      inHead,
+      ruleCount,
+      preview: preview + (content.length > 80 ? "..." : ""),
+      hasMediaQueries,
+      hasKeyframes,
+      content,
+    };
+  });
+
+  // Calculate totals and find issues
+  const totalSize = styles.reduce((sum, s) => sum + s.size, 0);
+  const totalRules = styles.reduce((sum, s) => sum + s.ruleCount, 0);
+  const criticalBudget = 14 * 1024; // 14 KB
+
+  // Find duplicated content
+  const contentMap = new Map();
+  styles.forEach((s) => {
+    const normalized = s.content.replace(/\s+/g, " ").trim();
+    if (!contentMap.has(normalized)) {
+      contentMap.set(normalized, []);
+    }
+    contentMap.get(normalized).push(s.index);
+  });
+  const duplicates = Array.from(contentMap.entries())
+    .filter(([, indices]) => indices.length > 1)
+    .map(([, indices]) => indices);
+
+  // Rating based on total size
+  let rating, ratingColor;
+  if (totalSize <= criticalBudget * 0.5) {
+    rating = "Good";
+    ratingColor = "#22c55e";
+  } else if (totalSize <= criticalBudget) {
+    rating = "Acceptable";
+    ratingColor = "#f59e0b";
+  } else {
+    rating = "Too Large";
+    ratingColor = "#ef4444";
+  }
+
+  // Display results
+  console.group("%c📝 Inline CSS Analysis", "font-weight: bold; font-size: 14px;");
+
+  // Summary
+  console.log("");
+  console.log("%cSummary:", "font-weight: bold;");
+  console.log(`   Total inline <style> tags: ${styles.length}`);
+  console.log(`   Total size: ${formatBytes(totalSize)} (${formatKB(totalSize)} KB)`);
+  console.log(`   Total CSS rules: ~${totalRules}`);
+  console.log(
+    `   Budget used: ${((totalSize / criticalBudget) * 100).toFixed(0)}% of 14 KB`
+  );
+  console.log(`   Rating: %c${rating}`, `color: ${ratingColor}; font-weight: bold;`);
+
+  // Visual budget bar
+  const budgetPct = Math.min((totalSize / criticalBudget) * 100, 100);
+  const barWidth = Math.round(budgetPct / 5);
+  const bar = "█".repeat(barWidth) + "░".repeat(20 - barWidth);
+  console.log(`   [${bar}] ${budgetPct.toFixed(0)}%`);
+
+  // Details table
+  console.log("");
+  console.group(
+    `%c📊 Style Tags (${styles.length})`,
+    "color: #3b82f6; font-weight: bold;"
+  );
+
+  const tableData = styles.map((s) => ({
+    "#": s.index,
+    Location: s.inHead ? "head" : "body",
+    Size: formatBytes(s.size),
+    Rules: s.ruleCount,
+    "Media Queries": s.hasMediaQueries ? "Yes" : "-",
+    Animations: s.hasKeyframes ? "Yes" : "-",
+    Preview: s.preview,
+  }));
+  console.table(tableData);
+
+  // Elements for inspection
+  console.log("");
+  console.log("%c🔎 Elements for inspection:", "font-weight: bold;");
+  styles.forEach((s) => {
+    const warning = s.size > 5 * 1024 ? " ⚠️ Large" : "";
+    console.log(`${s.index}. (${formatBytes(s.size)})${warning}`, s.element);
+  });
+
+  console.groupEnd();
+
+  // Issues
+  const issues = [];
+
+  if (totalSize > criticalBudget) {
+    issues.push({
+      type: "size",
+      message: `Total inline CSS (${formatBytes(totalSize)}) exceeds 14 KB critical budget`,
+      suggestion: "Move non-critical styles to external stylesheet",
+    });
+  }
+
+  if (duplicates.length > 0) {
+    issues.push({
+      type: "duplicate",
+      message: `Found ${duplicates.length} duplicated style block(s)`,
+      details: duplicates.map((d) => `Tags #${d.join(", #")} have identical content`),
+      suggestion: "Consolidate duplicate styles into a single block",
+    });
+  }
+
+  const largeBlocks = styles.filter((s) => s.size > 5 * 1024);
+  if (largeBlocks.length > 0) {
+    issues.push({
+      type: "large",
+      message: `${largeBlocks.length} style block(s) over 5 KB`,
+      details: largeBlocks.map((s) => `Tag #${s.index}: ${formatBytes(s.size)}`),
+      suggestion: "Consider moving large blocks to external cached stylesheets",
+    });
+  }
+
+  const bodyStyles = styles.filter((s) => !s.inHead);
+  if (bodyStyles.length > 0) {
+    issues.push({
+      type: "location",
+      message: `${bodyStyles.length} style block(s) in <body>`,
+      details: bodyStyles.map((s) => `Tag #${s.index}`),
+      suggestion: "Move styles to <head> or use external stylesheets for better parsing",
+    });
+  }
+
+  if (issues.length > 0) {
+    console.log("");
+    console.group("%c⚠️ Issues Found", "color: #ef4444; font-weight: bold;");
+
+    issues.forEach((issue) => {
+      console.log("");
+      console.log(`%c${issue.message}`, "font-weight: bold;");
+      if (issue.details) {
+        issue.details.forEach((d) => console.log(`   • ${d}`));
+      }
+      console.log(`   → ${issue.suggestion}`);
+    });
+
+    console.groupEnd();
+  } else {
+    console.log("");
+    console.log(
+      "%c✅ No issues found. Inline CSS is within recommended limits.",
+      "color: #22c55e; font-weight: bold;"
+    );
+  }
+
+  // Recommendations
+  console.log("");
+  console.group("%c📝 Best Practices", "color: #3b82f6; font-weight: bold;");
+  console.log("");
+  console.log("• Keep critical CSS under 14 KB (fits in first TCP round-trip)");
+  console.log("• Inline only above-the-fold critical styles");
+  console.log("• Move large stylesheets to external files for caching");
+  console.log("• Avoid duplicate style blocks");
+  console.log("• Place <style> tags in <head> for optimal parsing");
+  console.log("");
+  console.log("%cExample critical CSS pattern:", "font-weight: bold;");
+  console.log('%c<head>\n  <style>/* Critical above-fold CSS here */</style>\n  <link rel="preload" href="main.css" as="style">\n  <link rel="stylesheet" href="main.css" media="print" onload="this.media=\'all\'">\n</head>', "font-family: monospace; color: #22c55e;");
+  console.groupEnd();
+
+  console.groupEnd();
+
+  return {
+    script: "Inline-CSS-Info-and-Size",
+    status: "ok",
+    count: styles.length,
+    details: {
+      totalSizeBytes: totalSize,
+      totalRules,
+      criticalBudgetBytes: criticalBudget,
+      duplicateBlocks: duplicates.length,
+      bodyStyleBlocks: styles.filter(s => !s.inHead).length,
+    },
+    items: styles.map(s => ({ index: s.index, sizeBytes: s.size, parent: s.parent, inHead: s.inHead, ruleCount: s.ruleCount, hasMediaQueries: s.hasMediaQueries, hasKeyframes: s.hasKeyframes })),
+    issues: issues.map(i => ({ severity: "warning", message: i.message })),
+  };
+})();