How to minimize the "Minimize main-thread work" in nextjs?

[gulzaryousaf]

My next js website is very slow on mobile, how can i improve it's speed for mobile.

[hpachy]

same...

[Dimich-x33]

Same thing

[BrunoSette]

me too...

[ImranSefat]

Is there any solution this? Website is overall good in desktop but not in mobile

[bobarros]

Every project will have a different solution. It's not next.js fault, but the way PageSpeed Insights work.

This project of mine here, I know the video is causing the issue:

https://neymar-new.ideias.dev/en

It's not worthed to bother improving though.

And if the user has a fast and good experience, web vitals will not have any impact on SEO results. They are just part of the overall equation.

[seanrobenalt]

Interesting! Can you provide resources on the effect web vitals will have on SEO results? I'm running into a wall with some of the diagnostics items I'm seeing in PageSpeed insights. Not sure if they are worth investigating.

[hpachy]

Hi! I'm not sure about what you said.

Web vitals will not have any impact on SEO results

As you said it's a part of the equation to have a good referal but based on my research on a lot of forum, webSite experts, etc... look like the performance is a big part of it. For example if you web site take 5 seconds to load. Most of your users will leave the web site before his finished to load and you lose some referal so maybe (very big maybe) the performance is not the primary standard to have a good SEO and best practises but because of the performance you can loose your audimate because you site take too long time to render so it's impact your refreral... So the performance is sometime set apart but it's kind of second point which impact your referal directly.

[bobarros]

You should focus on the first part of my sentence: "And if the user has a fast and good experience..."

Averages and statistics guide web vitals. Most slow websites are not good in a lot of different aspects.

Averages and statistics miss these important details. That's why AMP pages didn't work as Google wanted and they're stepping back.

Experts and forums love averages because it's easy to write about them and they earn a lot of money out of it.

Don't get me wrong. I'm the 100 points maniac when it comes to building my projects.

But I understand when they have no value and are just for my ego. Some projects cannot afford to be fast, and it's completely ok.

You can have pages that take a long time to load, but for some reason, the user loves it. That's why some weird and slow ones have amazing page ranks.

Maybe you will find a website that has a great loading experience and the user doesn't bother or even realize the loading time.

If the user expends a lot of time on a website and many other great websites are pointing to it, web vitals will have something like zero impact.

In Portuguese and Spanish is even easier to check this.

Get the first one hundred most-visited websites from Brazil, my country. The web vitals average will be very low. I wonder if even one it's going to be above 70 for mobile users.

Web vitals are important. Don't get obsessed with it and try to understand the score for every case.

[georgebutter]

Why would Google show Core Web Vitals in the Search Console if it had no impact on SEO?

[mresmaeili]

any update on this guys?
this article on how to minimize main thread work in React can be helpful.

[bonesoul]

i'm also looking for this.

[bdlowery]

Looking for this too! Too much javascript being loaded by nextjs, even with everything fully optimized🫠

[alidarovolj]

Hey! I've seen your app on pageSpeed and it's gorgeous! Can you please give an advice for make that work?

[georgebutter]

Would https://nextjs.org/docs/messages/large-page-data affect script evaluation time?

[Ashfak-Hossain]

performance drop in mobile only

[georgebutter]

So I have drastically improved the script evaluation time of _app by appropriately loading third party vendor scripts until afterInteractive.

Now the next part I am looking into is my main chunk. Which seems to be the biggest culprit for script evaluation according to Page Speed Insights. How ever looking at the (minified) code for this chunk it think it simply contains next-router react and react-dom so not sure there is much I can do here.

[resetmerlin]

Minimizing main-thread work might sound abstract, but it essentially refers to reducing the workload on the main thread within the renderer process. To clarify, the renderer process is responsible for managing everything inside a browser tab where a website is displayed. Within the renderer process, there are various threads, including the worker thread, compositor thread, and rasterizer thread. However, the majority of the code execution occurs on the main thread.

The main thread is responsible for parsing HTML, executing JavaScript, and building the DOM. Therefore, when we talk about minimizing main-thread work, it translates to reducing rendering time. But how can we achieve this? One effective way is by choosing an appropriate rendering method, such as CSR (Client-Side Rendering), SSR (Server-Side Rendering), or SSG (Static Site Generation).

The key difference between these methods lies in who is responsible for building the main DOM: JavaScript or the server. For instance, if you use CSR, the main DOM is built by JavaScript on the client side. This means users cannot see the main content until the JavaScript executes. Consequently, if there is a large amount of JavaScript to process, the rendering time will increase significantly.

IPC is inter process communication.

So, how can we reduce JavaScript bundles? There are several options available. If you’re using React, tools like Webpack (a popular bundler) already provide optimizations for your bundles. However, there’s still room for further improvements.

One effective approach is to analyze which components take a long time to execute. Consider whether those components are truly necessary for the first content paint. If not, you can postpone their loading. A great way to achieve this is by using dynamic imports, which allow you to load JavaScript modules only when they are needed. This helps minimize the initial bundle size and improves the time to first content paint (FCP).

By dynamically importing only the essential parts of your JavaScript bundle for the initial load, you can significantly improve the overall performance of your application.

reference: https://www.sciencedirect.com/science/article/abs/pii/S0166531622000049

[georgebutter]

Another thing that made a fairly big difference in Script Evaluation was migrating away from @emotion for CSS. Emotion bundles the CSS into the JavaScript. I migrated to CSS Modules but other solutions like Tailwind or Vanilla Extract also will not bundle the CSS into JS modules.