SEO performance issue with Blazor Web App

[theumairtahir]

I have created my website with Blazor web app (the goal is to make it search engine optimized) and deployed it to azure web app service.

I have implemented almost all best practices in regard to the SEO but still getting bad scores in the SEO analyzers. The main reason is the high blocking time which is due to the JavaScript loading, it includes the /_framework/blazor.web.js and other unattributable scripts which I'm still unaware of them.

I used multiple techniques like loading it synchronously, caching or using defer but nothing worked, even though I'm currently using the basic CSS theme provided with the Blazor Web App template.

Can you please guide me that which is the best way to make our site performance optimized or is there anything else which I'm missing here?

My site SEO reports:
Desktop:

Mobile:

[theumairtahir]

@SteveSandersonMS @danroth27 Have you guys faced similar issue before?

[javiercn]

@theumairtahir thanks for contacting us.

I'm surprised to see blazor.web.js showing up there.

Is your app rendering webassembly components on the first render?

[theumairtahir]

Thanks for the response @javiercn !

I'm using WebAssembly only to render interactive components. For the static content like the home page and blog post, I am using SSR with @attribute [StreamRendering].

The contact us form is basically an interactive WebAssembly component that is being rendered at the bottom of the home page, but it's not on the blog page, and the blog page also has similar results by the analyzer.

You can have a look at the code here if you're interested.

[javiercn]

@theumairtahir thanks for the additional details.

I think that might be flagging the JS because it is somewhat big. I haven't seen it in the past, but we do have enabled compression and fingerprinting for it on .NET 10.0 (even though that only helps with the download) and we have plans to break the bundle apart, but that will be post 10.0

The issue is that the bundle currently combines web.js, webassembly.js and server.js (in a simplistic way of looking at things)

[theumairtahir]

@javiercn is there any possible solution in your opinion right now, which could help me in improving the scripts load time? Because, with lower performance score I don't think we can improve our search engine rankings.

[DamianEdwards]

I'm surprised to see the script cause that much blocking time. Can it not be set to be downloaded async?
@danroth27

[theumairtahir]

@DamianEdwards can you please show an example on how to do that?

[DamianEdwards]

Hmm it might require manual extraction of the script from the assembly so you can explicitly include it in the page and mark it as async. @JamesNK you recently did something similar I believe for the Aspire dashboard?

[JamesNK]

Yes.

Do you need to extract it to mark it async? Can’t you just modify the script tag that references it?

[DamianEdwards]

Ah I was thinking it was added automatically by Blazor at runtime.

Yeah, then try the following: <script src="@Assets["_framework/blazor.web.js"]" async></script>

[theumairtahir]

@JamesNK @DamianEdwards I tried this way but still got the same results

[javiercn]

I think that downloading webassembly on the first request is likely the culprit there.

You can try some experiments to validate that, like checking on a page without any webassembly component. You should not see dotnet.native being downloaded.

I suspect that the metric for blazor.web.js is impacted by the bootstrapping of webassembly.

[theumairtahir]

@javiercn I have removed the interactive (webassembly) components from the home page. The results are a bit different from the last time but still not good.

[javiercn]

@theumairtahir thanks for the additional details.

This bit is pointing out that something is still triggering the wasm download