L'API Long Animation Frame (loAF, pronunciato Lo-Af) è stata spedita da Chrome 123 e abbiamo aggiornato anche i nostri strumenti e le nostre indicazioni per aiutarti a ottenere il massimo da questa nuova API.
LoAF è disponibile nella libreria JavaScript web-vitals
La versione 4 della libreria JavaScript web-vitals include il lungo frame (o frame) di animazione relativo all'interazione INP, come documentato nella guida Trovare le interazioni lente nel campo per includere informazioni su come sfruttare LoAF.
In occasione della conferenza Google I/O 2024, abbiamo presentato queste informazioni nell'intervento New Field Insights for debug INP (Approfondimenti sui campi per il debug INP), tra cui l'utilizzo di LoAF per identificare altri script che rallentano le interazioni INP.
L'integrazione dell'API direttamente nella libreria consente ai partner RUM che utilizzano questa API di esporre questi dati, inclusi RUMVision e DebugBear. Fornisce anche un'implementazione di riferimento open source per altri provider di RUM che vogliono utilizzarla per il proprio prodotto.
LoAF è disponibile nell'estensione Web Vitals
L'estensione Web Vitals è stata aggiornata in modo da includere dati relativi ai frame di animazione lunghi per aiutarti a eseguire il debug delle interazioni INP:
Ciò è utile per vedere quali altri script sono in esecuzione al momento dell'interazione, che spesso sono la causa di ritardi (in particolare ritardi nell'input), ma fino a questo momento erano difficili da diagnosticare quando si utilizza l'estensione.
Indicazioni aggiornate sull'utilizzo di LoAF
Abbiamo inoltre aggiornato le nostre indicazioni nella documentazione principale dell'API Long Animation Frames per aiutarti a ottenere il massimo da questa API.
Queste indicazioni si basano sull'utilizzo di questa API sul campo, ad esempio in questo case study di Taboola. Stiamo lavorando su una serie di altri case study e ci auguriamo di pubblicare altri esempi simili in futuro.
Inoltre, abbiamo documentato l'API su MDN.
Conclusione
L'API Long Animation Frames è un'entusiasmante aggiunta alla piattaforma web e abbiamo già visto diversi siti utilizzare questa API per migliorare i propri siti anche durante la fase di prova. Ci auguriamo di un'adozione più ampia dell'API negli strumenti e di una migliore reattività sui siti web grazie a questa API.