LCP
Largest Contentful Paint
6.0s
Poor
Good: < 2.5s
Measures how long it takes for the main content to appear on screen
Eliminate Render-Blocking CSS Resources
How to optimize vercel.com
Eliminate Render-Blocking CSS Resources
High Impact+25 points estimated
Why It Matters
CSS files are blocking initial render and delaying LCP by 1.6 seconds.
How to Fix
Use Next.js dynamic imports to split CSS by route and load non-critical styles asynchronously. Inline critical above-the-fold CSS using next/dynamic with ssr: false for non-essential components. Consider using CSS-in-JS libraries like styled-components for better code splitting.
0Needs Improvement
What This Score Means
A score of 54 falls in the "Needs Improvement" 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
389ms
Needs Improvement
Good: < 200ms
Measures how quickly the page responds to user interactions
CLS
Cumulative Layout Shift
0.00
Good
Good: < 0.1
Measures visual stability - how much content shifts during page load
AI Performance Analysis
This Next.js site has poor performance with a score of 54/100. The biggest problem is render-blocking CSS files that are delaying page loading by an estimated 1.6 seconds, with the largest file (50KB) being 96% unused CSS that could be eliminated. The site is also suffering from excessive JavaScript execution time (2.0 seconds) and forced layout recalculations that are blocking user interactions for nearly 1 second. Removing unused CSS, deferring non-critical stylesheets, and optimizing JavaScript delivery could improve the Core Web Vitals significantly, particularly the 6-second Largest Contentful Paint and 980ms Total Blocking Time.
Other Optimization Recommendations
Remove Unused CSS and JavaScript
High Impact+18 points estimatedWhy It Matters:
898KB of unused JavaScript and 98KB of unused CSS are unnecessarily inflating bundle sizes.
How to Fix:
Enable Next.js tree-shaking by using ES6 imports and avoid importing entire libraries. Use next-bundle-analyzer to identify large unused dependencies. Implement dynamic imports for heavy components that aren't immediately visible using React.lazy() and Suspense.
Optimize JavaScript Execution and Reflows
Medium Impact+12 points estimatedWhy It Matters:
2.0 seconds of JavaScript execution time and forced reflows are causing 980ms of main thread blocking.
How to Fix:
Batch DOM reads and writes to prevent layout thrashing in React components. Use React's useLayoutEffect sparingly and prefer useEffect for non-DOM operations. Implement virtualization for large lists using react-window or react-virtualized to reduce DOM nodes.
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
Optimize JavaScript Execution and Reflows
2.0 seconds of JavaScript execution time and forced reflows are causing 980ms of main thread blocking.
Remove Unused CSS and JavaScript
898KB of unused JavaScript and 98KB of unused CSS are unnecessarily inflating bundle sizes.
Eliminate Render Blocking CSS
The CSS chunk is blocking initial page render and delaying both LCP and FCP by 150ms.
Fix Critical Element Render Delay
The LCP element has a massive 5.3 second render delay, severely impacting user experience and Core Web Vitals.