Shopify Long Animation Frame (LoAF) script invokers and the Core Web Vitals

Sites with classic script evaluation Long Animation Frame (LoAF) script invoker type have a good INP most often: 93%, against 93% of all Shopify sites. Sites with timer and rAF callbacks LoAF invokers have it least often, at 90%.

Classic script evaluation is the most used: 58.0% of Shopify sites.

Vue sets the Long Animation Frame (LoAF) script invoker type to classic script evaluation on 55% of its sites, and 91% of Vue sites have a good INP, against 93% of all sites.

FrameworkLong Animation Frame (LoAF) script invoker type on its sitesGood INP

Shopify sites with Long Animation Frame (LoAF) script invoker type 5,225 sitesClassic <script> evaluation 58%DOM event listener (click / scroll / input) 38%Timer / rAF callback (setTimeout / requestAnimationFrame) 32%93%

jQuery 2,073 sitesClassic <script> evaluation 54%DOM event listener (click / scroll / input) 41%Timer / rAF callback (setTimeout / requestAnimationFrame) 34%92%

Vue 652 sitesClassic <script> evaluation 55%DOM event listener (click / scroll / input) 40%Timer / rAF callback (setTimeout / requestAnimationFrame) 35%91%

Classic <script> evaluation DOM event listener (click / scroll / input) Timer / rAF callback (setTimeout / requestAnimationFrame) ES module <script type="module"> evaluation Promise microtask resolution (then / async-await)

Does the framework explain the Long Animation Frame (LoAF) script invoker type difference?

On jQuery, 93% of sites with classic script evaluation Long Animation Frame (LoAF) script invoker type have a good INP, against 89% of jQuery sites with DOM event listeners. Within jQuery, sites with classic script evaluation have a good INP more often. On Vue, 92% of sites with classic script evaluation Long Animation Frame (LoAF) script invoker type have a good INP, against 94% of Vue sites with DOM event listeners. Within Vue, sites with classic script evaluation and DOM event listeners have a good INP about equally often.

What triggers main-thread Long Animation Frames during load and interaction

The Long Animation Frames API (LoAF) attributes every frame over 50ms to the exact invoker that started the script task. Across 1,996 sites (38.2% of LoAF sites), DOM event listeners trigger long frames (91% good INP, 118ms median). Classic script evaluation accounts for 58.0% (93% good INP) and timer/rAF user-callbacks account for 31.9% (90% good INP), while heavy module-script evaluation (9.3%) and unbatched Promise microtasks (1.1%) drop to 91% and 85% good INP.