LCP
Largest Contentful Paint
5.3s
Poor
Good: < 2.5s
Measures how long it takes for the main content to appear on screen
Reduce Unused CSS and JavaScript
How to optimize tokyoportfolio.frontend.stg.vercel.app
Reduce Unused CSS and JavaScript
Medium Impact+15 points estimated
Why It Matters
You're loading 287KB of unused JavaScript and 19KB of unused CSS, blocking rendering and slowing page load.
How to Fix
Enable Next.js tree shaking by using ES6 imports instead of default imports. Split your CSS using Next.js CSS modules to load only necessary styles per page. Remove or defer Google Analytics and Facebook Pixel until after page interaction to reduce initial bundle size.
0Poor
What This Score Means
A score of 20 falls in the "Poor" range (50-89). While it is better than poor (0-49), you should aim for 90+ to provide an optimal user experience and maximize SEO benefits.
This site is slower than approximately 35% of similar sites. The main issues affecting performance are image optimization, JavaScript execution time, and layout stability.
Addressing these issues could improve your conversion rate by 15-20% and boost your search engine rankings.
Core Web Vitals Analysis
INP
Interaction to Next Paint
487ms
Needs Improvement
Good: < 200ms
Measures how quickly the page responds to user interactions
CLS
Cumulative Layout Shift
0.81
Poor
Good: < 0.1
Measures visual stability - how much content shifts during page load
AI Performance Analysis
This Next.js site has severe performance issues with a critically low score of 20/100. The biggest problem is massive layout shifts (0.81 CLS score) caused by the footer element moving during page load, creating a jarring user experience where content jumps around unexpectedly. Additionally, the site takes over 10 seconds to visually load content and has 16+ seconds of blocking JavaScript execution, primarily from an oversized 287KB of unused JavaScript and render-blocking CSS files. Fixing the layout shift issue and reducing JavaScript bloat could improve the performance score by 40+ points and dramatically enhance user experience.
Other Optimization Recommendations
Fix Cumulative Layout Shift
High Impact+30 points estimatedWhy It Matters:
Your CLS score of 0.806 is extremely poor (needs <0.1) with the footer element causing massive layout shifts.
How to Fix:
Reserve space for the footer using CSS min-height or fixed dimensions in your Next.js layout component. Ensure all footer content has defined dimensions before JavaScript loads. Use CSS Grid or Flexbox with explicit sizing to prevent content reflow.
Optimize LCP Image Loading
High Impact+25 points estimatedWhy It Matters:
Your LCP image has 2771ms resource load delay and uses lazy loading, severely impacting the 5.3s LCP time.
How to Fix:
Remove loading='lazy' from your hero image in the Swiper component. Add fetchpriority='high' to the LCP image element. Use Next.js Image component with priority={true} for above-the-fold images to preload them immediately.
Keep Your Site Fast After Optimization
Once your site is optimized, maintain that speed. Use DeployHQ for zero-downtime, automated deployments—so performance fixes and updates go live safely every time, without breaking your site.
Explore DeployHQ →Trusted by engineering teams shipping high-performance sites
Want to Analyze YOUR Website?
Get AI-powered performance insights with actionable fixes in 30 seconds
Related Performance Analyses
More Next.js Speed Tests
Next.js Performance Resources
Defer Non-Critical CSS Loading
Render-blocking CSS files delay first paint by 2 seconds, particularly the 29KB main stylesheet.
Fix Layout Shift from Unsized Images
CLS score of 0.258 primarily caused by images without explicit dimensions shifting page layout.
Remove Unused JavaScript Bundles
725 KiB of unused JavaScript is delaying LCP by 3.6 seconds and blocking user interactions.
Fix Cumulative Layout Shift
Your CLS score of 0.806 is extremely poor (needs <0.1) with the footer element causing massive layout shifts.