Performance Monitoring

Free Feature - Available on all tiers with unlimited usage

Carla's Performance Monitoring provides real-time insights into your Next.js application's performance, helping you identify bottlenecks, track load times, and ensure optimal user experience.

Overview

Performance monitoring is completely free and includes:

✅ Real-time performance tracking
✅ Page load time analysis
✅ API response time monitoring
✅ Resource usage metrics
✅ Historical performance data (90 days on free tier, unlimited on premium)
✅ Device and browser performance breakdown
✅ Geographic performance insights
✅ Custom date range filtering

No credit card required, no usage limits.

Getting Started

Performance monitoring is automatically enabled once you install the Carla widget:

bash

# Install widget
npx @interworky/carla-nextjs install

# Start monitoring immediately
npm run dev

Visit your dashboard at interworky.com/dashboard/performance to see real-time metrics.

Key Metrics

Page Load Times

Track how fast your pages load for real users:

First Contentful Paint (FCP) - Time until first content appears
Largest Contentful Paint (LCP) - Time until main content loads
Time to Interactive (TTI) - Time until page is fully interactive
Total Page Load - Complete page load duration

Why it matters: Slow page loads increase bounce rates. Google recommends LCP under 2.5 seconds.

API Response Times

Monitor your Next.js API route performance:

Average response time per endpoint
Slowest endpoints identification
Response time trends over time
Error rate per endpoint

Example:

/api/users      - Avg 45ms  (✓ Good)
/api/products   - Avg 1.2s  (⚠️ Slow)
/api/checkout   - Avg 320ms (✓ Good)

Core Web Vitals

Google's key performance indicators:

LCP (Largest Contentful Paint) - Loading performance
- Good: ≤ 2.5s
- Needs Improvement: 2.5s - 4s
- Poor: > 4s
FID (First Input Delay) - Interactivity
- Good: ≤ 100ms
- Needs Improvement: 100ms - 300ms
- Poor: > 300ms
CLS (Cumulative Layout Shift) - Visual stability
- Good: ≤ 0.1
- Needs Improvement: 0.1 - 0.25
- Poor: > 0.25

Impact: Core Web Vitals affect Google search rankings and user experience.

Resource Usage

Track client-side resource consumption:

Memory Usage - JavaScript heap size
CPU Usage - Script execution time
Network Bandwidth - Data transferred per page
Cache Hit Rate - How often cached resources are used

Dashboard Features

Real-Time Performance View

The main dashboard shows:

Performance Score (0-100) - Overall health indicator
Current Metrics - Live data from active users
Trend Charts - Performance over last 24 hours, 7 days, 30 days
Geographic Breakdown - Performance by user location
Device Breakdown - Performance on mobile vs desktop vs tablet

Performance Trends

Analyze performance changes over time:

Daily Trends - Hour-by-hour performance
Weekly Trends - Day-by-day comparison
Monthly Trends - Week-by-week analysis
Custom Ranges - Select any date range

Use case: Identify if a recent deployment degraded performance.

Slowest Pages

Identifies pages with performance issues:

Page	Avg Load Time	Visits	Score
/checkout	4.2s	1,234	45 ⚠️
/dashboard	1.8s	5,678	78 ✓
/products	1.2s	12,345	92 ✓

Click any page to see detailed metrics and recommendations.

Performance Alerts

Set up alerts for performance degradation:

Notify when page load time exceeds threshold
Alert on API response time spikes
Warn when Core Web Vitals fall below "Good" range
Email or dashboard notifications

Example:

⚠️ Alert: /api/users response time increased to 2.1s (threshold: 500ms)
Triggered: Nov 10, 2025 at 2:45 PM

Performance by Device

Understand how your app performs across devices:

Mobile Performance

Typically slower due to network constraints
Focus on optimizing critical rendering path
Reduce JavaScript bundle size
Lazy load images and components

Desktop Performance

Usually faster, more processing power
Watch for memory leaks in long sessions
Monitor CPU usage during heavy interactions

Tablet Performance

Sits between mobile and desktop
Consider responsive design impact
Test both portrait and landscape orientations

Performance by Location

Geographic performance insights:

Identify slow regions
Consider CDN optimization
Understand global user experience
Plan infrastructure improvements

Example:

🇺🇸 United States  - Avg 1.2s (✓ Good)
🇬🇧 United Kingdom - Avg 1.8s (✓ Good)
🇦🇺 Australia      - Avg 3.5s (⚠️ Needs improvement)
🇮🇳 India          - Avg 4.2s (❌ Poor)

Action: Consider adding CDN edge locations in slower regions.

Interpreting Performance Data

Identifying Bottlenecks

Slow Page Loads:

Check LCP - Is main content loading slowly?
Review Network tab - Are there large resources?
Check TTI - Is JavaScript blocking?
Analyze CLS - Are elements shifting?

Slow API Responses:

Identify slow endpoints in dashboard
Check database query performance
Look for N+1 query problems
Consider caching strategies

Performance Score Breakdown

Carla calculates an overall performance score (0-100) based on:

40% - Core Web Vitals (LCP, FID, CLS)
30% - Page Load Times
20% - API Response Times
10% - Resource Efficiency

Score Ranges:

90-100 - Excellent performance
75-89 - Good performance
50-74 - Needs improvement
0-49 - Poor performance

Optimization Recommendations

Based on performance data, Carla provides actionable recommendations:

Common Recommendations

Optimize Images

Use Next.js Image component
Enable automatic WebP conversion
Implement lazy loading

tsx

import Image from 'next/image';

<Image src="/hero.jpg" width={800} height={600} loading="lazy" alt="Hero" />;

Code Splitting
- Use dynamic imports for heavy components
- Split vendor bundles
- Implement route-based code splitting
tsx
```
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'));
```

API Optimization

Add caching headers
Use database indexes
Implement pagination
Consider API route handlers

// app/api/users/route.ts
export async function GET(request: Request) {
  return NextResponse.json(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120',
    },
  });
}

Font Optimization

Use Next.js font optimization
Preload critical fonts
Use font-display: swap

tsx

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

Exporting Performance Data

Export performance data for further analysis:

Go to Dashboard → Performance
Select date range
Click "Export Data"
Choose format: CSV, JSON, or PDF report

Use cases:

Share reports with stakeholders
Analyze trends in external tools
Archive historical data
Create custom visualizations