0

I have a website that uses webcomponents to add some extra interactivity.

In this case a carousel created in Svelte

<svelte:options customElement={{
    tag: "carousel",
    shadow: "open"
}} />

The nice parts with this is that I can server side render the content of <carousel> and it will be visible for search crawlers.

however the problem is that the content will render instantly without the styles that comes with the <carousel> tag, making the entire side flicker and layout shift once the webcomponent is loaded.

Are there any smart ways of delaying the initial render to the viewport, while still having it SEO friendly?

Improve this question
1
  • A simple way to delay the render would be this method. However, instead of delaying the render, you could have a look at your styles. There are several ways to include styles in your HTML. The best way for styles, that are needed for the initial render, is preloading the CSS file or simply put them directly in the HTML using <styles>. Commented Jun 19 at 8:15
Related questions
1670
<meta charset="utf-8"> vs <meta http-equiv="Content-Type">
1751
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
1469
How to align content of a div to the bottom
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.