SkillsAdd

nucliweb/webperf-snippets

webperf-loading

Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation. Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage. Features workflo…

First seen Mar 4, 2026

Installation

$ npx skills add nucliweb/webperf-snippets --skill webperf-loading
View on skills.sh ↗ GitHub repository ↗

Summary

  • Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation.
  • Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage.
  • Features workflows for complete loading audit (6 phases), backend performance investigation, and priority optimization.
  • Cross-skill integration with Core Web Vitals (LCP resource loading), Interaction (script execution blocking), and Media (lazy loading strategy).
  • Use when the user asks about TTFB, FCP, render-blocking, slow loading, font performance, script optimization, or resource hints.
  • Compatible with Chrome DevTools MCP.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

find-skills Same topic
vercel-labs/skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "fi…

3.3M installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-prepare Same topic
microsoft/azure-skills

Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Te…

568.3K installs

Also in this package

Other skills from nucliweb/webperf-snippets.

npx skills add nucliweb/webperf-snippets
webperf-core-web-vitals 241 webperf 217 webperf-media 210 webperf-interaction 207 webperf-resources 203

Browse all from nucliweb/webperf-snippets

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1.4K
License LICENSE
Default branch main
Open issues 8
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.2.0
LicenseMIT
More metadata
author
Joan Leon | @nucliweb
version
1.2.0
mcp-server
chrome-devtools
category
web-performance
repository
https://github.com/nucliweb/webperf-snippets

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 10,810 B
  • docs SUMMARY.md 936 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 214 installs

SKILL.md

WebPerf: Loading Performance

JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcpchrome-devtoolsevaluatescript, capture output with mcpchrome-devtoolsgetconsole_message.

Scripts

  • scripts/Back-Forward-Cache.js — Back Forward Cache
  • scripts/CSS-Media-Queries-Analysis.js — CSS Media Queries Analysis
  • scripts/Cache-Strategy-Analysis.js — Cache Strategy Analysis
  • scripts/Client-Side-Redirect-Detection.js — Client Side Redirect Detection
  • scripts/Content-Visibility.js — Content Visibility
  • scripts/Critical-CSS-Detection.js — Critical CSS Detection
  • scripts/Event-Processing-Time.js — Event Processing Time
  • scripts/FCP.js — First Contentful Paint (FCP)
  • scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js — Find Above The Fold Lazy Loaded Images
  • scripts/Find-Images-With-Lazy-and-Fetchpriority.js — Find Images With Loading Lazy and Fetchpriority
  • scripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js — Find non Lazy Loaded Images outside of the viewport
  • scripts/Find-render-blocking-resources.js — Find render-blocking resources
  • scripts/First-And-Third-Party-Script-Info.js — First And Third Party Script Info
  • scripts/First-And-Third-Party-Script-Timings.js — First And Third Party Script Timings
  • scripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js — Fonts Preloaded, Loaded, and Used Above The Fold
  • scripts/Inline-CSS-Info-and-Size.js — Inline CSS Info and Size
  • scripts/Inline-Script-Info-and-Size.js — Inline Script Info and Size
  • scripts/JS-Execution-Time-Breakdown.js — JavaScript Execution Time Breakdown
  • scripts/Prefetch-Resource-Validation.js — Prefetch Resource Validation
  • scripts/Priority-Hints-Audit.js — Priority Hints Audit
  • scripts/Resource-Hints-Validation.js — Resource Hints Validation
  • scripts/Resource-Hints.js — Resource Hints
  • scripts/SSR-Hydration-Data-Analysis.js — SSR Framework Hydration Data Analysis
  • scripts/Script-Loading.js — Scripts Loading
  • scripts/Service-Worker-Analysis.js — Service Worker Analysis
  • scripts/TTFB-Resources.js — Time To First Byte: Measure TTFB for all resources
  • scripts/TTFB-Sub-Parts.js — Time To First Byte: Measure TTFB sub-parts
  • scripts/TTFB.js — Time To First Byte: Measure the time to first byte
  • scripts/Validate-Preload-Async-Defer-Scripts.js — Validate Preload Async Defer Scripts

Common Workflows

Complete Loading Performance Audit

When the user asks for a comprehensive loading analysis or "audit loading performance":

  1. TTFB.js - Establish baseline server/network performance
  2. FCP.js - Check initial render timing
  3. Find-render-blocking-resources.js - Identify what's blocking rendering
  4. Critical-CSS-Detection.js - Validate CSS strategy
  5. Script-Loading.js - Audit script loading patterns
  6. Resource-Hints-Validation.js - Check optimization hints

Server/Backend Performance Investigation

When TTFB is slow or the user asks "why is my server slow":

  1. TTFB.js - Measure overall TTFB
  2. TTFB-Sub-Parts.js - Break down into DNS, connection, server time
  3. Service-Worker-Analysis.js - Check for SW overhead impacting TTFB
  4. TTFB-Resources.js - Identify slow third-party or API endpoints

Font Loading Optimization

When the user asks about fonts, FOIT, FOUT, or font performance:

  1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js - Full font audit
  2. Resource-Hints-Validation.js - Verify font preloads are correct
  3. Find-render-blocking-resources.js - Check if fonts block rendering

Script Performance Deep Dive

When scripts are suspected to slow down the page:

  1. Script-Loading.js - Identify blocking scripts and loading strategy
  2. First-And-Third-Party-Script-Info.js - Separate first vs third-party impact
  3. First-And-Third-Party-Script-Timings.js - Diagnose slow script connections
  4. JS-Execution-Time-Breakdown.js - Network vs parse/execution time
  5. Inline-Script-Info-and-Size.js - Measure inline script overhead
  6. Validate-Preload-Async-Defer-Scripts.js - Find preload anti-patterns

