I'm developing a Web UI library inspired by Material Design and GNOME's Adwaita, aiming for it to be lightweight and super fast with no layout shifts and minimal page load blocking. Currently, users have to write their component templates manually, but I'm considering switching to Web Components with the Lit library. However, I've noticed that using Lit and other Web Component solutions tends to cause layout shifts before full rendering. Right now, I'm deferring JavaScript execution until the page fully loads to avoid any blocking and layout jumps, although CSS still loads first. I'm looking for feedback or suggestions, especially from anyone who's faced similar performance and interactivity challenges.
2 Answers
This sounds like a great project! I’m curious about what specific issues you’re facing with Lit and Web Components causing layout problems. I’m also developing my own framework using web components and a templating engine, so any insights would be super helpful! Also, if you want, feel free to check out my site over at flitzer.dev to see what I’ve been working on.
That's a cool strategy with the deferred JavaScript! To tackle layout shifts with Web Components, consider server-side rendering or pre-rendering. This can help prevent that flash before your scripts load. I also usually mock layouts visually first before testing with a tool like Locofy. It's really helpful for spotting any blocking issues early without the tedious manual coding.
I’ve actually achieved my goal of 'no layout shift' on my site with deferring JavaScript, even after component initialization. The challenge is mainly with complex templates for some components, which can be a hassle to write repeatedly. Switching to custom elements would simplify that, but I worry about the blocking and layout shift issues.
The main issue with using Web Components is that custom elements don’t know what to render before they're registered, which leads to layout shifts. I found a workaround where I load JavaScript only after the page is rendered, but that can block the page until the JavaScript is fully loaded and executed, which isn't ideal.