Wie kann ich kumulative Layoutverschiebungen in Lit vermeiden?
Posted: 07 Jan 2025, 05:07
Ich habe ein Lit-Projekt und Chromes Lighthouse weist eine sehr hohe kumulative Layoutverschiebung (CLS) auf. Ich gehe davon aus, dass das Problem dadurch entsteht, dass das CSS der Komponente mit JS-Dateien geladen wird und nicht (?) mit einem In-Header geladen werden kann. Da CSS zu spät geladen wird, verschiebt sich das Layout.
Angenommen, wir haben verschachtelte Komponenten wie
Und diese Komponente zwei ist definiert als
Gibt es eine Möglichkeit, das CSS von Komponente zwei früher zu laden, damit es nicht zu einer Layoutverschiebung kommt?
Wenn das Problem bei Komponente-2 läge? Erstens wäre es einfach, da seine Höhe im Stylesheet in head definiert werden könnte. Dieser Ansatz würde jedoch mit (möglicherweise tief) verschachtelten Komponenten nicht funktionieren.
Angenommen, wir haben verschachtelte Komponenten wie
Code: Select all
Code: Select all
import {css, html, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'
@customElement('component-two')
export class ComponentTwo extends LitElement {
static styles = css`
:host {
display: block;
min-height: 500px;
}
`
render() {
return html`
Something
`
}
}
declare global {
interface HTMLElementTagNameMap {
'component-two': ComponentTwo
}
}
Wenn das Problem bei Komponente-2 läge? Erstens wäre es einfach, da seine Höhe im Stylesheet in head definiert werden könnte. Dieser Ansatz würde jedoch mit (möglicherweise tief) verschachtelten Komponenten nicht funktionieren.