Garis Waktu Kinerja: Panduan Komprehensif untuk Pengumpulan Metrik

Di dunia digital yang serba cepat saat ini, kinerja situs web adalah yang terpenting. Pengguna mengharapkan situs web dimuat dengan cepat dan merespons secara instan. Situs web yang lambat dapat menyebabkan frustrasi, sesi yang ditinggalkan, dan pada akhirnya, kehilangan pendapatan. Untungnya, peramban web modern menyediakan alat canggih untuk mengukur dan menganalisis kinerja situs web. Salah satu alat yang paling berharga ini adalah Performance Timeline API.

Panduan komprehensif ini akan menjelajahi Performance Timeline API secara mendetail, mencakup segala sesuatu mulai dari konsep dasarnya hingga teknik lanjutan untuk mengumpulkan dan menganalisis metrik kinerja. Kita akan mendalami berbagai jenis entri kinerja, menunjukkan cara menggunakan API secara efektif, dan memberikan contoh praktis untuk membantu Anda mengoptimalkan kinerja situs web Anda.

Apa itu Performance Timeline API?

Performance Timeline API adalah sekumpulan antarmuka JavaScript yang menyediakan akses ke data terkait kinerja yang dikumpulkan oleh browser. Ini memungkinkan pengembang untuk mengukur berbagai aspek kinerja situs web, seperti:

• Waktu muat halaman
• Waktu pemuatan sumber daya (gambar, skrip, stylesheet)
• Pengukuran waktu pengguna
• Frame rate dan kinerja rendering
• Penggunaan memori

Dengan mengumpulkan dan menganalisis data ini, pengembang dapat mengidentifikasi hambatan kinerja dan menerapkan optimasi untuk meningkatkan pengalaman pengguna. API ini menyediakan cara standar untuk mengakses data kinerja, sehingga memudahkan pembuatan alat pemantauan kinerja lintas-browser.

Konsep dan Antarmuka Utama

Performance Timeline API berkisar pada beberapa konsep dan antarmuka utama:

• Performance Timeline: Mewakili garis waktu peristiwa kinerja yang telah terjadi selama masa aktif halaman web. Ini adalah titik pusat untuk mengakses data kinerja.
• Performance Entry: Mewakili satu peristiwa kinerja, seperti peristiwa pemuatan sumber daya atau pengukuran waktu yang ditentukan pengguna.
• Performance Observer: Memungkinkan pengembang untuk memantau Performance Timeline untuk entri kinerja baru dan meresponsnya secara real-time.
• Objek `performance`: Objek global (`window.performance`) yang menyediakan akses ke Performance Timeline dan metode terkait.

Objek `performance`

Objek `performance` adalah titik awal untuk berinteraksi dengan Performance Timeline API. Objek ini menyediakan metode untuk mengambil entri kinerja, membersihkan garis waktu, dan membuat pengamat kinerja. Beberapa metode yang paling umum digunakan meliputi:

• `performance.getEntries()`: Mengembalikan array dari semua entri kinerja dalam garis waktu.
• `performance.getEntriesByName(name, entryType)`: Mengembalikan array entri kinerja dengan nama dan jenis entri tertentu.
• `performance.getEntriesByType(entryType)`: Mengembalikan array entri kinerja dari jenis tertentu.
• `performance.clearMarks(markName)`: Membersihkan penanda kinerja (performance mark) dengan nama tertentu.
• `performance.clearMeasures(measureName)`: Membersihkan pengukuran kinerja (performance measure) dengan nama tertentu.
• `performance.now()`: Mengembalikan stempel waktu resolusi tinggi, biasanya dalam milidetik, yang mewakili waktu yang telah berlalu sejak navigasi dimulai. Ini sangat penting untuk mengukur durasi.

Jenis Entri Kinerja

Performance Timeline API mendefinisikan beberapa jenis entri kinerja yang berbeda, masing-masing mewakili jenis peristiwa kinerja tertentu. Beberapa jenis entri yang paling penting meliputi:

