Agregasi Resource Timing API Kinerja Frontend: Analitik Kinerja Pemuatan

Dalam upaya memberikan pengalaman pengguna yang luar biasa, mengoptimalkan kinerja frontend adalah yang terpenting. Aspek penting dari optimisasi ini terletak pada pemahaman bagaimana sumber daya dimuat di situs web atau aplikasi Anda. Resource Timing API, bagian dari rangkaian Performance API yang lebih luas, memberikan wawasan terperinci tentang waktu setiap sumber daya yang diambil oleh browser. Informasi ini sangat berharga untuk mengidentifikasi hambatan dan meningkatkan kinerja pemuatan secara keseluruhan. Panduan komprehensif ini membahas cara memanfaatkan Resource Timing API, menggabungkan datanya, dan menggunakannya untuk analitik kinerja pemuatan.

Memahami Resource Timing API

Resource Timing API menyediakan informasi waktu terperinci untuk sumber daya yang dimuat oleh halaman web, seperti gambar, skrip, stylesheet, dan aset lainnya. Ini termasuk metrik seperti:

• Tipe Inisiator (Initiator Type): Jenis elemen yang memulai permintaan (misalnya, 'img', 'script', 'link').
• Nama (Name): URL sumber daya.
• Waktu Mulai (Start Time): Stempel waktu saat browser mulai mengambil sumber daya.
• Mulai Pengambilan (Fetch Start): Stempel waktu tepat sebelum browser mulai mengambil sumber daya dari cache disk atau jaringan.
• Mulai/Akhir Pencarian Domain (Domain Lookup Start/End): Stempel waktu yang menunjukkan kapan proses pencarian DNS dimulai dan berakhir.
• Mulai/Akhir Koneksi (Connect Start/End): Stempel waktu yang menunjukkan kapan koneksi TCP ke server dimulai dan berakhir.
• Mulai/Akhir Permintaan (Request Start/End): Stempel waktu yang menunjukkan kapan permintaan HTTP dimulai dan berakhir.
• Mulai/Akhir Respons (Response Start/End): Stempel waktu yang menunjukkan kapan respons HTTP dimulai dan berakhir.
• Ukuran Transfer (Transfer Size): Ukuran sumber daya yang ditransfer dalam byte.
• Ukuran Tubuh Terenkode (Encoded Body Size): Ukuran tubuh sumber daya yang terenkode (misalnya, dikompresi GZIP).
• Ukuran Tubuh Dekode (Decoded Body Size): Ukuran tubuh sumber daya yang didekode.
• Durasi (Duration): Total waktu yang dihabiskan untuk mengambil sumber daya (responseEnd - startTime).

Metrik ini memungkinkan pengembang untuk menunjukkan area spesifik di mana perbaikan kinerja dapat dilakukan. Misalnya, waktu pencarian DNS yang lama mungkin menyarankan untuk beralih ke penyedia DNS yang lebih cepat atau memanfaatkan CDN. Waktu koneksi yang lambat dapat mengindikasikan kemacetan jaringan atau masalah di sisi server. Ukuran transfer yang besar dapat menyoroti peluang untuk optimisasi gambar atau minifikasi kode.

Mengakses Data Resource Timing

Resource Timing API diakses melalui objek performance di JavaScript:

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

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

Potongan kode ini mengambil semua entri resource timing dan mencatat nama serta durasi setiap sumber daya ke konsol. Perhatikan bahwa, karena alasan keamanan, browser mungkin membatasi tingkat detail yang disediakan oleh Resource Timing API. Ini sering dikontrol oleh header timingAllowOrigin, yang memungkinkan sumber daya lintas-asal untuk mengekspos informasi waktu mereka.

Menggabungkan Data Resource Timing

Data resource timing mentah memang berguna, tetapi untuk mendapatkan wawasan yang dapat ditindaklanjuti, data tersebut perlu digabungkan dan dianalisis. Agregasi melibatkan pengelompokan dan peringkasan data untuk mengidentifikasi tren dan pola. Ini dapat dilakukan dengan beberapa cara:

Berdasarkan Tipe Sumber Daya

