技能 core-web-vitals

📦

core-web-vitals

Name: core-web-vitals
Author: addyosmani

v2.0 內容修訂 r1 安全 🌐 網路存取📁 檔案系統存取⚡ 包含腳本⚙️ 外部命令

Improve Core Web Vitals with Targeted Fixes

Slow loading, delayed interactions, and unexpected layout shifts damage page experience. This skill guides evidence-based diagnosis and targeted fixes for LCP, INP, and CLS.

支援: Claude Codex Code(CC)

📊 76 尚可

Maintain this Skill? Claim it 📊 76 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "core-web-vitals" from https://skillstore.io/skills/addyosmani-core-web-vitals.md and its manifest at https://skillstore.io/api/skills/addyosmani-core-web-vitals/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/addyosmani-core-web-vitals.md 已簽名 manifest GET /api/skills/addyosmani-core-web-vitals/manifest 已簽名 lockfile GET /api/skills/addyosmani-core-web-vitals/lockfile

測試它

正在使用「core-web-vitals」。 The supplied trace shows the hero image request starts after stylesheet loading.

預期結果:

Finding: Late image discovery contributes to LCP resource load delay.
Action: Make the hero image discoverable in initial HTML and give it high fetch priority.
Verification: Repeat the trace under equivalent conditions; add preload only if discovery remains late.

正在使用「core-web-vitals」。 A banner appears above the article after loading. Only source code is available.

預期結果:

Hypothesis: The banner may displace visible article content because its space is not reserved.
Action: Reserve a stable banner slot or choose placement that does not move visible content.
Verification: Capture the affected state at representative viewports before claiming a CLS failure or improvement.

正在使用「core-web-vitals」。 The supplied interaction trace shows a long task before the click handler begins.

預期結果:

Finding: Main-thread contention contributes to input delay before event processing.
Action: Attribute the blocking task and reduce, defer, or split its nonessential work.
Verification: Repeat the same interaction and confirm that input delay falls without shifting cost to rendering.

安全審計

安全

v1 • 2026/10/22 開啟版本化報告

All 50 static findings are false positives involving Markdown formatting, fixed imports, documentation links, example requests, and performance guidance. No evidence found of credential theft, unauthorized execution, data exfiltration, or prompt injection in the four reviewed files.

已掃描檔案

690

分析行數

複核項目

已忽略的誤報

風險因素

🌐 網路存取 (8)

references/CLS.md:13 references/CLS.md:22 SKILL.md:79 SKILL.md:114 SKILL.md:118 SKILL.md:225 SKILL.md:226 SKILL.md:227

📁 檔案系統存取 (4)

references/LCP.md:171 SKILL.md:16 SKILL.md:178 SKILL.md:228

⚡ 包含腳本 (2)

SKILL.md:191 SKILL.md:214

⚙️ 外部命令 (32)

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/addyosmani-core-web-vitals/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/addyosmani-core-web-vitals/security.svg)](https://skillstore.io/skills/addyosmani-core-web-vitals?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/addyosmani-core-web-vitals?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/addyosmani-core-web-vitals/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/addyosmani-core-web-vitals.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

addyosmani. (2026). core-web-vitals security audit report (audit version 1) [Author version 2.0]. Skillstore. https://skillstore.io/skills/addyosmani-core-web-vitals/audits/1

BibTeX 引用

@techreport{addyosmani-addyosmani-core-web-vitals-2026,
  author = {addyosmani},
  title = {core-web-vitals security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/addyosmani-core-web-vitals/audits/1},
  note = {Author version 2.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "core-web-vitals security audit report (audit version 1)"
version: "2.0"
type: report
authors:
  - name: "addyosmani"
date-released: "2026-10-22"
url: "https://skillstore.io/skills/addyosmani-core-web-vitals/audits/1"
identifiers:
  - type: other
    value: "skillstore:addyosmani-core-web-vitals:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

Reduce storefront loading delays

Review a product page trace to identify delayed hero image discovery and prioritize verified LCP fixes.

Investigate slow application interactions

Analyze a sluggish dashboard interaction to distinguish main-thread contention, expensive handlers, and delayed rendering.

Resolve recurring layout shifts

Review a publishing template for unstable embeds, inserted banners, and font changes using trace evidence and responsive verification.

試試這些提示

Understand the metrics

Explain LCP, INP, and CLS for my page. List their good thresholds and the evidence needed before diagnosing a failure.

Review source for likely causes

Review the supplied page code for likely LCP and CLS risks. Separate hypotheses from measured findings and suggest focused verification steps.

Diagnose a measured interaction

Analyze the supplied interaction trace and field INP data. Identify the dominant delay phase, implicated work, targeted fixes, and an equivalent retest.

Plan production verification

Use the supplied CrUX p75 data, traces, and release context to prioritize metric-specific fixes. Define equivalent lab retests and segmented RUM verification.

最佳實務

Use field evidence to prioritize user impact and browser traces to diagnose the relevant metric.
Compare measurements under equivalent device, network, page state, and interaction conditions.
Validate focused code changes in the lab, then wait for new field visits before claiming production improvement.

避免

Treating a single browser observation as equivalent to a field p75 measurement.
Adding image preloads, memoization, or font overrides without evidence that they address the measured cause.
Applying broad prerendering rules without excluding sensitive routes or accounting for early side effects and resource costs.