Solve INP Core Web Vitals scores with x-defer
The update of Core Web Vitals that introduced Interaction to Next Paint was a harmful one for Alpine.js users that have many Alpine Components on a page that require heavy computations. We solved this with a new deferring mechanism that delays the initialization of Alpine components on a page. Introducing x-defer, a new plugin introduced in Hyvä Theme 1.3.7.
Read the documentation here: Hyvä Docs: The Alpine.js x-defer plugin
Drop-in snippet to use on any Alpine.js enabled site:
Customize the selectors in deferSelectors to your needs, and the snippet below is ready to go. You can even paste it into a CMS on a live site.