Mengelompokkan sumber daya berdasarkan tipe (misalnya, gambar, skrip, stylesheet) memungkinkan Anda membandingkan waktu muat rata-rata untuk setiap kategori. Ini dapat mengungkapkan apakah jenis sumber daya tertentu secara konsisten lebih lambat dari yang lain.

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

Kode ini menghitung waktu muat rata-rata для setiap jenis sumber daya dan mencatatnya ke konsol. Misalnya, Anda mungkin menemukan bahwa gambar memiliki waktu muat rata-rata yang jauh lebih tinggi daripada skrip, yang menunjukkan perlunya optimisasi gambar.

Berdasarkan Domain

Mengelompokkan sumber daya berdasarkan domain memungkinkan Anda menilai kinerja berbagai jaringan pengiriman konten (CDN) atau layanan pihak ketiga. Ini dapat membantu Anda mengidentifikasi domain yang berkinerja lambat dan mempertimbangkan penyedia alternatif.

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

Kode ini menghitung waktu muat rata-rata untuk setiap domain dan mencatatnya ke konsol. Jika Anda melihat bahwa CDN tertentu secara konsisten lambat, Anda mungkin ingin menyelidiki kinerjanya atau beralih ke penyedia yang berbeda. Sebagai contoh, pertimbangkan skenario di mana Anda menggunakan Cloudflare dan Akamai. Agregasi ini akan memungkinkan Anda untuk secara langsung membandingkan kinerja mereka dalam konteks spesifik Anda.

Berdasarkan Halaman

Menggabungkan data berdasarkan halaman (atau rute) memungkinkan Anda mengidentifikasi halaman dengan kinerja yang sangat buruk. Ini dapat membantu Anda memprioritaskan upaya optimisasi dan fokus pada halaman yang memiliki dampak terbesar pada pengalaman pengguna.

Ini seringkali memerlukan integrasi dengan sistem perutean aplikasi Anda. Anda perlu mengaitkan setiap entri resource timing dengan URL atau rute halaman saat ini. Implementasinya akan bervariasi tergantung pada kerangka kerja yang Anda gunakan (misalnya, React, Angular, Vue.js).

Membuat Metrik Kustom

Selain metrik standar yang disediakan oleh Resource Timing API, Anda dapat membuat metrik kustom untuk melacak aspek spesifik dari kinerja aplikasi Anda. Misalnya, Anda mungkin ingin mengukur waktu yang dibutuhkan untuk memuat komponen tertentu atau merender elemen spesifik.

Ini dapat dicapai menggunakan metode performance.mark() dan performance.measure():

            performance.mark('component-start');

// Muat komponen

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Waktu muat komponen:', componentLoadTime);

            

              
                Copy
              
            
          

Potongan kode ini mengukur waktu yang dibutuhkan untuk memuat komponen dan mencatatnya ke konsol. Anda kemudian dapat menggabungkan metrik kustom ini dengan cara yang sama seperti metrik standar Resource Timing API.

Menganalisis Data Resource Timing untuk Wawasan Kinerja

Setelah Anda menggabungkan data resource timing, Anda dapat menggunakannya untuk mengidentifikasi area spesifik untuk perbaikan kinerja. Berikut adalah beberapa skenario umum dan solusi potensial:

Waktu Pencarian DNS yang Lama

• Penyebab: Server DNS lambat, server DNS jauh, pencarian DNS yang jarang.
• Solusi: Beralih ke penyedia DNS yang lebih cepat (misalnya, Cloudflare, Google Public DNS), manfaatkan CDN untuk menyimpan cache catatan DNS lebih dekat dengan pengguna, terapkan prefetching DNS.
• Contoh: Sebuah situs web yang menargetkan pengguna secara global mengalami waktu muat yang lambat di beberapa wilayah. Analisis data resource timing mengungkapkan waktu pencarian DNS yang lama di wilayah tersebut. Beralih ke CDN dengan server DNS global secara signifikan mengurangi waktu pencarian DNS dan meningkatkan kinerja secara keseluruhan.

Waktu Koneksi yang Lambat

