Token导航 LogoToken导航TokenDH.com
中转站排行榜
研究检索external-servicegithub未标认证来源可访问许可证需确认审计提醒

webperf-loading（webperf 加载）

Agent Skill

webperf-loading 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

总安装

2,399

周安装

102

GitHub Stars

1,413

下载量

840
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：webperf-loading（webperf 加载）
来源仓库：https://github.com/nucliweb/webperf-snippets
仓库路径：skills/webperf-loading
安装命令：
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-loading
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-loading

简介

webperf-loading 用于查找、检索和筛选相关信息。

  • 适用于根据关键词或任务场景从来源中获取信息的场景。
  • 通过 npx skills add 命令安装，建议查看原始 README 掌握用法。
  • 使用前需确认权限与维护状态，避免触发联网或文件操作。
  • 适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

SKILL.md

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 Cache (bfcache)
  • scripts/CSS-Media-Queries-Analysis.js — CSS Media Queries 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 on 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

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.6%
按下载量换算299

Claude

27.89%
按下载量换算234

Cursor

19.4%
按下载量换算163

Gemini CLI

9.12%
按下载量换算77

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

可疑

权限和风险

external-service

该 Skill 可能调用第三方服务、云服务或外部模型 API，使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/nucliweb/webperf-snippets

SKILL.md 来源

github.com

/nucliweb/webperf-snippets/tree/main/skills/webperf-loading

skills-sh

skills.sh

/nucliweb/webperf-snippets/webperf-loading

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

webperf-loading（webperf 加载）

webperf-loading 用于查找、检索和筛选相关信息，适合在 OpenClaw 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

webperf-media（网络性能媒体）

webperf-media 用于查找、检索和筛选相关信息，适合在 OpenClaw 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。