• `navigation`: Mewakili waktu navigasi untuk pemuatan halaman, termasuk pencarian DNS, koneksi TCP, waktu permintaan, dan respons.
• `resource`: Mewakili pemuatan sumber daya tertentu, seperti gambar, skrip, atau stylesheet.
• `mark`: Mewakili stempel waktu yang ditentukan pengguna dalam garis waktu.
• `measure`: Mewakili durasi yang ditentukan pengguna dalam garis waktu, dihitung antara dua penanda (mark).
• `paint`: Mewakili waktu yang dibutuhkan browser untuk melukis konten pertama di layar (First Paint) dan konten bermakna pertama (First Contentful Paint).
• `longtask`: Mewakili tugas yang memblokir utas utama untuk jangka waktu yang lama (biasanya lebih dari 50ms), yang berpotensi menyebabkan UI jank (macet).
• `event`: Mewakili peristiwa browser, seperti klik mouse atau penekanan tombol.
• `layout-shift`: Mewakili pergeseran tata letak halaman yang tidak terduga yang dapat mengganggu pengalaman pengguna (Cumulative Layout Shift).
• `largest-contentful-paint`: Mewakili waktu yang dibutuhkan elemen konten terbesar di viewport untuk menjadi terlihat.

Mengumpulkan Metrik Kinerja

Ada beberapa cara untuk mengumpulkan metrik kinerja menggunakan Performance Timeline API. Pendekatan yang paling umum meliputi:

• Mengambil entri langsung dari garis waktu: Menggunakan `performance.getEntries()`, `performance.getEntriesByName()`, atau `performance.getEntriesByType()` untuk mengambil entri kinerja tertentu.
• Menggunakan Performance Observer: Memantau garis waktu untuk entri baru dan meresponsnya secara real-time.

Mengambil Entri Secara Langsung

Cara termudah untuk mengumpulkan metrik kinerja adalah dengan mengambil entri langsung dari garis waktu. Ini berguna untuk mengumpulkan data setelah peristiwa tertentu terjadi, seperti setelah halaman dimuat atau setelah pengguna berinteraksi dengan elemen tertentu.

Berikut adalah contoh cara mengambil semua entri sumber daya dari garis waktu:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Sumber Daya: ${entry.name}, Durasi: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Kode ini mengambil semua entri jenis "resource" dan mencatat nama serta durasi setiap sumber daya ke konsol.

Menggunakan Performance Observer

Performance Observer memungkinkan Anda untuk memantau Performance Timeline untuk entri kinerja baru dan meresponsnya secara real-time. Ini sangat berguna untuk mengumpulkan data saat tersedia, tanpa harus memeriksa garis waktu berulang kali.

Berikut adalah contoh cara menggunakan Performance Observer untuk memantau entri sumber daya baru:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Sumber daya dimuat: ${entry.name}, durasi: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Kode ini membuat Performance Observer yang mendengarkan entri baru jenis "resource". Ketika entri sumber daya baru ditambahkan ke garis waktu, fungsi callback observer dieksekusi, mencatat nama dan durasi sumber daya ke konsol. Metode `observer.observe()` menentukan jenis entri mana yang harus dipantau oleh observer.

Mengukur Waktu Pengguna (User Timing)

Performance Timeline API juga memungkinkan Anda untuk mendefinisikan metrik kinerja kustom Anda sendiri menggunakan jenis entri `mark` dan `measure`. Ini berguna untuk mengukur waktu yang dibutuhkan bagian tertentu dari aplikasi Anda untuk dieksekusi, seperti merender komponen atau memproses input pengguna.

Untuk mengukur waktu pengguna, Anda pertama-tama membuat `mark` untuk menandai awal dan akhir bagian yang ingin Anda ukur. Kemudian, Anda membuat `measure` untuk menghitung durasi antara dua penanda tersebut.

Berikut adalah contoh cara mengukur waktu yang dibutuhkan untuk merender komponen:

            
performance.mark("component-render-start");