Resource Hints & Priority Optimization

When the user wants to optimize resource loading priorities:

  1. Resource-Hints.js - Overview of all hints in use
  2. Resource-Hints-Validation.js - Verify hints are actually used
  3. Priority-Hints-Audit.js - Check fetchpriority usage
  4. Prefetch-Resource-Validation.js - Validate prefetch strategy
  5. Validate-Preload-Async-Defer-Scripts.js - Find conflicts

CSS Optimization Workflow

When CSS is bloated or blocking rendering:

  1. Critical-CSS-Detection.js - Check critical CSS strategy
  2. Inline-CSS-Info-and-Size.js - Measure inline CSS overhead
  3. CSS-Media-Queries-Analysis.js - Find unused responsive CSS
  4. Find-render-blocking-resources.js - Identify blocking stylesheets

SSR/Framework Performance

When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:

  1. SSR-Hydration-Data-Analysis.js - Analyze hydration data size
  2. Script-Loading.js - Check framework script loading patterns
  3. JS-Execution-Time-Breakdown.js - Measure hydration execution cost
  4. Content-Visibility.js - Check if content-visibility is used for optimization

Decision Tree

Use this decision tree to automatically run follow-up snippets based on results:

After TTFB.js

  • If TTFB > 600ms → Run TTFB-Sub-Parts.js to diagnose where time is spent
  • If Service Worker detected → Run Service-Worker-Analysis.js to check for SW overhead
  • If TTFB varies significantly across resources → Run TTFB-Resources.js

After FCP.js

  • If FCP > 1.8s → Run:

1. Find-render-blocking-resources.js (CSS/JS blocking) 2. Critical-CSS-Detection.js (CSS strategy) 3. Script-Loading.js (blocking scripts)

  • If FCP is good but user complains about perceived slowness → Check LCP with webperf-core-web-vitals skill

After Find-render-blocking-resources.js

  • If blocking stylesheets found → Run Critical-CSS-Detection.js
  • If blocking scripts found → Run:

1. Script-Loading.js (loading strategy) 2. Validate-Preload-Async-Defer-Scripts.js (check for anti-patterns)

  • If fonts blocking → Run Fonts-Preloaded-Loaded-and-used-above-the-fold.js

After Script-Loading.js

  • If many blocking/parser-blocking scripts → Run:

1. JS-Execution-Time-Breakdown.js (measure execution cost) 2. First-And-Third-Party-Script-Info.js (identify third-party culprits)

  • If third-party scripts detected → Run First-And-Third-Party-Script-Timings.js
  • If large inline scripts → Run Inline-Script-Info-and-Size.js

After Resource-Hints-Validation.js

  • If unused preloads found → Recommend removing them
  • If missing preloads for critical resources → Run:

1. Fonts-Preloaded-Loaded-and-used-above-the-fold.js (fonts) 2. Priority-Hints-Audit.js (LCP candidate)

  • If preloads on async/defer scripts → Run Validate-Preload-Async-Defer-Scripts.js

After Service-Worker-Analysis.js

  • If SW overhead > 100ms → Recommend Navigation Preload API
  • If SW caching many resources → Run TTFB-Resources.js to verify cache hits
  • If SW not detected but site is SPA/PWA → Recommend implementing SW

After Fonts-Preloaded-Loaded-and-used-above-the-fold.js

  • If fonts preloaded but not used above-the-fold → Recommend removing preloads
  • If fonts used but not preloaded → Recommend adding preload
  • If many font variants loaded → Suggest subsetting or reducing variants

After First-And-Third-Party-Script-Info.js

  • If many third-party scripts (>5) → Run:

1. First-And-Third-Party-Script-Timings.js (detailed timing) 2. JS-Execution-Time-Breakdown.js (execution impact)

  • If third-party scripts are slow → Recommend async/defer or removal

After SSR-Hydration-Data-Analysis.js

  • If hydration data > 100KB → Recommend optimization strategies
  • If multiple hydration scripts → Investigate framework configuration
  • If large inline hydration data → Consider streaming or chunking

After Priority-Hints-Audit.js

  • If LCP candidate lacks fetchpriority="high" → Recommend adding it
  • If conflicting priorities (preload + low) → Recommend resolving conflict
  • If fetchpriority on non-critical resources → Review priority strategy

After Prefetch-Resource-Validation.js

  • If >10 prefetch hints → Recommend reducing to critical resources
  • If individual prefetch > 500KB → Question necessity
  • If total prefetch > 2MB → Flag as mobile bandwidth concern

After Critical-CSS-Detection.js

  • If render-blocking CSS > 14KB → Recommend inlining critical CSS
  • If no inline CSS but has blocking stylesheets → Suggest critical CSS extraction
  • If CSS > 50KB total → Run CSS-Media-Queries-Analysis.js to find savings

After Back-Forward-Cache.js

  • If bfcache blocked → Provide specific remediation based on blocking reasons
  • If bfcache eligible → Confirm optimization is working

After Client-Side-Redirect-Detection.js

  • If client-side redirects detected → Recommend server-side redirects
  • If redirect chain found → Suggest eliminating intermediate hops

References

  • references/snippets.md — Descriptions and thresholds for each script
  • references/schema.md — Return value schema for interpreting script output