Loading progress .svg in the default Blazor template causes a Cumulative Layout Shift on the <body> tag #57212
Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the bug
- Default loading bar has a short height and positioned part way through the page. This is the initial
<body>for the page. - When the main app loads, the
<body>needs repositioned to 0,0 and becomes the full length of the webpage - In dev tools performance monitor, you can see that when the loading bar is removed and the main content of the app loads, a "Cumulative Layout Shift" is caused.
- Google Chrome Lighthouse and https://pagespeed.web.dev/ also identify this as a CLS.
- Although in this case I don't think it noticeably impacts performances or the user experience, dev tools and Google identifying it mean it could hurt SEO performance. (Blazor apps will have a lower overall "Performance" score in lighthouse if they have this CLS).
Expected Behavior
The default Blazor templates do not have any Content Layout Shifts when loading. A default Blazor app should have a perfect CLS score in lighthouse.
Steps To Reproduce
https://github.com/BurkusCat/BlazorClsTest
- Create a blank Blazor WASM project
- Launch the application in Chrome/Edge
- Open devtools and go to the Performance tab
- Press the "Start profiling and reload page" button
- Observe a cumulative layout shift:
Lighthouse test:
- Launch the application in Chrome
- Open devtools and go to the Lighthouse tab
- Configure your test for which device you want and press "Analyse page load"
- Observe a poor CLS score:
Exceptions (if any)
No response
.NET Version
8.0.303
Anything else?
No response