Fixing INP performance with x-defer alpine.js plugin

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.


Related Posts