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.
@@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.
@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
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.
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.
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
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.
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
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
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
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
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 TH-camr'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
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🕋
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.
so does using mui customized theme is the reason my score too low in performance
I wouldn't use headlessui even if I was paid to
Material UI is super heavy and complex
@@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.
@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
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.
Besides that, he's not testing it on PageSpeed Insights but in Lighthouse on DESKTOP. So, this is only some basic stuff.
I dont think he is professional. He use lots of dependency I think for his project its unnecessary.
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.
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
Can someone tell what theme does he use for vscode?
Halcyon
@@CoderOne Bro also could you please say what activity bar icon theme are you using? Loved this one.
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.
There's Way to use framer motion without bad SEO
@omarlamzah8288 couldn't find any. Mind sharing?
@@_tanzil_ no frame motion it required use client
@@omarlamzah8288 what?
Why dont you move `devDependencies` out of the `dependencies`?
Some deployment platforms like DigitalOcean App Platform will fail builds if anything is in devDependencies.
Thanks for sharing! I am confusing what different between images in source code and in public folder (performance, bundle size, ... )
Performing lighthouse on the same website(portfolio) the scores are lower
Performance 59
Accessibility 89
Best Practices 100
SEO 98
😀😀
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
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
whats difference between of nextjs metadata and next-seo ?
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.
@@sjonny-depp which is better ?
@@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.
heyy, where is this projects source code i found out an bug!!!🐞
great video continues 👏🇩🇿 🇪🇬
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
Thanks for sharing this infos
How about just using Astro instead? It constantly scores high in Light house.
Without any coding practices and any image optimisation?
Astro is nice for static sites
@@freeguy2418 astro has built in image optimization
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
@@dog4ik that optimization is shit. NextJS has the best.
if start coding, web development or full stack dev today is it an opportunity to get a job remotely
it's doable but those jobs are hard to find now, Big Tech companies want people in the office
This is the type of person that say you can be a designer with paint
very useful, you can do better using the new app router, maybe for a few things
styledcomponents its a mistake, dont use it
based on your name, i'm guessing you are a muslim. If yes, then Assalaamu 'alaykum from Indonesia.
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"
We aleykum es Selam we Rahmetullahi we Berakētuh brother, may Allah bless you
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
Mate. Leave him alone, not only is your comment unnecessary and irrelevant, you’re slamming this guy because of his fucking name.
Stop that religious obscurantism at least in software development field ftw
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 TH-camr'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
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🕋
@mohammadehap5282 so true