• Penyebab: Kemacetan jaringan, masalah sisi server, gangguan firewall.
• Solusi: Optimalkan infrastruktur server, gunakan CDN untuk mendistribusikan konten lebih dekat dengan pengguna, konfigurasikan firewall untuk memungkinkan komunikasi yang efisien.
• Contoh: Sebuah situs web e-commerce mengalami waktu koneksi yang lambat selama jam sibuk belanja. Analisis data resource timing menunjukkan kelebihan beban server sebagai penyebab utama. Meningkatkan perangkat keras server dan mengoptimalkan kueri basis data meningkatkan waktu koneksi dan mencegah penurunan kinerja selama lalu lintas puncak.

Ukuran Transfer yang Besar

• Penyebab: Gambar yang tidak dioptimalkan, kode yang tidak diminifikasi, aset yang tidak perlu.
• Solusi: Optimalkan gambar (misalnya, kompres, ubah ukuran, gunakan format modern seperti WebP), minifikasi kode JavaScript dan CSS, hapus kode dan aset yang tidak digunakan, aktifkan kompresi GZIP atau Brotli.
• Contoh: Sebuah situs web berita menggunakan gambar besar yang tidak dioptimalkan yang secara signifikan meningkatkan waktu muat halaman. Mengoptimalkan gambar menggunakan alat seperti ImageOptim dan menerapkan lazy loading mengurangi ukuran transfer gambar dan meningkatkan kinerja muat halaman.
• Pertimbangan Internasionalisasi: Pastikan optimisasi gambar mempertimbangkan berbagai ukuran layar dan resolusi yang umum di berbagai wilayah.

Waktu Respons Server yang Lambat

• Penyebab: Kode sisi server yang tidak efisien, hambatan basis data, latensi jaringan.
• Solusi: Optimalkan kode sisi server, tingkatkan kinerja basis data, gunakan CDN untuk menyimpan cache konten lebih dekat dengan pengguna, terapkan caching HTTP.
• Contoh: Sebuah platform media sosial mengalami waktu respons server yang lambat karena kueri basis data yang tidak efisien. Mengoptimalkan kueri basis data dan menerapkan mekanisme caching secara signifikan mengurangi waktu respons server dan meningkatkan kinerja secara keseluruhan.

Sumber Daya yang Memblokir Render

• Penyebab: JavaScript dan CSS sinkron yang memblokir rendering halaman.
• Solusi: Tunda pemuatan JavaScript yang tidak kritis, inline CSS kritis, gunakan pemuatan asinkron untuk skrip, hilangkan CSS yang tidak digunakan.
• Contoh: Sebuah situs web blog menggunakan file CSS besar yang memblokir render yang menunda rendering awal halaman. Meng-inline CSS kritis dan menunda pemuatan CSS yang tidak kritis meningkatkan kinerja yang dirasakan dari situs web tersebut.

Mengintegrasikan Data Resource Timing ke dalam Alat Pemantauan Kinerja

Mengumpulkan dan menganalisis data resource timing secara manual bisa memakan waktu. Untungnya, beberapa alat pemantauan kinerja dapat mengotomatiskan proses ini dan memberikan wawasan waktu nyata tentang kinerja situs web Anda. Alat-alat ini biasanya mengumpulkan data resource timing di latar belakang dan menampilkannya dalam dasbor yang ramah pengguna.

Alat pemantauan kinerja populer yang mendukung data resource timing meliputi:

• Google PageSpeed Insights: Memberikan rekomendasi untuk meningkatkan kecepatan halaman berdasarkan berbagai metrik kinerja, termasuk data resource timing.
• WebPageTest: Memungkinkan Anda untuk menguji kinerja situs web Anda dari berbagai lokasi dan browser, memberikan informasi resource timing yang terperinci.
• New Relic: Menawarkan kemampuan pemantauan kinerja yang komprehensif, termasuk data dan visualisasi resource timing secara waktu nyata.
• Datadog: Menyediakan metrik resource timing yang terperinci bersama dengan pemantauan infrastruktur dan aplikasi yang lebih luas, menawarkan pandangan holistik tentang kinerja.
• Sentry: Terutama berfokus pada pelacakan kesalahan, Sentry juga menyediakan fitur pemantauan kinerja, termasuk data resource timing untuk mengkorelasikan masalah kinerja dengan kesalahan tertentu.
• Lighthouse: Alat otomatis sumber terbuka untuk meningkatkan kualitas halaman web. Ini memiliki audit untuk kinerja, aksesibilitas, aplikasi web progresif, SEO, dan lainnya. Dapat dijalankan dari Chrome DevTools, dari baris perintah, atau sebagai modul Node.

