Hi @maiden topaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Getting Lighthouse Performance too low
scenic fulcrumBOT
To improve your Lighthouse score, particularly for Largest Contentful Paint (LCP) and First Contentful Paint (FCP), you can follow these actionable steps based on the provided knowledge sources:
1. Optimize Image Loading
One common issue with LCP is related to image loading. If you are using the next/image component, ensure you are using it correctly:
- Priority Property: Use the
priorityproperty for images that are likely to be the LCP element. However, be aware that some users have reported that settingprioritytotruecan sometimes decrease the LCP score (source (https://github.com/vercel/next.js/issues/60004)).
2. Preload Key Resources
Ensure that key resources like images, fonts, and CSS are preloaded efficiently. There was an issue reported where the order of preload tags in the app-dir was different from the pages-dir, affecting LCP and FCP (source (https://github.com/vercel/next.js/issues/52995)). Make sure your preload tags are correctly ordered.
3. Measure and Analyze Web Vitals
Use tools to measure and analyze your web vitals effectively:
- Vercel Analytics: Provides user-based performance metrics.
- PageSpeed Insights: Offers detailed insights into your page performance.
- CrUX Dashboard: Provides real user experience data.
- Lighthouse's Timespan Feature: Useful for measuring performance over a period (source (https://vercel.com/guides/optimizing-core-web-vitals-in-2024)).
4. Implement Web Vitals Reporting
You can implement web vitals reporting in your Next.js application to handle and analyze metrics like FCP and LCP:
'use client'
import { useReportWebVitals } from 'next/web-vitals'export function WebVitals() {
useReportWebVitals((metric) => {
switch (metric.name) {
case 'FCP': {
// handle FCP results
break;
}
case 'LCP': {
// handle LCP results
break;
}
// ...
}
})
}
(**source** (<https://nextjs.org/docs/app/building-your-application/optimizing/analytics#web-vitals>))
### 5. Real User Data
While Lighthouse scores are useful, they don't always translate directly to SEO or user experience. Prioritize real user data using tools like CrUX or Vercel Speed Insights to get a true picture of your site's performance (**source** (<https://vercel.com/templates/next.js/blazity-enterprise-ecommerce-starter>)).
### Summary
- Use the `priority` property for critical images but monitor its impact.
- Ensure preload tags are correctly ordered.
- Use tools like Vercel Analytics, PageSpeed Insights, and CrUX Dashboard for real user data.
- Implement web vitals reporting in your application.
By following these steps, you should be able to improve your Lighthouse scores, particularly for LCP and FCP. For more detailed guidance, you can refer to the **Next.js documentation on Web Vitals** (<https://nextjs.org/docs/app/building-your-application/optimizing/analytics#web-vitals>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------