Lighthouse: Remove unused JavaScript #13682
-
|
I build this little polling site https://poll-hp61gmonn.now.sh , but when I test the site with Lighthouse (https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpoll-hp61gmonn.now.sh%2F) I get the message that I ship unused javascript. I analized by code using Madge but I havent found dead code this way. Could it be that one of the libaries I use is causing this? My dependencies are: The repo can be found here: https://github.com/enricoschaaf/poll Thanks a lot! Edit: I now created a fresh project with the vercel Next.js template and I get the same message. Is there currently a problem with bundling in Next.js? Edit 2: Just reran lighthouse on the "Hello World" Next.js project. Now I dont get any message. Maybe there is a problem with lighthouse. |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 16 replies
-
|
I have a similar issue, explained there: |
Beta Was this translation helpful? Give feedback.
-
|
I am basically getting remove unused JavaScript with a npx create-next-app, I think it's a problem with Lighthouse, if I run Lighthouse on an older version, I don't get this message. |
Beta Was this translation helpful? Give feedback.
-
|
I am seeing this on my end as well today - lighthouse scores for various pages on my website dropped from ~90 to ~75. |
Beta Was this translation helpful? Give feedback.
-
|
I opened an issue on LightHouse. |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone Lighthouse maintainer here 👋 This is working as intended in Lighthouse. It is a new audit in 6.0 that highlights files that have a considerable amount of unused JavaScript. In that URL that's highlighted, about 70% of the main chunk is unused. You can explore each line in detail using the "Coverage" panel in DevTools.
screenshot of the coverage panel highlighting unused portions of the main chunk related to animations It is somewhat inevitable that some subset of JavaScript will be unused when using someone's library. They will have built features that you simply don't need. It's not important to obsess over 100% usage as that will be virtually impossible, but when it's a rather large amount of unused bytes, it's worth taking a look to see what you might be able to split out or if you really need the library. Also worth noting that this new audit highlighting unused javascript in no way impacts the Lighthouse score. It is only suggesting one potential approach to help improve performance. Opportunities never impact the score and the score changes are a result of the new metrics that were added in 6.0, LCP and TBT. |
Beta Was this translation helpful? Give feedback.
-
|
@patrickhulce - not feeling great that your service constantly hammers my Next sites into the 60s when they load extremely well on every device I test on. You all really need to rethink what you're doing over there. |
Beta Was this translation helpful? Give feedback.
-
|
Not sure if this question is more for @patrickhulce or @timneutkens, but how does For example, on one of our Next.js sites, when testing the home page in PageSpeed Insights console, one of the primary offenders is the JS chunk for a different page (e.g. _next/static/chunks/pages/%5BquestionSlug%5D-fa20d71c82a35ec047e6.js). I'm guessing this is due to I would have assumed that |
Beta Was this translation helpful? Give feedback.
-
|
Why is @jserrao getting downvoted when he makes a very valid point? My site is built using NextJS, hosted on Vercel and the user experience is lightning fast (loads and is interactive in way under a second), so why is it OK that Lighthouse gives it a terrible score and presumably it gets demoted by Google in search results because of it's perceived slow performance even though this is not indicative of real life performance? On another note, is there something that the Next team can do to improve the Lighthouse performance scores fo NExtJS sites out of the box? All I can see in lighthouse is lots of files ending in chunk.js which obviously we have no control over because the framework produced them and all of them are showing up as "unused javascript" (even though they're clearly not). |
Beta Was this translation helpful? Give feedback.
-
|
2 years later and this issue is still present. I'm manually opting out of the nextjs Does anyone have a better idea? |
Beta Was this translation helpful? Give feedback.
-
|
No any solution yet? |
Beta Was this translation helpful? Give feedback.
This comment was marked as spam.
This comment was marked as spam.
Hey everyone Lighthouse maintainer here 👋
This is working as intended in Lighthouse. It is a new audit in 6.0 that highlights files that have a considerable amount of unused JavaScript. In that URL that's highlighted, about 70% of the main chunk is unused. You can explore each line in detail using the "Coverage" panel in DevTools.
screenshot of the coverage panel highlighting unused portions of the main chunk related to animations
It is somewhat inevitable that some subset of JavaScript will be unused when using someone's library. They will have built features that you simply don't need. It's not important to obsess over 100% usage as that will be virtually impossible, but when it's a ra…