Skip to main content 홈 크리에이터 nucliweb webperf-snippets webperf-loading
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 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.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-loading명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.
Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.
Intelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy or below-fold eager). Features workflows for complete media audit, LCP image investigation, video performance (poster optimization), and SVG embedded bitmap detection. Cross-skill integration with Core Web Vitals (LCP/CLS impact) and Loading (priority hints, resource preloading). Provides performance budgets and format recommendations based on content type. Use when the user asks about image optimization, LCP is an image/video, layout shifts from media, or media loading strategy. Compatible with Chrome DevTools MCP.
name webperf-loading description 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. kind subagent model gemini-2.5-pro temperature 0.2 max_turns 30 tools ["mcp_chrome-devtools/*","view_file"] license MIT metadata {"author":"Joan Leon | @nucliweb","version":"1.2.0","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"}
WebPerf: Loading Performance
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcp__chrome-devtools__evaluate_script, capture output with mcp__chrome-devtools__get_console_message.
Scripts
scripts/Back-Forward-Cache.js — Back Forward Cachescripts/CSS-Media-Queries-Analysis.js — CSS Media Queries Analysisscripts/Cache-Strategy-Analysis.js — Cache Strategy Analysisscripts/Client-Side-Redirect-Detection.js — Client Side Redirect Detectionscripts/Content-Visibility.js — Content Visibilityscripts/Critical-CSS-Detection.js — Critical CSS Detectionscripts/Event-Processing-Time.js — Event Processing Timescripts/FCP.js — First Contentful Paint (FCP)scripts/Find-Above-The-Fold-Lazy-Loaded-Images.js — Find Above The Fold Lazy Loaded Imagesscripts/Find-Images-With-Lazy-and-Fetchpriority.js — Find Images With Loading Lazy and Fetchpriorityscripts/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js — Find non Lazy Loaded Images outside of the viewportscripts/Find-render-blocking-resources.js — Find render-blocking resourcesscripts/First-And-Third-Party-Script-Info.js — First And Third Party Script Infoscripts/First-And-Third-Party-Script-Timings.js — First And Third Party Script Timingsscripts/Fonts-Preloaded-Loaded-and-used-above-the-fold.js — Fonts Preloaded, Loaded, and Used Above The Foldscripts/Inline-CSS-Info-and-Size.js — Inline CSS Info and Sizescripts/Inline-Script-Info-and-Size.js — Inline Script Info and Sizescripts/JS-Execution-Time-Breakdown.js — JavaScript Execution Time Breakdownscripts/Prefetch-Resource-Validation.js — Prefetch Resource Validationscripts/Priority-Hints-Audit.js — Priority Hints Auditscripts/Resource-Hints-Validation.js — Resource Hints Validationscripts/Resource-Hints.js — Resource Hintsscripts/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":
TTFB.js - Establish baseline server/network performanceFCP.js - Check initial render timingFind-render-blocking-resources.js - Identify what's blocking renderingCritical-CSS-Detection.js - Validate CSS strategyScript-Loading.js - Audit script loading patternsResource-Hints-Validation.js - Check optimization hints
Server/Backend Performance Investigation When TTFB is slow or the user asks "why is my server slow":
TTFB.js - Measure overall TTFBTTFB-Sub-Parts.js - Break down into DNS, connection, server timeService-Worker-Analysis.js - Check for SW overhead impacting TTFBTTFB-Resources.js - Identify slow third-party or API endpoints
Font Loading Optimization When the user asks about fonts, FOIT, FOUT, or font performance:
Fonts-Preloaded-Loaded-and-used-above-the-fold.js - Full font auditResource-Hints-Validation.js - Verify font preloads are correctFind-render-blocking-resources.js - Check if fonts block rendering
Script Performance Deep Dive When scripts are suspected to slow down the page:
Script-Loading.js - Identify blocking scripts and loading strategyFirst-And-Third-Party-Script-Info.js - Separate first vs third-party impactFirst-And-Third-Party-Script-Timings.js - Diagnose slow script connectionsJS-Execution-Time-Breakdown.js - Network vs parse/execution timeInline-Script-Info-and-Size.js - Measure inline script overheadValidate-Preload-Async-Defer-Scripts.js - Find preload anti-patterns
Resource Hints & Priority Optimization When the user wants to optimize resource loading priorities:
Resource-Hints.js - Overview of all hints in useResource-Hints-Validation.js - Verify hints are actually usedPriority-Hints-Audit.js - Check fetchpriority usagePrefetch-Resource-Validation.js - Validate prefetch strategyValidate-Preload-Async-Defer-Scripts.js - Find conflicts
CSS Optimization Workflow When CSS is bloated or blocking rendering:
Critical-CSS-Detection.js - Check critical CSS strategyInline-CSS-Info-and-Size.js - Measure inline CSS overheadCSS-Media-Queries-Analysis.js - Find unused responsive CSSFind-render-blocking-resources.js - Identify blocking stylesheets
SSR/Framework Performance When analyzing Next.js, Nuxt, Remix, or other SSR frameworks:
SSR-Hydration-Data-Analysis.js - Analyze hydration data sizeScript-Loading.js - Check framework script loading patternsJS-Execution-Time-Breakdown.js - Measure hydration execution costContent-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 spentIf Service Worker detected → Run Service-Worker-Analysis.js to check for SW overheadIf TTFB varies significantly across resources → Run TTFB-Resources.js
After FCP.js
If FCP > 1.8s → Run:
Find-render-blocking-resources.js (CSS/JS blocking)Critical-CSS-Detection.js (CSS strategy)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:
Script-Loading.js (loading strategy)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:
JS-Execution-Time-Breakdown.js (measure execution cost)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 themIf missing preloads for critical resources → Run:
Fonts-Preloaded-Loaded-and-used-above-the-fold.js (fonts)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 APIIf SW caching many resources → Run TTFB-Resources.js to verify cache hitsIf 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 preloadsIf fonts used but not preloaded → Recommend adding preloadIf many font variants loaded → Suggest subsetting or reducing variants
After First-And-Third-Party-Script-Info.js
If many third-party scripts (>5) → Run:
First-And-Third-Party-Script-Timings.js (detailed timing)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 strategiesIf multiple hydration scripts → Investigate framework configurationIf large inline hydration data → Consider streaming or chunking
After Priority-Hints-Audit.js
If LCP candidate lacks fetchpriority="high" → Recommend adding itIf conflicting priorities (preload + low) → Recommend resolving conflictIf fetchpriority on non-critical resources → Review priority strategy
After Prefetch-Resource-Validation.js
If >10 prefetch hints → Recommend reducing to critical resourcesIf individual prefetch > 500KB → Question necessityIf total prefetch > 2MB → Flag as mobile bandwidth concern
After Critical-CSS-Detection.js
If render-blocking CSS > 14KB → Recommend inlining critical CSSIf no inline CSS but has blocking stylesheets → Suggest critical CSS extractionIf 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 reasonsIf bfcache eligible → Confirm optimization is working
After Client-Side-Redirect-Detection.js
If client-side redirects detected → Recommend server-side redirectsIf redirect chain found → Suggest eliminating intermediate hops
References
references/snippets.md — Descriptions and thresholds for each scriptreferences/schema.md — Return value schema for interpreting script output 