In the Astro.js framework, there are some derivatives that allow us to hydrate components with javascript only when it's visible or when the browser is idle.

For instance, suppose you have a landing page where most of the content is static HTML CSS, but there is a form that needs javascript and a section where we need blog posts from an API. To deliver a good user experience, should we load them using idle or visible directives?

CodePudding user response：

It really depends on whether or not these components are below or above the fold (places you can't see on initial load, IE components you need to scroll to see)

For the form idle directives would be my best recommendation, and if the blog posts are above the fold then set them to the load directive otherwise just use the idle directive.

Also, visible directives should only be used on low-priority items, usually, items that are at the bottom of a page / below the fold.