L'API Long Animation Frame è stata spedita

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

L'API Long Animation Frame (LoAF, pronunciata Lo-Af) è disponibile da Chrome 123 e ora abbiamo anche aggiornato i nostri strumenti e le nostre indicazioni per aiutarti a sfruttare al meglio questa nuova API.

La versione 4 della libreria JavaScript web-vitals include il frame (o i frame) di animazione lungo relativo all'interazione INP, come descritto nella guida Trovare interazioni lente sul campo per includere informazioni su come sfruttare LoAF.

In occasione del Google I/O 2024, abbiamo presentato queste informazioni nel talk Nuovi approfondimenti sul campo per il debug dell'INP, inclusa la sfruttazione di LoAF per identificare altri script che rallentano le interazioni con l'INP.

L'integrazione dell'API direttamente nella libreria consente ai partner RUM che utilizzano questa API di esporre questi dati, ad esempio RUMVision e DebugBear. Fornisce inoltre un'implementazione di riferimento open source per altri provider di RUM che vogliono aggiungerlo al proprio prodotto.

LoAF è disponibile nell'estensione Web Vitals

L'estensione Web Vitals è stata aggiornata per includere i dati dei fotogrammi di animazione lunghi per aiutarti a eseguire il debug delle interazioni INP:

Log della console dell'estensione Web Vitals.
La console di registrazione dell'estensione Web Vitals mostra i dati LoAF.

Questo è utile per vedere quali altri script sono in esecuzione al momento dell'interazione, che spesso sono la causa di ritardi (in particolare ritardi di inserimento), ma finora erano difficili da diagnosticare quando si utilizzava l'estensione.

Linee guida aggiornate sull'utilizzo di LoAF

Inoltre, abbiamo aggiornato le indicazioni nella documentazione principale dell'API Long Animation Frames per aiutarti a ottenere il massimo da questa API.

Esempi di frame di animazione lunghi in una pagina, con l'elemento INP LoAF evidenziato.
Una pagina può avere molti LoAF, uno dei quali è correlato all'interazione INP.

Queste indicazioni si basano sull'utilizzo che abbiamo osservato di questa API sul campo, ad esempio in questo case study di Taboola. Stiamo lavorando a una serie di altri casi di studio e non vediamo l'ora di pubblicare altri esempi come questo in futuro.

Inoltre, abbiamo anche documentato l'API su MDN.

Conclusione

L'API Long Animation Frames è un'aggiunta entusiasmante alla piattaforma web e abbiamo già visto diversi siti che la utilizzano per migliorare i propri siti anche durante la fase di prova. Ci auguriamo che questa API venga adottata più ampiamente negli strumenti e che migliori la reattività sui siti web.