Dengan mengintegrasikan data resource timing ke dalam alat-alat ini, Anda bisa mendapatkan pemahaman yang lebih dalam tentang kinerja situs web Anda dan mengidentifikasi area untuk perbaikan dengan lebih efektif.

Pertimbangan Etis dan Privasi Pengguna

Saat mengumpulkan dan menganalisis data resource timing, sangat penting untuk mempertimbangkan implikasi etis dan privasi pengguna. Bersikaplah transparan dengan pengguna tentang data yang Anda kumpulkan dan bagaimana data itu digunakan. Pastikan Anda mematuhi peraturan privasi yang relevan, seperti GDPR dan CCPA.

Hindari mengumpulkan informasi yang dapat diidentifikasi secara pribadi (PII) dan anonimkan atau gunakan nama samaran untuk data jika memungkinkan. Terapkan langkah-langkah keamanan yang sesuai untuk melindungi data dari akses atau pengungkapan yang tidak sah. Pertimbangkan untuk menawarkan kepada pengguna opsi untuk memilih keluar dari pemantauan kinerja.

Teknik Tingkat Lanjut dan Tren Masa Depan

Resource Timing API terus berkembang, dan fitur serta teknik baru muncul untuk lebih meningkatkan analitik kinerja frontend. Berikut adalah beberapa teknik tingkat lanjut dan tren masa depan yang perlu diperhatikan:

Server Timing API

Server Timing API memungkinkan server untuk mengekspos informasi waktu tentang waktu pemrosesan mereka untuk sebuah permintaan. Informasi ini dapat digabungkan dengan data resource timing untuk memberikan gambaran yang lebih lengkap tentang kinerja ujung ke ujung.

Long Tasks API

Long Tasks API mengidentifikasi tugas-tugas yang memblokir utas utama untuk waktu yang lama, menyebabkan UI jank dan masalah responsivitas. Informasi ini dapat digunakan untuk mengoptimalkan kode JavaScript dan meningkatkan pengalaman pengguna.

WebAssembly (Wasm)

WebAssembly adalah format instruksi biner untuk mesin virtual yang memungkinkan kinerja mendekati asli di browser. Menggunakan Wasm untuk tugas-tugas kritis kinerja dapat secara signifikan meningkatkan waktu muat dan kinerja secara keseluruhan.

HTTP/3

HTTP/3 adalah versi terbaru dari protokol HTTP, yang menggunakan protokol transport QUIC untuk memberikan kinerja dan keandalan yang lebih baik. HTTP/3 menawarkan beberapa keunggulan dibandingkan HTTP/2, termasuk latensi yang dikurangi dan manajemen koneksi yang lebih baik.

Kesimpulan

Resource Timing API adalah alat yang ampuh untuk memahami dan mengoptimalkan kinerja frontend. Dengan menggabungkan dan menganalisis data resource timing, Anda dapat mengidentifikasi hambatan, meningkatkan waktu muat, dan memberikan pengalaman pengguna yang lebih baik. Baik Anda seorang pengembang frontend berpengalaman atau baru memulai, menguasai Resource Timing API sangat penting untuk membangun aplikasi web berkinerja tinggi. Manfaatkan kekuatan optimisasi berbasis data dan buka potensi penuh situs web atau aplikasi Anda. Ingatlah untuk memprioritaskan privasi pengguna dan pertimbangan etis saat mengumpulkan dan menganalisis data kinerja. Dengan tetap terinformasi tentang tren dan teknik terbaru, Anda dapat memastikan bahwa situs web Anda tetap cepat, responsif, dan ramah pengguna untuk tahun-tahun mendatang. Memanfaatkan teknik dan alat ini akan berkontribusi pada web yang lebih berkinerja dan dapat diakses secara global.

Wawasan yang Dapat Ditindaklanjuti: Mulailah dengan menerapkan agregasi resource timing dasar berdasarkan jenis sumber daya dan domain. Ini memberikan wawasan langsung tentang di mana letak hambatan kinerja Anda. Kemudian, integrasikan dengan alat pemantauan kinerja seperti Google PageSpeed Insights atau WebPageTest untuk mengotomatiskan pengumpulan dan analisis data.