Merge pull request #70 from nucliweb/consistency-ci-docs

Refine Loading snippets consistency

Author: nucliweb

scripts/generate-skills.js

@@ -218,13 +218,6 @@ function extractThresholds(content) {
   return ''
 }
 
-// Strip internal relative links (e.g. /CoreWebVitals/LCP-Sub-Parts) from markdown link text
-function cleanLinks(text) {
-  return text
-    .replace(/\[([^\]]+)\]\(\/[^)]+\)/g, '$1')  // remove internal links, keep text
-    .replace(/\[([^\]]+)\]\((https?:[^)]+)\)/g, '[$1]($2)')  // keep external links
-}
-
 // Build metadata for a single snippet JS file
 function buildSnippetMeta(category, snippetFile) {
   const basename = path.basename(snippetFile, '.js')

scripts/install-global.js

@@ -25,7 +25,7 @@ function main() {
   console.log('1️⃣  Generating skills...')
   try {
     execSync('node scripts/generate-skills.js', { cwd: ROOT, stdio: 'inherit' })
-  } catch (error) {
+  } catch {
     console.error('❌ Failed to generate skills')
     process.exit(1)
   }

scripts/install-skills.js

@@ -26,7 +26,7 @@ function main() {
   console.log('1️⃣  Generating skills...')
   try {
     execSync('node scripts/generate-skills.js', { cwd: ROOT, stdio: 'inherit' })
-  } catch (error) {
+  } catch {
     console.error('❌ Failed to generate skills')
     process.exit(1)
   }

snippets/Loading/Back-Forward-Cache.js

@@ -412,7 +412,7 @@
 
   // Initialize
   checkRestoration();
-  const eligibility = testEligibility();
+  testEligibility();
 
   // Display after a short delay to ensure pageshow event fires
   setTimeout(() => {

snippets/Loading/CSS-Media-Queries-Analysis.js

@@ -142,14 +142,14 @@ async function analyzeCSSMediaQueries(minWidth = 768) {
           }
         });
       }
-    } catch (e) {
+    } catch {
       // If CORS blocked, try to fetch the CSS
       if (sheet.href) {
         try {
           const response = await fetch(sheet.href);
           const cssText = await response.text();
           parseMediaQueriesFromCSS(cssText, sheet.href, false);
-        } catch (fetchError) {
+        } catch {
           // Silently count CORS blocked files
           corsBlockedCount++;
         }
@@ -485,6 +485,8 @@ async function analyzeCSSPerformanceImpact(minWidth = 768) {
   };
 }
 
+window.analyzeCSSPerformanceImpact = analyzeCSSPerformanceImpact;
+
 // Run with default breakpoint (768px)
 (async () => {
   const result = await analyzeCSSMediaQueries();

snippets/Loading/Client-Side-Redirect-Detection.js

@@ -207,8 +207,6 @@
   // Recommendations
   const hasDocumentNavigation = documentNavigations.length > 0;
   const hasSameOriginRedirect = sameOrigin && referrerPath !== currentPath && referrerPath !== '';
-  const hasHighImpact = hasDocumentNavigation && documentNavigations.reduce((sum, nav) => sum + nav.duration, 0) > 1000;
-
   if (hasDocumentNavigation || serverRedirects > 0) {
     console.log('');
     console.log('%c💡 Recommendations:', 'font-weight: bold;');

snippets/Loading/Content-Visibility.js

@@ -36,7 +36,7 @@ function detectContentVisibility() {
         if (el.id) break;
         node = el.parentNode;
       }
-    } catch (err) {
+    } catch {
       // Do nothing...
     }
     return sel;
@@ -188,7 +188,7 @@ function analyzeContentVisibilityOpportunities(options = {}) {
         if (el.id) break;
         node = el.parentNode;
       }
-    } catch (err) {}
+    } catch {}
     return sel;
   }
 
@@ -271,7 +271,13 @@ function analyzeContentVisibilityOpportunities(options = {}) {
     console.log("");
 
     // Show table without element reference
-    const tableData = opportunities.slice(0, 20).map(({ element, ...rest }) => rest);
+    const tableData = opportunities.slice(0, 20).map((opportunity) => ({
+      selector: opportunity.selector,
+      height: opportunity.height,
+      distanceFromViewport: opportunity.distanceFromViewport,
+      childElements: opportunity.childElements,
+      estimatedSavings: opportunity.estimatedSavings,
+    }));
     console.table(tableData);
 
     if (opportunities.length > 20) {
@@ -304,13 +310,21 @@ function analyzeContentVisibilityOpportunities(options = {}) {
   console.groupEnd();
 
   return {
-    opportunities: opportunities.map(({ element, ...rest }) => rest),
+    opportunities: opportunities.map((opportunity) => ({
+      selector: opportunity.selector,
+      height: opportunity.height,
+      distanceFromViewport: opportunity.distanceFromViewport,
+      childElements: opportunity.childElements,
+      estimatedSavings: opportunity.estimatedSavings,
+    })),
     totalElements: opportunities.length,
     highImpact: opportunities.filter((o) => o.estimatedSavings.startsWith("High")).length,
     elements: opportunities.map((o) => o.element),
   };
 }
 
+window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportunities;
+
 // Run detection
 (() => {
   const cvResults = detectContentVisibility();

snippets/Loading/Critical-CSS-Detection.js

@@ -57,7 +57,7 @@
         (s) => s.href === href
       );
       if (sheet && sheet.cssRules) ruleCount = sheet.cssRules.length;
-    } catch (_) {
+    } catch {
       corsBlocked = true;
     }
 

snippets/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.js

@@ -19,7 +19,7 @@
         if (el.id) break;
         node = el.parentNode;
       }
-    } catch (err) {}
+    } catch {}
     return sel;
   }
 
