SEO
Hello, I'm trying find solution to this problem but until now I haven't solved it yet
this is my page.js
import dynamic from 'next/dynamic';
import WorldWideSection from './components/WorldWideSection/WorldWideSection';
import VisaPrepaidSection from './components/VisaPrepaidSection/VisaPrepaidSection';
const WhyVisaSection = dynamic(
() => import('./components/WhyVisaSection/WhyVisaSection'),
{ ssr: false },
);
const WhyVisaSectionpt2 = dynamic(
() => import('./components/WhyVisaSection/WhyVisaSectionpt2'),
{ ssr: false },
);
const HowWorkSection = dynamic(
() => import('./components/HowWorkSection/HowWorkSection'),
{ ssr: false },
);
const DownloadSection = dynamic(
() => import('./components/DownloadSection/DownloadSection'),
{ ssr: false },
);
const DownloadSectionpt2 = dynamic(
() => import('./components/DownloadSection/DownloadSectionpt2'),
{ ssr: false },
);
const FAQSection = dynamic(() => import('./components/FAQSection/FAQSection'), {
ssr: false,
});
export default function Home() {
return (
<div>
<WorldWideSection />
<VisaPrepaidSection />
<WhyVisaSection />
<WhyVisaSectionpt2 />
<HowWorkSection />
<DownloadSection />
<DownloadSectionpt2 />
<FAQSection />
</div>
);
}
30 Replies
have you considered enabling ssr?
you are rendering everything on the client, and the emulated client for testing is 6x slower than whatever core the lighthouse is executing in
it emulates a very very bad phone from a long time ago
I'll try
It makes it better in performance but it adds more diagnostics
I'm still having the reduce javascript execution time @ἔρως
if this is an unfinished project, ignore this and focus on finishing it
if this is a finished project, then you will have to use the profiler tool
its not yet finished but they want me to make sure that every page is SEO ready.
well, focus on the document structure
You will want them to be SSR then as Epic mentioned
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering
Or prerender them static (SSG)
is this correct?
const WorldWideSection = dynamic(
() => import('./components/WorldWideSection/WorldWideSection'),
);
this is the result after wards
in desktop the performance is 100 but in mobile its low
maybe you need to move more stuff to the server side
yeah it helps and I disabled pre rendering on the components that don't need yet
the more you move to the server, the better
it isnt always the case, by the way
but in this case, you're really suffocating the poor emulated device
yeah, using the ssr:false doesnt really helps the app may have cached more assets, giving a slightly better score the first time. but after reloading a few times it slows down
are you using memoization?
no not yet bro, how can I apply it? my sections are only composed of informations, and there are images on the top fold area
i don't know how to use it correctly
but since you didn't finish the website, just finish it and then apply optimizations
you can't optimize for lighthouse scores before you have everything done
it's working on checking a specific page since I tested it on different tabs on my website.
did you finished that tab?
yeah the tab is finished
is the site finished?
the site is not finished yet, does it affects the performance. this is my current structure
it may, it may not
you won't know unless you finish it
yeah, but its only 20% I think of the entire app
finish it
you're trying to optimize the color of the walls and the glass to avoid thermal loss, but your house doesn't even have the foundation built
owww, thank you for that information
you can check about memoization, which may help a fair chunk, but you don't have it ready enough to test
anyways I've been improving this page for almost 3 days now haha
maybe it's time to finish other things