Core Web Vitals Monitor

Real-time performance metrics for your portfolio site

Performance Overview

LCP
Largest Contentful Paint
Good: <2.5s | Needs Improvement: 2.5-4s | Poor: >4s
FCP
First Contentful Paint
Good: <1.8s | Needs Improvement: 1.8-3s | Poor: >3s
CLS
Cumulative Layout Shift
Good: <0.1 | Needs Improvement: 0.1-0.25 | Poor: >0.25
TTFB
Time to First Byte
Good: <800ms | Needs Improvement: 800-1800ms | Poor: >1800ms

Live Metrics

Loading performance metrics...

Performance Optimization Tips

LCP Optimization

  • • Optimize images with Next.js Image component
  • • Use WebP format for better compression
  • • Implement lazy loading for below-fold content

FCP Optimization

  • • Optimize critical rendering path
  • • Minimize render-blocking resources
  • • Use efficient CSS selectors
  • • Optimize server response times

CLS Optimization

  • • Set explicit dimensions for images
  • • Avoid inserting content above existing content
  • • Use CSS transforms instead of changing layout properties

TTFB Optimization

  • • Optimize server response times
  • • Use a CDN for static assets
  • • Enable gzip compression
  • • Implement proper caching strategies