Performance Metrics

Monitor your site's Core Web Vitals and performance scores to ensure a great user experience.

What are Core Web Vitals?

Core Web Vitals are Google's metrics for measuring user experience:

Metric	Measures	Good	Needs Work	Poor
LCP	Loading	<2.5s	2.5-4s	>4s
INP	Interactivity	<200ms	200-500ms	>500ms
CLS	Visual Stability	<0.1	0.1-0.25	>0.25

Performance Dashboard

Navigate to Sites → Your Site → Performance

Overall Score

Your site's overall performance grade:

Performance Score: 92/100 🟢

├── LCP:  1.8s  🟢 Good
├── INP:  145ms 🟢 Good
├── CLS:  0.05  🟢 Good
└── FCP:  0.9s  🟢 Good

Score Breakdown

Score	Grade	Impact
90-100	🟢 Excellent	Great SEO boost
50-89	🟡 Needs Work	Some SEO impact
0-49	🔴 Poor	Negative SEO impact

Largest Contentful Paint (LCP)

LCP measures how long it takes for the main content to load.

What Affects LCP

• Server response time
• Large images
• Render-blocking resources
• Client-side rendering

Improving LCP

• ✅ Use optimized images (WebP format)
• ✅ Enable image lazy loading
• ✅ Use a CDN (Azure SWA includes this)
• ✅ Minimize server-side processing

LCP Trend

LCP - Last 30 Days
┌────────────────────────────────────────┐
│  Good ─────────────────────────        │
│           ╲                            │
│            ╲___________                │
│                        ╲___________    │
│                                        │
├────────────────────────────────────────┤
│ Dec 1: 2.8s              Dec 30: 1.6s  │
└────────────────────────────────────────┘

Interaction to Next Paint (INP)

INP measures how responsive your site is to user interactions.

What Affects INP

• Heavy JavaScript
• Long-running tasks
• Third-party scripts
• Complex animations

Improving INP

• ✅ Split large JavaScript bundles
• ✅ Defer non-critical scripts
• ✅ Optimize event handlers
• ✅ Use web workers for heavy tasks

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page moves around while loading.

What Causes Layout Shift

• Images without dimensions
• Ads or embeds loading late
• Fonts loading and swapping
• Dynamic content injected

Improving CLS

• ✅ Always set image dimensions
• ✅ Reserve space for dynamic content
• ✅ Use font-display: swap carefully
• ✅ Avoid inserting content above existing content

Page-by-Page Performance

See how individual pages perform:

Page	LCP	INP	CLS	Score
Home	1.5s	120ms	0.02	95 🟢
Blog	2.1s	180ms	0.08	88 🟡
About	1.3s	90ms	0.01	97 🟢
Services	2.8s	250ms	0.15	72 🟡

Identifying Problems

Click on any page to see:

• Specific elements causing issues
• Recommended fixes
• Before/after comparisons

Performance by Device

Mobile and desktop often differ:

Desktop

Score: 94/100
├── LCP: 1.2s
├── INP: 95ms
└── CLS: 0.02

Mobile

Score: 78/100
├── LCP: 2.8s  ← Slower on mobile
├── INP: 210ms
└── CLS: 0.08

Why Mobile is Different

• Slower network connections
• Less powerful processors
• Smaller screens (different layouts)
• Touch interactions vs. clicks

Resource Analysis

See what resources affect performance:

Largest Resources

Resource	Size	Load Time
hero-image.webp	450KB	1.2s
bundle.js	320KB	0.8s
fonts.woff2	85KB	0.3s

Render-Blocking Resources

Resources that delay rendering:

• 📜 main.css (42KB)
• 📜 fonts.css (8KB)

Unused JavaScript

Code that loads but isn't used:

• analytics.js: 45% unused
• animations.js: 72% unused

Performance Monitoring

Alerts

Set up alerts for performance issues:

1. Go to Performance → Alerts
2. Click + New Alert
3. Choose metric (LCP, INP, CLS)
4. Set threshold
5. Choose notification method

Example Alert:

Alert me if LCP exceeds 3 seconds for more than 1 hour

Historical Trends

Track performance over time:

Performance Score Trend - Last 90 Days
┌────────────────────────────────────────┐
│                           ____        │
│                     ____/            │
│               _____/                  │
│         ____/                        │
│    ____/                             │
│___/                                  │
├────────────────────────────────────────┤
│ Oct (68)    Nov (78)    Dec (92)      │
└────────────────────────────────────────┘

Optimization Recommendations

Based on your data, DCS suggests improvements:

High Impact

• 🔴 Compress hero image (saves 1.2s LCP)
• 🔴 Defer analytics script (saves 200ms INP)

Medium Impact

• 🟡 Add image dimensions to prevent CLS
• 🟡 Preload critical fonts

Low Impact

• 🟢 Enable Brotli compression
• 🟢 Minify HTML whitespace

Running Performance Tests

Manual Tests

1. Click Run Test in the dashboard
2. Choose test location (US East, EU West, etc.)
3. Wait for results
4. Compare with previous runs

Scheduled Tests

Set up regular testing:

1. Go to Performance → Schedule
2. Set frequency (daily, weekly)
3. Choose time
4. Enable notifications for regressions

Comparing with Competitors

See how you stack up:

Site	Score	LCP	INP
Your site	92	1.8s	145ms
Competitor A	78	2.5s	280ms
Competitor B	85	2.1s	190ms

TIP

Better performance = better SEO rankings and user experience

Next Steps

• Analytics — Track user behavior
• Development Requests — Request performance fixes
• Site Configuration — Optimize your setup