thisisahsaniqbal/core-web-vitals
skills/core-web-vitals/SKILL.md
Audits HTML patterns that affect Core Web Vitals (LCP, CLS, INP). Checks for layout shift causes, largest contentful paint blockers, and interaction responsiveness issues. Use when optimising page performance or fixing Google PageSpeed Insights warnings.
$ install --global
skillsauthnpx skillsauth add thisisahsaniqbal/nextjs-seo-audit core-web-vitalsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 8:57 PM2.1s1 file scanned
SKILL.md
- name:
- core-web-vitals
- description:
- >
- license:
- MIT
- author:
- Muhammad Ahsan Iqbal (https://muhammadahsaniqbal.com)
- linkedin:
- https://www.linkedin.com/in/ahsan-iqbal-digitalmarketingexpert/
- version:
- 1.0
Core Web Vitals
Audit HTML for patterns that negatively impact Core Web Vitals — the performance metrics Google uses as a ranking signal.
Overview
| Metric | Full name | Good threshold | What it measures | |---|---|---|---| | LCP | Largest Contentful Paint | ≤ 2.5s | Loading — time until the largest visible element renders | | CLS | Cumulative Layout Shift | ≤ 0.1 | Visual stability — unexpected layout movement | | INP | Interaction to Next Paint | ≤ 200ms | Responsiveness — delay between user input and visual update |
1. LCP (Largest Contentful Paint) checks
Identify the likely LCP element and check for blockers:
Identify LCP candidate
The LCP element is typically the largest visible element above the fold:
- Hero image (
<img>near top of<body>) - Hero background image (CSS
background-image) - Large heading (
<h1>) with significant text - Video poster image
LCP blockers to flag
| Check | Status |
|---|---|
| Hero/banner <img> missing fetchpriority="high" | ⚠️ WARN "Add fetchpriority=high to LCP image" |
| Hero image uses loading="lazy" | ❌ FAIL "Never lazy-load the LCP element" |
| LCP image not preloaded (<link rel="preload" as="image">) | ⚠️ WARN "Preload LCP image for faster rendering" |
| Render-blocking CSS in <head> (stylesheets without media attribute) | ⚠️ WARN |
| Render-blocking JS in <head> (scripts without async/defer) | ⚠️ WARN |
| LCP image served in legacy format (JPG/PNG instead of WebP/AVIF) | ⚠️ WARN |
| No render-blocking resources | ✅ PASS |
Font loading
| Check | Status |
|---|---|
| Custom fonts without <link rel="preload" as="font"> | ⚠️ WARN "Preload critical fonts" |
| No font-display: swap or font-display: optional in @font-face | ⚠️ WARN "Add font-display to prevent invisible text" |
| Fonts preloaded properly | ✅ PASS |
2. CLS (Cumulative Layout Shift) checks
Identify HTML patterns that cause layout shift:
| Check | Status |
|---|---|
| <img> without width and height attributes | ❌ FAIL "Missing dimensions cause layout shift" |
| <video> or <iframe> without width/height | ⚠️ WARN |
| Ads/embeds without reserved space (no explicit dimensions) | ⚠️ WARN "Reserve space for dynamic content" |
| Web fonts causing FOIT (Flash of Invisible Text) — no font-display | ⚠️ WARN |
| Content injected above existing content (banners, cookie notices without reserved space) | ⚠️ WARN |
| All images have dimensions | ✅ PASS "No layout shift from images" |
CSS animation checks
| Check | Status |
|---|---|
| Animations using top, left, width, height (trigger layout) | ⚠️ WARN "Use transform instead for animations" |
| Animations using transform and opacity only | ✅ PASS "GPU-accelerated, no layout shift" |
3. INP (Interaction to Next Paint) checks
Identify patterns that block the main thread:
| Check | Status |
|---|---|
| <script> tags without async or defer | ⚠️ WARN "Blocks main thread during parsing" |
| Inline <script> with heavy computation (> 50 lines) | ⚠️ WARN "Move heavy JS to async external file" |
| Event handlers in HTML attributes (onclick, onchange, etc.) | ⚠️ WARN "Use addEventListener instead for better performance" |
| Third-party scripts loaded synchronously | ⚠️ WARN "Load third-party scripts with async" |
| All scripts properly deferred/async | ✅ PASS |
Third-party impact
Count third-party scripts (different domain):
- 0–3 → ✅ PASS
- 4–8 → ⚠️ WARN "Consider reducing third-party scripts"
- 9+ → ❌ FAIL "Excessive third-party scripts severely impact INP"
4. General performance patterns
| Check | Status |
|---|---|
| <link rel="preconnect"> for third-party origins | ✅ PASS if present, ⚠️ WARN if missing with 3rd-party resources |
| <link rel="dns-prefetch"> for third-party origins | ✅ PASS if present |
| <link rel="preload"> for critical resources | ✅ PASS if present |
| Excessive DOM size (> 1500 elements) | ⚠️ WARN "Large DOM slows rendering" |
| <meta name="viewport"> with width=device-width | Required for mobile CWV (see mobile-optimization for full viewport checks) |
Reporting format
Core Web Vitals Audit
─────────────────────
LCP Risk Factors: X issues found
CLS Risk Factors: Y issues found
INP Risk Factors: Z issues found
Overall CWV Risk: LOW / MEDIUM / HIGH
- 0 issues → LOW risk
- 1–3 issues → MEDIUM risk
- 4+ issues → HIGH risk
Edge cases
- This skill audits HTML patterns that correlate with CWV issues — actual CWV scores require real-browser measurement (Lighthouse, CrUX data)
- Next.js automatically handles image optimization, code splitting, and font loading — check for Next.js-specific patterns before flagging generic issues
- Inline
<style>for critical CSS is intentional and should NOT be flagged as a CLS risk — distinguish from injected layout-shifting styles <script type="module">is inherently deferred — do not flag as render-blocking- Third-party scripts loaded inside
<iframe>do not block the main thread — exclude from INP third-party count - AMP pages have their own performance model — flag CWV patterns but note that AMP runtime handles many optimizations automatically
Related Skills
thisisahsaniqbal/technical-seo
testing
VerifiedTrustedCommunity
Audits sitemap references, robots.txt directives, canonical tags, crawlability, URL structure, redirect chains, and indexability. Use when checking technical SEO foundations or fixing crawl/index issues.
2SKILL.mdUpdated Apr 16, 2026
thisisahsaniqbal/site-speed-optimization
development
VerifiedTrustedCommunity
Audits stylesheet loading, inline CSS volume, image alt text, image formats, and Next.js Image component usage. Use when checking page speed related to HTML structure. For render-blocking scripts, image dimensions, lazy loading, and resource hints, see the core-web-vitals skill.
2SKILL.mdUpdated Apr 16, 2026
thisisahsaniqbal/semantic-layout
development
VerifiedTrustedCommunity
Validates HTML5 semantic elements, ARIA landmarks, skip navigation, and page structure. Use when auditing semantic HTML, accessibility, or content structure for SEO. For the lang attribute, see the international-seo skill.
2SKILL.mdUpdated Apr 16, 2026
thisisahsaniqbal/schema-json-optimization
testing
VerifiedTrustedCommunity
Validates existing JSON-LD structured data and suggests relevant schemas based on auto-detected page type. Does NOT enforce all schema types — only checks what is applicable to the current page context. Use when auditing or generating structured data for search engine rich results.
2SKILL.mdUpdated Apr 16, 2026