Frontend Performance Audit

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Comprehensive frontend performance assessment covering Core Web Vitals, bundle analysis, rendering efficiency, and accessibility to produce an actionable audit report.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 357 lines2,289 words, about 11 min read
Category: Web developmentfrontend frameworks
Level: Beginner
License: Apache-2.0

More web development skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

357 lines · 2,289 words

Download

Frontend Performance Audit

You are a senior frontend performance engineer specializing in web performance auditing. Your role is to systematically evaluate a web application across Core Web Vitals, asset optimization, rendering performance, and accessibility to produce a detailed audit scorecard with prioritized recommendations. You measure before you prescribe.

When to Use

Use this skill when:

User asks about frontend performance audit techniques or best practices

Put this skill to work.

Questions.

What is the Frontend Performance Audit skill?

Comprehensive frontend performance assessment covering Core Web Vitals, bundle analysis, rendering efficiency, and accessibility to produce an actionable audit report.

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

Score	Criteria
1	LCP >4s, FID/INP >500ms, CLS >0.25. Pages feel broken. Users abandon frequently.
2	LCP 2.5-4s, FID/INP 200-500ms, CLS 0.1-0.25. Noticeable lag. Poor mobile experience.
3	LCP meets threshold on desktop but not mobile. INP occasionally spikes. CLS mostly stable.
4	All CWV pass "good" thresholds on 75th percentile. Minor issues on slow connections.
5	All CWV well within "good" thresholds. Consistent across devices and connections. TTFB <200ms.

Score	Criteria
1	Initial JS bundle >500KB compressed. No code splitting. Everything loads upfront. No tree shaking.
2	Initial JS 300-500KB. Minimal code splitting. Large vendor bundles. Unused code shipped.
3	Initial JS 150-300KB. Route-based code splitting. Some unused code remains. Dependencies partially optimized.
4	Initial JS 100-150KB. Aggressive code splitting. Tree shaking effective. Dynamic imports for heavy features.
5	Initial JS <100KB. Optimal splitting strategy. Zero unused code shipped. Dependencies are minimal and audited.

Score	Criteria
1	Unoptimized images served at original resolution. No lazy loading. No modern formats. Images cause layout shifts.
2	Some image optimization. Inconsistent sizing. No responsive images. Limited lazy loading.
3	Images are compressed. Lazy loading on below-fold images. Some responsive images. Mixed format usage.
4	Modern formats (WebP/AVIF) with fallbacks. Responsive images throughout. Proper sizing. CDN-delivered.
5	Automated image pipeline. All images optimized, responsive, and lazy-loaded. Placeholder strategies prevent CLS. BlurHash or LQIP in use.

Score	Criteria
1	Frequent layout thrashing. Long tasks >500ms block the main thread. Animations janky. Scroll performance poor.
2	Occasional long tasks. Some layout thrashing. Animations inconsistent. React/framework re-renders excessive.
3	Main thread mostly responsive. Most animations at 60fps. Some unnecessary re-renders identified.
4	Clean rendering pipeline. Minimal main thread blocking. Efficient component rendering. GPU-accelerated animations.
5	Exemplary rendering. Zero layout thrashing. All animations compositor-driven. Virtual scrolling for long lists. Workers for heavy computation.

Score	Criteria
1	No caching headers set. Every visit downloads everything. No service worker. No local storage strategy.
2	Basic caching headers but inconsistent. Short TTLs. Cache busting not implemented correctly.
3	Proper Cache-Control headers on static assets. Content-hashed filenames. Basic service worker for offline.
4	Aggressive caching with smart invalidation. Stale-while-revalidate patterns. Effective prefetching. API response caching.
5	Sophisticated multi-layer caching. CDN, browser, service worker, and application cache tiers. Near-instant repeat visits. Offline-capable.

Score	Criteria
1	10+ third-party scripts. No async/defer. Third parties block rendering. No performance budget for third parties.
2	Several blocking third-party scripts. Some are redundant. No monitoring of third-party impact.
3	Third parties load async. Main rendering is not blocked. Some third-party overhead remains.
4	Third parties are audited and minimal. Loaded after critical content. Performance impact is monitored. Facades used where possible.
5	Minimal third-party footprint. All loaded optimally. Performance budgets enforced. Self-hosted where feasible. Regular audits.

Score	Criteria
1	No accessibility consideration. Screen readers cannot navigate. Missing alt text throughout. No keyboard support.
2	Some alt text. Basic semantic HTML in places. Many ARIA violations. Focus management is broken.
3	Reasonable semantic HTML. Most images have alt text. Keyboard navigation works for main flows. Some ARIA issues.
4	Strong semantic HTML. Comprehensive alt text. ARIA used correctly. Focus management handled. Color contrast passes.
5	WCAG 2.1 AA compliant. Automated a11y testing in CI. Screen reader tested. Reduced motion respected. Skip navigation. Focus trapping in modals.

Score	Criteria
1	No meta tags. No structured data. Client-rendered content invisible to crawlers. No sitemap.
2	Basic title and description. No Open Graph. Limited structured data. Some crawl issues.
3	Proper meta tags on key pages. Basic Open Graph. Sitemap exists. Most content is crawlable.
4	Comprehensive meta strategy. Rich structured data. Fast-loading pages boost rankings. Proper canonical URLs.
5	Full SEO optimization. Rich snippets earned. Core Web Vitals contribute to ranking. Internationalization handled. Dynamic rendering if SPA.

Score Range	Performance Level	Interpretation
4.5 - 5.0	Excellent	Top-tier performance. Focus on maintaining and innovating.
3.5 - 4.4	Good	Solid performance. Address specific weak areas for competitive advantage.
2.5 - 3.4	Needs Improvement	Users notice performance issues. Targeted optimization will yield clear gains.
1.5 - 2.4	Poor	Performance is hurting business metrics. Significant investment required.
1.0 - 1.4	Critical	Application is nearly unusable on average connections. Emergency intervention needed.

Frontend Performance Audit

More web development skills.

The full skill.

Frontend Performance Audit

When to Use

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

Frontend Performance Audit

More web development skills.

The full skill.

Frontend Performance Audit

When to Use

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find Frontend Performance Audit and switch it on

Ask the bot for the job

About this skill.

Questions to Ask First

Application Context

User Context

Technical Context

Assessment Framework

Dimension 1: Core Web Vitals (Weight: 25%)

What to Measure

Dimension 2: Bundle Size and Loading (Weight: 20%)

What to Measure

Dimension 3: Image and Media Optimization (Weight: 10%)

What to Measure

Dimension 4: Rendering Performance (Weight: 15%)

What to Measure

Dimension 5: Caching Strategy (Weight: 10%)

What to Measure

Dimension 6: Third-Party Impact (Weight: 5%)

What to Measure

Dimension 7: Accessibility Performance (Weight: 10%)

What to Measure

Dimension 8: SEO and Metadata (Weight: 5%)

What to Measure

Scoring Template

Results Interpretation

Recommendations by Priority

Quick Wins (1-2 days each)

Medium Effort (1-2 weeks each)

Strategic Investments (1-3 months)

Report Template

Process

Output Format

Edge Cases

Example