@@ -54,7 +54,7 @@
       if (entry && entry.transferSize) {
         return (entry.transferSize / 1024).toFixed(1) + " KB";
       }
-    } catch (err) {}
+    } catch {}
     return null;
   }
 
@@ -189,10 +189,19 @@
 
     // Table of all problematic images
     console.group("📋 Lazy Loaded Images in Viewport");
-    const tableData = results.lazyImages.map(({ element, area, position, ...rest }) => ({
-      ...rest,
-      top: position.top + "px",
-      isLcpCandidate: rest.isLcpCandidate ? "⚠️ YES" : "no"
+    const tableData = results.lazyImages.map((image) => ({
+      selector: image.selector,
+      lazyType: image.lazyType,
+      dimensions: image.dimensions,
+      top: image.position.top + "px",
+      distanceFromEdge: image.distanceFromEdge,
+      src: image.src,
+      srcset: image.srcset,
+      sizes: image.sizes,
+      alt: image.alt,
+      fetchPriority: image.fetchPriority,
+      fileSize: image.fileSize,
+      isLcpCandidate: image.isLcpCandidate ? "⚠️ YES" : "no",
     }));
     console.table(tableData);
     console.groupEnd();
@@ -233,7 +242,20 @@
       withDataSrc: results.summary.withDataSrc,
       lcpAffected: results.summary.lcpAffected,
     },
-    items: results.lazyImages.map(({ element, area, ...rest }) => rest),
+    items: results.lazyImages.map((image) => ({
+      selector: image.selector,
+      lazyType: image.lazyType,
+      dimensions: image.dimensions,
+      position: image.position,
+      distanceFromEdge: image.distanceFromEdge,
+      src: image.src,
+      srcset: image.srcset,
+      sizes: image.sizes,
+      alt: image.alt,
+      fetchPriority: image.fetchPriority,
+      fileSize: image.fileSize,
+      isLcpCandidate: image.isLcpCandidate,
+    })),
     issues: [
       ...(results.summary.lcpAffected ? [{ severity: "error", message: 'LCP candidate image has lazy loading — remove loading="lazy" and add fetchpriority="high"' }] : []),
       ...(results.lazyImages.filter(i => !i.isLcpCandidate).length > 0 ? [{ severity: "warning", message: `${results.lazyImages.filter(i => !i.isLcpCandidate).length} above-fold image(s) have lazy loading — remove loading="lazy"` }] : []),

snippets/Loading/Find-Images-With-Lazy-and-Fetchpriority.js

@@ -19,7 +19,7 @@
         if (el.id) break;
         node = el.parentNode;
       }
-    } catch (err) {}
+    } catch {}
     return sel;
   }
 
@@ -87,12 +87,18 @@
     });
 
     console.log("%c📋 Conflicting Elements:", "font-weight: bold;");
-    console.table(tableData.map(({ element, ...rest }) => rest));
+    console.table(tableData.map((item) => ({
+      selector: item.selector,
+      dimensions: item.dimensions,
+      inViewport: item.inViewport,
+      isLcpCandidate: item.isLcpCandidate,
+      src: item.src,
+    })));
 
     // Elements for inspection
     console.log("");
     console.log("%c🔎 Elements for inspection:", "font-weight: bold;");
-    tableData.forEach(({ element, selector, isLcpCandidate }, i) => {
+    tableData.forEach(({ element, isLcpCandidate }, i) => {
       const marker = isLcpCandidate === "⚠️ Yes" ? " 🚨 LCP" : "";
       console.log(`${i + 1}.${marker}`, element);
     });