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

[@owenwexler7214]

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.

[@mohamed-zhioua]

so does using mui customized theme is the reason my score too low in performance

[@EseosaOsayi]

I wouldn't use headlessui even if I was paid to

[@theintrovert894]

Material UI is super heavy and complex

[@owenwexler7214]

@@EseosaOsayi might migrate off of Headless eventually... Headless is ok but it has some issues - for example I don't like the way it truncates text in select components. Shad is ok but and I had trouble getting it to the design spec of this app last time I tried to recreate its design spec in a playground repo, plus it has a mountain of additional dependencies that will add weight to an already pretty heavy project.

[@EseosaOsayi]

@owenwexler7214 I would advise you to go for shadcn ui the simple truth is that these stuff to implement them properly you need dependencies unless you want to implement it from scratch which our code won't be as efficient as theirs, I just started using shadcn ui for an ecomerce store I am building unless you need complex components you are only downloading framer motion and icons truth be told, atleast try it out to build a complete project then you can decide whether to use it or not

[@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.

[@ilirbajrami2902]

Besides that, he's not testing it on PageSpeed Insights but in Lighthouse on DESKTOP. So, this is only some basic stuff.

[@zayanbinzayed]

I dont think he is professional. He use lots of dependency I think for his project its unnecessary.

[@Jrrs2007]

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.

[@technologymad9253]

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

[@ChungNguyễn-g6c]

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

[@oleksandryakob7600]

Can someone tell what theme does he use for vscode?

[@CoderOne]

Halcyon

[@piyushacharya7696]

@@CoderOne Bro also could you please say what activity bar icon theme are you using? Loved this one.

[@azizoid]

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

[@owenwexler7214]

Some deployment platforms like DigitalOcean App Platform will fail builds if anything is in devDependencies.

[@MuhdHanish]

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

[@_tanzil_]

OMG bro!! You're absolutely right about the Framer motion! My website's performance is 99% on desktop but mobile, it's only 64% which is very bad! I'm gonna update my website and not use animation on mobile.

[@omarlamzah8288]

There's Way to use framer motion without bad SEO

[@_tanzil_]

@omarlamzah8288 couldn't find any. Mind sharing?

[@omarlamzah8288]

@@_tanzil_ no frame motion it required use client

[@_tanzil_]

@@omarlamzah8288 what?

[@unhealthytomato3219]

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

[@succeedwithuttam2271]

😀😀

[@mauriceneveling6472]

Idk If you use Pages or App Router in next. For App Router try to make Server componets and for Pages Router you need to make the Pages SSG. If this does Not help your First load js is way too big. Let me know If it worked for you

[@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

[@Happyday-nn6rh]

whats difference between of nextjs metadata and next-seo ?

[@sjonny-depp]

Metadata is the new native support from Next while next-seo is a standalone package which is injected and used inside Next like a component.

[@Happyday-nn6rh]

@@sjonny-depp which is better ?

[@sjonny-depp]

@@Happyday-nn6rh It's basically the same you just don't need to install another package. Me personally using the native support for my projects.

[@pospot2817]

Did a test run using page speed insight performance: 60 I would have been amazed and watched the video if your score was greater than 90

[@monahewidy3748]

great video continues 👏🇩🇿 🇪🇬

[@NatnaelAbebe-og8bt]

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

[@owenwexler7214]

it's doable but those jobs are hard to find now, Big Tech companies want people in the office

[@Way_Of_The_Light]

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

[@freeguy2418]

Without any coding practices and any image optimisation?

[@codernerd7076]

Astro is nice for static sites

[@dog4ik]

@@freeguy2418 astro has built in image optimization

[@jitxhere]

for something as simple as a blog Astro is pretty good. I switched from nextjs to astro when v2 was released. It made handling markdown just very easy. Just drop a content folder in src which contains the blog folder and that blog folder will contain the md/mdx files and it's this simple to handle markdown. Highly recommend Astri

[@acopier]

​@@dog4ik that optimization is shit. NextJS has the best.

[@aymenbachiri-yh2hd]

Thanks for sharing this infos

[@wemakee]

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

[@micanal3141]

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

[@gabrielT93x]

styledcomponents its a mistake, dont use it

[@mohammedehap5282]

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

[@olivercordingley776]

Mate. Leave him alone, not only is your comment unnecessary and irrelevant, you’re slamming this guy because of his fucking name.

[@tnsaturday]

Stop that religious obscurantism at least in software development field ftw

[@mohammedehap5282]

I understand that you may not agree with my comment, but I believe that it is important to be respectful of other people's beliefs. As Muslims, we are commanded to advise each other if we see someone doing something wrong, whether they are aware of it or not. In this case, I believe that the KZbinr's name is a matter of religious significance. The word "Maboud" is one of the names of Allah, and it is not appropriate for a Muslim to use it as their own name. I understand that you may not be familiar with Islamic beliefs, but I believe that it is important to be respectful of other people's beliefs, even if you do not agree with them. I hope that you will consider my perspective.@@tnsaturday

[@jaymahakaal5354]

Religion is complete personal matter only between the person who follow and to the god he believes. noOne has right to say something on his belief or what is right what is wrong... and it's fucking America future lies in America whether it's AI or web3 this country can't go back to mediaeval ages due a cult, he can be an atheist. A devout m0slem, cannot be intelligent because their brain is closed like black box they round like sheeps🕋

[@Devlopsofar]

@mohammadehap5282 so true

[@alfieqashwa]

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

[@TheFourthPrince]

CoderOne, based on your looks, I'm guessing you are a human being...If yes, then "Hello from the planet Earth from a fellow human being"

[@anoniem012]

We aleykum es Selam we Rahmetullahi we Berakētuh brother, may Allah bless you