chromium lighthouse tells me :
performance 89
(orange)
Cumulative Layout Shift 0.388
(red alert !)
Avoid large layout shifts
html :
<html>
...
<body class="loading">
...some static elements
</body>
...
</html>
css :
body.loading * { display : none; }
js when DOM is loaded :
document.addEventListener('DOMContentLoaded', (e) => {
//do many dynamic stuff with the DOM depending on user data (& register events listeners)
})
& finally when everything is in place in the dom, through window.onload
(or if that event comes too soon, a callback once everything is in place) :
document.body.classList.remove('loading')
If I remove the loading
class from the html lighthouse says great perf 100.
I thought before seeing this lighthouse analysis that my layout was shifting from a simple loading (css) animation to a completely ready page with no visible changes of the dom for the user during the load so i assume now that i am wrong, doing something wrong & missing something.
How should i do that instead for optimal loading while not risking having elements that are not ready ever being displayed ?