// Kode untuk merender komponen

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Waktu render komponen: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Kode ini membuat dua penanda, `component-render-start` dan `component-render-end`, sebelum dan sesudah kode yang merender komponen. Kemudian, kode ini membuat pengukuran bernama `component-render-time` untuk menghitung durasi antara dua penanda tersebut. Akhirnya, kode ini mengambil entri pengukuran dari garis waktu dan mencatat durasinya ke konsol.

Menganalisis Metrik Kinerja

Setelah Anda mengumpulkan metrik kinerja, Anda perlu menganalisisnya untuk mengidentifikasi hambatan kinerja dan menerapkan optimasi. Ada beberapa alat dan teknik yang dapat Anda gunakan untuk tujuan ini:

• Browser Developer Tools: Sebagian besar browser web modern menyediakan alat pengembang bawaan yang memungkinkan Anda memvisualisasikan dan menganalisis data kinerja. Alat-alat ini biasanya mencakup panel Kinerja (Performance) yang menunjukkan garis waktu peristiwa kinerja, serta alat untuk membuat profil kode JavaScript dan menganalisis penggunaan memori.
• Alat Pemantauan Kinerja: Ada banyak alat pemantauan kinerja pihak ketiga yang dapat membantu Anda mengumpulkan, menganalisis, dan memvisualisasikan data kinerja. Alat-alat ini sering menyediakan fitur-fitur canggih seperti pemantauan real-time, deteksi anomali, dan pelaporan otomatis. Contohnya termasuk New Relic, Datadog, dan Sentry.
• Web Vitals: Inisiatif Web Vitals dari Google menyediakan seperangkat metrik yang dianggap penting untuk mengukur pengalaman pengguna. Metrik ini termasuk Largest Contentful Paint (LCP), First Input Delay (FID), dan Cumulative Layout Shift (CLS). Memantau metrik ini dapat membantu Anda mengidentifikasi dan mengatasi masalah kinerja umum.

Menggunakan Browser Developer Tools

Alat pengembang browser adalah sumber daya yang kuat dan mudah diakses untuk menganalisis kinerja. Berikut cara menggunakan panel Kinerja di Chrome Developer Tools (browser lain memiliki fungsionalitas serupa):

1. Buka Developer Tools: Klik kanan pada halaman web dan pilih "Inspect" atau tekan F12.
2. Navigasi ke Panel Performance: Klik pada tab "Performance".
3. Mulai Merekam: Klik tombol rekam (biasanya berbentuk lingkaran) untuk mulai menangkap data kinerja.
4. Berinteraksi dengan Halaman: Lakukan tindakan yang ingin Anda analisis, seperti memuat halaman, mengklik tombol, atau menggulir.
5. Hentikan Perekaman: Klik tombol berhenti untuk menyelesaikan perekaman.
6. Analisis Garis Waktu: Panel Kinerja akan menampilkan garis waktu peristiwa kinerja, termasuk waktu pemuatan, eksekusi JavaScript, rendering, dan painting.

Garis waktu memberikan informasi terperinci tentang setiap peristiwa, termasuk durasi, waktu mulai, dan hubungannya dengan peristiwa lain. Anda dapat memperbesar dan memperkecil, memfilter peristiwa berdasarkan jenis, dan memeriksa peristiwa individual untuk mendapatkan informasi lebih lanjut. Tab "Bottom-Up," "Call Tree," dan "Event Log" memberikan perspektif yang berbeda tentang data, memungkinkan Anda mengidentifikasi hambatan kinerja dan mengoptimalkan kode Anda.

Web Vitals: Mengukur Pengalaman Pengguna

Web Vitals adalah seperangkat metrik yang ditentukan oleh Google untuk mengukur pengalaman pengguna di situs web. Berfokus pada metrik ini dapat secara signifikan meningkatkan kepuasan pengguna dan peringkat SEO.

