De Long Animation Frame API is nu verzonden, de Long Animation Frame API is nu verzonden

Barry Pollard

Browserondersteuning

  • Chroom: 123.
  • Rand: 123.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Bron

De Long Animation Frame API (LoAF-uitgesproken als Lo-Af) is verzonden vanaf Chrome 123 en we hebben nu ook onze tools en richtlijnen bijgewerkt om u te helpen het meeste uit deze nieuwe API te halen.

LoAF is beschikbaar in web-vitals JavaScript-bibliotheek

Versie 4 van de web-vitals JavaScript-bibliotheek bevat het lange animatieframe (of frames) gerelateerd aan de INP-interactie, zoals gedocumenteerd in de gids Vind langzame interacties in het veld , met informatie over hoe u kunt profiteren van LoAF .

Op Google I/O 2024 presenteerden we deze informatie in de Nieuwe veldinzichten voor het debuggen van INP- gesprekken, inclusief het gebruik van LoAF om andere scripts te identificeren die uw INP-interacties vertragen.

Door de API rechtstreeks in de bibliotheek te integreren, kunnen RUM-partners deze API gebruiken om deze gegevens openbaar te maken, waaronder RUMVision en DebugBear . Dit biedt ook een open-source referentie-implementatie voor andere RUM-aanbieders die dit voor hun eigen product willen gebruiken.

LoAF is beschikbaar in de Web Vitals-extensie

De Web Vitals-extensie is bijgewerkt met gegevens over lange animatieframes om u te helpen bij het debuggen van INP-interacties:

Registratie van de Web Vitals Extensieconsole.
Loggen van de Web Vitals Extension-console geeft LoAF-gegevens weer.

Dit is handig om te zien welke andere scripts actief zijn op het moment van uw interactie, die vaak de oorzaak zijn van vertragingen (met name invoervertragingen) maar tot nu toe moeilijk te diagnosticeren waren bij het gebruik van de extensie.

Bijgewerkte richtlijnen voor het gebruik van LoAF

We hebben ook onze richtlijnen in onze belangrijkste Long Animation Frames API-documentatie bijgewerkt om u te helpen het meeste uit deze API te halen.

Voorbeelden van lange animatieframes op een pagina, waarbij de INP LoAF is gemarkeerd.
Een pagina kan veel LoAF's hebben, waarvan er één gerelateerd is aan de INP-interactie.

Deze richtlijnen zijn gebaseerd op hoe we deze API in het veld hebben zien gebruiken, bijvoorbeeld in deze casestudy van Taboola . We werken aan een aantal andere casestudies en kijken ernaar uit om in de toekomst meer van dit soort voorbeelden te publiceren.

Daarnaast hebben we de API ook op MDN gedocumenteerd .

Conclusie

De Long Animation Frames API is een opwindende toevoeging aan het webplatform en we hebben al een aantal sites gezien die deze API gebruiken om hun sites te verbeteren, zelfs tijdens de proeffase. We kijken uit naar een bredere adoptie van de API in tooling en een verbeterde responsiviteit op websites dankzij deze API.