The Right way to Optimize Next.js to Score 100 in lighthouse

🎉Our Newsletter is live! Join thousands of other developers

⭐ Timestamps ⭐
00:00 Intro
03:58 1) Optimize Images
08:16 2) Remove Unused Dependencies
09:32 3) Font Optimization
11:03 4) Disabling Animations on Mobile
13:22 5) Lazy Load Animations
15:17 6) SEO Optimization
21:02 7) Accessibility Hacks

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with Smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

👉 Personal Links:

Made with ❤️ by Coderone

[venicebeachsurfer]

Are you using third party analytics? Nope...
Are you using feature flag third party tools? Nope...
Are you using any google tag manager stuff? Nope...
Are you using any third party animation libraries? Nope....

This is not a real world representation of scores.

[owenwexler]

Choosing your CSS/UI component libraries well is an important factor also. When I switched my NextJS web app from Material-UI to Tailwind/HeadlessUI, the Lighthouse scores on the homepage went up 20 points from that alone.

[Jrrs]

Not sure why people are hating, i've literlly been reducing bundle size of an app with huge revenue this week with some of the techniques mentioned here.

[unhealthytomato]

Performing lighthouse on the same website(portfolio) the scores are lower
Performance 59
Accessibility 89
Best Practices 100
SEO 98

[technologymad]

Bro don't disable animations on phone just use will-change property on the section you want to animate my animations were also lagged on phone but after applying this property it stopped lagging

[ICOReviewtoken]

Try call API, design add more slider, add more image, make with a design layout in fact. Then optimize to see score 😂. Youd shouldn't this layout to check score bacause it 's light, add font

[quhgwti]

Thanks for sharing! I am confusing what different between images in source code and in public folder (performance, bundle size, ... )

[azizoid]

Why dont you move `devDependencies` out of the `dependencies`?

[tjtjtyjtyjt]

How to show that compression size information?

[MuhdHanish]

heyy, where is this projects source code i found out an bug!!!🐞

[oleksandryakob]

Can someone tell what theme does he use for vscode?

[micanal]

very useful, you can do better using the new app router, maybe for a few things

[Happyday-nnrh]

whats difference between of nextjs metadata and next-seo ?

[wemakee]

This is the type of person that say you can be a designer with paint

[NatnaelAbebe-ogbt]

if start coding, web development or full stack dev today is it an opportunity to get a job remotely

[Way_Of_The_Light]

How about just using Astro instead? It constantly scores high in Light house.

[gabrielTx]

styledcomponents its a mistake, dont use it

[mohammedehap]

Since you are a Muslim, you need to change the name “Maboud” because that word means the god we worship, and it is an Arabic name that you can change to “Abd Al Maboud” and this means that you are a servant of God, but your name is one of the names of God, so it is haram

[alfieqashwa]

based on your name, i'm guessing you are a muslim. If yes, then Assalaamu 'alaykum from Indonesia.