• Largest Contentful Paint (LCP): Mengukur waktu yang dibutuhkan elemen konten terbesar di viewport untuk menjadi terlihat. Skor LCP yang baik adalah 2,5 detik atau kurang.
• First Input Delay (FID): Mengukur waktu yang dibutuhkan browser untuk merespons interaksi pengguna pertama (misalnya, mengklik tombol atau mengetuk tautan). Skor FID yang baik adalah 100 milidetik atau kurang.
• Cumulative Layout Shift (CLS): Mengukur jumlah pergeseran tata letak tak terduga yang terjadi di halaman. Skor CLS yang baik adalah 0,1 atau kurang.

Anda dapat mengukur Web Vitals menggunakan berbagai alat, termasuk:

• Chrome User Experience Report (CrUX): Menyediakan data kinerja dunia nyata untuk situs web berdasarkan data pengguna Chrome yang dianonimkan.
• Lighthouse: Alat otomatis yang mengaudit kinerja, aksesibilitas, dan SEO halaman web.
• Ekstensi Web Vitals: Ekstensi Chrome yang menampilkan metrik Web Vitals secara real-time saat Anda menjelajahi web.
• PerformanceObserver API: Menangkap data web vitals secara langsung dari browser saat peristiwa terjadi.

Contoh Praktis dan Kasus Penggunaan

Berikut adalah beberapa contoh praktis dan kasus penggunaan tentang bagaimana Anda dapat menggunakan Performance Timeline API untuk mengoptimalkan kinerja situs web Anda:

• Mengidentifikasi Sumber Daya yang Lambat Dimuat: Gunakan jenis entri `resource` untuk mengidentifikasi gambar, skrip, dan stylesheet yang membutuhkan waktu lama untuk dimuat. Optimalkan sumber daya ini dengan mengompresnya, menggunakan Content Delivery Network (CDN), atau memuatnya secara lazy-load. Sebagai contoh, banyak platform e-commerce seperti Shopify, Magento atau WooCommerce mengandalkan gambar untuk menjual produk. Mengoptimalkan pemuatan gambar menggunakan data garis waktu kinerja akan meningkatkan pengalaman pelanggan, terutama untuk pengguna seluler.
• Mengukur Waktu Eksekusi JavaScript: Gunakan jenis entri `mark` dan `measure` untuk mengukur waktu yang dibutuhkan fungsi JavaScript tertentu untuk dieksekusi. Identifikasi fungsi yang berjalan lambat dan optimalkan dengan menggunakan algoritma yang lebih efisien, menyimpan hasil dalam cache, atau menunda eksekusi ke waktu yang lebih lambat.
• Mendeteksi Tugas Panjang (Long Tasks): Gunakan jenis entri `longtask` untuk mengidentifikasi tugas yang memblokir utas utama untuk jangka waktu yang lama. Pecah tugas-tugas ini menjadi bagian-bagian yang lebih kecil atau pindahkan ke utas latar belakang untuk mencegah UI jank.
• Memantau First Contentful Paint (FCP) dan Largest Contentful Paint (LCP): Gunakan jenis entri `paint` dan `largest-contentful-paint` untuk memantau waktu yang dibutuhkan konten pertama dan konten terbesar untuk muncul di layar. Optimalkan jalur rendering kritis untuk meningkatkan metrik ini.
• Menganalisis Cumulative Layout Shift (CLS): Gunakan jenis entri `layout-shift` untuk mengidentifikasi elemen yang menyebabkan pergeseran tata letak yang tidak terduga. Sediakan ruang untuk elemen-elemen ini atau gunakan properti `transform` untuk menganimasikannya tanpa menyebabkan pergeseran tata letak.

Teknik Lanjutan

Setelah Anda memiliki pemahaman yang kuat tentang dasar-dasar Performance Timeline API, Anda dapat menjelajahi beberapa teknik lanjutan untuk lebih mengoptimalkan kinerja situs web Anda:

