Jika Anda seorang pengembang web, Anda mungkin menghabiskan banyak waktu bekerja dengan Chrome DevTools. Ini adalah salah satu alat terbaik yang tersedia untuk mendiagnosis dan meningkatkan kinerja aplikasi web Anda. Anda dapat menggunakannya untuk melacak waktu pemuatan, mengoptimalkan CSS dan JavaScript, dan memeriksa aktivitas jaringan. Namun ada satu bagian penting dari data performa yang belum diekspos oleh DevTools secara default: animasi frame panjang (LoAF).

Pada artikel ini, saya akan menunjukkan cara menggunakan Performance API Chrome dan fitur ekstensibilitas untuk mengekspos data LoAF di DevTools. Sepanjang jalan, saya akan menjelaskan apa itu LoAF, mengapa LoAF penting bagi kinerja web, dan memberikan cuplikan kode untuk membantu Anda melacak dan men-debugnya dalam proyek Anda sendiri.

Apa itu bingkai animasi panjang?

Dalam pengembangan web modern, menyediakan interaksi yang lancar dan responsif sangatlah penting. Baik itu toko online, aplikasi web, atau situs kaya konten, pengguna mengharapkan interaksi mereka lancar. Long Animation Frames (LoAF) terjadi ketika browser membutuhkan waktu terlalu lama untuk merender bingkai animasi. Bingkai animasi pada umumnya akan ditampilkan dalam waktu 16 hingga 50 milidetik (tergantung pada kecepatan bingkai target), namun jika bingkai membutuhkan waktu lebih lama, hal ini dapat mengakibatkan kegagapan atau “juttering”.

Masalah ini sangat penting ketika berbicara tentang Core Web Vitals. Bingkai animasi panjang dapat berdampak langsung pada keterlibatan dengan Next Paint (INP), salah satu metrik utama dalam Core Web Vitals Google, yang mengukur respons interaksi pengguna.

LoAF API, yang diperkenalkan di Chrome 123, membantu Anda melacak dan mengukur frame animasi yang panjang ini. Meskipun DevTools belum memaparkan informasi ini secara langsung, kita dapat menggunakan Performance API dan sedikit kode khusus untuk mengimpor data ini ke panel kinerja Chrome.

Mengekspos data LoAF di Chrome DevTools

Chrome DevTools sudah memiliki panel kinerja yang menunjukkan diagram nyala, durasi tugas, dan penanda kinerja utama, namun belum melacak LoAF secara asli. Namun, Anda dapat memperluas DevTools menggunakan PerformanceObserver API untuk merekam dan mengekspos data LoAF.

Mari kita lihat bagaimana Anda bisa melakukan ini.

Langkah 1: Mengonfigurasi PerformanceObserver

Pertama, kita perlu menggunakan PerformanceObserver API untuk melacak LoAF saat terjadi. Berikut adalah implementasi dasar dari a PerformanceObserver untuk menangkap bingkai animasi yang panjang.

if (window.PerformanceObserver) {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      console.warn(`LoAF detected at ${entry.startTime}, lasting ${entry.duration}ms`);
    });
  });

  observer.observe({ type: 'long-animation-frame', buffered: true });
}

Pengamat sederhana ini mendengarkan jenis masukan kinerja bingkai animasi panjang, yang diperkenalkan di Chrome 123. Untuk setiap LoAF yang terdeteksi, kami mencatat waktu mulai dan durasi bingkai. Meskipun ini berguna untuk proses debug dasar, ini belum terintegrasi secara berarti dengan DevTools.

Langkah 2: Integrasikan data LoAF ke Chrome DevTools

Selanjutnya, kita akan membuat metrik kinerja khusus menggunakan alat tersebut Performance.measure() API dan tetapkan properti yang memungkinkannya muncul di panel kinerja DevTools.

Berikut adalah versi lebih lanjut dari skrip kami yang tidak hanya melacak LoAF, namun juga mendorongnya ke panel performa dengan penanda visual.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Measure the LoAF
    performance.measure('LoAF', {
      start: entry.startTime,
      duration: entry.duration,
      detail: {
        devtools: {
          dataType: 'track-entry',
          track: 'Long Animation Frames',
          color: 'primary',
          tooltipText: 'Long Animation Frame',
          properties: [
            ['blockingDuration', entry.blockingDuration],
            ['firstUIEventTimestamp', entry.firstUIEventTimestamp],
            ['renderStart', entry.renderStart],
            ['styleAndLayoutStart', entry.styleAndLayoutStart]
          ]
        }
      }
    });
    
    // Add script attribution
    entry.scripts.forEach((script) => {
      performance.measure('Script Execution', {
        start: script.startTime,
        duration: script.duration,
        detail: {
          devtools: {
            dataType: 'track-entry',
            track: 'Long Animation Frames',
            color: 'secondary',
            tooltipText: 'Script Execution',
            properties: [
              ['invoker', script.invoker],
              ['invokerType', script.invokerType],
              ['sourceURL', script.sourceURL],
              ['sourceFunctionName', script.sourceFunctionName],
              ['forcedStyleAndLayoutDuration', script.forcedStyleAndLayoutDuration]
            ]
          }
        }
      });
    });
  });
});

// Observe for long-animation-frame entries
observer.observe({ type: 'long-animation-frame', buffered: true });

Dalam contoh ini kami menggunakan performance.measure() untuk menambahkan entri kinerja khusus, yang sekarang akan terlihat di panel kinerja sebagai titik data yang dapat dilacak. Kami juga menyertakan properti tambahan, seperti durasi LoAF, durasi pemblokiran, dan firstUIEventTimestamp untuk memberikan lebih banyak konteks tentang apa yang mungkin menyebabkan gambar melambat.

Dengan merinci detail eksekusi frame dan skrip, kita dapat lebih memahami operasi spesifik apa dalam frame animasi panjang yang berkontribusi terhadap penundaan.

Langkah 3: Lihat data LoAF di Chrome DevTools

Setelah Anda menambahkan metrik khusus menggunakan PerformanceObserver dan Performance API, entri khusus ini akan terlihat di panel kinerja Chrome. Anda akan melihat trek baru bernama “Bingkai Animasi Panjang” dalam diagram api, bersama dengan segmen berkode warna yang mewakili berbagai jenis masukan, seperti eksekusi skrip atau awal rendering.

Berikut tangkapan layar untuk mengilustrasikan tampilannya (gantikan tangkapan layar Anda sendiri pada panel DevTools).

Kesimpulan

Itu saja! Anda sekarang dapat dengan mudah melihat di mana bingkai animasi panjang terjadi sehingga Anda dapat berupaya membuat situs web Anda lebih cepat.