How to improve NuxtJS site performance

[j4vmc]

Hi,

I’m using Netlify for the first time to host my company’s website. I’m a long time AWS user but I decided to go with Netlify in this occasion after reading about the simplicity for deployment and the boost in performance when compared to other similar platforms.

While deployment is certainly a breeze and trouble-free, performance is disappointing, to say the least. The best performance score with a fresh cache I can get in Lighthouse is between 70-80% but it’s like a lottery, every single time gives a random score, which is a far cry from the other websites from tutorials and bloggers that assure they’re getting minimum 95% and in many occasions 100%.

I’ve followed every possible recommendation to increase performance, like adding my DNS to Netlify, enabling cache, hardSource, extractCSS, purgeCSS, cache control headers, http2 push/preconnect/preload, Vue component caching, tree shaking, async imports, image compression and lazy loading, etc. Basically every possible thing that you can think of to increase performance has been enabled and configured.

In the Netlify dashboard I’ve enabled the prerendering option too, which increased the performance from a shameful 34%. I can’t enable the other post processing options because they break the site.

My experience with your service makes me wonder if the bloggers reviewing your platform are getting paid and their websites given special treatment.

Is this random performance score between 70-80% the best I can hope for while using Netlify? Does the pro plan increases performance or is it exactly the same? I pride myself in always getting the highest possible scores across all the analysis tools, so this is a crucial issue for me, and if this is the best possible score, it’s not a platform that I could use for my company or my clients.

[fool]

That does sound worse than expected and we’ll be happy to take a look!

What’s the URL you’re testing, please, so we can check config and give the best possible advice? Speed is very dependent on things we can only check in-situ, like DNS configuration, header and redirect configuration, and password protection.

[j4vmc]

Hi,

Can I send the link via private message?

[fool]

You can, but we’ll probably be slower to answer - we take turns answering in community and I won’t check back for several days. Better to put it in the thread here

[j4vmc]

It’s a production URL and I don’t want unnecessary traffic from an open forum. I sent you a message.

[fool]

OK. If you need private support, that’s available with our Pro plan. Otherwise we’ll have to answer you publicly - that’s the trade off for getting free support, is everyone gets to watch.

We will have to include the URL in our answer, so it will become obvious to others who may see this thread, so I guess at this point we are waiting for you to decide if you’d like help or no.

[j4vmc]

What plan do I need to keep the url private?

[fool]

Normally we would have asked you to pay, but since there are no sure things in performance testing and debugging, and thus this may not work out, we instead unlisted this thread - you (and others) cannot “find” it by searching in our community, so let’s work in here. Assuming we find interesting things we’ll consider eliding your domain and re-listing the thread (with your approval after we elide), but in case we don’t, we didn’t force you to sign up for no results.

Let me know what you think.

[j4vmc]

Would still be indexed in Google?

For me the only issue with it is that being live all the analytics would be all over the place. If I need to upgrade to the pro plan I wouldn’t mind, but I wouldn’t upgrade to the enterprise, as I can’t afford it.

[luke]

Hi, @j4vmc.

This unlisted topic currently returns an HTTP header of x-robots-tag: noindex. This means Google’s bots won’t index this page unless we stop including this header (which we won’t while it is unlisted):

Robots Meta Tags Specifications | Google Search Central  | ...

[luke]

Hi, @j4vmc, I’ve taken a look at the results of Lightspeed tests for this site and I’m not seeing anything Netlify specific in those results.

If I run the test of this site without any throttling using the Lighthouse audit in Chrome developer tools I get a 99 or 100 score each time:

Now, if I apply throttling using the “Simulated Slow 4G, 4x CPU Slowdown” option (or use the web based version for mobile) I get something more like this:

That isn’t Netlify, that is the performance of this site under those throttling conditions. The same Netlify site without throttling is a 100.

The categories of opportunities and diagnostics for the 67 score version include the following:

• Serve static assets with an efficient cache policy 5 resources found
• Properly size images
• Defer offscreen image
• Minimize main-thread work

For the “cache policy” opportunities, they are (all five) assets not served by Netlify. For example:

https://js.hs-scripts.com/6005667.js
https://i.ytimg.com/vi_webp/fAWJLaC6C74/maxresdefault.webp
https://js.hs-analytics.net/analytics/1582611000000/6005667.js
https://js.usemessages.com/conversations-embed.js
https://i.ytimg.com/vi_webp/m5YgDQAfN6M/maxresdefault.webp

None of those are served by Netlify and we cannot control their caching header(s).

The same applies to “Properly size images”, “Defer offscreen images”, and “Minimize main-thread work”. That is the site design and Netlify doesn’t design the site. This is not something that Netlify controls.

Please note our support team can only assist with Netlify specific issues. This appears to be a question about how to resolve these issues with the NuxtJS site. We don’t provide technical support for NuxtJS itself.

If there were issues with our hosting of the site (and there is no evidence of that) we’re happy to assist but these design questions are not covered by the scope of our support. It also might help ask this question in a NuxtJS specific community or forum.

If there are questions about Netlify (our hosting, build process, etc), please let us know.