• Pemantauan Pengguna Nyata (RUM): Kumpulkan data kinerja dari pengguna nyata di lapangan untuk mendapatkan gambaran yang lebih akurat tentang kinerja situs web Anda. Gunakan alat RUM atau terapkan solusi RUM kustom Anda sendiri menggunakan Performance Timeline API. Data ini kemudian dapat digunakan untuk menentukan perbedaan kinerja regional. Misalnya, situs web yang dihosting di AS mungkin mengalami waktu muat yang lebih lambat di Asia karena latensi jaringan.
• Pemantauan Sintetis: Gunakan pemantauan sintetis untuk mensimulasikan interaksi pengguna dan mengukur kinerja di lingkungan yang terkontrol. Ini dapat membantu Anda mengidentifikasi masalah kinerja sebelum memengaruhi pengguna nyata.
• Pengujian Kinerja Otomatis: Integrasikan pengujian kinerja ke dalam pipeline integrasi berkelanjutan/penyebaran berkelanjutan (CI/CD) Anda untuk secara otomatis mendeteksi regresi kinerja. Alat seperti Lighthouse CI dapat digunakan untuk mengotomatiskan proses ini.
• Anggaran Kinerja (Performance Budgeting): Tetapkan anggaran kinerja untuk metrik utama, seperti waktu muat halaman, ukuran sumber daya, dan waktu eksekusi JavaScript. Gunakan alat otomatis untuk memantau anggaran ini dan memberi tahu Anda ketika anggaran tersebut terlampaui.

Kompatibilitas Lintas-Browser

Performance Timeline API didukung secara luas oleh browser web modern, termasuk Chrome, Firefox, Safari, dan Edge. Namun, mungkin ada beberapa perbedaan dalam implementasi dan perilaku API di berbagai browser.

Untuk memastikan kompatibilitas lintas-browser, penting untuk menguji kode Anda di browser yang berbeda dan menggunakan deteksi fitur untuk menurunkan fungsionalitas secara halus jika API tidak didukung. Pustaka seperti `modernizr` dapat membantu dalam deteksi fitur.

Praktik Terbaik

Berikut adalah beberapa praktik terbaik untuk menggunakan Performance Timeline API:

• Gunakan Performance Observers untuk pemantauan real-time: Performance Observers menyediakan cara yang lebih efisien untuk mengumpulkan data kinerja daripada memeriksa garis waktu berulang kali.
• Perhatikan dampak kinerja dari pengumpulan data kinerja: Mengumpulkan terlalu banyak data dapat berdampak negatif pada kinerja situs web Anda. Hanya kumpulkan data yang Anda butuhkan dan hindari melakukan operasi yang mahal dalam fungsi callback Performance Observer.
• Gunakan nama yang bermakna untuk mark dan measure: Ini akan memudahkan analisis data dan identifikasi hambatan kinerja.
• Uji kode Anda di browser yang berbeda: Pastikan kompatibilitas lintas-browser dengan menguji kode Anda di browser yang berbeda dan menggunakan deteksi fitur.
• Kombinasikan dengan teknik optimasi lainnya: Performance Timeline API membantu mengukur dan mengidentifikasi masalah. Gunakan bersamaan dengan praktik terbaik optimasi web yang sudah ada (optimasi gambar, minifikasi, penggunaan CDN) untuk peningkatan kinerja holistik.

Kesimpulan

Performance Timeline API adalah alat yang ampuh untuk mengukur dan menganalisis kinerja situs web. Dengan memahami konsep dan antarmuka utama API, Anda dapat mengumpulkan metrik kinerja yang berharga dan menggunakannya untuk mengidentifikasi hambatan kinerja dan menerapkan optimasi. Dengan berfokus pada Web Vitals dan menerapkan teknik lanjutan seperti RUM dan pengujian kinerja otomatis, Anda dapat memberikan pengalaman pengguna yang lebih cepat, lebih lancar, dan lebih menyenangkan. Menerapkan Performance Timeline API dan mengintegrasikan analisis kinerja ke dalam alur kerja pengembangan Anda akan menghasilkan peningkatan signifikan dalam kinerja situs web dan kepuasan pengguna di lingkungan web yang didorong oleh kinerja saat ini.