Performance

Performance-related visible settings on the browser side are given via the data-luis attribute. This page covers only the runtime values you give directly.

<link rel="stylesheet" href="./styles.luis" data-luis="lazy">

Available Values

`data-luis` value	Effect	When to use
`lazy`	Activates observed rules later based on the viewport	When you want to lighten the initial load on long pages
`worker`	Forces compilation onto the worker path	When you want to free up the main thread on large `.luis` sources
`!worker`	Keeps compilation on the main thread	When you don't want a worker or want to pin the behavior

Multiple values can be given together:

<link rel="stylesheet" href="./styles.luis" data-luis="lazy,worker">

`lazy`

lazy is used when you want to produce less CSS on the initial load, especially for observed rules.

<link rel="stylesheet" href="./cards.luis" data-luis="lazy">

Short effect:

viewport content comes first
observed areas further down activate later
reduces initial load on long document and list pages

Observed Behavior in `lazy` Mode

lazy makes a difference especially for rules written with ? and ?!.

For `?`

Situation	Behavior
If selector is in viewport on first compilation	Rule is generated
If selector is outside viewport on first compilation	Waits; generated when it enters the viewport
If element is later added to the DOM	Generated

For `?!`

Situation	Behavior
If selector is in viewport on first compilation	Rule is generated
If selector is outside viewport on first compilation	Waits; generated when it enters the viewport
If a new element matching the same selector is later added to the DOM	Not generated

Quick Summary for `lazy`

	`?`	`?!`
If starting in viewport	Generated	Generated
If starting outside viewport	Waits on entry, generated when visible	Waits on entry, generated when visible
If later added to DOM	Generated	Not generated

`worker`

worker forces .luis compilation onto the worker side.

<link rel="stylesheet" href="./dashboard.luis" data-luis="worker">

Short effect:

load on the main thread is reduced for large sources
fewer freezes during scroll, click, and input
compilation behavior becomes safer for heavier pages

Observed Behavior in `worker` Mode

worker does not change observed semantics. That is, when ? and ?! rules activate remains the same; what changes is which side the compilation work runs on.

Rule type	Without `worker`	With `worker`
`?`	Activates when DOM matches	Same
`?!`	Activates for first appropriate matches	Same
`lazy + ?`	May be delayed based on viewport	Same
`lazy + ?!`	Opens for first visible matches, not for newly added ones	Same

So the worker choice answers this question:

do you want to move the compile load off the main thread?

But it does not change this question:

do you want to set up observed behavior with ? or ?!?

Practical Example

<link rel="stylesheet" href="./feed.luis" data-luis="worker">

In this usage:

the compilation of the large .luis file is moved to the worker side
but .card? still remains as dynamic observed
.hero?! still remains as initial observed

`!worker`

!worker disables the worker path and keeps compilation on the main thread.

<link rel="stylesheet" href="./small-widget.luis" data-luis="!worker">

You generally use this when:

the source is small
you don't want to use a worker
you want to explicitly pin the behavior

Combined Usage

Most common combination:

<link rel="stylesheet" href="./feed.luis" data-luis="lazy,worker">

This combination means:

observed activation becomes later and more selective
compilation work is moved to the worker side

Observed With `lazy + worker`

Situation	Result
`.item?` is outside viewport	Lazy waits; activates when visible
`.item?` is later added to DOM	Activates dynamically
`.item?!` is outside viewport	Lazy waits; activates when visible
`.item?!` is later added to DOM	Does not activate again

In this combination:

lazy affects when the observed rule opens
worker affects which side the compilation runs on

So one controls timing, the other controls the execution path.

Default Behavior

If data-luis is not given at all, the runtime uses default behavior:

<link rel="stylesheet" href="./styles.luis">

In this case:

lazy is not on
worker is not forced
it is also not disabled with !worker

Performance

Available Values

lazy

Observed Behavior in lazy Mode

For ?

For ?!

Quick Summary for lazy

worker

Observed Behavior in worker Mode